ngx-form-lib/esm2022/lib/features/radio/radio.component.mjs

Dynamic form library for Angular 18 with Material 3 support. Create complex reactive forms easily using JSON configuration with modern Angular 18 control flow syntax.

import { Component } from '@angular/core';
import { BaseComponent } from '../../core/components/base/base.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/radio";
import * as i4 from "../../shared/pipes/set-parent-config/set-parent-config.pipe";
export class RadioComponent extends BaseComponent {
    constructor() {
        super(...arguments);
        this.config = null;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RadioComponent, selector: "ngf-radio", usesInheritance: true, ngImport: i0, template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-radio-wrapper\">\r\n  @if (config.label) {\r\n  <label [attr.for]=\"config.name\">{{ config.label }}</label>\r\n  }\r\n  <mat-radio-group\r\n    class=\"ngf-radio-group\"\r\n    [ngClass]=\"{ 'ngf-inline': config.showInline }\"\r\n    [formControlName]=\"config.name\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    @for (option of config.options; track option.value) {\r\n    <mat-radio-button class=\"ngf-radio-button\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n  </mat-radio-group>\r\n</div>\r\n}\r\n", styles: [".ngf-radio-wrapper .ngf-radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.ngf-radio-wrapper .ngf-radio-group.ngf-inline{display:flex;flex-direction:row}.ngf-radio-wrapper .ngf-radio-button{margin:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i4.SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngf-radio', template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-radio-wrapper\">\r\n  @if (config.label) {\r\n  <label [attr.for]=\"config.name\">{{ config.label }}</label>\r\n  }\r\n  <mat-radio-group\r\n    class=\"ngf-radio-group\"\r\n    [ngClass]=\"{ 'ngf-inline': config.showInline }\"\r\n    [formControlName]=\"config.name\"\r\n    [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n  >\r\n    @for (option of config.options; track option.value) {\r\n    <mat-radio-button class=\"ngf-radio-button\" [value]=\"option.value\">\r\n      {{ option.label }}\r\n    </mat-radio-button>\r\n    }\r\n  </mat-radio-group>\r\n</div>\r\n}\r\n", styles: [".ngf-radio-wrapper .ngf-radio-group{display:flex;flex-direction:column;margin:15px 0;align-items:flex-start}.ngf-radio-wrapper .ngf-radio-group.ngf-inline{display:flex;flex-direction:row}.ngf-radio-wrapper .ngf-radio-button{margin:5px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvcmFkaW8vcmFkaW8uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZvcm0tbGliL3NyYy9saWIvZmVhdHVyZXMvcmFkaW8vcmFkaW8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUUxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkNBQTJDLENBQUM7Ozs7OztBQVExRSxNQUFNLE9BQU8sY0FBZSxTQUFRLGFBQXFCO0lBTHpEOztRQU1XLFdBQU0sR0FBaUIsSUFBSSxDQUFDO0tBQ3RDOytHQUZZLGNBQWM7bUdBQWQsY0FBYyx3RUNWM0IsOHBCQW1CQTs7NEZEVGEsY0FBYztrQkFMMUIsU0FBUzsrQkFDRSxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5pbXBvcnQgeyBCYXNlQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vY29yZS9jb21wb25lbnRzL2Jhc2UvYmFzZS5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBSYWRpbyB9IGZyb20gJy4vcmFkaW8ubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ2YtcmFkaW8nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9yYWRpby5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcmFkaW8uY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFJhZGlvQ29tcG9uZW50IGV4dGVuZHMgQmFzZUNvbXBvbmVudDxzdHJpbmc+IHtcclxuICBvdmVycmlkZSBjb25maWc6IFJhZGlvIHwgbnVsbCA9IG51bGw7XHJcbn1cclxuIiwiQGlmIChncm91cCAmJiBjb25maWcpIHtcclxuPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCIgY2xhc3M9XCJuZ2Ytd3JhcHBlciBuZ2YtcmFkaW8td3JhcHBlclwiPlxyXG4gIEBpZiAoY29uZmlnLmxhYmVsKSB7XHJcbiAgPGxhYmVsIFthdHRyLmZvcl09XCJjb25maWcubmFtZVwiPnt7IGNvbmZpZy5sYWJlbCB9fTwvbGFiZWw+XHJcbiAgfVxyXG4gIDxtYXQtcmFkaW8tZ3JvdXBcclxuICAgIGNsYXNzPVwibmdmLXJhZGlvLWdyb3VwXCJcclxuICAgIFtuZ0NsYXNzXT1cInsgJ25nZi1pbmxpbmUnOiBjb25maWcuc2hvd0lubGluZSB9XCJcclxuICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiY29uZmlnLm5hbWVcIlxyXG4gICAgW2NvbG9yXT1cInBhcmVudENvbmZpZyB8IHNldFBhcmVudENvbmZpZyA6IGNvbmZpZyA6ICdjb2xvcidcIlxyXG4gID5cclxuICAgIEBmb3IgKG9wdGlvbiBvZiBjb25maWcub3B0aW9uczsgdHJhY2sgb3B0aW9uLnZhbHVlKSB7XHJcbiAgICA8bWF0LXJhZGlvLWJ1dHRvbiBjbGFzcz1cIm5nZi1yYWRpby1idXR0b25cIiBbdmFsdWVdPVwib3B0aW9uLnZhbHVlXCI+XHJcbiAgICAgIHt7IG9wdGlvbi5sYWJlbCB9fVxyXG4gICAgPC9tYXQtcmFkaW8tYnV0dG9uPlxyXG4gICAgfVxyXG4gIDwvbWF0LXJhZGlvLWdyb3VwPlxyXG48L2Rpdj5cclxufVxyXG4iXX0=