import { __decorate, __metadata } from "tslib";
import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
var FieldComponent = /** @class */ (function () {
    function FieldComponent() {
    }
    Object.defineProperty(FieldComponent.prototype, "isValid", {
        get: function () {
            return this.form.controls[this.field.id].valid || this.form.controls[this.field.id].pristine;
        },
        enumerable: true,
        configurable: true
    });
    FieldComponent.prototype.showCheckboxError = function (field) {
        return this.form.controls[field].errors && this.form.controls[field].errors.required && this.form.controls[field].touched;
    };
    FieldComponent.prototype.getValue = function () {
        return this.form.controls[this.field.id].value;
    };
    FieldComponent.prototype.dropdownAnswer = function () {
        var answer = this.getValue();
        return ((this.field.options || []).find(function (option) { return option.value === answer; }) || { label: answer }).label;
    };
    FieldComponent.prototype.multidropdownAnswer = function () {
        var _this = this;
        var answer = this.getValue();
        return (answer || []).map(function (a) { return ((_this.field.options || []).find(function (option) { return option.value === a; }) || { name: a }).name; }).join(', ');
    };
    FieldComponent.prototype.checkboxAnswer = function () {
        var answer = this.getValue();
        return answer ? 'Yes' : 'No';
    };
    FieldComponent.prototype.fileUploadAnswer = function () {
        var answer = this.getValue();
        return answer.map(function (a) { return a.name ? a.name : a.url ? a.url : a; }).join(', ');
    };
    __decorate([
        Input(),
        __metadata("design:type", Object)
    ], FieldComponent.prototype, "field", void 0);
    __decorate([
        Input(),
        __metadata("design:type", FormGroup)
    ], FieldComponent.prototype, "form", void 0);
    FieldComponent = __decorate([
        Component({
            selector: 'va-field',
            template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n  <div *ngIf=\"!field.hidden\" class=\"field-container\">\n    <span *ngIf=\"field.forOfficeUseOnly\" class=\"office-text\">*{{ 'FRONTEND.STORE.ORDER_FORM.HIDDEN_FROM_END_USERS' | translate }}</span>\n    <span *ngIf=\"field.officeEditableOnly\" class=\"office-text\">*{{ 'FRONTEND.STORE.ORDER_FORM.OFFICE_EDITABLE_ONLY' | translate }}</span>\n\n    <ng-container *ngSwitchCase=\"'dropdown'\">\n      <ng-container *ngIf=\"!field.allowMultiples\">\n        <div class=\"display\">\n          <mat-form-field class=\"form-field-container\">\n              <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\"  placeholder=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\">\n                    <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\">{{ option.label }}</mat-option>\n              </mat-select>\n              <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n          </mat-form-field>\n        </div>\n        <div class=\"print\">\n          <div class=\"label\">{{ field.label | translate }}:</div>\n          <div class=\"answer\">{{dropdownAnswer()}}</div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"field.allowMultiples\">\n        <div class=\"display\">\n          <va-input-tags class=\"form-field-container\" [id]=\"field.id\" [formControlName]=\"field.id\"\n            placeholder=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\"\n            [tooltip]=\"field.description\"\n            [required]=\"field.required\"\n            [options]=\"field.options\"\n            [allowDuplicates]=\"field.allowDuplicates\"\n            [maxFields]=\"field.maxChoices\">\n          </va-input-tags>\n        </div>\n        <div class=\"print\">\n          <div class=\"label\">{{ field.label | translate }}:</div>\n          <div class=\"answer\">{{multidropdownAnswer()}}</div>\n        </div>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textbox'\">\n      <div class=\"display\">\n        <mat-form-field class=\"form-field-container\">\n            <span matPrefix *ngIf=\"field.prefix\"> {{ field.prefix}} &nbsp;</span>\n            <input matInput [type]=\"field.textboxType\" [id]=\"field.id\" [formControlName]=\"field.id\"\n                   placeholder=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\"\n                   [pattern]=\"field.regexValidator || ''\"\n                   [readonly]=\"field.displayOnly\" [ngClass]=\"{'display-only': field.displayOnly}\">\n            <span matSuffix *ngIf=\"field.suffix\"> &nbsp;{{ field.suffix }} </span>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n            <mat-error *ngIf=\"form.controls[field.id].hasError('pattern')\"> {{field.regexErrorMessage}} </mat-error>\n        </mat-form-field>\n      </div>\n      <div class=\"print\">\n        <div class=\"label\">{{ field.label | translate }}:</div>\n        <div class=\"answer\">{{getValue()}}</div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'checkbox'\">\n      <div class=\"display\">\n        <div class=\"form-field-container checkbox\">\n            <mat-checkbox [formControlName]=\"field.id\" [id]=\"field.id\" ngControlDefault></mat-checkbox>\n            <div class=\"checkbox-placeholder\"> {{ field.label | translate }}{{ field.required ? ' *' : '' }}</div>\n            <mat-error *ngIf=\"showCheckboxError(field.id)\" class=\"checkboxError\"> *{{ 'FRONTEND.STORE.REQUIRED' | translate }} </mat-error>\n        </div>\n        <div class=\"checkbox-description\" *ngIf=\"field.description\">{{ field.description }}</div>\n      </div>\n      <div class=\"print\">\n        <div class=\"label\">{{ field.label | translate }}:</div>\n        <div class=\"answer\">{{checkboxAnswer()}}</div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textarea'\">\n      <div class=\"display\">\n        <mat-form-field class=\"form-field-container\">\n            <textarea\n              matInput\n              [formControlName]=\"field.id\"\n              placeholder=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\"\n              [id]=\"field.id\"\n              cdkTextareaAutosize\n            ></textarea>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n      </div>\n      <div class=\"print\">\n        <div class=\"label\">{{ field.label | translate }}:</div>\n        <div class=\"answer\">{{getValue()}}</div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n      <div class=\"display\">\n        <div class=\"form-field-container\">\n            <file-group-uploader [uploadUrl]=\"field.uploadUrl\" label=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\"\n                                 [description]=\"field.description\" [formGroup]=\"form\" [formControlName]=\"field.id\"\n                [numFiles]=\"field.numFiles\" class=\"form-field-container\"></file-group-uploader>\n        </div>\n      </div>\n      <div class=\"print\">\n        <div class=\"label\">{{ field.label | translate }}:</div>\n        <div class=\"answer\">{{fileUploadAnswer()}}</div>\n      </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'vbcuser'\">\n      <div class=\"display\">\n        <mat-form-field class=\"form-field-container\">\n            <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\" placeholder=\"{{ field.label | translate }}{{ field.required ? ' *' : '' }}\">\n                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label | translate }}</mat-option>\n            </mat-select>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n      </div>\n      <div class=\"print\">\n        <div class=\"label\">{{ field.label | translate }}:</div>\n        <div class=\"answer\">{{dropdownAnswer()}}</div>\n      </div>\n    </ng-container>\n  </div>\n</ng-container>\n",
            styles: [".form-field-container{font-size:16px;width:100%;margin:10px 0}.checkbox{display:flex;padding:5px 0;color:rgba(0,0,0,.54);margin-top:24px}.checkbox .checkbox-placeholder{margin-left:10px}.checkbox-description{margin-top:-14px;margin-left:32px;color:rgba(0,0,0,.54);font-size:12px}.field-container{position:relative}.office-text{font-size:8px;position:absolute;right:5px}.display-only{color:rgba(0,0,0,.38)}.checkboxError{padding-left:16px}.print{display:none}@media print{.display{display:none}.print{display:flex;outline:solid 1px;margin-top:1px;margin-left:1px;page-break-inside:avoid}.print .label{flex-basis:30%;padding:8px;font-weight:500;border-right:1px solid #000}.print .answer{flex-basis:70%;padding:8px}}"]
        })
    ], FieldComponent);
    return FieldComponent;
}());
export { FieldComponent };
//# sourceMappingURL=data:application/json;base64, 