@yyasinaslan/easyform/esm2022/lib/controls/ef-checkbox/ef-checkbox.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 EfCheckboxComponent extends EasyFormControl {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfCheckboxComponent, isStandalone: true, selector: "ef-checkbox", usesInheritance: true, ngImport: i0, template: "@if (hasInitialized()) {\r\n  <input type=\"checkbox\" bindEvents [formControl]=\"easyFormControl().control!\" [id]=\"easyFormControl().id\">\r\n  @if (easyFormControl().schema?.label) {\r\n    <label class=\"ef-form-label\" [for]=\"easyFormControl().id\">{{ easyFormControl().schema?.label | observe }}</label>\r\n  }\r\n  <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:.5rem}:host input[type=checkbox]{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:var(--checkbox-size, 1.5rem);min-height:var(--checkbox-size, 1.5rem);max-width:var(--checkbox-size, 1.5rem);max-height:var(--checkbox-size, 1.5rem);border-radius:20%;padding:0;background-color:hsl(var(--ef-input-bg, 0 100% 100%));border:1px solid hsl(var(--ef-input-border-color, 0 0% 90%));accent-color:hsl(var(--ef-input-accent-color, 200 100% 50%));transition:transform 50ms ease-in-out}:host input[type=checkbox]:active{transform:scale(1.2)}:host input[type=checkbox]:active:disabled{transform:none}:host input[type=checkbox]:focus-visible{outline:3px solid hsl(var(--ef-input-border-color, 0 0% 90%));outline-offset:2px}:host input[type=checkbox]:checked{border:1px solid hsl(var(--ef-input-accent-color, 200 100% 50%));background-color:hsl(var(--ef-input-accent-color, 200 100% 50%))}:host input[type=checkbox]:checked:after{content:\"\";width:calc(var(--checkbox-size, 1.5rem) * .8);height:calc(var(--checkbox-size, 1.5rem) * .8);border-radius:20%;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat}:host[disabled],:host:disabled{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: EfCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ef-checkbox', standalone: true, imports: [
                        ReactiveFormsModule,
                        ObservePipe,
                        EfErrorsComponent,
                        BindEventsDirective
                    ], template: "@if (hasInitialized()) {\r\n  <input type=\"checkbox\" bindEvents [formControl]=\"easyFormControl().control!\" [id]=\"easyFormControl().id\">\r\n  @if (easyFormControl().schema?.label) {\r\n    <label class=\"ef-form-label\" [for]=\"easyFormControl().id\">{{ easyFormControl().schema?.label | observe }}</label>\r\n  }\r\n  <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: [":host{display:flex;align-items:center;gap:.5rem}:host input[type=checkbox]{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:var(--checkbox-size, 1.5rem);min-height:var(--checkbox-size, 1.5rem);max-width:var(--checkbox-size, 1.5rem);max-height:var(--checkbox-size, 1.5rem);border-radius:20%;padding:0;background-color:hsl(var(--ef-input-bg, 0 100% 100%));border:1px solid hsl(var(--ef-input-border-color, 0 0% 90%));accent-color:hsl(var(--ef-input-accent-color, 200 100% 50%));transition:transform 50ms ease-in-out}:host input[type=checkbox]:active{transform:scale(1.2)}:host input[type=checkbox]:active:disabled{transform:none}:host input[type=checkbox]:focus-visible{outline:3px solid hsl(var(--ef-input-border-color, 0 0% 90%));outline-offset:2px}:host input[type=checkbox]:checked{border:1px solid hsl(var(--ef-input-accent-color, 200 100% 50%));background-color:hsl(var(--ef-input-accent-color, 200 100% 50%))}:host input[type=checkbox]:checked:after{content:\"\";width:calc(var(--checkbox-size, 1.5rem) * .8);height:calc(var(--checkbox-size, 1.5rem) * .8);border-radius:20%;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e\");background-repeat:no-repeat}:host[disabled],:host:disabled{opacity:.5;cursor:default}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtY2hlY2tib3gvZWYtY2hlY2tib3guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtY2hlY2tib3gvZWYtY2hlY2tib3guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDaEQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLGdEQUFnRCxDQUFDO0FBQ2pGLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLHdDQUF3QyxDQUFDOzs7QUFjM0UsTUFBTSxPQUFPLG1CQUFvQixTQUFRLGVBQWU7K0dBQTNDLG1CQUFtQjttR0FBbkIsbUJBQW1CLDhGQ25CaEMsOGFBT0EsKzlDRElJLG1CQUFtQixzZUFDbkIsV0FBVyxnREFDWCxpQkFBaUIsd0dBQ2pCLG1CQUFtQjs7NEZBS1YsbUJBQW1CO2tCQVovQixTQUFTOytCQUNFLGFBQWEsY0FDWCxJQUFJLFdBQ1A7d0JBQ1AsbUJBQW1CO3dCQUNuQixXQUFXO3dCQUNYLGlCQUFpQjt3QkFDakIsbUJBQW1CO3FCQUNwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtSZWFjdGl2ZUZvcm1zTW9kdWxlfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHtPYnNlcnZlUGlwZX0gZnJvbSBcIi4uLy4uL3BpcGVzL29ic2VydmVcIjtcclxuaW1wb3J0IHtFYXN5Rm9ybUNvbnRyb2x9IGZyb20gXCIuLi8uLi9lYXN5LWZvcm0tY29udHJvbFwiO1xyXG5pbXBvcnQge0VmRXJyb3JzQ29tcG9uZW50fSBmcm9tIFwiLi4vLi4vY29tcG9uZW50cy9lZi1lcnJvcnMvZWYtZXJyb3JzLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge0JpbmRFdmVudHNEaXJlY3RpdmV9IGZyb20gXCIuLi8uLi9kaXJlY3RpdmVzL2JpbmQtZXZlbnRzLmRpcmVjdGl2ZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdlZi1jaGVja2JveCcsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgT2JzZXJ2ZVBpcGUsXHJcbiAgICBFZkVycm9yc0NvbXBvbmVudCxcclxuICAgIEJpbmRFdmVudHNEaXJlY3RpdmVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9lZi1jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2VmLWNoZWNrYm94LmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRWZDaGVja2JveENvbXBvbmVudCBleHRlbmRzIEVhc3lGb3JtQ29udHJvbCB7XHJcbn1cclxuIiwiQGlmIChoYXNJbml0aWFsaXplZCgpKSB7XHJcbiAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiIGJpbmRFdmVudHMgW2Zvcm1Db250cm9sXT1cImVhc3lGb3JtQ29udHJvbCgpLmNvbnRyb2whXCIgW2lkXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkXCI+XHJcbiAgQGlmIChlYXN5Rm9ybUNvbnRyb2woKS5zY2hlbWE/LmxhYmVsKSB7XHJcbiAgICA8bGFiZWwgY2xhc3M9XCJlZi1mb3JtLWxhYmVsXCIgW2Zvcl09XCJlYXN5Rm9ybUNvbnRyb2woKS5pZFwiPnt7IGVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYT8ubGFiZWwgfCBvYnNlcnZlIH19PC9sYWJlbD5cclxuICB9XHJcbiAgPGVmLWVycm9ycyBbY29udHJvbF09XCJlYXN5Rm9ybUNvbnRyb2woKS5jb250cm9sIVwiIFtmb3JtRmllbGRdPVwiZWFzeUZvcm1Db250cm9sKCkuc2NoZW1hIVwiLz5cclxufVxyXG4iXX0=