import { Component, ContentChild, Input, } from '@angular/core';
import { FormFieldControlDirective } from './form-field-control.directive';
/**
 * 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.errors;
        if (errors) {
            for (const errorKey of Object.keys(errors)) {
                if (this.errors[errorKey]) {
                    return this.errors[errorKey];
                }
            }
        }
    }
}
FormFieldComponent.decorators = [
    { type: Component, args: [{
                selector: 'vdr-form-field',
                template: "<div\r\n    class=\"form-group\"\r\n    [class.no-label]=\"!label\"\r\n    [class.clr-error]=\"formFieldControl?.formControlName?.invalid\"\r\n>\r\n    <label *ngIf=\"label\" [for]=\"for\" class=\"clr-control-label\">\r\n        {{ label }}\r\n        <vdr-help-tooltip *ngIf=\"tooltip\" [content]=\"tooltip\"></vdr-help-tooltip>\r\n    </label>\r\n    <label\r\n        [for]=\"for\"\r\n        aria-haspopup=\"true\"\r\n        role=\"tooltip\"\r\n        [class.invalid]=\"formFieldControl?.touched && !formFieldControl?.valid\"\r\n        class=\"tooltip tooltip-validation tooltip-sm tooltip-top-left\"\r\n    >\r\n        <div class=\"input-row\" [class.has-toggle]=\"readOnlyToggle\">\r\n            <ng-content></ng-content>\r\n            <button\r\n                *ngIf=\"readOnlyToggle\"\r\n                type=\"button\"\r\n                [disabled]=\"!isReadOnly\"\r\n                [title]=\"'common.edit-field' | translate\"\r\n                class=\"btn btn-icon edit-button\"\r\n                (click)=\"setReadOnly(false)\"\r\n            >\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"clr-subtext\" *ngIf=\"getErrorMessage()\">{{ getErrorMessage() }}</div>\r\n        <span class=\"tooltip-content\">{{ label }} is required.</span>\r\n    </label>\r\n</div>\r\n",
                styles: [":host{display:block}:host .form-group>label:first-child{top:6px}:host .form-group>label:nth-of-type(2){flex:1;max-width:20rem}:host .form-group>label:nth-of-type(2) ::ng-deep>:not(.tooltip-content){width:100%}:host .form-group .tooltip-validation{height:auto}:host .form-group.no-label{margin:-6px 0 0;padding:0;justify-content:center}:host .form-group.no-label>label{position:relative;justify-content:center}:host .form-group.no-label .input-row{justify-content:center}:host .input-row{display:flex}:host .input-row ::ng-deep input{flex:1}:host .input-row ::ng-deep input[disabled]{background-color:var(--color-component-bg-200)}:host .input-row button.edit-button{margin:0;border-radius:0 3px 3px 0}:host .input-row.has-toggle ::ng-deep input{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none}:host .input-row ::ng-deep clr-toggle-wrapper{margin-top:8px}.tooltip.tooltip-validation.invalid:before{position:absolute;content:\"\";height:.666667rem;width:.666667rem;top:.125rem;right:.25rem;background-image:url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);background-repeat:no-repeat;background-size:contain;vertical-align:middle;margin:0}.tooltip .tooltip-content.tooltip-sm,.tooltip.tooltip-sm>.tooltip-content{width:5rem}.tooltip:hover>.tooltip-content{right:12px;margin-bottom:0}.tooltip:not(.invalid):hover>.tooltip-content{display:none}"]
            },] }
];
FormFieldComponent.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, 