@stemy/ngx-dynamic-form 19.8.10 → 19.8.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/stemy-ngx-dynamic-form.mjs +83 -48
- package/fesm2022/stemy-ngx-dynamic-form.mjs.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +8 -2
- package/ngx-dynamic-form/components/dynamic-form/dynamic-form.component.d.ts +2 -1
- package/ngx-dynamic-form/services/dynamic-form-builder.service.d.ts +14 -13
- package/ngx-dynamic-form/utils/decorators.d.ts +3 -4
- package/ngx-dynamic-form/utils/internal.d.ts +2 -2
- package/package.json +2 -2
- package/public_api.d.ts +2 -2
|
@@ -48,10 +48,11 @@ function defineFormControl(target, propertyKey, cb) {
|
|
|
48
48
|
ReflectUtils.defineMetadata("dynamicFormField", builder, target, propertyKey);
|
|
49
49
|
ReflectUtils.defineMetadata("dynamicFormFields", fields, target);
|
|
50
50
|
}
|
|
51
|
-
function
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
};
|
|
51
|
+
function defineFormFieldSet(target, data) {
|
|
52
|
+
const fieldSets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
|
|
53
|
+
const existing = fieldSets.get(data.id) || data;
|
|
54
|
+
fieldSets.set(data.id, Object.assign({}, existing, data));
|
|
55
|
+
ReflectUtils.defineMetadata("dynamicFormFieldSets", fieldSets, target);
|
|
55
56
|
}
|
|
56
57
|
function FormInput(data) {
|
|
57
58
|
data = data || {};
|
|
@@ -83,10 +84,6 @@ function FormUpload(data) {
|
|
|
83
84
|
defineFormControl(target, key, (fb, path, options) => fb.createFormUpload(key, data, path, options));
|
|
84
85
|
};
|
|
85
86
|
}
|
|
86
|
-
function FormFile(data) {
|
|
87
|
-
console.warn(`@FormFile decorator is deprecated, use @FormUpload instead`);
|
|
88
|
-
return FormUpload(data);
|
|
89
|
-
}
|
|
90
87
|
function FormStatic(data) {
|
|
91
88
|
data = data || {};
|
|
92
89
|
return (target, key) => {
|
|
@@ -110,9 +107,15 @@ function FormArray(itemType, data) {
|
|
|
110
107
|
});
|
|
111
108
|
};
|
|
112
109
|
}
|
|
113
|
-
function
|
|
114
|
-
|
|
115
|
-
|
|
110
|
+
function FormSerializable(data) {
|
|
111
|
+
return (target, key) => {
|
|
112
|
+
defineFormControl(target, key, (fb) => fb.createFormSerializer(key, data));
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
function FormFieldSet(data) {
|
|
116
|
+
return (target) => {
|
|
117
|
+
defineFormFieldSet(target, data);
|
|
118
|
+
};
|
|
116
119
|
}
|
|
117
120
|
|
|
118
121
|
function validationMessage(errorKey) {
|
|
@@ -476,6 +479,9 @@ class ConfigForSchemaWrap {
|
|
|
476
479
|
get labelCustomizer() {
|
|
477
480
|
return this.opts.labelCustomizer;
|
|
478
481
|
}
|
|
482
|
+
get legacyLabels() {
|
|
483
|
+
return this.opts.legacyLabels;
|
|
484
|
+
}
|
|
479
485
|
get testId() {
|
|
480
486
|
return this.opts.testId;
|
|
481
487
|
}
|
|
@@ -584,9 +590,11 @@ class DynamicFormBuilderService {
|
|
|
584
590
|
this.events.languageChanged.subscribe(value => lang.next(value));
|
|
585
591
|
this.language = lang;
|
|
586
592
|
}
|
|
587
|
-
resolveFormFields(
|
|
588
|
-
const
|
|
589
|
-
const
|
|
593
|
+
resolveFormFields(type, parent, options) {
|
|
594
|
+
const target = type || { prototype: null };
|
|
595
|
+
const prototype = target.prototype || target;
|
|
596
|
+
const fields = ReflectUtils.getMetadata("dynamicFormFields", prototype) || new Set();
|
|
597
|
+
const sets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
|
|
590
598
|
const result = [];
|
|
591
599
|
for (const key of fields) {
|
|
592
600
|
const builder = ReflectUtils.getMetadata("dynamicFormField", prototype, key);
|
|
@@ -595,25 +603,25 @@ class DynamicFormBuilderService {
|
|
|
595
603
|
result.push(field);
|
|
596
604
|
}
|
|
597
605
|
}
|
|
598
|
-
return this.createFieldSets(result, parent, options);
|
|
606
|
+
return this.createFieldSets(result, parent, options, Array.from(sets.values()));
|
|
599
607
|
}
|
|
600
|
-
resolveFormGroup(key, target, data, parent = null, options
|
|
608
|
+
resolveFormGroup(key, target, data, parent = null, options) {
|
|
601
609
|
return this.createFormGroup(key, sp => this.resolveFormFields(target, sp, options), data, parent, options);
|
|
602
610
|
}
|
|
603
|
-
resolveFormArray(key, itemType, data, parent = null, options
|
|
611
|
+
resolveFormArray(key, itemType, data, parent = null, options) {
|
|
604
612
|
return this.createFormArray(key, sp => {
|
|
605
613
|
return typeof itemType === "function" ? this.resolveFormFields(itemType, sp, options) : this.createFormInput("", typeof itemType === "string" ? { type: `${itemType}` } : itemType, sp, options);
|
|
606
614
|
}, data, parent, options);
|
|
607
615
|
}
|
|
608
|
-
createFieldSets(fields, parent, options) {
|
|
616
|
+
createFieldSets(fields, parent, options, sets = []) {
|
|
609
617
|
const result = [];
|
|
610
618
|
const groups = {};
|
|
611
619
|
fields = Array.from(fields || [])
|
|
612
620
|
.sort((a, b) => a.priority - b.priority);
|
|
613
|
-
fields.forEach(
|
|
614
|
-
if (
|
|
621
|
+
fields.forEach(field => {
|
|
622
|
+
if (this.isFieldset(field)) {
|
|
615
623
|
// This field is an already existing set
|
|
616
|
-
groups[
|
|
624
|
+
groups[field.id] = field.fieldGroup;
|
|
617
625
|
}
|
|
618
626
|
});
|
|
619
627
|
for (const field of fields) {
|
|
@@ -621,6 +629,7 @@ class DynamicFormBuilderService {
|
|
|
621
629
|
// If we have a fieldset name defined, then push the property fields into a group
|
|
622
630
|
if (fsName) {
|
|
623
631
|
const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
|
|
632
|
+
const set = sets.find(s => s.id === fsName);
|
|
624
633
|
let fieldGroup = groups[id];
|
|
625
634
|
if (!fieldGroup) {
|
|
626
635
|
fieldGroup = [];
|
|
@@ -630,9 +639,10 @@ class DynamicFormBuilderService {
|
|
|
630
639
|
fieldGroup,
|
|
631
640
|
wrappers: ["form-fieldset"],
|
|
632
641
|
props: {
|
|
633
|
-
label: this.getLabel(fsName,
|
|
642
|
+
label: this.getLabel(fsName, null, parent, options, "title"),
|
|
634
643
|
hidden: false,
|
|
635
|
-
|
|
644
|
+
classes: set?.classes,
|
|
645
|
+
layout: set?.layout,
|
|
636
646
|
},
|
|
637
647
|
hooks: {},
|
|
638
648
|
expressions: {}
|
|
@@ -646,13 +656,14 @@ class DynamicFormBuilderService {
|
|
|
646
656
|
}
|
|
647
657
|
else if (field.asFieldSet && !groups[field.id]) {
|
|
648
658
|
const fsName = String(field.key);
|
|
649
|
-
const
|
|
650
|
-
field.id =
|
|
659
|
+
const set = sets.find(s => s.id === fsName);
|
|
660
|
+
field.id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
|
|
651
661
|
field.wrappers = ["form-fieldset"];
|
|
652
662
|
field.props = {
|
|
653
|
-
label: this.getLabel(fsName,
|
|
663
|
+
label: this.getLabel(fsName, null, parent, options, "title"),
|
|
654
664
|
hidden: false,
|
|
655
|
-
|
|
665
|
+
classes: set?.classes,
|
|
666
|
+
layout: set?.layout,
|
|
656
667
|
};
|
|
657
668
|
field.expressions = {};
|
|
658
669
|
this.setExpressions(field, options);
|
|
@@ -874,9 +885,21 @@ class DynamicFormBuilderService {
|
|
|
874
885
|
control.setValue(field.defaultValue);
|
|
875
886
|
return options;
|
|
876
887
|
}
|
|
877
|
-
|
|
888
|
+
isFieldset(field) {
|
|
889
|
+
return Array.isArray(field.fieldGroup) && Array.isArray(field.wrappers) && field.wrappers[0] === "form-fieldset";
|
|
890
|
+
}
|
|
891
|
+
getLabel(key, label, parent, options, legacyPrefix = "") {
|
|
892
|
+
options = options || { labelPrefix: "" };
|
|
878
893
|
const labelPrefix = !ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix;
|
|
879
|
-
|
|
894
|
+
if (ObjectUtils.isFunction(options.labelCustomizer)) {
|
|
895
|
+
return options.labelCustomizer(key, label, parent, labelPrefix) || "";
|
|
896
|
+
}
|
|
897
|
+
// Exceptional case, to be able to have an "empty" label element in the HTML just to fill the space.
|
|
898
|
+
if (label === " ")
|
|
899
|
+
return "\\s";
|
|
900
|
+
const pathPrefix = options.legacyLabels
|
|
901
|
+
? String(legacyPrefix || labelPrefix)
|
|
902
|
+
: String(parent?.props?.label || labelPrefix);
|
|
880
903
|
const labelItems = ObjectUtils.isString(label)
|
|
881
904
|
? (!label ? [] : [labelPrefix, label])
|
|
882
905
|
: [pathPrefix, `${key || ""}`];
|
|
@@ -903,8 +926,7 @@ class DynamicFormBuilderService {
|
|
|
903
926
|
props: {
|
|
904
927
|
...(data.props || {}),
|
|
905
928
|
...props,
|
|
906
|
-
label:
|
|
907
|
-
?? this.getLabel(key, data.label, parent, options),
|
|
929
|
+
label: this.getLabel(key, data.label, parent, options),
|
|
908
930
|
labelAlign: data.labelAlign === "after" ? "after" : "before",
|
|
909
931
|
description: data.description,
|
|
910
932
|
hideLabel: data.hideLabel === true,
|
|
@@ -968,11 +990,22 @@ class DynamicFormBuilderService {
|
|
|
968
990
|
if (className) {
|
|
969
991
|
return className;
|
|
970
992
|
}
|
|
971
|
-
const
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
993
|
+
const idName = String(field.id || field.key || "").replace(/\./, "-");
|
|
994
|
+
let baseName = `dynamic-form-fieldset dynamic-form-fieldset-${idName}`;
|
|
995
|
+
if (!this.isFieldset(target)) {
|
|
996
|
+
const type = String(target.type || "group").replace("formly-", "");
|
|
997
|
+
const typeName = ObjectUtils.isConstructor(type)
|
|
998
|
+
? `${target.type.name}`.toLowerCase().replace("component", "")
|
|
999
|
+
: type;
|
|
1000
|
+
baseName = `dynamic-form-field dynamic-form-field-${target.key} dynamic-form-${typeName}`;
|
|
1001
|
+
}
|
|
1002
|
+
const classesName = Array.isArray(classes) ? classes : [classes];
|
|
1003
|
+
const layoutName = Array.isArray(layout) ? layout : [layout];
|
|
1004
|
+
return [
|
|
1005
|
+
baseName,
|
|
1006
|
+
...classesName,
|
|
1007
|
+
...layoutName.map(l => !l ? null : `dynamic-form-layout-${l}`)
|
|
1008
|
+
].filter(ObjectUtils.isStringWithValue).join(" ");
|
|
976
1009
|
},
|
|
977
1010
|
path: target => {
|
|
978
1011
|
const tp = target.parent;
|
|
@@ -982,7 +1015,7 @@ class DynamicFormBuilderService {
|
|
|
982
1015
|
},
|
|
983
1016
|
testId: target => {
|
|
984
1017
|
const tp = target.parent;
|
|
985
|
-
const prefix = !tp?.testId ? options
|
|
1018
|
+
const prefix = !tp?.testId ? options?.testId || "" : tp.testId;
|
|
986
1019
|
const key = !target.key ? `` : `-${target.key}`;
|
|
987
1020
|
return !prefix ? String(target.key ?? "") : `${prefix}${key}`;
|
|
988
1021
|
}
|
|
@@ -1038,7 +1071,7 @@ class DynamicFormSchemaService {
|
|
|
1038
1071
|
const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
|
|
1039
1072
|
fields.push(...propFields);
|
|
1040
1073
|
}
|
|
1041
|
-
return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options);
|
|
1074
|
+
return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
|
|
1042
1075
|
}
|
|
1043
1076
|
async getFormFieldsForProp(property, schema, options, parent) {
|
|
1044
1077
|
const field = await this.getFormFieldForProp(property, options, parent);
|
|
@@ -1727,6 +1760,7 @@ class DynamicFormComponent {
|
|
|
1727
1760
|
labelCustomizer = input(null);
|
|
1728
1761
|
testId = input("");
|
|
1729
1762
|
useTabs = input(false);
|
|
1763
|
+
legacyLabels = input(false);
|
|
1730
1764
|
data = input({});
|
|
1731
1765
|
fields = input(null);
|
|
1732
1766
|
fieldChanges = new Subject();
|
|
@@ -1740,6 +1774,7 @@ class DynamicFormComponent {
|
|
|
1740
1774
|
const options = {
|
|
1741
1775
|
labelPrefix: this.labelPrefix(),
|
|
1742
1776
|
labelCustomizer: this.labelCustomizer(),
|
|
1777
|
+
legacyLabels: this.legacyLabels(),
|
|
1743
1778
|
testId: this.testId(),
|
|
1744
1779
|
};
|
|
1745
1780
|
const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
|
|
@@ -1800,7 +1835,7 @@ class DynamicFormComponent {
|
|
|
1800
1835
|
return field?.formControl ?? null;
|
|
1801
1836
|
}
|
|
1802
1837
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1803
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onChanges: "onChanges" }, ngImport: i0, template: "@if (config() && group()) {\n <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n <input type=\"submit\" [hidden]=\"true\" />\n <formly-form [model]=\"data()\"\n [fields]=\"config()\"\n [form]=\"group()\"\n [options]=\"options\"></formly-form>\n <ng-content></ng-content>\n </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1838
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onChanges: "onChanges" }, ngImport: i0, template: "@if (config() && group()) {\n <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\" autocomplete=\"off\" role=\"presentation\">\n <input type=\"submit\" [hidden]=\"true\" />\n <formly-form [model]=\"data()\"\n [fields]=\"config()\"\n [form]=\"group()\"\n [options]=\"options\"></formly-form>\n <ng-content></ng-content>\n </form>\n}\n", styles: [".dynamic-form-field.dynamic-form-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1804
1839
|
}
|
|
1805
1840
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
1806
1841
|
type: Component,
|
|
@@ -1827,11 +1862,11 @@ class DynamicFormArrayComponent extends FieldArrayType {
|
|
|
1827
1862
|
this.currentTab.set(Math.min(this.currentTab(), length - 1));
|
|
1828
1863
|
}
|
|
1829
1864
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n @if (
|
|
1865
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <div class=\"field-container\">\n <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n <ng-template #fieldContent>\n <div class=\"form-array-buttons\">\n @if (itemField.removeItem) {\n <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n }\n @if (itemField.insertItem) {\n <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n }\n </div>\n <formly-field [field]=\"itemField\"></formly-field>\n </ng-template>\n @if (props.useTabs) {\n <div class=\"form-array-item\"\n [tabsItem]=\"ix\"\n [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n } @else {\n <div class=\"form-array-item\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n }\n }\n </tabs>\n\n <div class=\"form-array-buttons\">\n @if (props.clearItems) {\n <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n }\n @if (props.addItem) {\n <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n }\n </div>\n\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1831
1866
|
}
|
|
1832
1867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
|
|
1833
1868
|
type: Component,
|
|
1834
|
-
args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n @if (
|
|
1869
|
+
args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <div class=\"field-container\">\n <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n <ng-template #fieldContent>\n <div class=\"form-array-buttons\">\n @if (itemField.removeItem) {\n <btn icon=\"trash\" (click)=\"removeItem(ix)\"></btn>\n }\n @if (itemField.insertItem) {\n <btn icon=\"plus\" (click)=\"addItem(ix)\"></btn>\n }\n </div>\n <formly-field [field]=\"itemField\"></formly-field>\n </ng-template>\n @if (props.useTabs) {\n <div class=\"form-array-item\"\n [tabsItem]=\"ix\"\n [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n } @else {\n <div class=\"form-array-item\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n }\n }\n </tabs>\n\n <div class=\"form-array-buttons\">\n @if (props.clearItems) {\n <btn icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n }\n @if (props.addItem) {\n <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n }\n </div>\n\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"] }]
|
|
1835
1870
|
}] });
|
|
1836
1871
|
|
|
1837
1872
|
class DynamicFormChipsComponent extends DynamicFieldType {
|
|
@@ -1924,29 +1959,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1924
1959
|
|
|
1925
1960
|
class DynamicFormFieldComponent extends FieldWrapper {
|
|
1926
1961
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1927
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n @
|
|
1962
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <label class=\"field-label\" [for]=\"id\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n <ng-container #fieldComponent></ng-container>\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n</div>\n@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1928
1963
|
}
|
|
1929
1964
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
1930
1965
|
type: Component,
|
|
1931
|
-
args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n @
|
|
1966
|
+
args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <label class=\"field-label\" [for]=\"id\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n<div class=\"field-container\">\n <ng-container #fieldComponent></ng-container>\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n</div>\n@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
|
|
1932
1967
|
}] });
|
|
1933
1968
|
|
|
1934
1969
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
1935
1970
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1936
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n <legend class=\"field-legend\" *ngIf=\"
|
|
1971
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n <legend class=\"field-legend\" *ngIf=\"label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n </legend>\n <div class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField) {\n @if (itemField.display) {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n </div>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1937
1972
|
}
|
|
1938
1973
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
|
|
1939
1974
|
type: Component,
|
|
1940
|
-
args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n <legend class=\"field-legend\" *ngIf=\"
|
|
1975
|
+
args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel || field.parent.props.useTabs ? null : props.label | translate;\n@if (field.display) {\n <legend class=\"field-legend\" *ngIf=\"label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n </legend>\n <div class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField) {\n @if (itemField.display) {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n </div>\n}\n" }]
|
|
1941
1976
|
}] });
|
|
1942
1977
|
|
|
1943
1978
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
1944
1979
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n @if (
|
|
1980
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <tabs class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"ix\"\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1946
1981
|
}
|
|
1947
1982
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
1948
1983
|
type: Component,
|
|
1949
|
-
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "@if (field.display) {\n @if (
|
|
1984
|
+
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <tabs class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"ix\"\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\n", styles: [".form-fieldset-item.hidden-tab{display:none}.form-fieldset-tab{position:relative;--invalid-bg: rgba(184, 38, 38, 1);--invalid-border: rgba(184, 38, 38, .6);--invalid-color: #ececec;--invalid-box-size: 15px;--invalid-box-pull: -3px}.form-fieldset-tab.invalid>btn .async-target{border:1px solid var(--invalid-border)}.form-fieldset-tab.invalid:after{background:var(--invalid-bg);color:var(--invalid-color);font-size:10px;line-height:var(--invalid-box-size);width:var(--invalid-box-size);height:var(--invalid-box-size);text-align:center;border-radius:5px;content:\"!\";display:block;position:absolute;top:var(--invalid-box-pull);right:var(--invalid-box-pull)}\n"] }]
|
|
1950
1985
|
}] });
|
|
1951
1986
|
|
|
1952
1987
|
// --- Components ---
|
|
@@ -2070,5 +2105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2070
2105
|
* Generated bundle index. Do not edit.
|
|
2071
2106
|
*/
|
|
2072
2107
|
|
|
2073
|
-
export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray,
|
|
2108
|
+
export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldValue, translationValidation };
|
|
2074
2109
|
//# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map
|