@mobilelivenpm/fds-angular-qa/esm2015/lib/form-field/form-field.component.js

This library was generated with [Nx](https://nx.dev).

import { Component, ContentChild, ContentChildren, Input } from '@angular/core';
import { FdsFormFieldControl } from './form-field-control';
import { ErrorDirective } from './error';
export class FormFieldComponent {
    constructor() {
        this.label = '';
        this.hideRequiredMarker = false;
        this.iconLeft = '';
        this.iconRight = '';
        this.clearBtn = false;
    }
    get _control() {
        return this._controlNonStatic || this._controlStatic;
    }
    get controlType() {
        return this._control ? this._control.controlType : '';
    }
    getClasses() {
        switch (this.controlType) {
            case 'fds-input-number':
                return {};
            case 'fds-autocomplete':
                // Show additional classes related to the autocomplete
                return this._control.getClasses();
        }
        return {};
    }
    isInvalid() {
        return (this._control.ngControl &&
            this._control.ngControl.control.touched &&
            (this.errors.length || !!this._control.ngControl.control.errors));
    }
    isValid() {
        return (this._control.ngControl &&
            this._control.ngControl.control.touched &&
            !this.isInvalid());
    }
    ngOnInit() { }
    clearCtrl() {
        this._control.ngControl.control.setValue('');
    }
    isClearBtnShown() {
        return (this.controlType === 'select' &&
            this.clearBtn &&
            this._control.ngControl.value != '');
    }
}
FormFieldComponent.decorators = [
    { type: Component, args: [{
                selector: 'fds-form-field',
                template: "<label\n  [class.required]=\"\n    !hideRequiredMarker && _control?.required && !_control?.disabled\n  \"\n>\n  <!-- TODO @kashif @Dmitriy please make it dynamic for screen reader label -->\n  <!-- <span class=\"sr--only\">form label</span> -->\n  <ng-content select=\"fds-label\"></ng-content>\n</label>\n<!--<i class=\"icon-info-outline\"></i>-->\n<div\n  class=\"formControlWrap d--flex align--items--center flex--wrap\"\n  [class.fds-noIcon]=\"!_control?.required\"\n>\n  <div\n    class=\"formControlHolder formControlHolder__{{ controlType }}\"\n    [class.disabled]=\"_control.disabled\"\n    [class.error]=\"isInvalid()\"\n    [ngClass]=\"getClasses()\"\n  >\n    <ng-content select=\"input\"></ng-content>\n    <ng-content select=\"select\"></ng-content>\n    <ng-content select=\"textarea\"></ng-content>\n    <ng-content select=\"fds-autocomplete\"></ng-content>\n    <ng-content select=\"fds-input-number\"></ng-content>\n    <ng-content select=\"fds-input-mask\"></ng-content>\n    <button\n      *ngIf=\"isClearBtnShown()\"\n      type=\"button\"\n      class=\"icon-clear clearCrossBtn\"\n      [disabled]=\"_control.disabled\"\n      aria-label=\"clear\"\n      (click)=\"clearCtrl()\"\n    ></button>\n  </div>\n  <span class=\"pl--2 icon-info errorOption\" *ngIf=\"isInvalid()\"></span>\n  <span class=\"pl--2 icon-check successOption\" *ngIf=\"isValid()\"></span>\n  <span class=\"pt--1 text--danger\" *ngIf=\"isInvalid()\"\n  ><ng-content select=\"fds-error\"></ng-content\n  ></span>\n</div>\n\n<!--<div class=\"formControlWrap d--flex flex--wrap align--items--center\">-->\n<!--  <div class=\"icnRight d--flex align--items--center formControlHolder curved error\">-->\n<!--\t<input type=\"search\" class=\"formControl\" id=\"FirstName22\" name=\"FirstName\" placeholder=\"Text\" required=\"\">-->\n<!--\t<button type=\"button\" class=\"p--2 icon-search searchInputBtn\" aria-label=\"Label\"></button>-->\n<!--  </div>-->\n\n<!--  <span class=\"pt--1 text--danger\">Error Message</span>-->\n<!--</div>-->"
            },] }
];
FormFieldComponent.ctorParameters = () => [];
FormFieldComponent.propDecorators = {
    _controlNonStatic: [{ type: ContentChild, args: [FdsFormFieldControl,] }],
    _controlStatic: [{ type: ContentChild, args: [FdsFormFieldControl, { static: true },] }],
    errors: [{ type: ContentChildren, args: [ErrorDirective,] }],
    label: [{ type: Input }],
    hideRequiredMarker: [{ type: Input }],
    iconLeft: [{ type: Input }],
    iconRight: [{ type: Input }],
    clearBtn: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL2FuZ3VsYXIvc3JjL2xpYi9mb3JtLWZpZWxkL2Zvcm0tZmllbGQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLGVBQWUsRUFDZixLQUFLLEVBR04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDM0QsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLFNBQVMsQ0FBQztBQUt6QyxNQUFNLE9BQU8sa0JBQWtCO0lBVzdCO1FBTlMsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLHVCQUFrQixHQUFHLEtBQUssQ0FBQztRQUMzQixhQUFRLEdBQUcsRUFBRSxDQUFDO1FBQ2QsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUNmLGFBQVEsR0FBRyxLQUFLLENBQUM7SUFFWCxDQUFDO0lBRWhCLElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxjQUFjLENBQUM7SUFDdkQsQ0FBQztJQUVELElBQUksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUN4RCxDQUFDO0lBRUQsVUFBVTtRQUNSLFFBQVEsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUN4QixLQUFLLGtCQUFrQjtnQkFDckIsT0FBTyxFQUFFLENBQUM7WUFDWixLQUFLLGtCQUFrQjtnQkFDckIsc0RBQXNEO2dCQUN0RCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxFQUFFLENBQUM7U0FDckM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7SUFFRCxTQUFTO1FBQ1AsT0FBTyxDQUNMLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUztZQUN2QixJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsT0FBTztZQUN2QyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQ2pFLENBQUM7SUFDSixDQUFDO0lBRUQsT0FBTztRQUNMLE9BQU8sQ0FDTCxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVM7WUFDdkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLE9BQU87WUFDdkMsQ0FBQyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQ2xCLENBQUM7SUFDSixDQUFDO0lBRUQsUUFBUSxLQUFVLENBQUM7SUFFbkIsU0FBUztRQUNQLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUVELGVBQWU7UUFDYixPQUFPLENBQ0wsSUFBSSxDQUFDLFdBQVcsS0FBSyxRQUFRO1lBQzdCLElBQUksQ0FBQyxRQUFRO1lBQ2IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FDcEMsQ0FBQztJQUNKLENBQUM7OztZQWhFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtnQkFDMUIscS9EQUEwQzthQUMzQzs7OztnQ0FFRSxZQUFZLFNBQUMsbUJBQW1COzZCQUNoQyxZQUFZLFNBQUMsbUJBQW1CLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO3FCQUVsRCxlQUFlLFNBQUMsY0FBYztvQkFDOUIsS0FBSztpQ0FDTCxLQUFLO3VCQUNMLEtBQUs7d0JBQ0wsS0FBSzt1QkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgSW5wdXQsXG4gIE9uSW5pdCxcbiAgUXVlcnlMaXN0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmRzRm9ybUZpZWxkQ29udHJvbCB9IGZyb20gJy4vZm9ybS1maWVsZC1jb250cm9sJztcbmltcG9ydCB7IEVycm9yRGlyZWN0aXZlIH0gZnJvbSAnLi9lcnJvcic7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmZHMtZm9ybS1maWVsZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWZpZWxkLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBGb3JtRmllbGRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBAQ29udGVudENoaWxkKEZkc0Zvcm1GaWVsZENvbnRyb2wpIF9jb250cm9sTm9uU3RhdGljOiBGZHNGb3JtRmllbGRDb250cm9sPGFueT47XG4gIEBDb250ZW50Q2hpbGQoRmRzRm9ybUZpZWxkQ29udHJvbCwgeyBzdGF0aWM6IHRydWUgfSlcbiAgX2NvbnRyb2xTdGF0aWM6IEZkc0Zvcm1GaWVsZENvbnRyb2w8YW55PjtcbiAgQENvbnRlbnRDaGlsZHJlbihFcnJvckRpcmVjdGl2ZSkgZXJyb3JzOiBRdWVyeUxpc3Q8RXJyb3I+O1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuICBASW5wdXQoKSBoaWRlUmVxdWlyZWRNYXJrZXIgPSBmYWxzZTtcbiAgQElucHV0KCkgaWNvbkxlZnQgPSAnJztcbiAgQElucHV0KCkgaWNvblJpZ2h0ID0gJyc7XG4gIEBJbnB1dCgpIGNsZWFyQnRuID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoKSB7fVxuXG4gIGdldCBfY29udHJvbCgpIHtcbiAgICByZXR1cm4gdGhpcy5fY29udHJvbE5vblN0YXRpYyB8fCB0aGlzLl9jb250cm9sU3RhdGljO1xuICB9XG5cbiAgZ2V0IGNvbnRyb2xUeXBlKCkge1xuICAgIHJldHVybiB0aGlzLl9jb250cm9sID8gdGhpcy5fY29udHJvbC5jb250cm9sVHlwZSA6ICcnO1xuICB9XG5cbiAgZ2V0Q2xhc3NlcygpIHtcbiAgICBzd2l0Y2ggKHRoaXMuY29udHJvbFR5cGUpIHtcbiAgICAgIGNhc2UgJ2Zkcy1pbnB1dC1udW1iZXInOlxuICAgICAgICByZXR1cm4ge307XG4gICAgICBjYXNlICdmZHMtYXV0b2NvbXBsZXRlJzpcbiAgICAgICAgLy8gU2hvdyBhZGRpdGlvbmFsIGNsYXNzZXMgcmVsYXRlZCB0byB0aGUgYXV0b2NvbXBsZXRlXG4gICAgICAgIHJldHVybiB0aGlzLl9jb250cm9sLmdldENsYXNzZXMoKTtcbiAgICB9XG4gICAgcmV0dXJuIHt9O1xuICB9XG5cbiAgaXNJbnZhbGlkKCkge1xuICAgIHJldHVybiAoXG4gICAgICB0aGlzLl9jb250cm9sLm5nQ29udHJvbCAmJlxuICAgICAgdGhpcy5fY29udHJvbC5uZ0NvbnRyb2wuY29udHJvbC50b3VjaGVkICYmXG4gICAgICAodGhpcy5lcnJvcnMubGVuZ3RoIHx8ICEhdGhpcy5fY29udHJvbC5uZ0NvbnRyb2wuY29udHJvbC5lcnJvcnMpXG4gICAgKTtcbiAgfVxuXG4gIGlzVmFsaWQoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMuX2NvbnRyb2wubmdDb250cm9sICYmXG4gICAgICB0aGlzLl9jb250cm9sLm5nQ29udHJvbC5jb250cm9sLnRvdWNoZWQgJiZcbiAgICAgICF0aGlzLmlzSW52YWxpZCgpXG4gICAgKTtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge31cblxuICBjbGVhckN0cmwoKSB7XG4gICAgdGhpcy5fY29udHJvbC5uZ0NvbnRyb2wuY29udHJvbC5zZXRWYWx1ZSgnJyk7XG4gIH1cblxuICBpc0NsZWFyQnRuU2hvd24oKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIHRoaXMuY29udHJvbFR5cGUgPT09ICdzZWxlY3QnICYmXG4gICAgICB0aGlzLmNsZWFyQnRuICYmXG4gICAgICB0aGlzLl9jb250cm9sLm5nQ29udHJvbC52YWx1ZSAhPSAnJ1xuICAgICk7XG4gIH1cbn0iXX0=