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

Angular Easy Form

import { Component } from '@angular/core';
import { ReactiveFormsModule } from "@angular/forms";
import { ObservePipe } from "../../pipes/observe";
import { EasyFormControl } from "../../easy-form-control";
import { EfErrorsComponent } from "../../components/ef-errors/ef-errors.component";
import { BindEventsDirective } from "../../directives/bind-events.directive";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class EfSelectComponent extends EasyFormControl {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfSelectComponent, isStandalone: true, selector: "ef-select", usesInheritance: true, ngImport: i0, template: "@if (hasInitialized()) {\r\n  @if (schema()!.label) {\r\n    <label class=\"ef-form-label\" [for]=\"easyFormControl().id\">{{ easyFormControl().schema?.label | observe }}</label>\r\n  }\r\n  <select bindEvents [id]=\"easyFormControl().id\" [formControl]=\"easyFormControl().control!\"\r\n          class=\"ef-input-select\">\r\n    @if (easyFormControl().schema?.options) {\r\n      @for (item of (easyFormControl().schema?.options | observe); track item.value) {\r\n        <option [value]=\"item.value\">{{ item.label | observe }}</option>\r\n      }\r\n    }\r\n  </select>\r\n  <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: [":host{display:block}.ef-form-label{display:block}.ef-input-select{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-select:focus{outline-color:hsla(var(--ef-input-border-color, 0 0% 90%)/.5)}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-select.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-select.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-select.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-select.ng-valid:focus{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: EfSelectComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ef-select', 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\">{{ easyFormControl().schema?.label | observe }}</label>\r\n  }\r\n  <select bindEvents [id]=\"easyFormControl().id\" [formControl]=\"easyFormControl().control!\"\r\n          class=\"ef-input-select\">\r\n    @if (easyFormControl().schema?.options) {\r\n      @for (item of (easyFormControl().schema?.options | observe); track item.value) {\r\n        <option [value]=\"item.value\">{{ item.label | observe }}</option>\r\n      }\r\n    }\r\n  </select>\r\n  <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: [":host{display:block}.ef-form-label{display:block}.ef-input-select{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-select:focus{outline-color:hsla(var(--ef-input-border-color, 0 0% 90%)/.5)}:host-context(.show-errors-submitted .ng-submitted,.show-errors-always,.show-errors-touched .ng-touched,.show-errors-dirty .ng-dirty) .ef-input-select.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-select.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-select.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-select.ng-valid:focus{outline-color:hsla(var(--ef-valid-color, 120 100% 42%)/.5)}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Vhc3ktZm9ybS9zcmMvbGliL2NvbnRyb2xzL2VmLXNlbGVjdC9lZi1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtc2VsZWN0L2VmLXNlbGVjdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBYyxtQkFBbUIsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxxQkFBcUIsQ0FBQztBQUNoRCxPQUFPLEVBQUMsZUFBZSxFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDeEQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0RBQWdELENBQUM7QUFDakYsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sd0NBQXdDLENBQUM7OztBQWMzRSxNQUFNLE9BQU8saUJBQWtCLFNBQVEsZUFBZTsrR0FBekMsaUJBQWlCO21HQUFqQixpQkFBaUIsNEZDbkI5QixnckJBY0EsdTJDREhJLG1CQUFtQixndEJBQ25CLFdBQVcsZ0RBQ1gsaUJBQWlCLHdHQUNqQixtQkFBbUI7OzRGQUtWLGlCQUFpQjtrQkFaN0IsU0FBUzsrQkFDRSxXQUFXLGNBQ1QsSUFBSSxXQUNQO3dCQUNQLG1CQUFtQjt3QkFDbkIsV0FBVzt3QkFDWCxpQkFBaUI7d0JBQ2pCLG1CQUFtQjtxQkFDcEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7Rm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGV9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xyXG5pbXBvcnQge09ic2VydmVQaXBlfSBmcm9tIFwiLi4vLi4vcGlwZXMvb2JzZXJ2ZVwiO1xyXG5pbXBvcnQge0Vhc3lGb3JtQ29udHJvbH0gZnJvbSBcIi4uLy4uL2Vhc3ktZm9ybS1jb250cm9sXCI7XHJcbmltcG9ydCB7RWZFcnJvcnNDb21wb25lbnR9IGZyb20gXCIuLi8uLi9jb21wb25lbnRzL2VmLWVycm9ycy9lZi1lcnJvcnMuY29tcG9uZW50XCI7XHJcbmltcG9ydCB7QmluZEV2ZW50c0RpcmVjdGl2ZX0gZnJvbSBcIi4uLy4uL2RpcmVjdGl2ZXMvYmluZC1ldmVudHMuZGlyZWN0aXZlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2VmLXNlbGVjdCcsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgT2JzZXJ2ZVBpcGUsXHJcbiAgICBFZkVycm9yc0NvbXBvbmVudCxcclxuICAgIEJpbmRFdmVudHNEaXJlY3RpdmVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9lZi1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9lZi1zZWxlY3QuY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBFZlNlbGVjdENvbXBvbmVudCBleHRlbmRzIEVhc3lGb3JtQ29udHJvbCB7XHJcbn1cclxuIiwiQGlmIChoYXNJbml0aWFsaXplZCgpKSB7XHJcbiAgQGlmIChzY2hlbWEoKSEubGFiZWwpIHtcclxuICAgIDxsYWJlbCBjbGFzcz1cImVmLWZvcm0tbGFiZWxcIiBbZm9yXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkXCI+e3sgZWFzeUZvcm1Db250cm9sKCkuc2NoZW1hPy5sYWJlbCB8IG9ic2VydmUgfX08L2xhYmVsPlxyXG4gIH1cclxuICA8c2VsZWN0IGJpbmRFdmVudHMgW2lkXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkXCIgW2Zvcm1Db250cm9sXT1cImVhc3lGb3JtQ29udHJvbCgpLmNvbnRyb2whXCJcclxuICAgICAgICAgIGNsYXNzPVwiZWYtaW5wdXQtc2VsZWN0XCI+XHJcbiAgICBAaWYgKGVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYT8ub3B0aW9ucykge1xyXG4gICAgICBAZm9yIChpdGVtIG9mIChlYXN5Rm9ybUNvbnRyb2woKS5zY2hlbWE/Lm9wdGlvbnMgfCBvYnNlcnZlKTsgdHJhY2sgaXRlbS52YWx1ZSkge1xyXG4gICAgICAgIDxvcHRpb24gW3ZhbHVlXT1cIml0ZW0udmFsdWVcIj57eyBpdGVtLmxhYmVsIHwgb2JzZXJ2ZSB9fTwvb3B0aW9uPlxyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgPC9zZWxlY3Q+XHJcbiAgPGVmLWVycm9ycyBbY29udHJvbF09XCJlYXN5Rm9ybUNvbnRyb2woKS5jb250cm9sIVwiIFtmb3JtRmllbGRdPVwiZWFzeUZvcm1Db250cm9sKCkuc2NoZW1hIVwiLz5cclxufVxyXG4iXX0=