import { Component, ContentChild, Input, } from '@angular/core';
import { FormFieldControlDirective } from './form-field-control.directive';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@ngx-translate/core";
/**
 * A form field wrapper which handles the correct layout and validation error display for
 * a form control.
 */
export class FormFieldComponent {
    constructor() {
        /**
         * A map of error message codes (required, pattern etc.) to messages to display
         * when those errors are present.
         */
        this.errors = {};
        /**
         * If set to true, the input will be initially set to "readOnly", and an "edit" button
         * will be displayed which allows the field to be edited.
         */
        this.readOnlyToggle = false;
        this.isReadOnly = false;
    }
    ngOnInit() {
        if (this.readOnlyToggle) {
            this.isReadOnly = true;
            this.setReadOnly(true);
        }
        this.isReadOnly = this.readOnlyToggle;
    }
    setReadOnly(value) {
        this.formFieldControl.setReadOnly(value);
        this.isReadOnly = value;
    }
    getErrorMessage() {
        if (!this.formFieldControl || !this.formFieldControl.formControlName) {
            return;
        }
        const errors = this.formFieldControl.formControlName.dirty && this.formFieldControl.formControlName.errors;
        if (errors) {
            for (const errorKey of Object.keys(errors)) {
                if (this.errors[errorKey]) {
                    return this.errors[errorKey];
                }
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FormFieldComponent, selector: "vdr-form-field", inputs: { label: "label", for: "for", tooltip: "tooltip", errors: "errors", readOnlyToggle: "readOnlyToggle" }, queries: [{ propertyName: "formFieldControl", first: true, predicate: FormFieldControlDirective, descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.no-label]=\"!label\"\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\n>\n    <label *ngIf=\"label\" [for]=\"for\" class=\"\">\n        {{ label }}\n    </label>\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\n        {{ tooltip }}\n    </div>\n    <div\n        class=\"input-row\"\n        [class.has-toggle]=\"readOnlyToggle\"\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\n    >\n        <ng-content></ng-content>\n        <button\n            *ngIf=\"readOnlyToggle\"\n            type=\"button\"\n            [disabled]=\"!isReadOnly\"\n            [title]=\"'common.edit-field' | translate\"\n            class=\"btn btn-icon edit-button\"\n            (click)=\"setReadOnly(false)\"\n        >\n            <clr-icon shape=\"edit\"></clr-icon>\n        </button>\n    </div>\n    <div class=\"error-message\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\n</div>\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FormFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-form-field', template: "<div\n    class=\"form-group\"\n    [class.no-label]=\"!label\"\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\n>\n    <label *ngIf=\"label\" [for]=\"for\" class=\"\">\n        {{ label }}\n    </label>\n    <div *ngIf=\"tooltip\" class=\"tooltip-text\">\n        {{ tooltip }}\n    </div>\n    <div\n        class=\"input-row\"\n        [class.has-toggle]=\"readOnlyToggle\"\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\n    >\n        <ng-content></ng-content>\n        <button\n            *ngIf=\"readOnlyToggle\"\n            type=\"button\"\n            [disabled]=\"!isReadOnly\"\n            [title]=\"'common.edit-field' | translate\"\n            class=\"btn btn-icon edit-button\"\n            (click)=\"setReadOnly(false)\"\n        >\n            <clr-icon shape=\"edit\"></clr-icon>\n        </button>\n    </div>\n    <div class=\"error-message\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\n</div>\n", styles: [":host{display:block}.form-group label{font-size:var(--font-size-sm);color:var(--color-weight-800);margin-bottom:4px;display:inline-block}.tooltip-text{font-size:var(--font-size-xs);line-height:var(--font-size-sm);margin-bottom:4px}.input-row{display:flex}::ng-deep .input-row input:not([type=checkbox]),::ng-deep .input-row select,::ng-deep .input-row textarea,::ng-deep .input-row vdr-zone-selector,::ng-deep .input-row vdr-facet-value-selector,::ng-deep .input-row vdr-option-value-input,::ng-deep .input-row vdr-affixed-input,::ng-deep .input-row vdr-currency-input,::ng-deep .input-row vdr-rich-text-editor{width:100%}.input-row input:not([type=checkbox]),.input-row select,.input-row textarea{width:100%}\n"] }]
        }], propDecorators: { label: [{
                type: Input
            }], for: [{
                type: Input
            }], tooltip: [{
                type: Input
            }], errors: [{
                type: Input
            }], readOnlyToggle: [{
                type: Input
            }], formFieldControl: [{
                type: ContentChild,
                args: [FormFieldControlDirective, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 