@stemy/ngx-dynamic-form 19.9.12 → 19.9.14
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, inject, Inject, Injectable, untracked, input, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Pipe, Type, Component,
|
|
2
|
+
import { InjectionToken, inject, Inject, Injectable, untracked, input, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Pipe, Type, Component, Injector, output, ChangeDetectionStrategy, ViewEncapsulation, viewChild, makeEnvironmentProviders, NgModule } from '@angular/core';
|
|
3
3
|
import * as i2 from '@stemy/ngx-utils';
|
|
4
4
|
import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, ForbiddenZone, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
|
|
5
|
-
import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, filter } from 'rxjs';
|
|
5
|
+
import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, map, filter } from 'rxjs';
|
|
6
6
|
import { debounceTime } from 'rxjs/operators';
|
|
7
7
|
import { __decorate } from 'tslib';
|
|
8
8
|
import * as i1 from '@angular/forms';
|
|
@@ -1337,13 +1337,23 @@ class DynamicFormSchemaService {
|
|
|
1337
1337
|
}, parent, options);
|
|
1338
1338
|
}
|
|
1339
1339
|
getFormSelectOptions($enum, property, options, field) {
|
|
1340
|
-
|
|
1341
|
-
|
|
1340
|
+
// --- Handle options from another property path ---
|
|
1341
|
+
if (ObjectUtils.isStringWithValue(property.optionsPath)) {
|
|
1342
|
+
return this.getFormPathOptions(property.optionsPath, field);
|
|
1342
1343
|
}
|
|
1344
|
+
// --- Handle options from an endpoint ---
|
|
1343
1345
|
if (ObjectUtils.isStringWithValue(property.endpoint)) {
|
|
1344
1346
|
return this.getFormEndpointOptions(property, field);
|
|
1345
1347
|
}
|
|
1346
|
-
|
|
1348
|
+
// --- Handle direct options like an enum ---
|
|
1349
|
+
if (Array.isArray(property.options)) {
|
|
1350
|
+
return this.getFormEnumOptions(property.options, property.id, options, field);
|
|
1351
|
+
}
|
|
1352
|
+
// --- Handle enum options ---
|
|
1353
|
+
if (Array.isArray($enum)) {
|
|
1354
|
+
return this.getFormEnumOptions($enum, property.id, options, field);
|
|
1355
|
+
}
|
|
1356
|
+
return [];
|
|
1347
1357
|
}
|
|
1348
1358
|
getFormEnumOptions($enum, id, options, field) {
|
|
1349
1359
|
return this.builder.language.pipe(distinctUntilChanged(), switchMap(async () => {
|
|
@@ -1497,20 +1507,30 @@ class DynamicFormService {
|
|
|
1497
1507
|
return this.getFormFieldGroupBySchemaName(name, customizeOrOptions, "getFormFieldsForSchema");
|
|
1498
1508
|
}
|
|
1499
1509
|
async getFormFieldGroupBySchemaName(name, customizeOrOptions, restrictedMethod) {
|
|
1500
|
-
const config = {
|
|
1501
|
-
id: FORM_ROOT_ID,
|
|
1502
|
-
path: "",
|
|
1503
|
-
wrappers: ["form-group"],
|
|
1504
|
-
props: {}
|
|
1505
|
-
};
|
|
1506
1510
|
const schema = await this.fs.getSchema(name);
|
|
1507
1511
|
if (!schema) {
|
|
1508
1512
|
console.warn(`Schema with name "${name}" not found.`);
|
|
1509
|
-
return
|
|
1513
|
+
return {
|
|
1514
|
+
id: FORM_ROOT_ID,
|
|
1515
|
+
path: "",
|
|
1516
|
+
wrappers: ["form-group"],
|
|
1517
|
+
fieldGroup: [],
|
|
1518
|
+
props: {},
|
|
1519
|
+
hooks: {},
|
|
1520
|
+
expressions: {}
|
|
1521
|
+
};
|
|
1510
1522
|
}
|
|
1511
1523
|
const wrapOptions = await toWrapOptions(customizeOrOptions, this.injector, schema, `"DynamicFormService.${restrictedMethod}" is called from a customizer, which is not allowed. Please use DynamicFormSchemaService instead!`);
|
|
1512
|
-
const
|
|
1524
|
+
const config = await this.fb.createFormGroup(null, parent => {
|
|
1525
|
+
return this.fs.getFormFieldsForSchema(schema, parent, wrapOptions);
|
|
1526
|
+
}, {
|
|
1527
|
+
label: "",
|
|
1528
|
+
hidden: false,
|
|
1529
|
+
className: "dynamic-form-root-group"
|
|
1530
|
+
}, null, wrapOptions);
|
|
1531
|
+
const fields = config.fieldGroup || [];
|
|
1513
1532
|
const fieldGroup = [...fields];
|
|
1533
|
+
config.id = FORM_ROOT_ID;
|
|
1514
1534
|
config.fieldGroup = fieldGroup;
|
|
1515
1535
|
// There are no actual fields in the schema, or no schema exists
|
|
1516
1536
|
if (fields.length === 0)
|
|
@@ -2007,9 +2027,21 @@ class DynamicFormComponent {
|
|
|
2007
2027
|
legacyLabels = input(false);
|
|
2008
2028
|
data = input({});
|
|
2009
2029
|
fields = input(null);
|
|
2010
|
-
|
|
2030
|
+
options = {
|
|
2031
|
+
fieldChanges: new Subject(),
|
|
2032
|
+
formState: {
|
|
2033
|
+
injector: inject(Injector)
|
|
2034
|
+
}
|
|
2035
|
+
};
|
|
2036
|
+
fieldChanges = this.options.fieldChanges.pipe(map(changes => ({
|
|
2037
|
+
...changes,
|
|
2038
|
+
form: this
|
|
2039
|
+
})));
|
|
2011
2040
|
init = this.fieldChanges.pipe(first());
|
|
2012
|
-
valueChanges = this.fieldChanges
|
|
2041
|
+
valueChanges = this.fieldChanges
|
|
2042
|
+
.pipe(filter(c => c.type === "valueChanges"));
|
|
2043
|
+
expressionChanges = this.fieldChanges
|
|
2044
|
+
.pipe(filter(c => c.type === "expressionChanges"));
|
|
2013
2045
|
language = toSignal(this.events.languageChanged, {
|
|
2014
2046
|
initialValue: this.languages.currentLanguage
|
|
2015
2047
|
});
|
|
@@ -2023,16 +2055,16 @@ class DynamicFormComponent {
|
|
|
2023
2055
|
legacyLabels: this.legacyLabels(),
|
|
2024
2056
|
testId: this.testId(),
|
|
2025
2057
|
};
|
|
2026
|
-
const
|
|
2058
|
+
const defs = this.fields();
|
|
2059
|
+
const fields = Array.isArray(defs) ? defs : null;
|
|
2027
2060
|
const constructor = this.data()?.constructor;
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
];
|
|
2061
|
+
const root = (Array.isArray(defs) ? null : defs) ?? this.builder.createFormGroup(null, parent => this.builder.createFieldSets(fields ?? this.builder.resolveFormFields(constructor, parent, options), parent), {
|
|
2062
|
+
label: "",
|
|
2063
|
+
hidden: false,
|
|
2064
|
+
useTabs: this.useTabs(),
|
|
2065
|
+
className: "dynamic-form-root-group"
|
|
2066
|
+
});
|
|
2067
|
+
return [root];
|
|
2036
2068
|
});
|
|
2037
2069
|
group = computed(() => {
|
|
2038
2070
|
this.config();
|
|
@@ -2047,13 +2079,8 @@ class DynamicFormComponent {
|
|
|
2047
2079
|
onSubmit = output();
|
|
2048
2080
|
onFieldChanges = outputFromObservable(this.fieldChanges);
|
|
2049
2081
|
onValueChanges = outputFromObservable(this.valueChanges);
|
|
2082
|
+
onExpressionChanges = outputFromObservable(this.expressionChanges);
|
|
2050
2083
|
onInit = outputFromObservable(this.init);
|
|
2051
|
-
options = {
|
|
2052
|
-
fieldChanges: this.fieldChanges,
|
|
2053
|
-
formState: {
|
|
2054
|
-
injector: inject(Injector)
|
|
2055
|
-
}
|
|
2056
|
-
};
|
|
2057
2084
|
constructor(forms, templates) {
|
|
2058
2085
|
this.forms = forms;
|
|
2059
2086
|
this.templates = templates;
|
|
@@ -2088,7 +2115,7 @@ class DynamicFormComponent {
|
|
|
2088
2115
|
return field?.formControl ?? null;
|
|
2089
2116
|
}
|
|
2090
2117
|
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 });
|
|
2091
|
-
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 });
|
|
2118
|
+
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", onExpressionChanges: "onExpressionChanges", 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 });
|
|
2092
2119
|
}
|
|
2093
2120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
2094
2121
|
type: Component,
|
|
@@ -2254,11 +2281,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2254
2281
|
|
|
2255
2282
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2256
2283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2257
|
-
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
|
|
2284
|
+
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\" [testId]=\"(field.testId || 'form') + '-tab'\">\n @for (itemField of field.fieldGroup; track itemField) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"itemField.id\"\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 @if (showError && field.key !== null) {\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 }\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 });
|
|
2258
2285
|
}
|
|
2259
2286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2260
2287
|
type: Component,
|
|
2261
|
-
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
|
|
2288
|
+
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\" [testId]=\"(field.testId || 'form') + '-tab'\">\n @for (itemField of field.fieldGroup; track itemField) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"itemField.id\"\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 @if (showError && field.key !== null) {\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 }\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"] }]
|
|
2262
2289
|
}] });
|
|
2263
2290
|
|
|
2264
2291
|
// --- Components ---
|