// Copyright (c) Laserfiche.
// Licensed under the MIT License. See LICENSE in the project root for license information.
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
import { ValidationUtils } from '@laserfiche/lf-ui-components/internal-shared';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@laserfiche/lf-ui-components/internal-shared";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/checkbox";
import * as i5 from "@angular/material/form-field";
import * as i6 from "@angular/material/input";
import * as i7 from "./items-validation-text.pipe";
/**
 * @internal
 */
export class ItemsComponent {
    constructor(fb, ref, localizationService) {
        this.fb = fb;
        this.ref = ref;
        this.localizationService = localizationService;
        this.items = [];
        this.itemsChanged = new EventEmitter();
        this.labelPosition = 'before';
        /** @internal */
        this.LOCALIZED_STRINGS = new Map([
            ['REQUIRED', this.localizationService.getStringLaserficheObservable('REQUIRED')]
        ]);
        this.refreshChecklistItems = () => {
            this.syncFormControlDataToFieldValues();
            this.ref.detectChanges();
        };
        this.forceValidation = () => {
            let isValid = true;
            this.items.forEach((val, index) => {
                if (val.editable && val.checked) {
                    // don't return invalid if not editable, since user can't fix it
                    const control = this.getSingleField(index);
                    this.triggerValidation(control);
                    const controlValid = control.valid;
                    if (!controlValid) {
                        isValid = false;
                    }
                }
            });
            return isValid;
        };
        this.checklistParentForm = this.fb.group({
            fieldArray: new FormArray([])
        });
    }
    ngOnInit() {
        this.refreshChecklistItems();
    }
    onItemCheckboxChanged(index) {
        const field = this.getSingleField(index);
        const item = this.items[index];
        item.name = field.value;
        if (!item.checked) {
            field.clearValidators();
        }
        else {
            this.addValidators(item, field);
        }
        this.triggerValidation(field);
        this.itemsChanged.emit();
    }
    addValidators(item, field) {
        const constraint = item.constraint;
        const required = item.isRequired;
        const validators = [];
        if (constraint) {
            validators.push(ValidationUtils.generalRegexValidator(new RegExp(constraint)));
        }
        if (required) {
            const requiredRegexValidator = ValidationUtils.requiredValidator();
            validators.push(requiredRegexValidator);
        }
        field.setValidators(validators);
    }
    triggerValidation(field) {
        field.markAsDirty();
        field.markAllAsTouched();
        field.updateValueAndValidity();
    }
    onItemValueChanged(index) {
        const field = this.getSingleField(index);
        this.items[index].name = field.value;
        this.itemsChanged.emit();
    }
    getIcons(item) {
        // TODO add error icon if there is an error on node
        if (typeof (item.icon) === 'string') {
            return [item.icon];
        }
        else {
            return item.icon;
        }
    }
    getArray() {
        return this.checklistParentForm.get('fieldArray');
    }
    getSingleField(index) {
        return this.getArray().controls[index];
    }
    syncFormControlDataToFieldValues() {
        this.getArray().clear();
        if (this.items) {
            this.items.forEach(item => {
                const formControl = new FormControl(item.name);
                if (item.editable && item.checked) {
                    this.addValidators(item, formControl);
                }
                if (!item.editable || item.disabled) {
                    formControl.disable();
                }
                this.getArray().push(formControl);
            });
        }
    }
    doNothing(event) {
        event.preventDefault();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemsComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i2.AppLocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ItemsComponent, selector: "lf-items-component", inputs: { items: "items", refreshChecklistItems: "refreshChecklistItems" }, outputs: { itemsChanged: "itemsChanged" }, ngImport: i0, template: "<!--Copyright (c) Laserfiche.\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\n\n<div id=\"lf-checklist-item-container\" class=\"lf-checklist-item-container\">\n    <div id=\"lf-checklist-item\" class=\"lf-checklist-item\" *ngFor=\"let item of items; index as currentIndex\">\n        <div id=\"lf-checklist-item-label\" class=\"fixed-width-label\" (click)=\"doNothing($event)\">\n            <div *ngIf=\"getIcons(item).length>0\" class=\"fixed-size-icon-container\">\n                <img *ngFor=\"let icon of getIcons(item)\" src=\"{{icon}}\" alt=\"\" class='lf-checklist-item-icon' />\n            </div>\n            <div id=\"lf-checklist-item-name\" class=\"lf-checklist-item-name\">\n                <mat-form-field class=\"lf-checklist-field stretch-width lf-text-field\">\n                    <input matInput type=\"text\" title=\"{{item.name}}\" [formControl]=\"getSingleField(currentIndex)\"\n                    (change)=\"onItemValueChanged(currentIndex)\" (focusout)=\"onItemValueChanged(currentIndex)\">\n                    <mat-error *ngIf=\"!getSingleField(currentIndex).valid\"\n                        title=\"{{item | itemsValidationText: getSingleField(currentIndex) : LOCALIZED_STRINGS | async}}\">\n                        {{item | itemsValidationText: getSingleField(currentIndex): LOCALIZED_STRINGS | async}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n        <mat-checkbox color=\"primary\" ngDefaultControl [labelPosition]=\"labelPosition\" [(ngModel)]=\"item.checked\"\n            [disabled]=\"item.disabled\" (change)=\"onItemCheckboxChanged(currentIndex)\" class=\"lf-checkbox\">\n        </mat-checkbox>\n    </div>\n</div>\n", styles: [".lf-checklist-item{display:flex;width:100%}.fixed-width-label{display:flex;flex-grow:1}.fixed-size-icon-container{display:flex;min-width:30px;width:30px;height:34px;align-items:center;margin-right:5px;position:relative}.lf-checklist-item-icon{display:block;height:24px;width:24px;overflow:hidden;position:absolute}.lf-checklist-field{width:100%}.mat-mdc-input-element{caret-color:#000;padding-left:8px}.field-box{flex-grow:1}::ng-deep .lf-checklist-item mat-error{max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:100}::ng-deep .lf-checklist-item-name{max-width:calc(100% - 35px)}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-form-field-wrapper>.mat-form-field-flex>.mat-form-field-infix{border-top:0px;padding:0;width:inherit}::ng-deep mat-form-field.lf-checklist-field .mdc-line-ripple{display:none}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix input{font-size:14px}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{min-height:28px!important;padding:4px 0}::ng-deep .lf-checklist-item .mat-form-field-appearance-fill .mat-mdc-form-field-flex{align-items:center;border-radius:2px;border-color:#6d6d6d;border-width:1px;border-style:solid;box-sizing:border-box}::ng-deep .lf-checklist-item .mat-mdc-form-field-subscript-wrapper{margin-top:0}::ng-deep .lf-checklist-item .mat-form-field-invalid .mat-mdc-form-field-subscript-wrapper{padding-top:5px}::ng-deep .lf-checklist-item .mat-mdc-text-field-wrapper{padding-bottom:0;padding-left:0;padding-right:0}::ng-deep .lf-checklist-item .mat-form-field-disabled .mat-mdc-form-field-flex{border-color:#f3f3f3;background-color:#f3f3f3;color:#8a8a8a}::ng-deep .lf-checklist-item .mat-focused .mat-mdc-form-field-flex{outline-offset:0px}::ng-deep .lf-checklist-field>.mat-mdc-text-field-wrapper{height:inherit}::ng-deep .lf-checklist-item .mdc-text-field,::ng-deep .lf-checklist-item .mdc-text-field--filled{border-radius:0}\n", ".lf-checklist-name-container{padding:15px 0 5px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden}.lf-checklist-button-container{padding-top:10px;display:flex;justify-content:flex-end}::ng-deep .checklist-expansion-panel .mat-expansion-panel-header.mat-expanded{height:48px}::ng-deep .checklist-expansion-panel.mat-expansion-panel{position:static;border-radius:0;box-shadow:none;padding:0}::ng-deep .checklist-expansion-panel mat-expansion-panel-header{padding-left:0;padding-right:10px}::ng-deep .checklist-expansion-panel div.mat-expansion-panel-body{padding:0}mat-checkbox.lf-checkbox.full-width-checkbox{width:100%}::ng-deep .lf-checklist-field>.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff}::ng-deep .lf-checklist-field .mat-mdc-form-field-flex{height:inherit}::ng-deep .lf-checklist-field .mat-mdc-form-field-infix{height:inherit;padding:0}::ng-deep .lf-checklist-option .mat-mdc-checkbox-touch-target{height:20px;width:20px}::ng-deep .lf-checklist-option .mdc-checkbox__native-control{top:10px;left:10px;right:10px;width:20px;height:20px}.lf-checklist-option>.lf-checkbox{height:25px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i7.ItemsValidationTextPipe, name: "itemsValidationText" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ItemsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lf-items-component', template: "<!--Copyright (c) Laserfiche.\nLicensed under the MIT License. See LICENSE in the project root for license information.-->\n\n<div id=\"lf-checklist-item-container\" class=\"lf-checklist-item-container\">\n    <div id=\"lf-checklist-item\" class=\"lf-checklist-item\" *ngFor=\"let item of items; index as currentIndex\">\n        <div id=\"lf-checklist-item-label\" class=\"fixed-width-label\" (click)=\"doNothing($event)\">\n            <div *ngIf=\"getIcons(item).length>0\" class=\"fixed-size-icon-container\">\n                <img *ngFor=\"let icon of getIcons(item)\" src=\"{{icon}}\" alt=\"\" class='lf-checklist-item-icon' />\n            </div>\n            <div id=\"lf-checklist-item-name\" class=\"lf-checklist-item-name\">\n                <mat-form-field class=\"lf-checklist-field stretch-width lf-text-field\">\n                    <input matInput type=\"text\" title=\"{{item.name}}\" [formControl]=\"getSingleField(currentIndex)\"\n                    (change)=\"onItemValueChanged(currentIndex)\" (focusout)=\"onItemValueChanged(currentIndex)\">\n                    <mat-error *ngIf=\"!getSingleField(currentIndex).valid\"\n                        title=\"{{item | itemsValidationText: getSingleField(currentIndex) : LOCALIZED_STRINGS | async}}\">\n                        {{item | itemsValidationText: getSingleField(currentIndex): LOCALIZED_STRINGS | async}}\n                    </mat-error>\n                </mat-form-field>\n            </div>\n        </div>\n        <mat-checkbox color=\"primary\" ngDefaultControl [labelPosition]=\"labelPosition\" [(ngModel)]=\"item.checked\"\n            [disabled]=\"item.disabled\" (change)=\"onItemCheckboxChanged(currentIndex)\" class=\"lf-checkbox\">\n        </mat-checkbox>\n    </div>\n</div>\n", styles: [".lf-checklist-item{display:flex;width:100%}.fixed-width-label{display:flex;flex-grow:1}.fixed-size-icon-container{display:flex;min-width:30px;width:30px;height:34px;align-items:center;margin-right:5px;position:relative}.lf-checklist-item-icon{display:block;height:24px;width:24px;overflow:hidden;position:absolute}.lf-checklist-field{width:100%}.mat-mdc-input-element{caret-color:#000;padding-left:8px}.field-box{flex-grow:1}::ng-deep .lf-checklist-item mat-error{max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:100}::ng-deep .lf-checklist-item-name{max-width:calc(100% - 35px)}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-form-field-wrapper>.mat-form-field-flex>.mat-form-field-infix{border-top:0px;padding:0;width:inherit}::ng-deep mat-form-field.lf-checklist-field .mdc-line-ripple{display:none}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix input{font-size:14px}::ng-deep mat-form-field.lf-checklist-field>.mat-mdc-text-field-wrapper>.mat-mdc-form-field-flex>.mat-mdc-form-field-infix{min-height:28px!important;padding:4px 0}::ng-deep .lf-checklist-item .mat-form-field-appearance-fill .mat-mdc-form-field-flex{align-items:center;border-radius:2px;border-color:#6d6d6d;border-width:1px;border-style:solid;box-sizing:border-box}::ng-deep .lf-checklist-item .mat-mdc-form-field-subscript-wrapper{margin-top:0}::ng-deep .lf-checklist-item .mat-form-field-invalid .mat-mdc-form-field-subscript-wrapper{padding-top:5px}::ng-deep .lf-checklist-item .mat-mdc-text-field-wrapper{padding-bottom:0;padding-left:0;padding-right:0}::ng-deep .lf-checklist-item .mat-form-field-disabled .mat-mdc-form-field-flex{border-color:#f3f3f3;background-color:#f3f3f3;color:#8a8a8a}::ng-deep .lf-checklist-item .mat-focused .mat-mdc-form-field-flex{outline-offset:0px}::ng-deep .lf-checklist-field>.mat-mdc-text-field-wrapper{height:inherit}::ng-deep .lf-checklist-item .mdc-text-field,::ng-deep .lf-checklist-item .mdc-text-field--filled{border-radius:0}\n", ".lf-checklist-name-container{padding:15px 0 5px;white-space:nowrap;display:block;text-overflow:ellipsis;overflow:hidden}.lf-checklist-button-container{padding-top:10px;display:flex;justify-content:flex-end}::ng-deep .checklist-expansion-panel .mat-expansion-panel-header.mat-expanded{height:48px}::ng-deep .checklist-expansion-panel.mat-expansion-panel{position:static;border-radius:0;box-shadow:none;padding:0}::ng-deep .checklist-expansion-panel mat-expansion-panel-header{padding-left:0;padding-right:10px}::ng-deep .checklist-expansion-panel div.mat-expansion-panel-body{padding:0}mat-checkbox.lf-checkbox.full-width-checkbox{width:100%}::ng-deep .lf-checklist-field>.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff}::ng-deep .lf-checklist-field .mat-mdc-form-field-flex{height:inherit}::ng-deep .lf-checklist-field .mat-mdc-form-field-infix{height:inherit;padding:0}::ng-deep .lf-checklist-option .mat-mdc-checkbox-touch-target{height:20px;width:20px}::ng-deep .lf-checklist-option .mdc-checkbox__native-control{top:10px;left:10px;right:10px;width:20px;height:20px}.lf-checklist-option>.lf-checkbox{height:25px}\n"] }]
        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i2.AppLocalizationService }], propDecorators: { items: [{
                type: Input
            }], itemsChanged: [{
                type: Output
            }], refreshChecklistItems: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 