ngx-render-material-forms 2.5.12 → 2.5.14

package/esm2022/lib/components/radio/radio.component.mjs

@@ -0,0 +1,93 @@
+import { Component } from '@angular/core';
+import { MaterialComponent } from '../MaterialComponent';
+import RadioComponent from 'formiojs/components/radio/Radio.js';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/material/form-field";
+import * as i4 from "@angular/material/radio";
+import * as i5 from "../formio-form-field/formio-form-field.component";
+import * as i6 from "../label/label.component";
+export class MaterialRadioComponent extends MaterialComponent {
+    getLayout() {
+        return this.instance.component.inline ? 'row' : 'column';
+    }
+    isRadioChecked(option) {
+        return option.value === this.instance.dataValue;
+    }
+    clearValue(event, option) {
+        if (this.isRadioChecked(option)) {
+            event.preventDefault();
+            this.deselectValue();
+        }
+    }
+    deselectValue() {
+        this.instance.updateValue(null, {
+            modified: true,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MaterialRadioComponent, selector: "mat-formio-radio", usesInheritance: true, ngImport: i0, template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div style="display:flex; flex-direction:column;">
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <mat-radio-group
+                (change)="onChange()"
+                [formControl]="control"
+                style="display:flex; margin-left:10px; gap:10px;"
+                [style.flex-direction]="getLayout()"
+        >
+          <mat-radio-button *ngFor="let option of instance.component.values"
+                            value="{{ option.value }}"
+                            [checked]="isRadioChecked(option)"
+                            (keyup.space)="clearValue($event, option)"
+                            (click)="clearValue($event, option)"
+          >
+            {{ option.label }}
+          </mat-radio-button>
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </mat-radio-group>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.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: "component", type: i5.FormioFormFieldComponent, selector: "mat-formio-form-field", inputs: ["labelTemplate", "renderTopLabel", "showDescription", "renderElementOnly", "instance", "componentTemplate"] }, { kind: "component", type: i6.LabelComponent, selector: "span[matFormioLabel]", inputs: ["instance"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MaterialRadioComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mat-formio-radio',
+                    template: `
+    <mat-formio-form-field [instance]="instance" [componentTemplate]="componentTemplate"></mat-formio-form-field>
+    <ng-template #componentTemplate let-hasLabel>
+      <div style="display:flex; flex-direction:column;">
+        <mat-label *ngIf="hasLabel">
+          <span [instance]="instance" matFormioLabel></span>
+        </mat-label>
+
+        <mat-radio-group
+                (change)="onChange()"
+                [formControl]="control"
+                style="display:flex; margin-left:10px; gap:10px;"
+                [style.flex-direction]="getLayout()"
+        >
+          <mat-radio-button *ngFor="let option of instance.component.values"
+                            value="{{ option.value }}"
+                            [checked]="isRadioChecked(option)"
+                            (keyup.space)="clearValue($event, option)"
+                            (click)="clearValue($event, option)"
+          >
+            {{ option.label }}
+          </mat-radio-button>
+          <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
+        </mat-radio-group>
+      </div>
+    </ng-template>
+  `
+                }]
+        }] });
+RadioComponent.MaterialComponent = MaterialRadioComponent;
+export { RadioComponent };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXJlbmRlci1tYXRlcmlhbC1mb3Jtcy9zcmMvbGliL2NvbXBvbmVudHMvcmFkaW8vcmFkaW8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDekQsT0FBTyxjQUFjLE1BQU0sb0NBQW9DLENBQUM7Ozs7Ozs7O0FBZ0NoRSxNQUFNLE9BQU8sc0JBQXVCLFNBQVEsaUJBQWlCO0lBQzNELFNBQVM7UUFDUCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUM7SUFDM0QsQ0FBQztJQUVELGNBQWMsQ0FBQyxNQUFNO1FBQ25CLE9BQU8sTUFBTSxDQUFDLEtBQUssS0FBSyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQUssRUFBRSxNQUFNO1FBQ3RCLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDO1lBQ2hDLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQztJQUNILENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFO1lBQzlCLFFBQVEsRUFBRSxJQUFJO1NBQ2YsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0FwQlUsc0JBQXNCO21HQUF0QixzQkFBc0IsK0VBNUJ2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0EwQlQ7OzRGQUVVLHNCQUFzQjtrQkE5QmxDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQTBCVDtpQkFDRjs7QUF1QkQsY0FBYyxDQUFDLGlCQUFpQixHQUFHLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxjQUFjLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRlcmlhbENvbXBvbmVudCB9IGZyb20gJy4uL01hdGVyaWFsQ29tcG9uZW50JztcclxuaW1wb3J0IFJhZGlvQ29tcG9uZW50IGZyb20gJ2Zvcm1pb2pzL2NvbXBvbmVudHMvcmFkaW8vUmFkaW8uanMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdtYXQtZm9ybWlvLXJhZGlvJyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPG1hdC1mb3JtaW8tZm9ybS1maWVsZCBbaW5zdGFuY2VdPVwiaW5zdGFuY2VcIiBbY29tcG9uZW50VGVtcGxhdGVdPVwiY29tcG9uZW50VGVtcGxhdGVcIj48L21hdC1mb3JtaW8tZm9ybS1maWVsZD5cclxuICAgIDxuZy10ZW1wbGF0ZSAjY29tcG9uZW50VGVtcGxhdGUgbGV0LWhhc0xhYmVsPlxyXG4gICAgICA8ZGl2IHN0eWxlPVwiZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjpjb2x1bW47XCI+XHJcbiAgICAgICAgPG1hdC1sYWJlbCAqbmdJZj1cImhhc0xhYmVsXCI+XHJcbiAgICAgICAgICA8c3BhbiBbaW5zdGFuY2VdPVwiaW5zdGFuY2VcIiBtYXRGb3JtaW9MYWJlbD48L3NwYW4+XHJcbiAgICAgICAgPC9tYXQtbGFiZWw+XHJcblxyXG4gICAgICAgIDxtYXQtcmFkaW8tZ3JvdXBcclxuICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwib25DaGFuZ2UoKVwiXHJcbiAgICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXHJcbiAgICAgICAgICAgICAgICBzdHlsZT1cImRpc3BsYXk6ZmxleDsgbWFyZ2luLWxlZnQ6MTBweDsgZ2FwOjEwcHg7XCJcclxuICAgICAgICAgICAgICAgIFtzdHlsZS5mbGV4LWRpcmVjdGlvbl09XCJnZXRMYXlvdXQoKVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgPG1hdC1yYWRpby1idXR0b24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBpbnN0YW5jZS5jb21wb25lbnQudmFsdWVzXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHZhbHVlPVwie3sgb3B0aW9uLnZhbHVlIH19XCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtjaGVja2VkXT1cImlzUmFkaW9DaGVja2VkKG9wdGlvbilcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKGtleXVwLnNwYWNlKT1cImNsZWFyVmFsdWUoJGV2ZW50LCBvcHRpb24pXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJjbGVhclZhbHVlKCRldmVudCwgb3B0aW9uKVwiXHJcbiAgICAgICAgICA+XHJcbiAgICAgICAgICAgIHt7IG9wdGlvbi5sYWJlbCB9fVxyXG4gICAgICAgICAgPC9tYXQtcmFkaW8tYnV0dG9uPlxyXG4gICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImluc3RhbmNlLmVycm9yXCI+e3sgaW5zdGFuY2UuZXJyb3IubWVzc2FnZSB9fTwvbWF0LWVycm9yPlxyXG4gICAgICAgIDwvbWF0LXJhZGlvLWdyb3VwPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvbmctdGVtcGxhdGU+XHJcbiAgYFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTWF0ZXJpYWxSYWRpb0NvbXBvbmVudCBleHRlbmRzIE1hdGVyaWFsQ29tcG9uZW50IHtcclxuICBnZXRMYXlvdXQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5pbnN0YW5jZS5jb21wb25lbnQuaW5saW5lID8gJ3JvdycgOiAnY29sdW1uJztcclxuICB9XHJcblxyXG4gIGlzUmFkaW9DaGVja2VkKG9wdGlvbikge1xyXG4gICAgcmV0dXJuIG9wdGlvbi52YWx1ZSA9PT0gdGhpcy5pbnN0YW5jZS5kYXRhVmFsdWU7XHJcbiAgfVxyXG5cclxuICBjbGVhclZhbHVlKGV2ZW50LCBvcHRpb24pIHtcclxuICAgIGlmICh0aGlzLmlzUmFkaW9DaGVja2VkKG9wdGlvbikpIHtcclxuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgICAgdGhpcy5kZXNlbGVjdFZhbHVlKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBkZXNlbGVjdFZhbHVlKCkge1xyXG4gICAgdGhpcy5pbnN0YW5jZS51cGRhdGVWYWx1ZShudWxsLCB7XHJcbiAgICAgIG1vZGlmaWVkOiB0cnVlLFxyXG4gICAgfSk7XHJcbiAgfVxyXG59XHJcblJhZGlvQ29tcG9uZW50Lk1hdGVyaWFsQ29tcG9uZW50ID0gTWF0ZXJpYWxSYWRpb0NvbXBvbmVudDtcclxuZXhwb3J0IHsgUmFkaW9Db21wb25lbnQgfTtcclxuIl19