@yyasinaslan/easyform/esm2022/lib/controls/ef-text/ef-text.component.mjs

Angular Easy Form

import { Component } from '@angular/core';
import { EasyFormControl } from "../../easy-form-control";
import { ReactiveFormsModule } from "@angular/forms";
import { ObservePipe } from "../../pipes/observe";
import { BindEventsDirective } from "../../directives/bind-events.directive";
import { EfErrorsComponent } from "../../components/ef-errors/ef-errors.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class EfTextComponent extends EasyFormControl {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfTextComponent, isStandalone: true, selector: "ef-text", usesInheritance: true, ngImport: i0, template: "@if (hasInitialized()) {\r\n  @if (schema()?.label) {\r\n    <label class=\"ef-form-label\" [for]=\"easyFormControl().id\">{{ schema()?.label | observe }}</label>\r\n  }\r\n  <input bindEvents [id]=\"easyFormControl().id\"\r\n         [type]=\"props()['type'] ?? 'text'\"\r\n         [formControl]=\"control()!\"\r\n         [placeholder]=\"props()['placeholder'] ?? ''\"\r\n         class=\"ef-input-text\">\r\n  <ef-errors [control]=\"control()!\" [formField]=\"schema()!\"/>\r\n}\r\n", styles: [":host{display:block}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-invalid{border-color:hsl(var(--ef-invalid-color, 0 100% 50%))}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-invalid:focus{outline-color:hsla(var(--ef-invalid-color, 0 100% 50%)/.5)}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-valid{border-color:hsl(var(--ef-valid-color, 120 100% 42%))}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-valid:focus{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}.ef-form-label{display:block}.ef-input-text{width:100%;padding:var(--ef-input-padding, .5em);background:hsl(var(--ef-input-bg, 0 100% 100%));border:1px solid hsl(var(--ef-input-border-color, 0 0% 90%));border-radius:var(--ef-input-border-radius, 5px);outline:3px solid transparent;outline-offset:2px;transition:outline .2s ease-in-out}.ef-input-text:active{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}.ef-input-text:disabled{opacity:.3;cursor:default}.ef-input-text:focus{outline-color:hsla(var(--ef-input-border-color, 0 0% 90%)/.5)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ObservePipe, name: "observe" }, { kind: "component", type: EfErrorsComponent, selector: "ef-errors", inputs: ["form", "path", "control", "formField"] }, { kind: "directive", type: BindEventsDirective, selector: "input[bindEvents], textarea[bindEvents], select[bindEvents]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfTextComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ef-text', standalone: true, imports: [
                        ReactiveFormsModule,
                        ObservePipe,
                        EfErrorsComponent,
                        BindEventsDirective
                    ], template: "@if (hasInitialized()) {\r\n  @if (schema()?.label) {\r\n    <label class=\"ef-form-label\" [for]=\"easyFormControl().id\">{{ schema()?.label | observe }}</label>\r\n  }\r\n  <input bindEvents [id]=\"easyFormControl().id\"\r\n         [type]=\"props()['type'] ?? 'text'\"\r\n         [formControl]=\"control()!\"\r\n         [placeholder]=\"props()['placeholder'] ?? ''\"\r\n         class=\"ef-input-text\">\r\n  <ef-errors [control]=\"control()!\" [formField]=\"schema()!\"/>\r\n}\r\n", styles: [":host{display:block}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-invalid{border-color:hsl(var(--ef-invalid-color, 0 100% 50%))}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-invalid:focus{outline-color:hsla(var(--ef-invalid-color, 0 100% 50%)/.5)}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-valid{border-color:hsl(var(--ef-valid-color, 120 100% 42%))}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-text.ng-valid:focus{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}.ef-form-label{display:block}.ef-input-text{width:100%;padding:var(--ef-input-padding, .5em);background:hsl(var(--ef-input-bg, 0 100% 100%));border:1px solid hsl(var(--ef-input-border-color, 0 0% 90%));border-radius:var(--ef-input-border-radius, 5px);outline:3px solid transparent;outline-offset:2px;transition:outline .2s ease-in-out}.ef-input-text:active{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}.ef-input-text:disabled{opacity:.3;cursor:default}.ef-input-text:focus{outline-color:hsla(var(--ef-input-border-color, 0 0% 90%)/.5)}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtdGV4dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lYXN5LWZvcm0vc3JjL2xpYi9jb250cm9scy9lZi10ZXh0L2VmLXRleHQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtdGV4dC9lZi10ZXh0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDeEMsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ25ELE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNoRCxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSx3Q0FBd0MsQ0FBQztBQUMzRSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxnREFBZ0QsQ0FBQzs7O0FBY2pGLE1BQU0sT0FBTyxlQUFnQixTQUFRLGVBQWU7K0dBQXZDLGVBQWU7bUdBQWYsZUFBZSwwRkNuQjVCLHdlQVdBLDg5Q0RBSSxtQkFBbUIscWtCQUNuQixXQUFXLGdEQUNYLGlCQUFpQix3R0FDakIsbUJBQW1COzs0RkFLVixlQUFlO2tCQVozQixTQUFTOytCQUNFLFNBQVMsY0FDUCxJQUFJLFdBQ1A7d0JBQ1AsbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLGlCQUFpQjt3QkFDakIsbUJBQW1CO3FCQUNwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtFYXN5Rm9ybUNvbnRyb2x9IGZyb20gXCIuLi8uLi9lYXN5LWZvcm0tY29udHJvbFwiO1xyXG5pbXBvcnQge1JlYWN0aXZlRm9ybXNNb2R1bGV9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xyXG5pbXBvcnQge09ic2VydmVQaXBlfSBmcm9tIFwiLi4vLi4vcGlwZXMvb2JzZXJ2ZVwiO1xyXG5pbXBvcnQge0JpbmRFdmVudHNEaXJlY3RpdmV9IGZyb20gXCIuLi8uLi9kaXJlY3RpdmVzL2JpbmQtZXZlbnRzLmRpcmVjdGl2ZVwiO1xyXG5pbXBvcnQge0VmRXJyb3JzQ29tcG9uZW50fSBmcm9tIFwiLi4vLi4vY29tcG9uZW50cy9lZi1lcnJvcnMvZWYtZXJyb3JzLmNvbXBvbmVudFwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdlZi10ZXh0JyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIFJlYWN0aXZlRm9ybXNNb2R1bGUsXHJcbiAgICBPYnNlcnZlUGlwZSxcclxuICAgIEVmRXJyb3JzQ29tcG9uZW50LFxyXG4gICAgQmluZEV2ZW50c0RpcmVjdGl2ZVxyXG4gIF0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2VmLXRleHQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9lZi10ZXh0LmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRWZUZXh0Q29tcG9uZW50IGV4dGVuZHMgRWFzeUZvcm1Db250cm9sIHtcclxufVxyXG4iLCJAaWYgKGhhc0luaXRpYWxpemVkKCkpIHtcclxuICBAaWYgKHNjaGVtYSgpPy5sYWJlbCkge1xyXG4gICAgPGxhYmVsIGNsYXNzPVwiZWYtZm9ybS1sYWJlbFwiIFtmb3JdPVwiZWFzeUZvcm1Db250cm9sKCkuaWRcIj57eyBzY2hlbWEoKT8ubGFiZWwgfCBvYnNlcnZlIH19PC9sYWJlbD5cclxuICB9XHJcbiAgPGlucHV0IGJpbmRFdmVudHMgW2lkXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkXCJcclxuICAgICAgICAgW3R5cGVdPVwicHJvcHMoKVsndHlwZSddID8/ICd0ZXh0J1wiXHJcbiAgICAgICAgIFtmb3JtQ29udHJvbF09XCJjb250cm9sKCkhXCJcclxuICAgICAgICAgW3BsYWNlaG9sZGVyXT1cInByb3BzKClbJ3BsYWNlaG9sZGVyJ10gPz8gJydcIlxyXG4gICAgICAgICBjbGFzcz1cImVmLWlucHV0LXRleHRcIj5cclxuICA8ZWYtZXJyb3JzIFtjb250cm9sXT1cImNvbnRyb2woKSFcIiBbZm9ybUZpZWxkXT1cInNjaGVtYSgpIVwiLz5cclxufVxyXG4iXX0=