@vendasta/store/esm2015/lib/order-form/fields/field.component.js

Components and data for Store

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
export class FieldComponent {
    /**
     * @return {?}
     */
    get isValid() {
        return this.form.controls[this.field.id].valid || this.form.controls[this.field.id].pristine;
    }
}
FieldComponent.decorators = [
    { type: Component, args: [{
                selector: 'va-field',
                template: "<ng-container [ngSwitch]=\"field.controlType\" [formGroup]=\"form\">\n\n    <ng-container *ngSwitchCase=\"'dropdown'\">\n        <mat-form-field class=\"form-field-container\">\n            <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\" [placeholder]=\"field.getLabel()\" [disabled]=\"field.disabled\">\n                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</mat-option>\n            </mat-select>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textbox'\">\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\" [placeholder]=\"field.getLabel()\" [pattern]=\"field.regexValidator || ''\" [readonly]=\"field.disabled\">\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    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'checkbox'\">\n        <div class=\"form-field-container checkbox\">\n            <mat-checkbox [formControlName]=\"field.id\" [id]=\"field.id\" ngControlDefault [disabled]=\"field.disabled\"></mat-checkbox>\n            <div class=\"checkbox-placeholder\"> {{field.label}}</div>\n        </div>\n        <div class=\"checkbox-description\" *ngIf=\"field.description\">{{ field.description }}</div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'textarea'\">\n        <mat-form-field class=\"form-field-container\">\n            <textarea matInput [formControlName]=\"field.id\" [placeholder]=\"field.getLabel()\" [id]=\"field.id\" [readonly]=\"field.disabled\"></textarea>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'file'\">\n        <div class=\"form-field-container\">\n            <file-group-uploader [uploadUrl]=\"field.uploadUrl\" [label]=\"field.getLabel()\" [description]=\"field.description\" [formGroup]=\"form\" [formControlName]=\"field.id\" [disabled]=\"field.disabled\"\n                [numFiles]=\"field.numFiles\" class=\"form-field-container\"></file-group-uploader>\n        </div>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'vbcuser'\">\n        <mat-form-field class=\"form-field-container\">\n            <mat-select matInput [formControlName]=\"field.id\" [id]=\"field.id\" [placeholder]=\"field.getLabel()\" [disabled]=\"field.disabled\">\n                <mat-option *ngFor=\"let option of field.options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</mat-option>\n            </mat-select>\n            <mat-hint *ngIf=\"field.description\"> {{ field.description }} </mat-hint>\n        </mat-form-field>\n    </ng-container>\n\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}"]
            }] }
];
FieldComponent.propDecorators = {
    field: [{ type: Input }],
    form: [{ type: Input }]
};
if (false) {
    /** @type {?} */
    FieldComponent.prototype.field;
    /** @type {?} */
    FieldComponent.prototype.form;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHZlbmRhc3RhL3N0b3JlLyIsInNvdXJjZXMiOlsibGliL29yZGVyLWZvcm0vZmllbGRzL2ZpZWxkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLEtBQUssRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDL0MsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBT3pDLE1BQU0sT0FBTyxjQUFjOzs7O0lBR3pCLElBQUksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDL0YsQ0FBQzs7O1lBVkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxVQUFVO2dCQUVwQix1dUdBQXFDOzthQUN0Qzs7O29CQUVFLEtBQUs7bUJBQ0wsS0FBSzs7OztJQUROLCtCQUFvQjs7SUFDcEIsOEJBQXlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtJbnB1dCwgQ29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUdyb3VwfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhLWZpZWxkJyxcbiAgc3R5bGVVcmxzOiBbJy4vZmllbGQuY29tcG9uZW50LnNjc3MnXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpZWxkLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBGaWVsZENvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGZpZWxkOiBhbnk7IC8vIGF2b2lkIGNoZWNraW5nIHVuaW9uIHR5cGUgaW4gdGVtcGxhdGVcbiAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwO1xuICBnZXQgaXNWYWxpZCgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5mb3JtLmNvbnRyb2xzW3RoaXMuZmllbGQuaWRdLnZhbGlkIHx8IHRoaXMuZm9ybS5jb250cm9sc1t0aGlzLmZpZWxkLmlkXS5wcmlzdGluZTtcbiAgfVxufVxuIl19