ng-dynamic-json-form
Version:
Generate Angular reactive form dynamically using JSON. Support conditional rendering and toggle of validators.
393 lines (380 loc) • 41.8 kB
JavaScript
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { computed, ViewEncapsulation, Component, ViewChild } from '@angular/core';
import * as i1$1 from '@angular/forms';
import { FormControl, ReactiveFormsModule, UntypedFormControl, FormsModule } from '@angular/forms';
import { CustomControlComponent, PropsBindingDirective, providePropsBinding, ImaskValuePatchDirective } from 'ng-dynamic-json-form';
import * as i3 from 'primeng/checkbox';
import { CheckboxModule, Checkbox } from 'primeng/checkbox';
import * as i2 from 'primeng/select';
import { SelectModule, Select } from 'primeng/select';
import * as i2$1 from 'primeng/inputtext';
import { InputTextModule, InputText } from 'primeng/inputtext';
import * as i3$1 from 'primeng/radiobutton';
import { RadioButtonModule, RadioButton } from 'primeng/radiobutton';
import * as i3$2 from 'primeng/toggleswitch';
import { ToggleSwitchModule, ToggleSwitch } from 'primeng/toggleswitch';
import * as i2$2 from 'primeng/textarea';
import { TextareaModule, Textarea } from 'primeng/textarea';
import { IMaskDirective } from 'angular-imask';
import * as i2$3 from 'primeng/slider';
import { SliderModule, Slider } from 'primeng/slider';
import * as i1$2 from 'primeng/datepicker';
import { DatePickerModule, DatePicker } from 'primeng/datepicker';
class UiPrimengCheckboxComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl('');
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" }] : []));
}
registerOnChange(fn) {
this.onChange = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengCheckboxComponent, isStandalone: true, selector: "ui-primeng-checkbox", providers: [
providePropsBinding([
{
key: 'p-checkbox',
token: Checkbox,
},
]),
], 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 @for (item of options(); track $index) {\r\n <label\r\n class=\"option-button\"\r\n [ngStyle]=\"{\r\n 'justify-content':\r\n data.options?.labelPosition === 'before' ? 'space-between' : null,\r\n }\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: true,\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <!-- binary checkbox -->\r\n @if (options().length === 1) {\r\n <p-checkbox\r\n #pCheckbox\r\n [binary]=\"true\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-checkbox',\r\n props: data.props,\r\n omit: ['binary'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-checkbox>\r\n }\r\n\r\n <!-- multi-select checkbox -->\r\n @if (options().length > 1) {\r\n <p-checkbox\r\n [name]=\"'group'\"\r\n [value]=\"item.value\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-checkbox',\r\n props: data.props,\r\n omit: ['binary'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-checkbox>\r\n }\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: false,\r\n }\r\n \"\r\n ></ng-container>\r\n </label>\r\n }\r\n </div>\r\n <ng-template #labelTemplate let-label=\"label\" let-isBefore=\"isBefore\">\r\n @if ((data.options?.labelPosition === \"before\") === isBefore) {\r\n <span>{{ label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CheckboxModule }, { kind: "component", type: i3.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengCheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-checkbox', encapsulation: ViewEncapsulation.None, imports: [
CommonModule,
ReactiveFormsModule,
CheckboxModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'p-checkbox',
token: Checkbox,
},
]),
], 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 @for (item of options(); track $index) {\r\n <label\r\n class=\"option-button\"\r\n [ngStyle]=\"{\r\n 'justify-content':\r\n data.options?.labelPosition === 'before' ? 'space-between' : null,\r\n }\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: true,\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <!-- binary checkbox -->\r\n @if (options().length === 1) {\r\n <p-checkbox\r\n #pCheckbox\r\n [binary]=\"true\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-checkbox',\r\n props: data.props,\r\n omit: ['binary'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-checkbox>\r\n }\r\n\r\n <!-- multi-select checkbox -->\r\n @if (options().length > 1) {\r\n <p-checkbox\r\n [name]=\"'group'\"\r\n [value]=\"item.value\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-checkbox',\r\n props: data.props,\r\n omit: ['binary'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-checkbox>\r\n }\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: false,\r\n }\r\n \"\r\n ></ng-container>\r\n </label>\r\n }\r\n </div>\r\n <ng-template #labelTemplate let-label=\"label\" let-isBefore=\"isBefore\">\r\n @if ((data.options?.labelPosition === \"before\") === isBefore) {\r\n <span>{{ label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n" }]
}] });
class UiPrimengSelectComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new UntypedFormControl('');
this.options = computed(() => this.data()?.options?.data ?? [], ...(ngDevMode ? [{ debugName: "options" }] : []));
this.onTouched = () => { };
this.onChange = (_) => { };
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengSelectComponent, isStandalone: true, selector: "ui-primeng-select", providers: [
providePropsBinding([
{
key: 'p-select',
token: Select,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <p-select\r\n [options]=\"options()\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-select',\r\n props: data.props,\r\n omit: ['options'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n (onBlur)=\"onTouched()\"\r\n ></p-select>\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: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-select', imports: [ReactiveFormsModule, SelectModule, PropsBindingDirective], providers: [
providePropsBinding([
{
key: 'p-select',
token: Select,
},
]),
], template: "@if (data(); as data) {\r\n <p-select\r\n [options]=\"options()\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-select',\r\n props: data.props,\r\n omit: ['options'],\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n (onBlur)=\"onTouched()\"\r\n ></p-select>\r\n}\r\n" }]
}] });
class UiPrimengInputComponent 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: UiPrimengInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengInputComponent, isStandalone: true, selector: "ui-primeng-input", providers: [
providePropsBinding([
{
key: 'p-input-text',
token: InputText,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <input\r\n pInputText\r\n [type]=\"data.type ?? 'text'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-input-text',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n />\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: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengInputComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-input', imports: [
ReactiveFormsModule,
InputTextModule,
PropsBindingDirective
], providers: [
providePropsBinding([
{
key: 'p-input-text',
token: InputText,
},
]),
], template: "@if (data(); as data) {\r\n <input\r\n pInputText\r\n [type]=\"data.type ?? 'text'\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-input-text',\r\n props: data.props,\r\n omit: ['type'],\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n />\r\n}\r\n" }]
}] });
class UiPrimengRadioComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl('');
this.options = computed(() => this.data()?.options?.data ?? [], ...(ngDevMode ? [{ debugName: "options" }] : []));
}
registerOnChange(fn) {
this.onChange = fn;
}
emitValue() {
this.onChange(this.control.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengRadioComponent, isStandalone: true, selector: "ui-primeng-radio", providers: [
providePropsBinding([
{
key: 'p-radio-button',
token: RadioButton,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\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 <label\r\n class=\"option-button\"\r\n [ngStyle]=\"{\r\n 'justify-content':\r\n data.options?.labelPosition === 'before' ? 'space-between' : null,\r\n }\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: true,\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <p-radioButton\r\n [value]=\"$index\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-radio-button',\r\n props: data.props,\r\n omit: ['value'],\r\n },\r\n ]\"\r\n (onClick)=\"emitValue()\"\r\n ></p-radioButton>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: false,\r\n }\r\n \"\r\n ></ng-container>\r\n </label>\r\n }\r\n </div>\r\n <ng-template #labelTemplate let-label=\"label\" let-isBefore=\"isBefore\">\r\n @if ((data.options?.labelPosition === \"before\") === isBefore) {\r\n <span>{{ label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: RadioButtonModule }, { kind: "component", type: i3$1.RadioButton, selector: "p-radioButton, p-radiobutton, p-radio-button", inputs: ["value", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "styleClass", "autofocus", "binary", "variant", "size"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengRadioComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-radio', imports: [
CommonModule,
ReactiveFormsModule,
RadioButtonModule,
PropsBindingDirective,
], providers: [
providePropsBinding([
{
key: 'p-radio-button',
token: RadioButton,
},
]),
], template: "@if (data(); as data) {\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 <label\r\n class=\"option-button\"\r\n [ngStyle]=\"{\r\n 'justify-content':\r\n data.options?.labelPosition === 'before' ? 'space-between' : null,\r\n }\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: true,\r\n }\r\n \"\r\n ></ng-container>\r\n\r\n <p-radioButton\r\n [value]=\"$index\"\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-radio-button',\r\n props: data.props,\r\n omit: ['value'],\r\n },\r\n ]\"\r\n (onClick)=\"emitValue()\"\r\n ></p-radioButton>\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n labelTemplate;\r\n context: {\r\n label: item.label,\r\n isBefore: false,\r\n }\r\n \"\r\n ></ng-container>\r\n </label>\r\n }\r\n </div>\r\n <ng-template #labelTemplate let-label=\"label\" let-isBefore=\"isBefore\">\r\n @if ((data.options?.labelPosition === \"before\") === isBefore) {\r\n <span>{{ label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n" }]
}] });
class UiPrimengSwitchComponent 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: UiPrimengSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengSwitchComponent, isStandalone: true, selector: "ui-primeng-switch", providers: [
providePropsBinding([
{
key: 'p-toggle-switch',
token: ToggleSwitch,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <div class=\"option-button-wrapper\">\r\n <label class=\"option-button\">\r\n @if (data.options?.labelPosition === \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n <p-toggle-switch\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-toggle-switch',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-toggle-switch>\r\n @if (data.options?.labelPosition !== \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n </label>\r\n </div>\r\n <ng-template #labelTemplate>\r\n @if (data.options?.data?.[0]?.label) {\r\n <span>{{ data.options?.data?.[0]?.label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i3$2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengSwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-switch', imports: [
CommonModule,
ReactiveFormsModule,
PropsBindingDirective,
ToggleSwitchModule,
], providers: [
providePropsBinding([
{
key: 'p-toggle-switch',
token: ToggleSwitch,
},
]),
], template: "@if (data(); as data) {\r\n <div class=\"option-button-wrapper\">\r\n <label class=\"option-button\">\r\n @if (data.options?.labelPosition === \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n <p-toggle-switch\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-toggle-switch',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-toggle-switch>\r\n @if (data.options?.labelPosition !== \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n </label>\r\n </div>\r\n <ng-template #labelTemplate>\r\n @if (data.options?.data?.[0]?.label) {\r\n <span>{{ data.options?.data?.[0]?.label }}</span>\r\n }\r\n </ng-template>\r\n}\r\n" }]
}] });
class UiPrimengTextareaComponent 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: UiPrimengTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengTextareaComponent, isStandalone: true, selector: "ui-primeng-textarea", providers: [
providePropsBinding([
{
key: 'p-textarea',
token: Textarea,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <textarea\r\n pTextarea\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-textarea',\r\n props: data.props,\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n ></textarea>\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: TextareaModule }, { kind: "directive", type: i2$2.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengTextareaComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-textarea', imports: [ReactiveFormsModule, TextareaModule, PropsBindingDirective], providers: [
providePropsBinding([
{
key: 'p-textarea',
token: Textarea,
},
]),
], template: "@if (data(); as data) {\r\n <textarea\r\n pTextarea\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-textarea',\r\n props: data.props,\r\n },\r\n ]\"\r\n (input)=\"onInput($event)\"\r\n ></textarea>\r\n}\r\n" }]
}] });
class UiPrimengInputMaskComponent 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: UiPrimengInputMaskComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengInputMaskComponent, isStandalone: true, selector: "ui-primeng-input-mask", providers: [
providePropsBinding([
{
key: 'p-input-text',
token: InputText,
},
{
key: 'imask',
token: IMaskDirective,
},
]),
], viewQueries: [{ propertyName: "target", first: true, predicate: InputText, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <input\r\n type=\"text\"\r\n pInputText\r\n imaskValuePatch\r\n [formControl]=\"control\"\r\n [imask]=\"data.inputMask\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-input-text',\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}\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: InputTextModule }, { kind: "directive", type: i2$1.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { 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: UiPrimengInputMaskComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-input-mask', imports: [
ReactiveFormsModule,
InputTextModule,
IMaskDirective,
ImaskValuePatchDirective,
PropsBindingDirective
], providers: [
providePropsBinding([
{
key: 'p-input-text',
token: InputText,
},
{
key: 'imask',
token: IMaskDirective,
},
]),
], template: "@if (data(); as data) {\r\n <input\r\n type=\"text\"\r\n pInputText\r\n imaskValuePatch\r\n [formControl]=\"control\"\r\n [imask]=\"data.inputMask\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-input-text',\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}\r\n" }]
}], propDecorators: { target: [{
type: ViewChild,
args: [InputText]
}] } });
class UiPrimengRangeComponent 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: UiPrimengRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengRangeComponent, isStandalone: true, selector: "ui-primeng-range", providers: [
providePropsBinding([
{
key: 'p-slider',
token: Slider,
},
]),
], viewQueries: [{ propertyName: "sliderRef", first: true, predicate: Slider, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <div class=\"range-input\">\r\n <p-slider\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-slider',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-slider>\r\n </div>\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: SliderModule }, { kind: "component", type: i2$3.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengRangeComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-range', imports: [ReactiveFormsModule, SliderModule, PropsBindingDirective], providers: [
providePropsBinding([
{
key: 'p-slider',
token: Slider,
},
]),
], template: "@if (data(); as data) {\r\n <div class=\"range-input\">\r\n <p-slider\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-slider',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onChange)=\"onChange(control.value)\"\r\n ></p-slider>\r\n </div>\r\n}\r\n" }]
}], propDecorators: { sliderRef: [{
type: ViewChild,
args: [Slider]
}] } });
class UiPrimengDateComponent extends CustomControlComponent {
constructor() {
super(...arguments);
this.control = new FormControl(new Date());
}
registerOnChange(fn) {
this.onChange = fn;
}
updateControl() {
this.onChange(this.control.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: UiPrimengDateComponent, isStandalone: true, selector: "ui-primeng-date", providers: [
providePropsBinding([
{
key: 'p-datepicker',
token: DatePicker,
},
]),
], usesInheritance: true, ngImport: i0, template: "@if (data(); as data) {\r\n <p-date-picker\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-datepicker',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onClose)=\"updateControl()\"\r\n ></p-date-picker>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i1$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: PropsBindingDirective, selector: "[propsBinding]", inputs: ["propsBinding"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: UiPrimengDateComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-primeng-date', imports: [
DatePickerModule,
FormsModule,
PropsBindingDirective,
ReactiveFormsModule,
], providers: [
providePropsBinding([
{
key: 'p-datepicker',
token: DatePicker,
},
]),
], template: "@if (data(); as data) {\r\n <p-date-picker\r\n [formControl]=\"control\"\r\n [propsBinding]=\"[\r\n {\r\n key: 'p-datepicker',\r\n props: data.props,\r\n },\r\n ]\"\r\n (onClose)=\"updateControl()\"\r\n ></p-date-picker>\r\n}\r\n" }]
}] });
const UI_PRIMENG_COMPONENTS = {
checkbox: UiPrimengCheckboxComponent,
date: UiPrimengDateComponent,
password: UiPrimengInputComponent,
number: UiPrimengInputComponent,
email: UiPrimengInputComponent,
radio: UiPrimengRadioComponent,
range: UiPrimengRangeComponent,
select: UiPrimengSelectComponent,
switch: UiPrimengSwitchComponent,
text: UiPrimengInputComponent,
textMask: UiPrimengInputMaskComponent,
textarea: UiPrimengTextareaComponent,
};
/**
* Generated bundle index. Do not edit.
*/
export { UI_PRIMENG_COMPONENTS };
//# sourceMappingURL=ng-dynamic-json-form-ui-primeng.mjs.map