ngx-form-lib
Version:
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.
814 lines • 75.8 kB
JavaScript
import { __decorate } from 'tslib';
import * as i0 from '@angular/core';
import { Injectable, Component, Input as Input$1, Pipe, ChangeDetectionStrategy, ViewContainerRef, ViewChild, EventEmitter, ViewEncapsulation, Output, NgModule } from '@angular/core';
import { BehaviorSubject, Subscription, Subject, takeUntil } from 'rxjs';
import * as i3$2 from '@angular/forms';
import { UntypedFormControl, UntypedFormGroup, UntypedFormArray, Validators, ReactiveFormsModule } from '@angular/forms';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i3$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i3$3 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import * as i4 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i5 from '@angular/material/core';
import * as i4$1 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i3$4 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
function AutoUnsubscribe() {
return function (constructor) {
const ngDestroy = constructor.prototype.ngOnDestroy;
constructor.prototype.ngOnDestroy = function () {
for (const prop in this) {
const property = this[prop];
if (typeof property.subscribe === 'function') {
property.unsubscribe();
}
}
ngDestroy.apply();
};
};
}
var ValidationTypeEnum;
(function (ValidationTypeEnum) {
ValidationTypeEnum["Email"] = "email";
ValidationTypeEnum["Required"] = "required";
ValidationTypeEnum["Min"] = "min";
ValidationTypeEnum["Max"] = "max";
ValidationTypeEnum["MinLength"] = "minlength";
ValidationTypeEnum["MaxLength"] = "maxlength";
})(ValidationTypeEnum || (ValidationTypeEnum = {}));
class FormsService {
initForm(sections) {
const list = [];
sections.forEach((sectionItem) => {
const group = {};
sectionItem.fields.forEach((config) => {
group[config.name] = new UntypedFormControl({ value: config.value, disabled: config.facets?.disabled }, config.validators ? this.createValidations(config.validators) : null);
});
list.push(new UntypedFormGroup(group));
});
return new UntypedFormGroup({ sections: new UntypedFormArray(list) });
}
createValidations(validators) {
if (!validators) {
return null;
}
const validatorsList = [];
for (const validationItem of validators) {
switch (validationItem.type) {
case ValidationTypeEnum.Min: {
validatorsList.push(Validators.min(validationItem.value));
break;
}
case ValidationTypeEnum.Max: {
validatorsList.push(Validators.max(validationItem.value));
break;
}
case ValidationTypeEnum.MinLength: {
validatorsList.push(Validators.minLength(validationItem.value));
break;
}
case ValidationTypeEnum.MaxLength: {
validatorsList.push(Validators.maxLength(validationItem.value));
break;
}
case ValidationTypeEnum.Required: {
validatorsList.push(Validators.required);
break;
}
case ValidationTypeEnum.Email: {
validatorsList.push(Validators.email);
break;
}
default: {
return null;
}
}
}
return validatorsList;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
class DependenciesService {
constructor() {
this._hiddenFields = new BehaviorSubject({});
}
setDependenciesFields(group, config, formValue) {
this.setFieldPropertiesToDefault(group, config);
config.facets.dependencies?.forEach((dependency) => {
if (dependency.value === formValue[dependency.fieldPath]) {
switch (dependency.type) {
case 'value-change':
this.setDependentValue(group, dependency, config.name);
break;
case 'disabled':
this.disableDependentField(group, dependency, config.name);
break;
case 'hidden':
this.hideDependentField(config.name, dependency);
}
}
});
}
getHiddenFields() {
return this._hiddenFields.asObservable();
}
setFieldPropertiesToDefault(group, config) {
if (config.facets.disabled === true) {
group.get(config.name)?.disable({ emitEvent: false });
}
else if (config.facets.disabled === false) {
group.get(config.name)?.enable({ emitEvent: false });
}
if (config.facets.hidden === true || config.facets.hidden === false) {
this.hideDependentField(config.name, {}, config.facets.hidden);
}
}
disableDependentField(group, dependency, controlName) {
if (dependency.setDependentValueTo === true ||
dependency.setDependentValueTo === 'true') {
group.get(controlName)?.disable({ emitEvent: false });
}
else if (dependency.setDependentValueTo === false ||
dependency.setDependentValueTo === 'false') {
group.get(controlName)?.enable({ emitEvent: false });
}
}
setDependentValue(group, dependency, controlName) {
group
.get(controlName)
?.setValue(dependency.setDependentValueTo, { emitEvent: false });
}
hideDependentField(controlName, dependency, hiddenProperty = false) {
const hiddenFields = this._hiddenFields.getValue();
hiddenFields[controlName] = dependency.setDependentValueTo || hiddenProperty;
this._hiddenFields.next(hiddenFields);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependenciesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependenciesService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DependenciesService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}] });
let BaseComponent = class BaseComponent {
constructor(dependenciesService) {
this.dependenciesService = dependenciesService;
this.config = null;
this.group = null;
this.parentConfig = null;
this.subscription = new Subscription();
}
ngOnInit() {
this.setupDependenciesControls();
}
setupDependenciesControls() {
if (this.config?.facets.hidden) {
this.dependenciesService.hideDependentField(this.config.name, {}, this.config.facets.hidden);
}
if (this.config?.facets.dependencies) {
this.group?.valueChanges.subscribe((formValue) => {
this.config &&
this.group &&
this.dependenciesService.setDependenciesFields(this.group, this.config, formValue);
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseComponent, deps: [{ token: DependenciesService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BaseComponent, selector: "ng-component", inputs: { config: "config", group: "group", parentConfig: "parentConfig" }, ngImport: i0, template: '', isInline: true }); }
};
BaseComponent = __decorate([
AutoUnsubscribe()
], BaseComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseComponent, decorators: [{
type: Component,
args: [{
template: '',
}]
}], ctorParameters: () => [{ type: DependenciesService }], propDecorators: { config: [{
type: Input$1
}], group: [{
type: Input$1
}], parentConfig: [{
type: Input$1
}] } });
var ButtonAttributeEnum;
(function (ButtonAttributeEnum) {
ButtonAttributeEnum["MatButton"] = "mat-button";
ButtonAttributeEnum["MatRaisedButton"] = "mat-raised-button";
ButtonAttributeEnum["MatFlatButton"] = "mat-flat-button";
ButtonAttributeEnum["MatIconButton"] = "mat-icon-button";
ButtonAttributeEnum["MatStrokedButton"] = "mat-stroked-button";
ButtonAttributeEnum["MatFab"] = "mat-fab";
ButtonAttributeEnum["MatMiniFab"] = "mat-mini-fab";
// Material 3 variants
ButtonAttributeEnum["MatFilledButton"] = "mat-fill";
ButtonAttributeEnum["MatOutlinedButton"] = "mat-outline";
ButtonAttributeEnum["MatTextButton"] = "mat-text";
ButtonAttributeEnum["MatElevatedButton"] = "mat-elevated";
ButtonAttributeEnum["MatTonalButton"] = "mat-tonal";
})(ButtonAttributeEnum || (ButtonAttributeEnum = {}));
class SetParentConfigPipe {
transform(parent, child, field) {
if (!parent) {
return '';
}
return child[field]
? child[field]
: parent[field];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigPipe, name: "setParentConfig" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigPipe, decorators: [{
type: Pipe,
args: [{
name: 'setParentConfig',
}]
}] });
class ButtonComponent extends BaseComponent {
constructor() {
super(...arguments);
this.config = null;
this.ButtonAttribute = ButtonAttributeEnum;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonComponent, selector: "ngf-button", usesInheritance: true, ngImport: i0, template: "@if (config) {\r\n<div class=\"ngf-wrapper ngf-button-wrapper\">\r\n <button\r\n mat-button\r\n [ngClass]=\"{\r\n 'mat-button': config.attribute === ButtonAttribute.MatButton,\r\n 'mat-flat-button': config.attribute === ButtonAttribute.MatFlatButton,\r\n 'mat-raised-button': config.attribute === ButtonAttribute.MatRaisedButton,\r\n 'mat-stroked-button':\r\n config.attribute === ButtonAttribute.MatStrokedButton,\r\n 'mat-icon-button': config.attribute === ButtonAttribute.MatIconButton,\r\n 'mat-fab': config.attribute === ButtonAttribute.MatFab,\r\n 'mat-mini-fab': config.attribute === ButtonAttribute.MatMiniFab,\r\n 'mat-fill': config.attribute === ButtonAttribute.MatFilledButton,\r\n 'mat-outline': config.attribute === ButtonAttribute.MatOutlinedButton,\r\n 'mat-text': config.attribute === ButtonAttribute.MatTextButton,\r\n 'mat-elevated': config.attribute === ButtonAttribute.MatElevatedButton,\r\n 'mat-tonal': config.attribute === ButtonAttribute.MatTonalButton\r\n }\"\r\n [type]=\"config.subType\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.attribute === ButtonAttribute.MatIconButton || config.attribute\r\n === ButtonAttribute.MatFab || config.attribute ===\r\n ButtonAttribute.MatMiniFab) {\r\n <mat-icon>\r\n {{ config.label }}\r\n </mat-icon>\r\n } @else {\r\n {{ config.label }}\r\n }\r\n </button>\r\n</div>\r\n}\r\n", styles: [".ngf-button-wrapper button{width:100%;border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.ngf-button-wrapper button.mat-fill{background-color:var(--mdc-filled-button-container-color);color:var(--mdc-filled-button-label-text-color)}.ngf-button-wrapper button.mat-outline{border:1px solid var(--mdc-outlined-button-outline-color);color:var(--mdc-outlined-button-label-text-color)}.ngf-button-wrapper button.mat-text{color:var(--mdc-text-button-label-text-color)}.ngf-button-wrapper button.mat-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-button-wrapper button.mat-tonal{background-color:var(--mdc-filled-tonal-button-container-color);color:var(--mdc-filled-tonal-button-label-text-color)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ngf-button', template: "@if (config) {\r\n<div class=\"ngf-wrapper ngf-button-wrapper\">\r\n <button\r\n mat-button\r\n [ngClass]=\"{\r\n 'mat-button': config.attribute === ButtonAttribute.MatButton,\r\n 'mat-flat-button': config.attribute === ButtonAttribute.MatFlatButton,\r\n 'mat-raised-button': config.attribute === ButtonAttribute.MatRaisedButton,\r\n 'mat-stroked-button':\r\n config.attribute === ButtonAttribute.MatStrokedButton,\r\n 'mat-icon-button': config.attribute === ButtonAttribute.MatIconButton,\r\n 'mat-fab': config.attribute === ButtonAttribute.MatFab,\r\n 'mat-mini-fab': config.attribute === ButtonAttribute.MatMiniFab,\r\n 'mat-fill': config.attribute === ButtonAttribute.MatFilledButton,\r\n 'mat-outline': config.attribute === ButtonAttribute.MatOutlinedButton,\r\n 'mat-text': config.attribute === ButtonAttribute.MatTextButton,\r\n 'mat-elevated': config.attribute === ButtonAttribute.MatElevatedButton,\r\n 'mat-tonal': config.attribute === ButtonAttribute.MatTonalButton\r\n }\"\r\n [type]=\"config.subType\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.attribute === ButtonAttribute.MatIconButton || config.attribute\r\n === ButtonAttribute.MatFab || config.attribute ===\r\n ButtonAttribute.MatMiniFab) {\r\n <mat-icon>\r\n {{ config.label }}\r\n </mat-icon>\r\n } @else {\r\n {{ config.label }}\r\n }\r\n </button>\r\n</div>\r\n}\r\n", styles: [".ngf-button-wrapper button{width:100%;border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.ngf-button-wrapper button.mat-fill{background-color:var(--mdc-filled-button-container-color);color:var(--mdc-filled-button-label-text-color)}.ngf-button-wrapper button.mat-outline{border:1px solid var(--mdc-outlined-button-outline-color);color:var(--mdc-outlined-button-label-text-color)}.ngf-button-wrapper button.mat-text{color:var(--mdc-text-button-label-text-color)}.ngf-button-wrapper button.mat-elevated{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-button-wrapper button.mat-tonal{background-color:var(--mdc-filled-tonal-button-container-color);color:var(--mdc-filled-tonal-button-label-text-color)}\n"] }]
}] });
class CheckboxComponent extends BaseComponent {
constructor() {
super(...arguments);
this.config = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CheckboxComponent, selector: "ngf-checkbox", usesInheritance: true, ngImport: i0, template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-checkbox-wrapper\">\r\n <mat-checkbox\r\n class=\"ngf-checkbox\"\r\n [formControlName]=\"config.name\"\r\n [indeterminate]=\"config.indeterminate\"\r\n [labelPosition]=\"config.labelPosition\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n }\r\n </mat-checkbox>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
type: Component,
args: [{ selector: 'ngf-checkbox', template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-checkbox-wrapper\">\r\n <mat-checkbox\r\n class=\"ngf-checkbox\"\r\n [formControlName]=\"config.name\"\r\n [indeterminate]=\"config.indeterminate\"\r\n [labelPosition]=\"config.labelPosition\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n }\r\n </mat-checkbox>\r\n</div>\r\n}\r\n" }]
}] });
var PrefixSuffixEnum;
(function (PrefixSuffixEnum) {
PrefixSuffixEnum["String"] = "string";
PrefixSuffixEnum["Icon"] = "icon";
})(PrefixSuffixEnum || (PrefixSuffixEnum = {}));
class PrefixSuffixComponent {
constructor() {
this.config = {};
this.PrefixSuffixEnum = PrefixSuffixEnum;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PrefixSuffixComponent, selector: "ngf-prefix-suffix", inputs: { config: "config" }, ngImport: i0, template: "@if (config.type === PrefixSuffixEnum.Icon) {\r\n<mat-icon>{{ config.value }}</mat-icon>\r\n} @else {\r\n<span>{{ config.value }}</span>\r\n}\r\n", dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixComponent, decorators: [{
type: Component,
args: [{ selector: 'ngf-prefix-suffix', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config.type === PrefixSuffixEnum.Icon) {\r\n<mat-icon>{{ config.value }}</mat-icon>\r\n} @else {\r\n<span>{{ config.value }}</span>\r\n}\r\n" }]
}], propDecorators: { config: [{
type: Input$1
}] } });
class DropdownComponent extends BaseComponent {
constructor() {
super(...arguments);
this.config = null;
}
/**
* Splitting ',' separated value to an array of values and setting to multiple control
* @property {string} value Multiple comma seperated values
*/
ngOnInit() {
super.ngOnInit();
if (this.config?.multiple) {
this.group
?.get(this.config.name)
?.setValue(this.config.value?.split(','));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DropdownComponent, selector: "lib-dropdown", usesInheritance: true, ngImport: i0, template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-dropdown-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n } @if (!config.multiple) {\r\n <mat-select [formControlName]=\"config.name\">\r\n @for (option of config.options; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n } @else {\r\n <mat-select [formControlName]=\"config.name\" multiple>\r\n <!-- <mat-select-trigger>\r\n TODO: Added select trigger for multiple and custom value\r\n </mat-select-trigger> -->\r\n @for (option of config.options; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n } @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error>\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n {{ validationItem.message }}\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: PrefixSuffixComponent, selector: "ngf-prefix-suffix", inputs: ["config"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-dropdown', template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-dropdown-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n } @if (!config.multiple) {\r\n <mat-select [formControlName]=\"config.name\">\r\n @for (option of config.options; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n } @else {\r\n <mat-select [formControlName]=\"config.name\" multiple>\r\n <!-- <mat-select-trigger>\r\n TODO: Added select trigger for multiple and custom value\r\n </mat-select-trigger> -->\r\n @for (option of config.options; track option.value) {\r\n <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n }\r\n </mat-select>\r\n } @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error>\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n {{ validationItem.message }}\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n" }]
}] });
class InputComponent extends BaseComponent {
constructor() {
super(...arguments);
this.config = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: InputComponent, selector: "ngf-input", usesInheritance: true, ngImport: i0, template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-input-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n }\r\n <input\r\n matInput\r\n [formControlName]=\"config.name\"\r\n [id]=\"config.name\"\r\n [type]=\"config.subType\"\r\n />\r\n @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error class=\"ngf-field-error\">\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n <span>{{ validationItem.message }}</span>\r\n @if (validationItem.showDynamicError &&\r\n this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n as actualLength) {\r\n <span>\r\n {{ actualLength }}/\r\n {{\r\n this.group.controls[config.name].getError(validationItem.type)\r\n ?.requiredLength\r\n }}\r\n </span>\r\n } }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: PrefixSuffixComponent, selector: "ngf-prefix-suffix", inputs: ["config"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$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"], exportAs: ["matInput"] }, { kind: "pipe", type: SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputComponent, decorators: [{
type: Component,
args: [{ selector: 'ngf-input', template: "@if (group && config) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-input-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n >\r\n @if (config.label) {\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n }\r\n <input\r\n matInput\r\n [formControlName]=\"config.name\"\r\n [id]=\"config.name\"\r\n [type]=\"config.subType\"\r\n />\r\n @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error class=\"ngf-field-error\">\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n <span>{{ validationItem.message }}</span>\r\n @if (validationItem.showDynamicError &&\r\n this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n as actualLength) {\r\n <span>\r\n {{ actualLength }}/\r\n {{\r\n this.group.controls[config.name].getError(validationItem.type)\r\n ?.requiredLength\r\n }}\r\n </span>\r\n } }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n" }]
}] });
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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$4.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: 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"] }]
}] });
class TextareaComponent extends BaseComponent {
constructor() {
super(...arguments);
this.config = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextareaComponent, selector: "ngf-textarea", usesInheritance: true, ngImport: i0, template: "@if (config && group) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-textarea-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n <textarea\r\n matInput\r\n class=\"form-control\"\r\n [formControlName]=\"config.name\"\r\n [id]=\"config.name\"\r\n [placeholder]=\"config.placeholder\"\r\n [rows]=\"config.rows\"\r\n ></textarea>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n }\r\n <!-- TODO: Try moving mat-error to a component and implement dynamic error message -->\r\n @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error class=\"ngf-field-error\">\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n <span>{{ validationItem.message }}</span>\r\n @if (validationItem.showDynamicError &&\r\n this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n as actualLength) {\r\n <span>\r\n {{ actualLength }}/\r\n {{\r\n this.group.controls[config.name].getError(validationItem.type)\r\n ?.requiredLength\r\n }}\r\n </span>\r\n } }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n", dependencies: [{ kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: PrefixSuffixComponent, selector: "ngf-prefix-suffix", inputs: ["config"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4$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"], exportAs: ["matInput"] }, { kind: "pipe", type: SetParentConfigPipe, name: "setParentConfig" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaComponent, decorators: [{
type: Component,
args: [{ selector: 'ngf-textarea', template: "@if (config && group) {\r\n<div [formGroup]=\"group\" class=\"ngf-wrapper ngf-textarea-wrapper\">\r\n <mat-form-field\r\n class=\"ngf-form-field\"\r\n [appearance]=\"parentConfig | setParentConfig : config : 'appearance'\"\r\n [color]=\"parentConfig | setParentConfig : config : 'color'\"\r\n >\r\n <mat-label [attr.for]=\"config.name\">{{ config.label }}</mat-label>\r\n <textarea\r\n matInput\r\n class=\"form-control\"\r\n [formControlName]=\"config.name\"\r\n [id]=\"config.name\"\r\n [placeholder]=\"config.placeholder\"\r\n [rows]=\"config.rows\"\r\n ></textarea>\r\n @if (config.hint) {\r\n <mat-hint>{{ config.hint }}</mat-hint>\r\n } @if (config.prefix) {\r\n <span matPrefix>\r\n <ngf-prefix-suffix [config]=\"config.prefix\"></ngf-prefix-suffix>\r\n </span>\r\n } @if (config.suffix) {\r\n <span matSuffix>\r\n <ngf-prefix-suffix [config]=\"config.suffix\"></ngf-prefix-suffix>\r\n </span>\r\n }\r\n <!-- TODO: Try moving mat-error to a component and implement dynamic error message -->\r\n @for (validationItem of config.validators; track validationItem.type) {\r\n <mat-error class=\"ngf-field-error\">\r\n @if (group.controls[config.name].hasError(validationItem.type) &&\r\n (group.controls[config.name].dirty ||\r\n group.controls[config.name].touched)) {\r\n <span>{{ validationItem.message }}</span>\r\n @if (validationItem.showDynamicError &&\r\n this.group.controls[config.name].getError(validationItem.type)?.actualLength;\r\n as actualLength) {\r\n <span>\r\n {{ actualLength }}/\r\n {{\r\n this.group.controls[config.name].getError(validationItem.type)\r\n ?.requiredLength\r\n }}\r\n </span>\r\n } }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n}\r\n" }]
}] });
const componentMapping = {
button: ButtonComponent,
checkbox: CheckboxComponent,
dropdown: DropdownComponent,
input: InputComponent,
radio: RadioComponent,
textarea: TextareaComponent,
};
class ContainerComponent {
constructor() {
this.config = {};
this.group = null;
this.parentConfig = null;
}
ngOnInit() {
this.loadDynamicFields();
}
loadDynamicFields() {
if (this.dynamicComponent && this.config?.type) {
const componentRef = this.dynamicComponent.createComponent(componentMapping[this.config.type]);
componentRef.instance.config = this.config;
componentRef.instance.group = this.group;
componentRef.instance.parentConfig = this.parentConfig;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContainerComponent, selector: "ngf-container", inputs: { config: "config", group: "group", parentConfig: "parentConfig" }, viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["dynamicComponent"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-template #dynamicComponent></ng-template>`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerComponent, decorators: [{
type: Component,
args: [{
selector: 'ngf-container',
template: `<ng-template #dynamicComponent></ng-template>`,
}]
}], propDecorators: { config: [{
type: Input$1
}], group: [{
type: Input$1
}], parentConfig: [{
type: Input$1
}], dynamicComponent: [{
type: ViewChild,
args: ['dynamicComponent', { static: true, read: ViewContainerRef }]
}] } });
class SortByOrderPipe {
transform(fields, ...args) {
return fields.sort((a, b) => a.order - b.order);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderPipe, name: "sortByOrder" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderPipe, decorators: [{
type: Pipe,
args: [{
name: 'sortByOrder',
}]
}] });
let FormComponent = class FormComponent {
set config(configObj) {
this._config = configObj;
}
get config() {
return this._config;
}
constructor(formService, dependenciesService, cdr) {
this.formService = formService;
this.dependenciesService = dependenciesService;
this.cdr = cdr;
this._config = {};
this.valueChanges = new EventEmitter();
this.formSubmit = new EventEmitter();
this.form = {};
this.hiddenFields$ = this.dependenciesService.getHiddenFields();
this.destroy$ = new Subject();
this.hiddenFields$ = this.dependenciesService.getHiddenFields();
}
ngAfterContentChecked() {
this.cdr.detectChanges();
}
ngOnInit() {
this.form.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.valueChanges.emit(this.form.value);
});
}
ngOnChanges(changes) {
if (changes['config'].currentValue) {
this.form = this.formService.initForm(changes['config'].currentValue.sections);
}
}
getFormControl(formGroupName, index) {
return this.form.get(`${formGroupName}.${index}`);
}
onSubmit() {
this.formSubmit.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [{ token: FormsService }, { token: DependenciesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormComponent, selector: "ngx-form-lib", inputs: { config: "config" }, outputs: { valueChanges: "valueChanges", formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngf-form-container\">\r\n <h3 class=\"ngf-h3 ngf-form-header\">{{ config.header }}</h3>\r\n @if (form) {\r\n <form class=\"ngf-form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <ng-container formArrayName=\"sections\">\r\n @for (sectionItem of config.sections; track sectionItem; let i = $index) {\r\n <section class=\"ngf-section-wrapper\" [formGroupName]=\"i\">\r\n @if (sectionItem.sectionHeader) {\r\n <h4 class=\"ngf-h4\">{{ sectionItem.sectionHeader }}</h4>\r\n }\r\n <div class=\"ngf-section\">\r\n @for (configItem of sectionItem.fields | sortByOrder; track\r\n configItem.name) {\r\n <div\r\n [hidden]=\"(hiddenFields$ | async)[configItem.name] || false\"\r\n class=\"ngf-field-container\"\r\n [ngClass]=\"configItem.classes\"\r\n >\r\n <ngf-container\r\n [parentConfig]=\"config.parentConfig\"\r\n [config]=\"configItem\"\r\n [group]=\"getFormControl('sections', i)\"\r\n >\r\n </ngf-container>\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n </ng-container>\r\n </form>\r\n }\r\n</div>\r\n", styles: [".ngf-col-12{width:100%}.ngf-col-10{width:83.33%}.ngf-col-8{width:66.67%}.ngf-col-6{width:50%}.ngf-col-4{width:33.33%}.ngf-col-3{width:25%}.ngf-col-2{width:16.67%}.ngf-col-1{width:8.33%}.ngf-fit-content{min-width:fit-content}.ngf-h1,.ngf-h2,.ngf-h3,.ngf-h4,.ngf-h5,.ngf-h6{font-weight:500}.ngf-form-field.mat-form-field{width:100%}.ngf-form-field.mat-form-field .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngf-form-field.mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px}.ngf-form-field.mat-form-field .mat-mdc-form-field-subscript-wrapper{font-size:12px}.ngf-field-error{display:flex;justify-content:space-between;font-size:12px;color:var(--mdc-theme-error)}.mat-mdc-form-field .mat-mdc-form-field-focus-overlay{background-color:transparent}.mat-mdc-form-field .mat-mdc-text-field-wrapper{border-radius:8px}.mat-mdc-button,.mat-mdc-raised-button,.mat-mdc-outlined-button,.mat-mdc-unelevated-button{border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.mat-mdc-select .mat-mdc-select-trigger{border-radius:8px}.mat-mdc-checkbox .mdc-checkbox{border-radius:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__background{border-radius:50%}.ngf-form-container{color:#4a4a4a;background-color:#f0f0f0;border-radius:12px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-form-container .ngf-form-header{text-transform:uppercase;padding:25px 15px 20px;color:#e6e6e6;background-color:#3f51b5;border-radius:5px 5px 0 0;margin:0}.ngf-form-container .ngf-form{padding:10px}.ngf-form-container .ngf-form .ngf-section-wrapper{background-color:#fff;border-radius:8px}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-h4{padding:20px 15px;border-bottom:1px solid #e6e6e6}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-section{width:100%;display:flex;flex-wrap:wrap;margin:10px 0}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-section .ngf-field-container{padding:10px 15px;box-sizing:border-box}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ContainerComponent, selector: "ngf-container", inputs: ["config", "group", "parentConfig"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: SortByOrderPipe, name: "sortByOrder" }], encapsulation: i0.ViewEncapsulation.None }); }
};
FormComponent = __decorate([
AutoUnsubscribe()
], FormComponent);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-form-lib', encapsulation: ViewEncapsulation.None, template: "<div class=\"ngf-form-container\">\r\n <h3 class=\"ngf-h3 ngf-form-header\">{{ config.header }}</h3>\r\n @if (form) {\r\n <form class=\"ngf-form\" [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\r\n <ng-container formArrayName=\"sections\">\r\n @for (sectionItem of config.sections; track sectionItem; let i = $index) {\r\n <section class=\"ngf-section-wrapper\" [formGroupName]=\"i\">\r\n @if (sectionItem.sectionHeader) {\r\n <h4 class=\"ngf-h4\">{{ sectionItem.sectionHeader }}</h4>\r\n }\r\n <div class=\"ngf-section\">\r\n @for (configItem of sectionItem.fields | sortByOrder; track\r\n configItem.name) {\r\n <div\r\n [hidden]=\"(hiddenFields$ | async)[configItem.name] || false\"\r\n class=\"ngf-field-container\"\r\n [ngClass]=\"configItem.classes\"\r\n >\r\n <ngf-container\r\n [parentConfig]=\"config.parentConfig\"\r\n [config]=\"configItem\"\r\n [group]=\"getFormControl('sections', i)\"\r\n >\r\n </ngf-container>\r\n </div>\r\n }\r\n </div>\r\n </section>\r\n }\r\n </ng-container>\r\n </form>\r\n }\r\n</div>\r\n", styles: [".ngf-col-12{width:100%}.ngf-col-10{width:83.33%}.ngf-col-8{width:66.67%}.ngf-col-6{width:50%}.ngf-col-4{width:33.33%}.ngf-col-3{width:25%}.ngf-col-2{width:16.67%}.ngf-col-1{width:8.33%}.ngf-fit-content{min-width:fit-content}.ngf-h1,.ngf-h2,.ngf-h3,.ngf-h4,.ngf-h5,.ngf-h6{font-weight:500}.ngf-form-field.mat-form-field{width:100%}.ngf-form-field.mat-form-field .mat-mdc-form-field-focus-overlay{background-color:transparent}.ngf-form-field.mat-form-field .mat-mdc-text-field-wrapper{border-radius:8px}.ngf-form-field.mat-form-field .mat-mdc-form-field-subscript-wrapper{font-size:12px}.ngf-field-error{display:flex;justify-content:space-between;font-size:12px;color:var(--mdc-theme-error)}.mat-mdc-form-field .mat-mdc-form-field-focus-overlay{background-color:transparent}.mat-mdc-form-field .mat-mdc-text-field-wrapper{border-radius:8px}.mat-mdc-button,.mat-mdc-raised-button,.mat-mdc-outlined-button,.mat-mdc-unelevated-button{border-radius:20px;font-weight:500;text-transform:none;transition:all .2s ease-in-out}.mat-mdc-select .mat-mdc-select-trigger{border-radius:8px}.mat-mdc-checkbox .mdc-checkbox{border-radius:4px}.mat-mdc-radio-button .mdc-radio .mdc-radio__background{border-radius:50%}.ngf-form-container{color:#4a4a4a;background-color:#f0f0f0;border-radius:12px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.ngf-form-container .ngf-form-header{text-transform:uppercase;padding:25px 15px 20px;color:#e6e6e6;background-color:#3f51b5;border-radius:5px 5px 0 0;margin:0}.ngf-form-container .ngf-form{padding:10px}.ngf-form-container .ngf-form .ngf-section-wrapper{background-color:#fff;border-radius:8px}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-h4{padding:20px 15px;border-bottom:1px solid #e6e6e6}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-section{width:100%;display:flex;flex-wrap:wrap;margin:10px 0}.ngf-form-container .ngf-form .ngf-section-wrapper .ngf-section .ngf-field-container{padding:10px 15px;box-sizing:border-box}\n"] }]
}], ctorParameters: () => [{ type: FormsService }, { type: DependenciesService }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
type: Input$1
}], valueChanges: [{
type: Output
}], formSubmit: [{
type: Output
}] } });
class ContainerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ContainerModule, declarations: [ContainerComponent], imports: [CommonModule], exports: [ContainerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContainerModule, decorators: [{
type: NgModule,
args: [{
declarations: [ContainerComponent],
imports: [CommonModule],
exports: [ContainerComponent],
}]
}] });
class SortByOrderModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderModule, declarations: [SortByOrderPipe], imports: [CommonModule], exports: [SortByOrderPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SortByOrderModule, decorators: [{
type: NgModule,
args: [{
declarations: [SortByOrderPipe],
imports: [CommonModule],
exports: [SortByOrderPipe],
}]
}] });
class FormLibModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormLibModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FormLibModule, declarations: [FormComponent], imports: [CommonModule,
ContainerModule,
ReactiveFormsModule,
SortByOrderModule,
MatSelectModule], exports: [FormComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormLibModule, imports: [CommonModule,
ContainerModule,
ReactiveFormsModule,
SortByOrderModule,
MatSelectModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormLibModule, decorators: [{
type: NgModule,
args: [{
declarations: [FormComponent],
imports: [
CommonModule,
ContainerModule,
ReactiveFormsModule,
SortByOrderModule,
MatSelectModule,
],
exports: [FormComponent],
}]
}] });
class PrefixSuffixModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixModule, declarations: [PrefixSuffixComponent], imports: [CommonModule, MatIconModule], exports: [PrefixSuffixComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixModule, imports: [CommonModule, MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrefixSuffixModule, decorators: [{
type: NgModule,
args: [{
declarations: [PrefixSuffixComponent],
imports: [CommonModule, MatIconModule],
exports: [PrefixSuffixComponent],
}]
}] });
class SetParentConfigModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigModule, declarations: [SetParentConfigPipe], imports: [CommonModule], exports: [SetParentConfigPipe] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SetParentConfigModule, decorators: [{
type: NgModule,
args: [{
declarations: [SetParentConfigPipe],
imports: [CommonModule],
exports: [SetParentConfigPipe]
}]
}] });
const MODULES = [
MatFormFieldModule,
PrefixSuffixModule,
ReactiveFormsModule,
SetParentConfigModule,
];
class BaseModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: BaseModule, declarations: [BaseComponent], imports: [CommonModule, MatFormFieldModule,
PrefixSuffixModule,
ReactiveFormsModule,
SetParentConfigModule], exports: [BaseComponent, MatFormFieldModule,
PrefixSuffixModule,
ReactiveFormsModule,
SetParentConfigModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseModule, imports: [CommonModule, MODULES, MatFormFieldModule,
PrefixSuffixModule,
ReactiveFormsModule,
SetParentConfigModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BaseModule, decorators: [{
type: NgModule,
args: [{
declarations: [BaseComponent],
imports: [CommonModule, ...MODULES],
exports: [BaseComponent, ...MODULES],
}]
}] });
class ButtonModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [BaseModule, CommonModule, MatButtonModule, MatIconModule], exports: [ButtonComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, imports: [BaseModule, CommonModule, MatButtonModule, MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, decorators: [{
type: NgModule,
args: [{
declarations: [ButtonComponent],
imports: [BaseModule, CommonModule, MatButtonModule, MatIconModule],
exports: [ButtonComponent],
}]
}] });
var FieldTypeEnum;
(function (FieldTypeEnum) {
FieldTypeEnum["Button"] = "button";
FieldTypeEnum["Checkbox"] = "checkbox";
FieldTypeEnum["Dropdown"] = "dropdown";
FieldTypeEnum["Input"] = "input";
FieldTypeEnum["Radio"] = "radio";
FieldTypeEnum["Textarea"] = "textarea";
})(FieldTypeEnum || (FieldTypeEnum = {}));
class Field {
constructor(params = { name: '' }) {
this.appearance = params.appearance;
this.classes = params.classes ?? [];
this.color = params.color;
this.facets = params.facets ?? { disabled: false, hidden: false };
this.hint = params.hint ?? '';
this.label = params.label ?? '';
this.method = params.method ?? function () { };
this.name = params.name ?? '';
this.order = params.order ?? 1;
this.placeholder = params.placeholder ?? '';
this.type = params.type ?? FieldTypeEnum.Input;
this.value = params.value;
this.validators = params.validators ?? [];
}
}
class Button extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Button;
this.subType = params.subType ?? 'button';
this.attribute = params.attribute ?? 'mat-button';
}
}
class CheckboxModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [BaseModule, CommonModule, MatCheckboxModule], exports: [CheckboxComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, imports: [BaseModule, CommonModule, MatCheckboxModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, decorators: [{
type: NgModule,
args: [{
declarations: [CheckboxComponent],
imports: [BaseModule, CommonModule, MatCheckboxModule],
exports: [CheckboxComponent],
}]
}] });
class Checkbox extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Checkbox;
this.indeterminate = params.indeterminate ?? false;
this.labelPosition = params.labelPosition ?? 'after';
this.showInline = params.showInline ?? false;
}
}
var CheckboxLabelPositionEnum;
(function (CheckboxLabelPositionEnum) {
CheckboxLabelPositionEnum["Before"] = "before";
CheckboxLabelPositionEnum["After"] = "after";
})(CheckboxLabelPositionEnum || (CheckboxLabelPositionEnum = {}));
class DropdownModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: DropdownModule, declarations: [DropdownComponent], imports: [BaseModule, CommonModule, MatSelectModule, MatAutocompleteModule], exports: [DropdownComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownModule, imports: [BaseModule, CommonModule, MatSelectModule, MatAutocompleteModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownModule, decorators: [{
type: NgModule,
args: [{
declarations: [DropdownComponent],
imports: [BaseModule, CommonModule, MatSelectModule, MatAutocompleteModule],
exports: [DropdownComponent],
}]
}] });
class Dropdown extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Dropdown;
this.options = params.options ?? [];
this.prefix = params.prefix;
this.suffix = params.suffix;
this.multiple = params.multiple ?? false;
}
}
class InputModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: InputModule, declarations: [InputComponent], imports: [BaseModule, CommonModule, MatInputModule], exports: [InputComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputModule, imports: [BaseModule, CommonModule, MatInputModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputModule, decorators: [{
type: NgModule,
args: [{
declarations: [InputComponent],
imports: [BaseModule, CommonModule, MatInputModule],
exports: [InputComponent],
}]
}] });
var FieldSubTypeEnum;
(function (FieldSubTypeEnum) {
FieldSubTypeEnum["Button"] = "button";
FieldSubTypeEnum["Email"] = "email";
FieldSubTypeEnum["Number"] = "number";
FieldSubTypeEnum["Password"] = "password";
FieldSubTypeEnum["Reset"] = "reset";
FieldSubTypeEnum["Submit"] = "submit";
FieldSubTypeEnum["Text"] = "text";
})(FieldSubTypeEnum || (FieldSubTypeEnum = {}));
class Input extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Input;
this.subType = params.subType ?? 'text';
this.prefix = params.prefix;
this.suffix = params.suffix;
}
}
class RadioModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, declarations: [RadioComponent], imports: [BaseModule, CommonModule, MatRadioModule], exports: [RadioComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, imports: [BaseModule, CommonModule, MatRadioModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioModule, decorators: [{
type: NgModule,
args: [{
declarations: [RadioComponent],
imports: [BaseModule, CommonModule, MatRadioModule],
exports: [RadioComponent],
}]
}] });
class Radio extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Radio;
this.showInline = params.showInline ?? false;
this.options = params.options ?? [];
}
}
class TextareaModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TextareaModule, declarations: [TextareaComponent], imports: [BaseModule, CommonModule, MatInputModule], exports: [TextareaComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaModule, imports: [BaseModule, CommonModule, MatInputModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaModule, decorators: [{
type: NgModule,
args: [{
declarations: [TextareaComponent],
imports: [BaseModule, CommonModule, MatInputModule],
exports: [TextareaComponent],
}]
}] });
class Textarea extends Field {
constructor(params) {
super(params.field);
this.type = FieldTypeEnum.Textarea;
this.prefix = params.prefix;
this.suffix = params.suffix;
this.rows = params.rows ?? 5;
}
}
var AppearanceEnum;
(function (AppearanceEnum) {
AppearanceEnum["Standard"] = "standard";
AppearanceEnum["Fill"] = "fill";
AppearanceEnum["Outline"] = "outline";
AppearanceEnum["Lagancy"] = "legacy";
})(AppearanceEnum || (AppearanceEnum = {}));
var ColorEnum;
(function (ColorEnum) {
ColorEnum["Accent"] = "accent";
ColorEnum["Basic"] = "";
ColorEnum["Primary"] = "primary";
ColorEnum["Warning"] = "warn";
})(ColorEnum || (ColorEnum = {}));
class ParentConfig {
constructor(param) {
this.appearance = param.appearance || 'standard';
this.color = param.color || 'primary';
}
}
/*
* Public API Surface of ngx-form-lib
*/
/**
* Generated bundle index. Do not edit.
*/
export { AppearanceEnum, Button, ButtonAttributeEnum, ButtonComponent, ButtonModule, Checkbox, CheckboxComponent, CheckboxLabelPositionEnum, CheckboxModule, ColorEnum, Dropdown, DropdownComponent, DropdownModule, Field, FieldSubTypeEnum, FieldTypeEnum, FormComponent, FormLibModule, FormsService, Input, InputComponent, InputModule, ParentConfig, PrefixSuffixEnum, Radio, RadioComponent, RadioModule, Textarea, TextareaComponent, TextareaModule, ValidationTypeEnum };
//# sourceMappingURL=ngx-form-lib.mjs.map