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

Angular Easy Form

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { EasyFormControl } from '../../easy-form-control';
import { EfErrorsComponent } from '../../components/ef-errors/ef-errors.component';
import { ObservePipe } from '../../pipes/observe';
import { BindEventsDirective } from "../../directives/bind-events.directive";
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class EfSwitchComponent extends EasyFormControl {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfSwitchComponent, isStandalone: true, selector: "lib-ef-switch", 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:start;align-items:center;min-width:calc(var(--switch-size, 1.5rem) * 2);min-height:var(--switch-size, 1.5rem);max-width:calc(var(--switch-size, 1.5rem) * 2);max-height:var(--switch-size, 1.5rem);border-radius:calc(var(--switch-size, 1.5rem) / 2);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%))}:host input[type=checkbox]:checked:after{background-color:hsl(var(--ef-input-accent-color, 200 100% 50%));transform:translate(calc(var(--switch-size, 1.5rem) + var(--switch-size, 1.5rem) * .4 * .5))}:host input[type=checkbox]:after{content:\"\";width:calc(var(--switch-size, 1.5rem) * .6);height:calc(var(--switch-size, 1.5rem) * .6);border-radius:50%;background-color:hsl(var(--ef-input-border-color, 0 0% 90%));transform:translate(calc(var(--switch-size, 1.5rem) * .4 * .5));transition:transform .15s ease-in-out}:host input[type=checkbox][disabled],:host input[type=checkbox]:disabled{opacity:.5;cursor:default}\n"], dependencies: [{ kind: "component", type: EfErrorsComponent, selector: "ef-errors", inputs: ["form", "path", "control", "formField"] }, { kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: ObservePipe, name: "observe" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: BindEventsDirective, selector: "input[bindEvents], textarea[bindEvents], select[bindEvents]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfSwitchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-ef-switch', standalone: true, imports: [
                        EfErrorsComponent,
                        FormsModule,
                        ObservePipe,
                        ReactiveFormsModule,
                        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:start;align-items:center;min-width:calc(var(--switch-size, 1.5rem) * 2);min-height:var(--switch-size, 1.5rem);max-width:calc(var(--switch-size, 1.5rem) * 2);max-height:var(--switch-size, 1.5rem);border-radius:calc(var(--switch-size, 1.5rem) / 2);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%))}:host input[type=checkbox]:checked:after{background-color:hsl(var(--ef-input-accent-color, 200 100% 50%));transform:translate(calc(var(--switch-size, 1.5rem) + var(--switch-size, 1.5rem) * .4 * .5))}:host input[type=checkbox]:after{content:\"\";width:calc(var(--switch-size, 1.5rem) * .6);height:calc(var(--switch-size, 1.5rem) * .6);border-radius:50%;background-color:hsl(var(--ef-input-border-color, 0 0% 90%));transform:translate(calc(var(--switch-size, 1.5rem) * .4 * .5));transition:transform .15s ease-in-out}:host input[type=checkbox][disabled],:host input[type=checkbox]:disabled{opacity:.5;cursor:default}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtc3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Vhc3ktZm9ybS9zcmMvbGliL2NvbnRyb2xzL2VmLXN3aXRjaC9lZi1zd2l0Y2guY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtc3dpdGNoL2VmLXN3aXRjaC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hDLE9BQU8sRUFBQyxXQUFXLEVBQUUsbUJBQW1CLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQztBQUNoRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0RBQWdELENBQUM7QUFDbkYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ2xELE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLHdDQUF3QyxDQUFDOzs7QUFlM0UsTUFBTSxPQUFPLGlCQUFrQixTQUFRLGVBQWU7K0dBQXpDLGlCQUFpQjttR0FBakIsaUJBQWlCLGdHQ3BCOUIsOGFBT0Esc2tERElJLGlCQUFpQix1R0FDakIsV0FBVyxtVEFDWCxXQUFXLCtDQUNYLG1CQUFtQixrTkFDbkIsbUJBQW1COzs0RkFLVixpQkFBaUI7a0JBYjdCLFNBQVM7K0JBQ0UsZUFBZSxjQUNiLElBQUksV0FDUDt3QkFDUCxpQkFBaUI7d0JBQ2pCLFdBQVc7d0JBQ1gsV0FBVzt3QkFDWCxtQkFBbUI7d0JBQ25CLG1CQUFtQjtxQkFDcEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7Rm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGV9IGZyb20gXCJAYW5ndWxhci9mb3Jtc1wiO1xyXG5pbXBvcnQgeyBFYXN5Rm9ybUNvbnRyb2wgfSBmcm9tICcuLi8uLi9lYXN5LWZvcm0tY29udHJvbCc7XHJcbmltcG9ydCB7IEVmRXJyb3JzQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY29tcG9uZW50cy9lZi1lcnJvcnMvZWYtZXJyb3JzLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IE9ic2VydmVQaXBlIH0gZnJvbSAnLi4vLi4vcGlwZXMvb2JzZXJ2ZSc7XHJcbmltcG9ydCB7QmluZEV2ZW50c0RpcmVjdGl2ZX0gZnJvbSBcIi4uLy4uL2RpcmVjdGl2ZXMvYmluZC1ldmVudHMuZGlyZWN0aXZlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1lZi1zd2l0Y2gnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgRWZFcnJvcnNDb21wb25lbnQsXHJcbiAgICBGb3Jtc01vZHVsZSxcclxuICAgIE9ic2VydmVQaXBlLFxyXG4gICAgUmVhY3RpdmVGb3Jtc01vZHVsZSxcclxuICAgIEJpbmRFdmVudHNEaXJlY3RpdmVcclxuICBdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9lZi1zd2l0Y2guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9lZi1zd2l0Y2guY29tcG9uZW50LnNjc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBFZlN3aXRjaENvbXBvbmVudCBleHRlbmRzIEVhc3lGb3JtQ29udHJvbCB7XHJcblxyXG59XHJcbiIsIkBpZiAoaGFzSW5pdGlhbGl6ZWQoKSkge1xyXG4gIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBiaW5kRXZlbnRzIFtmb3JtQ29udHJvbF09XCJlYXN5Rm9ybUNvbnRyb2woKS5jb250cm9sIVwiIFtpZF09XCJlYXN5Rm9ybUNvbnRyb2woKS5pZFwiPlxyXG4gIEBpZiAoZWFzeUZvcm1Db250cm9sKCkuc2NoZW1hPy5sYWJlbCkge1xyXG4gICAgPGxhYmVsIGNsYXNzPVwiZWYtZm9ybS1sYWJlbFwiIFtmb3JdPVwiZWFzeUZvcm1Db250cm9sKCkuaWRcIj57eyBlYXN5Rm9ybUNvbnRyb2woKS5zY2hlbWE/LmxhYmVsIHwgb2JzZXJ2ZSB9fTwvbGFiZWw+XHJcbiAgfVxyXG4gIDxlZi1lcnJvcnMgW2NvbnRyb2xdPVwiZWFzeUZvcm1Db250cm9sKCkuY29udHJvbCFcIiBbZm9ybUZpZWxkXT1cImVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYSFcIi8+XHJcbn1cclxuIl19