ng-dynamic-json-form
Version:
Generate Angular reactive form dynamically using JSON. Support conditional rendering and toggle of validators.
450 lines (437 loc) • 44.1 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { computed, Component, signal } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { FormArray, FormControl, ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import * as i2 from '@angular/material/checkbox';
import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
import * as i2$1 from '@angular/material/input';
import { MatInputModule, MatInput } from '@angular/material/input';
import { CustomControlComponent, PropsBindingDirective, providePropsBinding, ImaskValuePatchDirective } from 'ng-dynamic-json-form';
import * as i3 from '@angular/material/select';
import { MatSelectModule, MatSelect } from '@angular/material/select';
import { IMaskDirective } from 'angular-imask';
import { MatButtonModule } from '@angular/material/button';
import * as i3$1 from '@angular/material/radio';
import { MatRadioModule, MatRadioGroup } from '@angular/material/radio';
import * as i2$2 from '@angular/material/slider';
import { MatSliderModule, MatSlider } from '@angular/material/slider';
import * as i2$3 from '@angular/material/slide-toggle';
import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
import * as i3$2 from '@angular/cdk/text-field';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { MatNativeDateModule } from '@angular/material/core';
import * as i2$4 from '@angular/material/datepicker';
import { MatDatepickerModule, MatDatepickerInput } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
class UiMaterialCheckboxComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormArray([]);
this.options = computed(() => this.data()?.options?.data ?? [], ...(ngDevMode ? [{ debugName: "options" }] : []));
this.groupButtonStyles = computed(() => {
const { layout, containerStyles } = this.data()?.options ?? {};
return `
flex-direction: ${layout ?? 'row'};
align-items: flex-start;
${containerStyles ?? ''}
`.replace(/\s{2,}/g, '');
}, ...(ngDevMode ? [{ debugName: "groupButtonStyles" }] : []));
}
writeValue(obj) {
this.control.clear();
if (Array.isArray(obj)) {
obj.forEach((x) => this.addItem(x));
}
else {
this.addItem(obj);
}
}
registerOnChange(fn) {
this.onChange = fn;
}
toggle(e) {
const checked = e.checked;
this.onChange(checked);
}
onCheckboxChange(e, index) {
const checked = e.checked;
const value = this.options()
.map((x) => x.value)
.filter((val, i) => (i === index ? checked : this.isChecked(val)));
this.control.clear();
value?.forEach((x) => this.addItem(x));
this.onChange(this.control.value);
}
isChecked(val) {
return this.control.value.some((x) => JSON.stringify(x) === JSON.stringify(val));
}
addItem(val) {
const control = new FormControl(val);
this.control.push(control);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialCheckboxComponent, isStandalone: true, selector: "ui-material-checkbox", providers: [
providePropsBinding([
{
key: 'mat-checkbox',
token: MatCheckbox,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <div\r\n class=\"group-buttons\"\r\n [style]=\"groupButtonStyles()\"\r\n [ngClass]=\"[data.options?.containerClass ?? '']\"\r\n >\r\n <!-- binary checkbox -->\r\n @if (options().length === 1) {\r\n <mat-checkbox\r\n [checked]=\"!control.value.length ? false : control.value[0]\"\r\n [disabled]=\"control.disabled\"\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-checkbox',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n (change)=\"toggle($event)\"\r\n >{{ options()[0].label }}</mat-checkbox\r\n >\r\n }\r\n <!-- muli-select checkbox -->\r\n @if (options().length > 1) {\r\n @for (item of options(); track $index) {\r\n <mat-checkbox\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [checked]=\"isChecked(item.value)\"\r\n [disabled]=\"control.disabled\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-checkbox',\r\n props: data.props,\r\n omit: ['labelPosition', 'checked', 'disabled', 'value'],\r\n },\r\n ]\"\r\n (change)=\"onCheckboxChange($event, $index)\"\r\n >{{ item.label }}</mat-checkbox\r\n >\r\n }\r\n }\r\n </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-checkbox', imports: [
CommonModule,
ReactiveFormsModule,
MatCheckboxModule,
MatInputModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'mat-checkbox',
token: MatCheckbox,
},
]),
], template: "@if (data(); as data) {\r\n <div\r\n class=\"group-buttons\"\r\n [style]=\"groupButtonStyles()\"\r\n [ngClass]=\"[data.options?.containerClass ?? '']\"\r\n >\r\n <!-- binary checkbox -->\r\n @if (options().length === 1) {\r\n <mat-checkbox\r\n [checked]=\"!control.value.length ? false : control.value[0]\"\r\n [disabled]=\"control.disabled\"\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-checkbox',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n (change)=\"toggle($event)\"\r\n >{{ options()[0].label }}</mat-checkbox\r\n >\r\n }\r\n <!-- muli-select checkbox -->\r\n @if (options().length > 1) {\r\n @for (item of options(); track $index) {\r\n <mat-checkbox\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [checked]=\"isChecked(item.value)\"\r\n [disabled]=\"control.disabled\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-checkbox',\r\n props: data.props,\r\n omit: ['labelPosition', 'checked', 'disabled', 'value'],\r\n },\r\n ]\"\r\n (change)=\"onCheckboxChange($event, $index)\"\r\n >{{ item.label }}</mat-checkbox\r\n >\r\n }\r\n }\r\n </div>\r\n}\r\n" }]
}] });
class UiMaterialSelectComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl(-1);
this.options = computed(() => this.data()?.options?.data ?? [], ...(ngDevMode ? [{ debugName: "options" }] : []));
this.onTouched = () => { };
}
writeValue(obj) {
const index = this.options().findIndex((x) => JSON.stringify(x.value) === JSON.stringify(obj));
this.control.setValue(index);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
updateControl() {
const index = this.control.value ?? -1;
if (index > -1) {
const value = this.options().map((x) => x.value)[index];
this.onChange(value);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialSelectComponent, isStandalone: true, selector: "ui-material-select", providers: [
providePropsBinding([
{
key: 'mat-select',
token: MatSelect,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <mat-select\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-select',\r\n props: data.props,\r\n },\r\n ]\"\r\n (openedChange)=\"onTouched()\"\r\n (selectionChange)=\"updateControl()\"\r\n >\r\n @for (item of options(); track $index) {\r\n <mat-option [value]=\"$index\">{{ item.label }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-select', imports: [ReactiveFormsModule, MatSelectModule, PropsBindingDirective], providers: [
providePropsBinding([
{
key: 'mat-select',
token: MatSelect,
},
]),
], template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <mat-select\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-select',\r\n props: data.props,\r\n },\r\n ]\"\r\n (openedChange)=\"onTouched()\"\r\n (selectionChange)=\"updateControl()\"\r\n >\r\n @for (item of options(); track $index) {\r\n <mat-option [value]=\"$index\">{{ item.label }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n}\r\n" }]
}] });
class UiMaterialInputMaskComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl('');
}
registerOnChange(fn) {
this.onChange = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialInputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialInputMaskComponent, isStandalone: true, selector: "ui-material-input-mask", providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatInput,
},
{
key: 'imask',
token: IMaskDirective,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n imaskValuePatch\r\n [formControl]=\"control\"\r\n [imask]=\"data.inputMask\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n {\r\n key: 'imask',\r\n props: data.props,\r\n },\r\n ]\"\r\n (complete)=\"onChange(control.value)\"\r\n />\r\n </mat-form-field>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: IMaskDirective, selector: "[imask]", inputs: ["imask", "unmask", "imaskElement"], outputs: ["accept", "complete"], exportAs: ["imask"] }, { kind: "directive", type: ImaskValuePatchDirective, selector: "[imaskValuePatch]" }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialInputMaskComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-input-mask', imports: [
ReactiveFormsModule,
MatInputModule,
IMaskDirective,
ImaskValuePatchDirective,
PropsBindingDirective
], providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatInput,
},
{
key: 'imask',
token: IMaskDirective,
},
]),
], template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n type=\"text\"\r\n imaskValuePatch\r\n [formControl]=\"control\"\r\n [imask]=\"data.inputMask\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n {\r\n key: 'imask',\r\n props: data.props,\r\n },\r\n ]\"\r\n (complete)=\"onChange(control.value)\"\r\n />\r\n </mat-form-field>\r\n}\r\n" }]
}] });
class UiMaterialInputComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new UntypedFormControl('');
}
registerOnChange(fn) {
this.onChange = fn;
}
onInput(e) {
const value = e.target.value;
this.control.setValue(value);
this.onChange(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialInputComponent, isStandalone: true, selector: "ui-material-input", providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatInput,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n [formControl]=\"control\"\r\n [attr.type]=\"data.type ?? 'text'\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n />\r\n </mat-form-field>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialInputComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-input', imports: [
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatInput,
},
]),
], template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n [formControl]=\"control\"\r\n [attr.type]=\"data.type ?? 'text'\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n />\r\n </mat-form-field>\r\n}\r\n" }]
}] });
class UiMaterialRadioComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl('');
this.options = computed(() => this.data()?.options?.data ?? [], ...(ngDevMode ? [{ debugName: "options" }] : []));
this.selectedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
}
writeValue(obj) {
const index = this.options().findIndex((x) => JSON.stringify(x.value) === JSON.stringify(obj));
this.selectedIndex.set(index);
}
registerOnChange(fn) {
this.onChange = fn;
}
emitValue(i) {
const value = this.options()[i].value;
this.onChange(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialRadioComponent, isStandalone: true, selector: "ui-material-radio", providers: [
providePropsBinding([
{
key: 'mat-radio-group',
token: MatRadioGroup,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-radio-group\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-radio-group',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n >\r\n <div\r\n class=\"group-buttons\"\r\n [style]=\"data.options?.containerStyles\"\r\n [ngClass]=\"[data.options?.containerClass ?? '']\"\r\n [ngStyle]=\"{\r\n 'flex-direction': data.options?.layout,\r\n }\"\r\n >\r\n @for (item of options(); track $index) {\r\n <mat-radio-button\r\n [value]=\"$index\"\r\n [checked]=\"selectedIndex() === $index\"\r\n (change)=\"emitValue($index)\"\r\n >{{ item.label }}</mat-radio-button\r\n >\r\n }\r\n </div>\r\n </mat-radio-group>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i3$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$1.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: "ngmodule", type: MatInputModule }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-radio', imports: [
CommonModule,
ReactiveFormsModule,
MatRadioModule,
MatInputModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'mat-radio-group',
token: MatRadioGroup,
},
]),
], template: "@if (data(); as data) {\r\n <mat-radio-group\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-radio-group',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n >\r\n <div\r\n class=\"group-buttons\"\r\n [style]=\"data.options?.containerStyles\"\r\n [ngClass]=\"[data.options?.containerClass ?? '']\"\r\n [ngStyle]=\"{\r\n 'flex-direction': data.options?.layout,\r\n }\"\r\n >\r\n @for (item of options(); track $index) {\r\n <mat-radio-button\r\n [value]=\"$index\"\r\n [checked]=\"selectedIndex() === $index\"\r\n (change)=\"emitValue($index)\"\r\n >{{ item.label }}</mat-radio-button\r\n >\r\n }\r\n </div>\r\n </mat-radio-group>\r\n}\r\n" }]
}] });
class UiMaterialRangeComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl(0);
}
registerOnChange(fn) {
this.onChange = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialRangeComponent, isStandalone: true, selector: "ui-material-range", providers: [
providePropsBinding([
{
key: 'mat-slider',
token: MatSlider,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-slider\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-slider',\r\n props: data.props,\r\n },\r\n ]\"\r\n >\r\n <input\r\n matSliderThumb\r\n [formControl]=\"control\"\r\n (input)=\"onChange(control.value)\"\r\n />\r\n </mat-slider>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i2$2.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialRangeComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-range', imports: [
ReactiveFormsModule,
MatSliderModule,
MatInputModule,
PropsBindingDirective
], providers: [
providePropsBinding([
{
key: 'mat-slider',
token: MatSlider,
},
]),
], template: "@if (data(); as data) {\r\n <mat-slider\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-slider',\r\n props: data.props,\r\n },\r\n ]\"\r\n >\r\n <input\r\n matSliderThumb\r\n [formControl]=\"control\"\r\n (input)=\"onChange(control.value)\"\r\n />\r\n </mat-slider>\r\n}\r\n" }]
}] });
class UiMaterialSwitchComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl(false);
}
registerOnChange(fn) {
this.onChange = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialSwitchComponent, isStandalone: true, selector: "ui-material-switch", providers: [
providePropsBinding([
{
key: 'mat-slide-toggle',
token: MatSlideToggle,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-slide-toggle\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-slide-toggle',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n (change)=\"onChange(control.value)\"\r\n >{{ data.options?.data?.[0]?.label }}</mat-slide-toggle\r\n >\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialSwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-switch', imports: [
ReactiveFormsModule,
MatSlideToggleModule,
MatInputModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'mat-slide-toggle',
token: MatSlideToggle,
},
]),
], template: "@if (data(); as data) {\r\n <mat-slide-toggle\r\n [labelPosition]=\"data.options?.labelPosition ?? 'after'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-slide-toggle',\r\n props: data.props,\r\n omit: ['labelPosition'],\r\n },\r\n ]\"\r\n (change)=\"onChange(control.value)\"\r\n >{{ data.options?.data?.[0]?.label }}</mat-slide-toggle\r\n >\r\n}\r\n" }]
}] });
class UiMaterialTextareaComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl('');
}
registerOnChange(fn) {
this.onChange = fn;
}
onInput(e) {
const value = e.target.value;
this.control.setValue(value);
this.onChange(value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialTextareaComponent, isStandalone: true, selector: "ui-material-textarea", providers: [
providePropsBinding([
{
key: 'cdk-textarea-autosize',
token: CdkTextareaAutosize,
},
{
key: 'mat-input',
token: MatInput,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>{{ data.label }}</mat-label>\r\n <textarea\r\n matInput\r\n cdkTextareaAutosize\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n },\r\n {\r\n key: 'cdk-textarea-autosize',\r\n props: data.props,\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n ></textarea>\r\n </mat-form-field>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialTextareaComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-textarea', imports: [ReactiveFormsModule, MatInputModule, PropsBindingDirective], providers: [
providePropsBinding([
{
key: 'cdk-textarea-autosize',
token: CdkTextareaAutosize,
},
{
key: 'mat-input',
token: MatInput,
},
]),
], template: "@if (data(); as data) {\r\n <mat-form-field class=\"example-full-width\">\r\n <mat-label>{{ data.label }}</mat-label>\r\n <textarea\r\n matInput\r\n cdkTextareaAutosize\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n },\r\n {\r\n key: 'cdk-textarea-autosize',\r\n props: data.props,\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n ></textarea>\r\n </mat-form-field>\r\n}\r\n" }]
}] });
class UiMaterialDateComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl(new Date());
}
registerOnChange(fn) {
this.onChange = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiMaterialDateComponent, isStandalone: true, selector: "ui-material-date", providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatDatepickerInput,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['matDatepicker'],\r\n },\r\n ]\"\r\n (dateInput)=\"onChange(control.value)\"\r\n />\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiMaterialDateComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-material-date', imports: [
ReactiveFormsModule,
MatDatepickerModule,
MatFormFieldModule,
MatNativeDateModule,
MatInputModule,
PropsBindingDirective
], providers: [
providePropsBinding([
{
key: 'mat-input',
token: MatDatepickerInput,
},
]),
], template: "@if (data(); as data) {\r\n <mat-form-field>\r\n <mat-label>{{ data.label }}</mat-label>\r\n <input\r\n matInput\r\n [matDatepicker]=\"picker\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'mat-input',\r\n props: data.props,\r\n omit: ['matDatepicker'],\r\n },\r\n ]\"\r\n (dateInput)=\"onChange(control.value)\"\r\n />\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n}\r\n" }]
}] });
const UI_MATERIAL_COMPONENTS = {
checkbox: UiMaterialCheckboxComponent,
date: UiMaterialDateComponent,
password: UiMaterialInputComponent,
number: UiMaterialInputComponent,
email: UiMaterialInputComponent,
radio: UiMaterialRadioComponent,
range: UiMaterialRangeComponent,
select: UiMaterialSelectComponent,
switch: UiMaterialSwitchComponent,
text: UiMaterialInputComponent,
textMask: UiMaterialInputMaskComponent,
textarea: UiMaterialTextareaComponent,
};
/**
* Generated bundle index. Do not edit.
*/
export { UI_MATERIAL_COMPONENTS };
//# sourceMappingURL=ng-dynamic-json-form-ui-material.mjs.map