@stemy/ngx-dynamic-form 19.9.22 → 19.9.23
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.
|
@@ -1136,6 +1136,7 @@ class DynamicFormSchemaService {
|
|
|
1136
1136
|
const property = schema.properties[key];
|
|
1137
1137
|
// Property priority is necessary when merging different schemas
|
|
1138
1138
|
property.priority = property.priority ?? (priority += PRIORITY_DIFF);
|
|
1139
|
+
// Generate sub-fields for property
|
|
1139
1140
|
const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
|
|
1140
1141
|
fields.push(...propFields);
|
|
1141
1142
|
}
|
|
@@ -1264,6 +1265,7 @@ class DynamicFormSchemaService {
|
|
|
1264
1265
|
return this.getFormFieldsForRefs(subSchemas, sp, options);
|
|
1265
1266
|
}, {
|
|
1266
1267
|
...this.getFormFieldData(property, options),
|
|
1268
|
+
useTabs: property.useTabs
|
|
1267
1269
|
}, parent, options);
|
|
1268
1270
|
}
|
|
1269
1271
|
getFormInputConfig(property, options, parent) {
|
|
@@ -2327,12 +2329,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
|
|
|
2327
2329
|
}] });
|
|
2328
2330
|
|
|
2329
2331
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
2332
|
+
get parent() {
|
|
2333
|
+
return this.field?.parent;
|
|
2334
|
+
}
|
|
2330
2335
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
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.
|
|
2336
|
+
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 || parent?.props?.useTabs ? 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.fieldGroup) {\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: [".dynamic-form-group>.field-container{overflow:hidden}.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.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: DynamicFormTemplatePipe, name: "dynamicFormTemplate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
2332
2337
|
}
|
|
2333
2338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
2334
2339
|
type: Component,
|
|
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.
|
|
2340
|
+
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 || parent?.props?.useTabs ? 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.fieldGroup) {\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: [".dynamic-form-group>.field-container{overflow:hidden}.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"] }]
|
|
2336
2341
|
}] });
|
|
2337
2342
|
|
|
2338
2343
|
// --- Components ---
|
|
@@ -2380,6 +2385,9 @@ class NgxDynamicFormModule {
|
|
|
2380
2385
|
{ name: "form-field", component: DynamicFormFieldComponent },
|
|
2381
2386
|
{ name: "form-fieldset", component: DynamicFormFieldsetComponent },
|
|
2382
2387
|
{ name: "form-group", component: DynamicFormGroupComponent },
|
|
2388
|
+
// These are just placeholders, so the sample app does not break when it is in a more complex context
|
|
2389
|
+
{ name: "form-integration", component: DynamicFormFieldComponent },
|
|
2390
|
+
{ name: "form-address", component: DynamicFormGroupComponent },
|
|
2383
2391
|
],
|
|
2384
2392
|
extras: {
|
|
2385
2393
|
resetFieldOnHide: false,
|