@yyasinaslan/easyform
Version:
Angular Easy Form
22 lines • 11.1 kB
JavaScript
import { Component } from '@angular/core';
import { ObservePipe } from "../../pipes/observe";
import { ReactiveFormsModule } from "@angular/forms";
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 EfRadioComponent extends EasyFormControl {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EfRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: EfRadioComponent, isStandalone: true, selector: "lib-ef-radio", usesInheritance: true, ngImport: i0, template: "@if (hasInitialized()) {\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 @if (easyFormControl().schema?.options) {\r\n <div class=\"ef-radio-container\">\r\n @for (option of (easyFormControl().schema?.options | observe); track option.value) {\r\n <label class=\"ef-radio-option\">\r\n <input bindEvents type=\"radio\" [formControl]=\"easyFormControl().control!\" [name]=\"easyFormControl().id!\"\r\n [value]=\"option.value\" [attr.aria-describedby]=\"easyFormControl().id\">\r\n <span class=\"ef-form-label\">{{ option.label | observe }}</span>\r\n </label>\r\n }\r\n </div>\r\n }\r\n <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-radio-container{display:flex;flex-direction:column;align-items:start;gap:var(--ef-radio-spacing, .5rem)}.ef-radio-container .ef-radio-option{display:flex;gap:.4rem;justify-content:start;align-items:center}.ef-radio-container .ef-radio-option input[type=radio]{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:var(--ef-radio-size, 1.5rem);min-height:var(--ef-radio-size, 1.5rem);max-width:var(--ef-radio-size, 1.5rem);max-height:var(--ef-radio-size, 1.5rem);border-radius:50%;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}.ef-radio-container .ef-radio-option input[type=radio]:active{transform:scale(1.2)}.ef-radio-container .ef-radio-option input[type=radio]:active:disabled{transform:none}.ef-radio-container .ef-radio-option input[type=radio]:focus-visible{outline:3px solid hsl(var(--ef-input-border-color, 0 0% 90%));outline-offset:2px}.ef-radio-container .ef-radio-option input[type=radio]:checked{border:1px solid hsl(var(--ef-input-accent-color, 200 100% 50%))}.ef-radio-container .ef-radio-option input[type=radio]:checked:after{content:\"\";width:calc(var(--ef-radio-size, 1.5rem) * .6);height:calc(var(--ef-radio-size, 1.5rem) * .6);border-radius:50%;background-color:hsl(var(--ef-input-accent-color, 200 100% 50%))}.ef-radio-container .ef-radio-option input[type=radio][disabled],.ef-radio-container .ef-radio-option input[type=radio]:disabled{opacity:.5;cursor:default}.ef-radio-container .ef-radio-option input[type=radio]:disabled~.ef-form-label{opacity:.5}\n"], dependencies: [{ kind: "pipe", type: ObservePipe, name: "observe" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "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: EfRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-ef-radio', standalone: true, imports: [
ObservePipe,
ReactiveFormsModule,
EfErrorsComponent,
BindEventsDirective
], template: "@if (hasInitialized()) {\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 @if (easyFormControl().schema?.options) {\r\n <div class=\"ef-radio-container\">\r\n @for (option of (easyFormControl().schema?.options | observe); track option.value) {\r\n <label class=\"ef-radio-option\">\r\n <input bindEvents type=\"radio\" [formControl]=\"easyFormControl().control!\" [name]=\"easyFormControl().id!\"\r\n [value]=\"option.value\" [attr.aria-describedby]=\"easyFormControl().id\">\r\n <span class=\"ef-form-label\">{{ option.label | observe }}</span>\r\n </label>\r\n }\r\n </div>\r\n }\r\n <ef-errors [control]=\"easyFormControl().control!\" [formField]=\"easyFormControl().schema!\"/>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ef-radio-container{display:flex;flex-direction:column;align-items:start;gap:var(--ef-radio-spacing, .5rem)}.ef-radio-container .ef-radio-option{display:flex;gap:.4rem;justify-content:start;align-items:center}.ef-radio-container .ef-radio-option input[type=radio]{appearance:none;display:inline-flex;justify-content:center;align-items:center;min-width:var(--ef-radio-size, 1.5rem);min-height:var(--ef-radio-size, 1.5rem);max-width:var(--ef-radio-size, 1.5rem);max-height:var(--ef-radio-size, 1.5rem);border-radius:50%;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}.ef-radio-container .ef-radio-option input[type=radio]:active{transform:scale(1.2)}.ef-radio-container .ef-radio-option input[type=radio]:active:disabled{transform:none}.ef-radio-container .ef-radio-option input[type=radio]:focus-visible{outline:3px solid hsl(var(--ef-input-border-color, 0 0% 90%));outline-offset:2px}.ef-radio-container .ef-radio-option input[type=radio]:checked{border:1px solid hsl(var(--ef-input-accent-color, 200 100% 50%))}.ef-radio-container .ef-radio-option input[type=radio]:checked:after{content:\"\";width:calc(var(--ef-radio-size, 1.5rem) * .6);height:calc(var(--ef-radio-size, 1.5rem) * .6);border-radius:50%;background-color:hsl(var(--ef-input-accent-color, 200 100% 50%))}.ef-radio-container .ef-radio-option input[type=radio][disabled],.ef-radio-container .ef-radio-option input[type=radio]:disabled{opacity:.5;cursor:default}.ef-radio-container .ef-radio-option input[type=radio]:disabled~.ef-form-label{opacity:.5}\n"] }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWYtcmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtcmFkaW8vZWYtcmFkaW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZWFzeS1mb3JtL3NyYy9saWIvY29udHJvbHMvZWYtcmFkaW8vZWYtcmFkaW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUN4QyxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0scUJBQXFCLENBQUM7QUFDaEQsT0FBTyxFQUFDLG1CQUFtQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDbkQsT0FBTyxFQUFDLGVBQWUsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3hELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLGdEQUFnRCxDQUFDO0FBQ2pGLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLHdDQUF3QyxDQUFDOzs7QUFjM0UsTUFBTSxPQUFPLGdCQUFpQixTQUFRLGVBQWU7K0dBQXhDLGdCQUFnQjttR0FBaEIsZ0JBQWdCLCtGQ25CN0IsMjNCQWlCQSwwdkRETkksV0FBVywrQ0FDWCxtQkFBbUIsNnhCQUNuQixpQkFBaUIsd0dBQ2pCLG1CQUFtQjs7NEZBS1YsZ0JBQWdCO2tCQVo1QixTQUFTOytCQUNFLGNBQWMsY0FDWixJQUFJLFdBQ1A7d0JBQ1AsV0FBVzt3QkFDWCxtQkFBbUI7d0JBQ25CLGlCQUFpQjt3QkFDakIsbUJBQW1CO3FCQUNwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHtPYnNlcnZlUGlwZX0gZnJvbSBcIi4uLy4uL3BpcGVzL29ic2VydmVcIjtcclxuaW1wb3J0IHtSZWFjdGl2ZUZvcm1zTW9kdWxlfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcclxuaW1wb3J0IHtFYXN5Rm9ybUNvbnRyb2x9IGZyb20gXCIuLi8uLi9lYXN5LWZvcm0tY29udHJvbFwiO1xyXG5pbXBvcnQge0VmRXJyb3JzQ29tcG9uZW50fSBmcm9tIFwiLi4vLi4vY29tcG9uZW50cy9lZi1lcnJvcnMvZWYtZXJyb3JzLmNvbXBvbmVudFwiO1xyXG5pbXBvcnQge0JpbmRFdmVudHNEaXJlY3RpdmV9IGZyb20gXCIuLi8uLi9kaXJlY3RpdmVzL2JpbmQtZXZlbnRzLmRpcmVjdGl2ZVwiO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItZWYtcmFkaW8nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW1xyXG4gICAgT2JzZXJ2ZVBpcGUsXHJcbiAgICBSZWFjdGl2ZUZvcm1zTW9kdWxlLFxyXG4gICAgRWZFcnJvcnNDb21wb25lbnQsXHJcbiAgICBCaW5kRXZlbnRzRGlyZWN0aXZlXHJcbiAgXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vZWYtcmFkaW8uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9lZi1yYWRpby5jb21wb25lbnQuc2NzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIEVmUmFkaW9Db21wb25lbnQgZXh0ZW5kcyBFYXN5Rm9ybUNvbnRyb2wge1xyXG5cclxufVxyXG4iLCJAaWYgKGhhc0luaXRpYWxpemVkKCkpIHtcclxuICBAaWYgKGVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYT8ubGFiZWwpIHtcclxuICAgIDxsYWJlbCBjbGFzcz1cImVmLWZvcm0tbGFiZWxcIiBbZm9yXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkXCI+e3sgZWFzeUZvcm1Db250cm9sKCkuc2NoZW1hPy5sYWJlbCB8IG9ic2VydmUgfX08L2xhYmVsPlxyXG4gIH1cclxuICBAaWYgKGVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYT8ub3B0aW9ucykge1xyXG4gICAgPGRpdiBjbGFzcz1cImVmLXJhZGlvLWNvbnRhaW5lclwiPlxyXG4gICAgICBAZm9yIChvcHRpb24gb2YgKGVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYT8ub3B0aW9ucyB8IG9ic2VydmUpOyB0cmFjayBvcHRpb24udmFsdWUpIHtcclxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJlZi1yYWRpby1vcHRpb25cIj5cclxuICAgICAgICAgIDxpbnB1dCBiaW5kRXZlbnRzIHR5cGU9XCJyYWRpb1wiIFtmb3JtQ29udHJvbF09XCJlYXN5Rm9ybUNvbnRyb2woKS5jb250cm9sIVwiIFtuYW1lXT1cImVhc3lGb3JtQ29udHJvbCgpLmlkIVwiXHJcbiAgICAgICAgICAgICAgICAgW3ZhbHVlXT1cIm9wdGlvbi52YWx1ZVwiIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiZWFzeUZvcm1Db250cm9sKCkuaWRcIj5cclxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZWYtZm9ybS1sYWJlbFwiPnt7IG9wdGlvbi5sYWJlbCB8IG9ic2VydmUgfX08L3NwYW4+XHJcbiAgICAgICAgPC9sYWJlbD5cclxuICAgICAgfVxyXG4gICAgPC9kaXY+XHJcbiAgfVxyXG4gIDxlZi1lcnJvcnMgW2NvbnRyb2xdPVwiZWFzeUZvcm1Db250cm9sKCkuY29udHJvbCFcIiBbZm9ybUZpZWxkXT1cImVhc3lGb3JtQ29udHJvbCgpLnNjaGVtYSFcIi8+XHJcbn1cclxuIl19