@stemy/ngx-dynamic-form 19.8.17 → 19.8.19
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 +22 -18
- package/fesm2022/stemy-ngx-dynamic-form.mjs.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +9 -1
- package/ngx-dynamic-form/ngx-dynamic-form.imports.d.ts +1 -1
- package/ngx-dynamic-form/services/dynamic-form-builder.service.d.ts +1 -1
- package/package.json +1 -1
|
@@ -666,10 +666,10 @@ 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
|
-
classes: set?.classes,
|
|
672
|
-
layout: set?.layout,
|
|
671
|
+
classes: toStringArray(set?.classes),
|
|
672
|
+
layout: toStringArray(set?.layout),
|
|
673
673
|
},
|
|
674
674
|
hooks: {},
|
|
675
675
|
expressions: {}
|
|
@@ -687,10 +687,10 @@ 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
|
-
classes: set?.classes,
|
|
693
|
-
layout: set?.layout,
|
|
692
|
+
classes: toStringArray(set?.classes),
|
|
693
|
+
layout: toStringArray(set?.layout),
|
|
694
694
|
};
|
|
695
695
|
field.expressions = {};
|
|
696
696
|
this.setExpressions(field, options);
|
|
@@ -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,11 @@ 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,
|
|
949
951
|
controlTemplateKey: String(data.controlTemplateKey || ""),
|
|
950
952
|
labelTemplateKey: String(data.labelTemplateKey || ""),
|
|
951
953
|
inputTemplateKey: String(data.inputTemplateKey || ""),
|
|
@@ -961,12 +963,12 @@ class DynamicFormBuilderService {
|
|
|
961
963
|
props: {
|
|
962
964
|
...(data.props || {}),
|
|
963
965
|
...props,
|
|
964
|
-
label: this.getLabel(key, data.label, parent, options),
|
|
966
|
+
label: this.getLabel(key, data.label, prefix, parent, options),
|
|
965
967
|
labelAlign: data.labelAlign === "after" ? "after" : "before",
|
|
966
|
-
description: data.description,
|
|
968
|
+
description: String(data.description || ""),
|
|
967
969
|
hideLabel: data.hideLabel === true,
|
|
968
|
-
classes: data.classes
|
|
969
|
-
layout: data.layout
|
|
970
|
+
classes: toStringArray(data.classes),
|
|
971
|
+
layout: toStringArray(data.layout),
|
|
970
972
|
className: data.className || "",
|
|
971
973
|
formCheck: "nolabel",
|
|
972
974
|
__disabled: ObjectUtils.isFunction(disabled) ? disabled : () => disabled,
|
|
@@ -1152,12 +1154,14 @@ class DynamicFormSchemaService {
|
|
|
1152
1154
|
disabled: property.disabled === true,
|
|
1153
1155
|
label: property.label,
|
|
1154
1156
|
labelAlign: property.labelAlign,
|
|
1157
|
+
description: property.description,
|
|
1155
1158
|
hideRequiredMarker: property.hideRequiredMarker === true,
|
|
1156
1159
|
hideLabel: property.hideLabel === true,
|
|
1157
1160
|
classes: property.classes,
|
|
1158
1161
|
layout: property.layout,
|
|
1159
1162
|
serialize: property.serialize,
|
|
1160
1163
|
fieldSet: property.fieldSet,
|
|
1164
|
+
labelPrefix: property.labelPrefix,
|
|
1161
1165
|
purposes: property.purposes || property.purpose,
|
|
1162
1166
|
priority: property.priority,
|
|
1163
1167
|
componentType: property.componentType,
|
|
@@ -2044,11 +2048,11 @@ class DynamicFormComponent {
|
|
|
2044
2048
|
return field?.formControl ?? null;
|
|
2045
2049
|
}
|
|
2046
2050
|
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 });
|
|
2051
|
+
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}.dynamic-form-field>.field-label{position:relative}.dynamic-form-field>.field-label>.field-description{font-size:.95em;font-weight:400;color:#777;margin:0}\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 });
|
|
2048
2052
|
}
|
|
2049
2053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
2050
2054
|
type: Component,
|
|
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"] }]
|
|
2055
|
+
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}.dynamic-form-field>.field-label{position:relative}.dynamic-form-field>.field-label>.field-description{font-size:.95em;font-weight:400;color:#777;margin:0}\n"] }]
|
|
2052
2056
|
}], ctorParameters: () => [{ type: DynamicFormService }, { type: DynamicFormTemplateService }] });
|
|
2053
2057
|
|
|
2054
2058
|
class DynamicFormArrayComponent extends FieldArrayType {
|
|
@@ -2168,11 +2172,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2168
2172
|
|
|
2169
2173
|
class DynamicFormFieldComponent extends FieldWrapper {
|
|
2170
2174
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 <
|
|
2175
|
+
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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n @if (props.description) {\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\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 });
|
|
2172
2176
|
}
|
|
2173
2177
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
2174
2178
|
type: Component,
|
|
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 <
|
|
2179
|
+
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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n @if (props.description) {\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\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" }]
|
|
2176
2180
|
}] });
|
|
2177
2181
|
|
|
2178
2182
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
@@ -2186,11 +2190,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2186
2190
|
|
|
2187
2191
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2188
2192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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 <
|
|
2193
|
+
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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n @if (props.description) {\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\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 });
|
|
2190
2194
|
}
|
|
2191
2195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2192
2196
|
type: Component,
|
|
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 <
|
|
2197
|
+
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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n @if (props.description) {\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\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"] }]
|
|
2194
2198
|
}] });
|
|
2195
2199
|
|
|
2196
2200
|
// --- Components ---
|