@stemy/ngx-dynamic-form 19.9.19 → 19.9.22
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 +67 -40
- package/fesm2022/stemy-ngx-dynamic-form.mjs.map +1 -1
- package/ngx-dynamic-form/common-types.d.ts +28 -0
- package/ngx-dynamic-form/services/dynamic-form-schema.service.d.ts +1 -0
- package/ngx-dynamic-form/utils/internal.d.ts +0 -1
- package/ngx-dynamic-form/utils/validation.d.ts +1 -0
- package/package.json +2 -2
- package/public_api.d.ts +1 -1
|
@@ -378,9 +378,7 @@ function jsonValidation() {
|
|
|
378
378
|
}, "json");
|
|
379
379
|
}
|
|
380
380
|
function requiredValidation() {
|
|
381
|
-
return withName(
|
|
382
|
-
if (field.props?.type === "checkbox")
|
|
383
|
-
return control.value === true;
|
|
381
|
+
return withName(control => {
|
|
384
382
|
return ObjectUtils.isString(control.value) ? control.value.length > 0 : ObjectUtils.isDefined(control.value);
|
|
385
383
|
}, "required");
|
|
386
384
|
}
|
|
@@ -446,6 +444,11 @@ function maxValueValidation() {
|
|
|
446
444
|
return v == null || v <= max;
|
|
447
445
|
}, "maxValue");
|
|
448
446
|
}
|
|
447
|
+
function enumValidation($enum) {
|
|
448
|
+
return validateEach(v => {
|
|
449
|
+
return $enum.includes(v);
|
|
450
|
+
}, "enum");
|
|
451
|
+
}
|
|
449
452
|
function setFieldMinDate(field, min) {
|
|
450
453
|
setFieldDefault(field, min);
|
|
451
454
|
setFieldProp(field, "min", min);
|
|
@@ -589,20 +592,6 @@ function arrayItemActionToExpression(actionName) {
|
|
|
589
592
|
: true;
|
|
590
593
|
};
|
|
591
594
|
}
|
|
592
|
-
function mergeFormFields(formFields) {
|
|
593
|
-
const res = [];
|
|
594
|
-
for (const formModel of formFields) {
|
|
595
|
-
for (const subModel of formModel) {
|
|
596
|
-
const index = res.findIndex(t => t.key == subModel.key);
|
|
597
|
-
if (index >= 0) {
|
|
598
|
-
res[index] = subModel;
|
|
599
|
-
continue;
|
|
600
|
-
}
|
|
601
|
-
res.push(subModel);
|
|
602
|
-
}
|
|
603
|
-
}
|
|
604
|
-
return res;
|
|
605
|
-
}
|
|
606
595
|
function getFormValidationErrors(controls, parentPath = "") {
|
|
607
596
|
const errors = [];
|
|
608
597
|
Object.entries(controls).forEach(([name, control], ix) => {
|
|
@@ -668,6 +657,7 @@ class DynamicFormBuilderService {
|
|
|
668
657
|
return this.setExpressions({
|
|
669
658
|
id,
|
|
670
659
|
parent,
|
|
660
|
+
schemas: [],
|
|
671
661
|
fieldGroup: fields,
|
|
672
662
|
wrappers: ["form-fieldset"],
|
|
673
663
|
props: {
|
|
@@ -788,7 +778,7 @@ class DynamicFormBuilderService {
|
|
|
788
778
|
const root = target.formControl.root;
|
|
789
779
|
setFieldProp(target, "options", options instanceof Observable
|
|
790
780
|
? options
|
|
791
|
-
: controlValues(root).pipe(combineLatestWith(this.language), switchMap(async () => {
|
|
781
|
+
: controlValues(root).pipe(combineLatestWith(this.language), switchMap(async (a, b) => {
|
|
792
782
|
const results = await factory(target, this.injector) || [];
|
|
793
783
|
return this.fixSelectOptions(target, results);
|
|
794
784
|
})));
|
|
@@ -945,7 +935,7 @@ class DynamicFormBuilderService {
|
|
|
945
935
|
}
|
|
946
936
|
if (options.length === 0 || options.findIndex(o => o.value === control.value) >= 0)
|
|
947
937
|
return options;
|
|
948
|
-
control.setValue(
|
|
938
|
+
control.setValue(options[0].value);
|
|
949
939
|
return options;
|
|
950
940
|
}
|
|
951
941
|
isFieldset(field) {
|
|
@@ -991,6 +981,8 @@ class DynamicFormBuilderService {
|
|
|
991
981
|
prefixTemplateKey: String(data.prefixTemplateKey || ""),
|
|
992
982
|
suffixTemplateKey: String(data.suffixTemplateKey || ""),
|
|
993
983
|
purposes: toStringArray(data.purposes),
|
|
984
|
+
schemas: toStringArray(data.schemas),
|
|
985
|
+
discriminator: data.discriminator,
|
|
994
986
|
priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
|
|
995
987
|
wrappers: wrappers.filter(ObjectUtils.isDefined),
|
|
996
988
|
type: data.componentType || type,
|
|
@@ -1113,6 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
1113
1105
|
args: [DEFAULT_NUMERIC_STEP]
|
|
1114
1106
|
}] }] });
|
|
1115
1107
|
|
|
1108
|
+
const PRIORITY_DIFF = 20;
|
|
1116
1109
|
class DynamicFormSchemaService {
|
|
1117
1110
|
openApi;
|
|
1118
1111
|
injector;
|
|
@@ -1138,22 +1131,41 @@ class DynamicFormSchemaService {
|
|
|
1138
1131
|
const keys = Object.keys(schema.properties || {});
|
|
1139
1132
|
const fields = [];
|
|
1140
1133
|
// Collect all properties of this schema def
|
|
1134
|
+
let priority = Number.MAX_SAFE_INTEGER - (keys.length * PRIORITY_DIFF);
|
|
1141
1135
|
for (const key of keys) {
|
|
1142
1136
|
const property = schema.properties[key];
|
|
1137
|
+
// Property priority is necessary when merging different schemas
|
|
1138
|
+
property.priority = property.priority ?? (priority += PRIORITY_DIFF);
|
|
1143
1139
|
const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
|
|
1144
1140
|
fields.push(...propFields);
|
|
1145
1141
|
}
|
|
1146
1142
|
return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
|
|
1147
1143
|
}
|
|
1144
|
+
async getFormFieldsForRefs(subSchemas, parent, options) {
|
|
1145
|
+
const subFields = await Promise.all(subSchemas.map(async (s) => this.getFormFieldsForSchema(s, parent, options)));
|
|
1146
|
+
const res = [];
|
|
1147
|
+
for (const ix in subSchemas) {
|
|
1148
|
+
const schema = subSchemas[ix];
|
|
1149
|
+
const fields = subFields[ix];
|
|
1150
|
+
for (const field of fields) {
|
|
1151
|
+
const index = field.key
|
|
1152
|
+
? res.findIndex(t => t.key === field.key)
|
|
1153
|
+
: res.findIndex(t => t.id === field.id);
|
|
1154
|
+
if (index >= 0) {
|
|
1155
|
+
res[index].schemas.push(schema.name);
|
|
1156
|
+
continue;
|
|
1157
|
+
}
|
|
1158
|
+
field.schemas.push(schema.name);
|
|
1159
|
+
res.push(field);
|
|
1160
|
+
}
|
|
1161
|
+
}
|
|
1162
|
+
return this.builder.createFieldSets(res, parent, options);
|
|
1163
|
+
}
|
|
1148
1164
|
async getFormFieldsForProp(property, schema, options, parent) {
|
|
1149
1165
|
const field = await this.getFormFieldForProp(property, options, parent);
|
|
1150
1166
|
return !field ? [] : options.customize(field, property, schema);
|
|
1151
1167
|
}
|
|
1152
1168
|
async getFormFieldForProp(property, options, parent) {
|
|
1153
|
-
const $enum = property.items?.enum || property.enum;
|
|
1154
|
-
if (Array.isArray($enum) || ObjectUtils.isStringWithValue(property.optionsPath) || ObjectUtils.isStringWithValue(property.endpoint)) {
|
|
1155
|
-
return this.getFormSelectConfig($enum, property, options, parent);
|
|
1156
|
-
}
|
|
1157
1169
|
switch (property.type) {
|
|
1158
1170
|
// case "object":
|
|
1159
1171
|
// return this.getFormEditorConfig(property, options, parent);
|
|
@@ -1162,12 +1174,16 @@ class DynamicFormSchemaService {
|
|
|
1162
1174
|
return this.getFormUploadConfig(property, options, parent);
|
|
1163
1175
|
case "boolean":
|
|
1164
1176
|
return this.getFormCheckboxConfig(property, options, parent);
|
|
1165
|
-
case "array":
|
|
1166
|
-
return this.getFormArrayConfig(property, options, parent);
|
|
1167
1177
|
}
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1178
|
+
const $enum = property.items?.enum || property.enum;
|
|
1179
|
+
if (Array.isArray($enum) || ObjectUtils.isStringWithValue(property.optionsPath) || ObjectUtils.isStringWithValue(property.endpoint)) {
|
|
1180
|
+
// Handle select after boolean, because there could be a boolean field, with a strict enum [true] for validation
|
|
1181
|
+
return this.getFormSelectConfig($enum, property, options, parent);
|
|
1182
|
+
}
|
|
1183
|
+
if (property.type === "array") {
|
|
1184
|
+
// Handle array after select, because there are also multi select fields
|
|
1185
|
+
return this.getFormArrayConfig(property, options, parent);
|
|
1186
|
+
}
|
|
1171
1187
|
if (property.format == "file" || property.format == "upload") {
|
|
1172
1188
|
return this.getFormUploadConfig(property, options, parent);
|
|
1173
1189
|
}
|
|
@@ -1181,6 +1197,9 @@ class DynamicFormSchemaService {
|
|
|
1181
1197
|
if (refs.length > 0) {
|
|
1182
1198
|
return this.getFormGroupConfig(property, options, parent);
|
|
1183
1199
|
}
|
|
1200
|
+
// if (this.checkIsEditorProperty(property)) {
|
|
1201
|
+
// return this.getFormEditorConfig(property, options, parent);
|
|
1202
|
+
// }
|
|
1184
1203
|
return this.getFormInputConfig(property, options, parent);
|
|
1185
1204
|
}
|
|
1186
1205
|
getFormFieldData(property, options) {
|
|
@@ -1207,6 +1226,7 @@ class DynamicFormSchemaService {
|
|
|
1207
1226
|
fieldSet: property.fieldSet,
|
|
1208
1227
|
labelPrefix: property.labelPrefix,
|
|
1209
1228
|
purposes: property.purposes || property.purpose,
|
|
1229
|
+
discriminator: property.discriminator,
|
|
1210
1230
|
priority: property.priority,
|
|
1211
1231
|
componentType: property.componentType,
|
|
1212
1232
|
wrappers: wrappers.filter(ObjectUtils.isStringWithValue),
|
|
@@ -1221,8 +1241,7 @@ class DynamicFormSchemaService {
|
|
|
1221
1241
|
return this.builder.createFormArray(property.id, async (sp) => {
|
|
1222
1242
|
const subSchemas = await this.openApi.getReferences(property, options.schema);
|
|
1223
1243
|
if (subSchemas.length > 0) {
|
|
1224
|
-
|
|
1225
|
-
return mergeFormFields(ObjectUtils.copy(subModels));
|
|
1244
|
+
return this.getFormFieldsForRefs(subSchemas, sp, options);
|
|
1226
1245
|
}
|
|
1227
1246
|
return this.getFormFieldForProp(property.items, options, sp);
|
|
1228
1247
|
}, {
|
|
@@ -1242,8 +1261,7 @@ class DynamicFormSchemaService {
|
|
|
1242
1261
|
async getFormGroupConfig(property, options, parent) {
|
|
1243
1262
|
return this.builder.createFormGroup(property.id, async (sp) => {
|
|
1244
1263
|
const subSchemas = await this.openApi.getReferences(property, options.schema);
|
|
1245
|
-
|
|
1246
|
-
return mergeFormFields(subFields);
|
|
1264
|
+
return this.getFormFieldsForRefs(subSchemas, sp, options);
|
|
1247
1265
|
}, {
|
|
1248
1266
|
...this.getFormFieldData(property, options),
|
|
1249
1267
|
}, parent, options);
|
|
@@ -1399,7 +1417,7 @@ class DynamicFormSchemaService {
|
|
|
1399
1417
|
item = ObjectUtils.isObject(item) ? item : { id: item };
|
|
1400
1418
|
return {
|
|
1401
1419
|
...item,
|
|
1402
|
-
value: item.id || item._id,
|
|
1420
|
+
value: item[property.idField] || item.id || item._id,
|
|
1403
1421
|
label: item[property.labelField] || item.label || item.id || item._id
|
|
1404
1422
|
};
|
|
1405
1423
|
}));
|
|
@@ -1472,6 +1490,12 @@ class DynamicFormSchemaService {
|
|
|
1472
1490
|
if (!isNaN(property.maximum)) {
|
|
1473
1491
|
validators.max = maxValueValidation();
|
|
1474
1492
|
}
|
|
1493
|
+
if (!isNaN(property.maximum)) {
|
|
1494
|
+
validators.max = maxValueValidation();
|
|
1495
|
+
}
|
|
1496
|
+
if (Array.isArray(property.enum)) {
|
|
1497
|
+
validators.enum = enumValidation(property.enum);
|
|
1498
|
+
}
|
|
1475
1499
|
// if (isString(property.pattern) && property.pattern.length) {
|
|
1476
1500
|
// validators.pattern = property.pattern;
|
|
1477
1501
|
// }
|
|
@@ -1496,6 +1520,9 @@ class DynamicFormSchemaService {
|
|
|
1496
1520
|
if (!isNaN(items.maximum)) {
|
|
1497
1521
|
validators.itemsMaxValue = maxValueValidation();
|
|
1498
1522
|
}
|
|
1523
|
+
if (Array.isArray(items.enum)) {
|
|
1524
|
+
validators.enum = enumValidation(items.enum);
|
|
1525
|
+
}
|
|
1499
1526
|
}
|
|
1500
1527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1501
1528
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService });
|
|
@@ -2162,7 +2189,7 @@ class DynamicFormArrayComponent extends FieldArrayType {
|
|
|
2162
2189
|
this.currentTab.set(Math.min(this.currentTab(), length - 1));
|
|
2163
2190
|
}
|
|
2164
2191
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2165
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <div class=\"field-container\">\n <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n <ng-template #fieldContent>\n <div class=\"form-array-buttons\">\n @if (itemField.removeItem) {\n <btn icon=\"trash\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n }\n @if (itemField.insertItem) {\n <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (click)=\"addItem(ix)\"></btn>\n }\n </div>\n <formly-field [field]=\"itemField\"></formly-field>\n </ng-template>\n @if (props.useTabs) {\n <div class=\"form-array-item\"\n [tabsItem]=\"ix\"\n [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n } @else {\n <div class=\"form-array-item\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n }\n }\n </tabs>\n\n <div class=\"form-array-buttons\">\n @if (props.clearItems) {\n <btn [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n }\n @if (props.addItem) {\n <btn [attr.data-testid]=\"field.testId + '-add-item'\" icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n }\n </div>\n\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2192
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@let label = !props.label || props.hideLabel ? null : props.label | translate;\n@if (field.display) {\n @if (label) {\n <label class=\"field-label\">\n <span [innerHTML]=\"label | safe: 'html'\"></span>\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n <div class=\"field-container\">\n <tabs class=\"form-array-items\" [(value)]=\"currentTab\">\n @for (itemField of field.fieldGroup; track itemField.key; let ix = $index) {\n <ng-template #fieldContent>\n <div class=\"form-array-buttons\">\n @if (itemField.removeItem) {\n <btn icon=\"trash\" [attr.data-testid]=\"field.testId + '-remove-item-' + ix\" (click)=\"removeItem(ix)\"></btn>\n }\n @if (itemField.insertItem) {\n <btn icon=\"plus\" [attr.data-testid]=\"field.testId + '-insert-item-' + ix\" (click)=\"addItem(ix)\"></btn>\n }\n </div>\n <formly-field [field]=\"itemField\"></formly-field>\n </ng-template>\n @if (props.useTabs) {\n <div class=\"form-array-item\"\n [tabsItem]=\"ix\"\n [label]=\"(itemField.formControl.value | getValue : props.tabsLabel) || ix + 1\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n } @else {\n <div class=\"form-array-item\">\n <ng-container [ngTemplateOutlet]=\"fieldContent\"></ng-container>\n </div>\n }\n }\n </tabs>\n\n <div class=\"form-array-buttons\">\n @if (props.clearItems) {\n <btn [attr.data-testid]=\"field.testId + '-clear-items'\" icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n }\n @if (props.addItem) {\n <btn [attr.data-testid]=\"field.testId + '-add-item'\" icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n }\n </div>\n\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}.field-errors.invalid-feedback{display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TabsItemDirective, selector: "[tabsItem]", inputs: ["tabsItem", "label", "tooltip", "icon", "disabled", "path", "classes"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: i2.TabsComponent, selector: "tabs", inputs: ["value", "options", "type", "size", "testId", "tabsClass"], outputs: ["valueChange", "selectedChange"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2166
2193
|
}
|
|
2167
2194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
|
|
2168
2195
|
type: Component,
|
|
@@ -2195,7 +2222,7 @@ class DynamicFormPasswordComponent extends DynamicFieldType {
|
|
|
2195
2222
|
});
|
|
2196
2223
|
}
|
|
2197
2224
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n <input #input\n class=\"form-control\"\n [attr.type]=\"type()\"\n [attr.data-testid]=\"field.testId\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\" />\n <btn type=\"transparent\"\n [icon]=\"icon()\"\n [attr.data-testid]=\"field.testId + '-toggle'\"\n (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2225
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n <input #input\n class=\"form-control\"\n [attr.type]=\"type()\"\n [attr.data-testid]=\"field.testId\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\" />\n <btn type=\"transparent\"\n [icon]=\"icon()\"\n [attr.data-testid]=\"field.testId + '-toggle'\"\n (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2199
2226
|
}
|
|
2200
2227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, decorators: [{
|
|
2201
2228
|
type: Component,
|
|
@@ -2292,20 +2319,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2292
2319
|
|
|
2293
2320
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
2294
2321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2295
|
-
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 });
|
|
2322
|
+
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;\r\n@if (field.display) {\r\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n [ngTemplateOutletContext]=\"field\"></ng-container>\r\n <legend class=\"field-legend\" *ngIf=\"label\">\r\n <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n </legend>\r\n <div class=\"field-container\">\r\n @for (itemField of field.fieldGroup; track itemField) {\r\n @if (itemField.display) {\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n }\r\n }\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\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 });
|
|
2296
2323
|
}
|
|
2297
2324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
|
|
2298
2325
|
type: Component,
|
|
2299
|
-
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" }]
|
|
2326
|
+
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;\r\n@if (field.display) {\r\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'prefix'\"\r\n [ngTemplateOutletContext]=\"field\"></ng-container>\r\n <legend class=\"field-legend\" *ngIf=\"label\">\r\n <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n </legend>\r\n <div class=\"field-container\">\r\n @for (itemField of field.fieldGroup; track itemField) {\r\n @if (itemField.display) {\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n }\r\n }\r\n </div>\r\n <ng-container [ngTemplateOutlet]=\"field | dynamicFormTemplate : 'suffix'\"\r\n [ngTemplateOutletContext]=\"field\"></ng-container>\r\n}\r\n" }]
|
|
2300
2327
|
}] });
|
|
2301
2328
|
|
|
2302
2329
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2303
2330
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2304
|
-
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 });
|
|
2331
|
+
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\">\r\n <label class=\"field-label\" [for]=\"id\">\r\n <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n @if (props.markRequired) {\r\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n }\r\n @if (props.description) {\r\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n }\r\n </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n @if (label) {\r\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n [context]=\"field\"\r\n [additionalContext]=\"{label: label}\"></ng-container>\r\n }\r\n</ng-template>\r\n@if (field.display) {\r\n @if (props.labelAlign === \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n @for (itemField of field.fieldGroup; track itemField) {\r\n @if (itemField.display) {\r\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n <div class=\"form-fieldset-item\"\r\n [tabsItem]=\"itemField.id\"\r\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n [label]=\"itemField.props.label\">\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n </div>\r\n } @else {\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n }\r\n }\r\n }\r\n @if (showError && field.key !== null) {\r\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n <formly-validation-message\r\n [field]=\"field\"\r\n id=\"{{ id }}-formly-validation-error\"\r\n role=\"alert\"\r\n ></formly-validation-message>\r\n </div>\r\n }\r\n </tabs>\r\n @if (props.labelAlign === \"after\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n}\r\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", "path", "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 });
|
|
2305
2332
|
}
|
|
2306
2333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2307
2334
|
type: Component,
|
|
2308
|
-
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"] }]
|
|
2335
|
+
args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<ng-template #innerLabelTemplate let-label=\"label\">\r\n <label class=\"field-label\" [for]=\"id\">\r\n <span [innerHTML]=\"label | safe: 'html'\"></span>\r\n @if (props.markRequired) {\r\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\r\n }\r\n @if (props.description) {\r\n <p class=\"field-description\" [innerHTML]=\"props.description | translate | safe: 'html'\"></p>\r\n }\r\n </label>\r\n</ng-template>\r\n<ng-template #labelTemplate>\r\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\r\n @if (label) {\r\n <ng-container [ngxTemplateOutlet]=\"(field | dynamicFormTemplate : 'label') || innerLabelTemplate\"\r\n [context]=\"field\"\r\n [additionalContext]=\"{label: label}\"></ng-container>\r\n }\r\n</ng-template>\r\n@if (field.display) {\r\n @if (props.labelAlign === \"before\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n <tabs class=\"field-container\" [testId]=\"(field.testId || 'form') + '-tab'\">\r\n @for (itemField of field.fieldGroup; track itemField) {\r\n @if (itemField.display) {\r\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\r\n <div class=\"form-fieldset-item\"\r\n [tabsItem]=\"itemField.id\"\r\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\r\n [label]=\"itemField.props.label\">\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n </div>\r\n } @else {\r\n <formly-field [field]=\"itemField\"></formly-field>\r\n }\r\n }\r\n }\r\n @if (showError && field.key !== null) {\r\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\r\n <formly-validation-message\r\n [field]=\"field\"\r\n id=\"{{ id }}-formly-validation-error\"\r\n role=\"alert\"\r\n ></formly-validation-message>\r\n </div>\r\n }\r\n </tabs>\r\n @if (props.labelAlign === \"after\") {\r\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n }\r\n}\r\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"] }]
|
|
2309
2336
|
}] });
|
|
2310
2337
|
|
|
2311
2338
|
// --- Components ---
|
|
@@ -2438,5 +2465,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2438
2465
|
* Generated bundle index. Do not edit.
|
|
2439
2466
|
*/
|
|
2440
2467
|
|
|
2441
|
-
export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
|
|
2468
|
+
export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, enumValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
|
|
2442
2469
|
//# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map
|