@stemy/ngx-dynamic-form 19.8.16 → 19.8.18
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 +55 -26
- package/fesm2022/stemy-ngx-dynamic-form.mjs.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +71 -2
- package/ngx-dynamic-form/components/dynamic-form/dynamic-form.component.d.ts +5 -2
- package/ngx-dynamic-form/services/dynamic-form-builder.service.d.ts +1 -1
- package/ngx-dynamic-form/services/dynamic-form-template.service.d.ts +7 -1
- package/package.json +1 -1
|
@@ -666,7 +666,7 @@ class DynamicFormBuilderService {
|
|
|
666
666
|
fieldGroup,
|
|
667
667
|
wrappers: ["form-fieldset"],
|
|
668
668
|
props: {
|
|
669
|
-
label: this.getLabel(fsName,
|
|
669
|
+
label: this.getLabel(fsName, set?.label, set?.labelPrefix, parent, options, "title"),
|
|
670
670
|
hidden: false,
|
|
671
671
|
classes: set?.classes,
|
|
672
672
|
layout: set?.layout,
|
|
@@ -687,7 +687,7 @@ class DynamicFormBuilderService {
|
|
|
687
687
|
field.id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
|
|
688
688
|
field.wrappers = ["form-fieldset"];
|
|
689
689
|
field.props = {
|
|
690
|
-
label: this.getLabel(fsName,
|
|
690
|
+
label: this.getLabel(fsName, set?.label, set?.labelPrefix, parent, options, "title"),
|
|
691
691
|
hidden: false,
|
|
692
692
|
classes: set?.classes,
|
|
693
693
|
layout: set?.layout,
|
|
@@ -915,9 +915,9 @@ class DynamicFormBuilderService {
|
|
|
915
915
|
isFieldset(field) {
|
|
916
916
|
return Array.isArray(field.fieldGroup) && Array.isArray(field.wrappers) && field.wrappers[0] === "form-fieldset";
|
|
917
917
|
}
|
|
918
|
-
getLabel(key, label, parent, options, legacyPrefix = "") {
|
|
918
|
+
getLabel(key, label, labelPrefix, parent, options, legacyPrefix = "") {
|
|
919
919
|
options = options || { labelPrefix: "" };
|
|
920
|
-
|
|
920
|
+
labelPrefix = labelPrefix || (!ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix);
|
|
921
921
|
if (ObjectUtils.isFunction(options.labelCustomizer)) {
|
|
922
922
|
const customLabel = options.labelCustomizer(key, label, parent, labelPrefix);
|
|
923
923
|
if (ObjectUtils.isString(customLabel))
|
|
@@ -943,9 +943,16 @@ class DynamicFormBuilderService {
|
|
|
943
943
|
}
|
|
944
944
|
const disabled = ReflectUtils.resolve(data.disabled, this.injector);
|
|
945
945
|
const hidden = ReflectUtils.resolve(data.hidden, this.injector);
|
|
946
|
+
const prefix = String(data.labelPrefix || parent?.labelPrefix || "");
|
|
946
947
|
const field = {
|
|
947
948
|
...this.createFormSerializer(key, data),
|
|
948
949
|
fieldSet: String(data.fieldSet || ""),
|
|
950
|
+
labelPrefix: prefix,
|
|
951
|
+
controlTemplateKey: String(data.controlTemplateKey || ""),
|
|
952
|
+
labelTemplateKey: String(data.labelTemplateKey || ""),
|
|
953
|
+
inputTemplateKey: String(data.inputTemplateKey || ""),
|
|
954
|
+
prefixTemplateKey: String(data.prefixTemplateKey || ""),
|
|
955
|
+
suffixTemplateKey: String(data.suffixTemplateKey || ""),
|
|
949
956
|
purposes: toStringArray(data.purposes),
|
|
950
957
|
priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
|
|
951
958
|
wrappers: wrappers.filter(ObjectUtils.isDefined),
|
|
@@ -956,7 +963,7 @@ class DynamicFormBuilderService {
|
|
|
956
963
|
props: {
|
|
957
964
|
...(data.props || {}),
|
|
958
965
|
...props,
|
|
959
|
-
label: this.getLabel(key, data.label, parent, options),
|
|
966
|
+
label: this.getLabel(key, data.label, prefix, parent, options),
|
|
960
967
|
labelAlign: data.labelAlign === "after" ? "after" : "before",
|
|
961
968
|
description: data.description,
|
|
962
969
|
hideLabel: data.hideLabel === true,
|
|
@@ -1153,6 +1160,7 @@ class DynamicFormSchemaService {
|
|
|
1153
1160
|
layout: property.layout,
|
|
1154
1161
|
serialize: property.serialize,
|
|
1155
1162
|
fieldSet: property.fieldSet,
|
|
1163
|
+
labelPrefix: property.labelPrefix,
|
|
1156
1164
|
purposes: property.purposes || property.purpose,
|
|
1157
1165
|
priority: property.priority,
|
|
1158
1166
|
componentType: property.componentType,
|
|
@@ -1586,25 +1594,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1586
1594
|
args: [API_SERVICE]
|
|
1587
1595
|
}] }] });
|
|
1588
1596
|
|
|
1589
|
-
const templateTypes = ["control", "label", "input", "prefix", "suffix"
|
|
1597
|
+
const templateTypes = ["control", "label", "input", "prefix", "suffix"];
|
|
1590
1598
|
class DynamicFormTemplateService {
|
|
1599
|
+
globalTemplates;
|
|
1591
1600
|
templatesUpdated;
|
|
1592
1601
|
templates;
|
|
1593
|
-
|
|
1602
|
+
globalTemplatePrefix;
|
|
1603
|
+
get globalPrefix() {
|
|
1604
|
+
return this.globalTemplatePrefix;
|
|
1605
|
+
}
|
|
1606
|
+
set globalPrefix(value) {
|
|
1607
|
+
this.globalTemplatePrefix = value || "dynamic-form";
|
|
1608
|
+
this.templatesUpdated.next();
|
|
1609
|
+
}
|
|
1610
|
+
constructor(globalTemplates) {
|
|
1611
|
+
this.globalTemplates = globalTemplates;
|
|
1594
1612
|
this.templatesUpdated = new Subject();
|
|
1595
1613
|
this.templates = new Map();
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1614
|
+
this.globalTemplates.templatesUpdated
|
|
1615
|
+
.subscribe(() => this.templatesUpdated.next());
|
|
1616
|
+
this.globalTemplatePrefix = "dynamic-form";
|
|
1599
1617
|
}
|
|
1600
1618
|
isValidType(type) {
|
|
1601
1619
|
return templateTypes.includes(type);
|
|
1602
1620
|
}
|
|
1603
1621
|
get(type, key) {
|
|
1604
1622
|
if (!this.templates.has(type))
|
|
1605
|
-
return
|
|
1623
|
+
return this.getGlobalTemplate(type, key);
|
|
1606
1624
|
const templates = this.templates.get(type);
|
|
1607
|
-
return templates.has(key) ? templates.get(key) :
|
|
1625
|
+
return templates.has(key) ? templates.get(key) : this.getGlobalTemplate(type, key);
|
|
1626
|
+
}
|
|
1627
|
+
getGlobalTemplate(type, key) {
|
|
1628
|
+
return this.globalTemplates.get(`${this.globalPrefix}-${type}-${key}`);
|
|
1608
1629
|
}
|
|
1609
1630
|
add(key, type, template) {
|
|
1610
1631
|
if (!this.templates.has(type)) {
|
|
@@ -1619,12 +1640,12 @@ class DynamicFormTemplateService {
|
|
|
1619
1640
|
this.templates.get(type).delete(key);
|
|
1620
1641
|
this.templatesUpdated.next();
|
|
1621
1642
|
}
|
|
1622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1643
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, deps: [{ token: i2.GlobalTemplateService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1623
1644
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService });
|
|
1624
1645
|
}
|
|
1625
1646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, decorators: [{
|
|
1626
1647
|
type: Injectable
|
|
1627
|
-
}], ctorParameters: () => [] });
|
|
1648
|
+
}], ctorParameters: () => [{ type: i2.GlobalTemplateService }] });
|
|
1628
1649
|
|
|
1629
1650
|
class AsyncSubmitDirective extends AsyncMethodBase {
|
|
1630
1651
|
method = input(null, { alias: "async-submit" });
|
|
@@ -1804,8 +1825,10 @@ class DynamicFormTemplatePipe {
|
|
|
1804
1825
|
this.templatesUpdated.unsubscribe();
|
|
1805
1826
|
}
|
|
1806
1827
|
transform(field, type) {
|
|
1807
|
-
|
|
1808
|
-
|
|
1828
|
+
if (!field)
|
|
1829
|
+
return null;
|
|
1830
|
+
const key = String(field[`${type}TemplateKey`] || field.key || field.id || "");
|
|
1831
|
+
if (!key)
|
|
1809
1832
|
return null;
|
|
1810
1833
|
if (this.cachedTemplate === null || this.cachedKey !== key || this.cachedType !== type) {
|
|
1811
1834
|
this.cachedKey = key;
|
|
@@ -1930,9 +1953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1930
1953
|
|
|
1931
1954
|
class DynamicFormComponent {
|
|
1932
1955
|
forms;
|
|
1956
|
+
templates;
|
|
1933
1957
|
builder = inject(DynamicFormBuilderService);
|
|
1934
1958
|
events = inject(EventsService);
|
|
1935
1959
|
languages = inject(LANGUAGE_SERVICE);
|
|
1960
|
+
globalTemplatePrefix = input("dynamic-form");
|
|
1936
1961
|
labelPrefix = input("label");
|
|
1937
1962
|
labelCustomizer = input(null);
|
|
1938
1963
|
testId = input("");
|
|
@@ -1988,8 +2013,9 @@ class DynamicFormComponent {
|
|
|
1988
2013
|
injector: inject(Injector)
|
|
1989
2014
|
}
|
|
1990
2015
|
};
|
|
1991
|
-
constructor(forms) {
|
|
2016
|
+
constructor(forms, templates) {
|
|
1992
2017
|
this.forms = forms;
|
|
2018
|
+
this.templates = templates;
|
|
1993
2019
|
effect(() => {
|
|
1994
2020
|
this.language();
|
|
1995
2021
|
this.enableTranslations();
|
|
@@ -1999,6 +2025,9 @@ class DynamicFormComponent {
|
|
|
1999
2025
|
field.options.detectChanges(field);
|
|
2000
2026
|
});
|
|
2001
2027
|
});
|
|
2028
|
+
effect(() => {
|
|
2029
|
+
this.templates.globalPrefix = this.globalTemplatePrefix();
|
|
2030
|
+
});
|
|
2002
2031
|
}
|
|
2003
2032
|
submit() {
|
|
2004
2033
|
this.onSubmit.emit(this);
|
|
@@ -2017,13 +2046,13 @@ class DynamicFormComponent {
|
|
|
2017
2046
|
const field = this.getField(path);
|
|
2018
2047
|
return field?.formControl ?? null;
|
|
2019
2048
|
}
|
|
2020
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2021
|
-
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", onFieldChanges: "onFieldChanges", onValueChanges: "onValueChanges", onInit: "onInit" }, providers: [DynamicFormTemplateService], 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 });
|
|
2049
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }, { token: DynamicFormTemplateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2050
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { globalTemplatePrefix: { classPropertyName: "globalTemplatePrefix", publicName: "globalTemplatePrefix", isSignal: true, isRequired: false, transformFunction: null }, 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", onFieldChanges: "onFieldChanges", onValueChanges: "onValueChanges", onInit: "onInit" }, providers: [DynamicFormTemplateService], 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 });
|
|
2022
2051
|
}
|
|
2023
2052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
2024
2053
|
type: Component,
|
|
2025
2054
|
args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DynamicFormTemplateService], 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"] }]
|
|
2026
|
-
}], ctorParameters: () => [{ type: DynamicFormService }] });
|
|
2055
|
+
}], ctorParameters: () => [{ type: DynamicFormService }, { type: DynamicFormTemplateService }] });
|
|
2027
2056
|
|
|
2028
2057
|
class DynamicFormArrayComponent extends FieldArrayType {
|
|
2029
2058
|
currentTab = signal(0);
|
|
@@ -2142,29 +2171,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2142
2171
|
|
|
2143
2172
|
class DynamicFormFieldComponent extends FieldWrapper {
|
|
2144
2173
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2145
|
-
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 #
|
|
2174
|
+
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 #innerLabelTemplate let-label=\"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</ng-template>\n<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n [context]=\"field\"\n [additionalContext]=\"{label: label}\"></ng-container>\n }\n</ng-template>\n<ng-template #inputTemplate>\n <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n @if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n }\n <div class=\"field-container\">\n <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n [ngTemplateOutletContext]=\"field\"></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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\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.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2146
2175
|
}
|
|
2147
2176
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
2148
2177
|
type: Component,
|
|
2149
|
-
args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #
|
|
2178
|
+
args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"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</ng-template>\n<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n [context]=\"field\"\n [additionalContext]=\"{label: label}\"></ng-container>\n }\n</ng-template>\n<ng-template #inputTemplate>\n <ng-container #fieldComponent></ng-container>\n</ng-template>\n<ng-template #controlTemplate>\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n @if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n }\n <div class=\"field-container\">\n <ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'input') || inputTemplate\"\n [ngTemplateOutletContext]=\"field\"></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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n</ng-template>\n<ng-container [ngTemplateOutlet]=\"(field | dynamicFormTemplate : 'control') || controlTemplate\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n" }]
|
|
2150
2179
|
}] });
|
|
2151
2180
|
|
|
2152
2181
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
2153
2182
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2154
|
-
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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : '
|
|
2183
|
+
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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n [ngTemplateOutletContext]=\"field\"></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.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2155
2184
|
}
|
|
2156
2185
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
|
|
2157
2186
|
type: Component,
|
|
2158
|
-
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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : '
|
|
2187
|
+
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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\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 <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\n [ngTemplateOutletContext]=\"field\"></ng-container>\n}\n" }]
|
|
2159
2188
|
}] });
|
|
2160
2189
|
|
|
2161
2190
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2162
2191
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2163
|
-
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: "
|
|
2192
|
+
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: "<ng-template #innerLabelTemplate let-label=\"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</ng-template>\n<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n [context]=\"field\"\n [additionalContext]=\"{label: label}\"></ng-container>\n }\n</ng-template>\n@if (field.display) {\n @if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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 @if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n }\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: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgxTemplateOutletDirective, selector: "[ngxTemplateOutlet]", inputs: ["context", "additionalContext", "ngxTemplateOutlet"] }, { 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" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2164
2193
|
}
|
|
2165
2194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2166
2195
|
type: Component,
|
|
2167
|
-
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "
|
|
2196
|
+
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"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</ng-template>\n<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\n [context]=\"field\"\n [additionalContext]=\"{label: label}\"></ng-container>\n }\n</ng-template>\n@if (field.display) {\n @if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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 @if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n }\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"] }]
|
|
2168
2197
|
}] });
|
|
2169
2198
|
|
|
2170
2199
|
// --- Components ---
|