@stemy/ngx-dynamic-form 19.8.16 → 19.8.17
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 +47 -21
- package/fesm2022/stemy-ngx-dynamic-form.mjs.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +62 -1
- package/ngx-dynamic-form/components/dynamic-form/dynamic-form.component.d.ts +5 -2
- package/ngx-dynamic-form/services/dynamic-form-template.service.d.ts +7 -1
- package/package.json +1 -1
|
@@ -946,6 +946,11 @@ class DynamicFormBuilderService {
|
|
|
946
946
|
const field = {
|
|
947
947
|
...this.createFormSerializer(key, data),
|
|
948
948
|
fieldSet: String(data.fieldSet || ""),
|
|
949
|
+
controlTemplateKey: String(data.controlTemplateKey || ""),
|
|
950
|
+
labelTemplateKey: String(data.labelTemplateKey || ""),
|
|
951
|
+
inputTemplateKey: String(data.inputTemplateKey || ""),
|
|
952
|
+
prefixTemplateKey: String(data.prefixTemplateKey || ""),
|
|
953
|
+
suffixTemplateKey: String(data.suffixTemplateKey || ""),
|
|
949
954
|
purposes: toStringArray(data.purposes),
|
|
950
955
|
priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
|
|
951
956
|
wrappers: wrappers.filter(ObjectUtils.isDefined),
|
|
@@ -1586,25 +1591,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1586
1591
|
args: [API_SERVICE]
|
|
1587
1592
|
}] }] });
|
|
1588
1593
|
|
|
1589
|
-
const templateTypes = ["control", "label", "input", "prefix", "suffix"
|
|
1594
|
+
const templateTypes = ["control", "label", "input", "prefix", "suffix"];
|
|
1590
1595
|
class DynamicFormTemplateService {
|
|
1596
|
+
globalTemplates;
|
|
1591
1597
|
templatesUpdated;
|
|
1592
1598
|
templates;
|
|
1593
|
-
|
|
1599
|
+
globalTemplatePrefix;
|
|
1600
|
+
get globalPrefix() {
|
|
1601
|
+
return this.globalTemplatePrefix;
|
|
1602
|
+
}
|
|
1603
|
+
set globalPrefix(value) {
|
|
1604
|
+
this.globalTemplatePrefix = value || "dynamic-form";
|
|
1605
|
+
this.templatesUpdated.next();
|
|
1606
|
+
}
|
|
1607
|
+
constructor(globalTemplates) {
|
|
1608
|
+
this.globalTemplates = globalTemplates;
|
|
1594
1609
|
this.templatesUpdated = new Subject();
|
|
1595
1610
|
this.templates = new Map();
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1611
|
+
this.globalTemplates.templatesUpdated
|
|
1612
|
+
.subscribe(() => this.templatesUpdated.next());
|
|
1613
|
+
this.globalTemplatePrefix = "dynamic-form";
|
|
1599
1614
|
}
|
|
1600
1615
|
isValidType(type) {
|
|
1601
1616
|
return templateTypes.includes(type);
|
|
1602
1617
|
}
|
|
1603
1618
|
get(type, key) {
|
|
1604
1619
|
if (!this.templates.has(type))
|
|
1605
|
-
return
|
|
1620
|
+
return this.getGlobalTemplate(type, key);
|
|
1606
1621
|
const templates = this.templates.get(type);
|
|
1607
|
-
return templates.has(key) ? templates.get(key) :
|
|
1622
|
+
return templates.has(key) ? templates.get(key) : this.getGlobalTemplate(type, key);
|
|
1623
|
+
}
|
|
1624
|
+
getGlobalTemplate(type, key) {
|
|
1625
|
+
return this.globalTemplates.get(`${this.globalPrefix}-${type}-${key}`);
|
|
1608
1626
|
}
|
|
1609
1627
|
add(key, type, template) {
|
|
1610
1628
|
if (!this.templates.has(type)) {
|
|
@@ -1619,12 +1637,12 @@ class DynamicFormTemplateService {
|
|
|
1619
1637
|
this.templates.get(type).delete(key);
|
|
1620
1638
|
this.templatesUpdated.next();
|
|
1621
1639
|
}
|
|
1622
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1640
|
+
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
1641
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService });
|
|
1624
1642
|
}
|
|
1625
1643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormTemplateService, decorators: [{
|
|
1626
1644
|
type: Injectable
|
|
1627
|
-
}], ctorParameters: () => [] });
|
|
1645
|
+
}], ctorParameters: () => [{ type: i2.GlobalTemplateService }] });
|
|
1628
1646
|
|
|
1629
1647
|
class AsyncSubmitDirective extends AsyncMethodBase {
|
|
1630
1648
|
method = input(null, { alias: "async-submit" });
|
|
@@ -1804,8 +1822,10 @@ class DynamicFormTemplatePipe {
|
|
|
1804
1822
|
this.templatesUpdated.unsubscribe();
|
|
1805
1823
|
}
|
|
1806
1824
|
transform(field, type) {
|
|
1807
|
-
|
|
1808
|
-
|
|
1825
|
+
if (!field)
|
|
1826
|
+
return null;
|
|
1827
|
+
const key = String(field[`${type}TemplateKey`] || field.key || field.id || "");
|
|
1828
|
+
if (!key)
|
|
1809
1829
|
return null;
|
|
1810
1830
|
if (this.cachedTemplate === null || this.cachedKey !== key || this.cachedType !== type) {
|
|
1811
1831
|
this.cachedKey = key;
|
|
@@ -1930,9 +1950,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1930
1950
|
|
|
1931
1951
|
class DynamicFormComponent {
|
|
1932
1952
|
forms;
|
|
1953
|
+
templates;
|
|
1933
1954
|
builder = inject(DynamicFormBuilderService);
|
|
1934
1955
|
events = inject(EventsService);
|
|
1935
1956
|
languages = inject(LANGUAGE_SERVICE);
|
|
1957
|
+
globalTemplatePrefix = input("dynamic-form");
|
|
1936
1958
|
labelPrefix = input("label");
|
|
1937
1959
|
labelCustomizer = input(null);
|
|
1938
1960
|
testId = input("");
|
|
@@ -1988,8 +2010,9 @@ class DynamicFormComponent {
|
|
|
1988
2010
|
injector: inject(Injector)
|
|
1989
2011
|
}
|
|
1990
2012
|
};
|
|
1991
|
-
constructor(forms) {
|
|
2013
|
+
constructor(forms, templates) {
|
|
1992
2014
|
this.forms = forms;
|
|
2015
|
+
this.templates = templates;
|
|
1993
2016
|
effect(() => {
|
|
1994
2017
|
this.language();
|
|
1995
2018
|
this.enableTranslations();
|
|
@@ -1999,6 +2022,9 @@ class DynamicFormComponent {
|
|
|
1999
2022
|
field.options.detectChanges(field);
|
|
2000
2023
|
});
|
|
2001
2024
|
});
|
|
2025
|
+
effect(() => {
|
|
2026
|
+
this.templates.globalPrefix = this.globalTemplatePrefix();
|
|
2027
|
+
});
|
|
2002
2028
|
}
|
|
2003
2029
|
submit() {
|
|
2004
2030
|
this.onSubmit.emit(this);
|
|
@@ -2017,13 +2043,13 @@ class DynamicFormComponent {
|
|
|
2017
2043
|
const field = this.getField(path);
|
|
2018
2044
|
return field?.formControl ?? null;
|
|
2019
2045
|
}
|
|
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 });
|
|
2046
|
+
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 });
|
|
2047
|
+
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
2048
|
}
|
|
2023
2049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
2024
2050
|
type: Component,
|
|
2025
2051
|
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 }] });
|
|
2052
|
+
}], ctorParameters: () => [{ type: DynamicFormService }, { type: DynamicFormTemplateService }] });
|
|
2027
2053
|
|
|
2028
2054
|
class DynamicFormArrayComponent extends FieldArrayType {
|
|
2029
2055
|
currentTab = signal(0);
|
|
@@ -2142,29 +2168,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2142
2168
|
|
|
2143
2169
|
class DynamicFormFieldComponent extends FieldWrapper {
|
|
2144
2170
|
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 #
|
|
2171
|
+
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
2172
|
}
|
|
2147
2173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
2148
2174
|
type: Component,
|
|
2149
|
-
args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #
|
|
2175
|
+
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
2176
|
}] });
|
|
2151
2177
|
|
|
2152
2178
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
2153
2179
|
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 : '
|
|
2180
|
+
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
2181
|
}
|
|
2156
2182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
|
|
2157
2183
|
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 : '
|
|
2184
|
+
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
2185
|
}] });
|
|
2160
2186
|
|
|
2161
2187
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2162
2188
|
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: "
|
|
2189
|
+
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
2190
|
}
|
|
2165
2191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2166
2192
|
type: Component,
|
|
2167
|
-
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "
|
|
2193
|
+
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
2194
|
}] });
|
|
2169
2195
|
|
|
2170
2196
|
// --- Components ---
|