@stemy/ngx-dynamic-form 19.6.7 → 19.6.8
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.
|
@@ -307,12 +307,15 @@ function getFieldsByPredicate(field, cb) {
|
|
|
307
307
|
function getFieldsByKey(field, key) {
|
|
308
308
|
return getFieldsByPredicate(field, f => f.key === key);
|
|
309
309
|
}
|
|
310
|
-
async function getSelectOptions(
|
|
311
|
-
const options =
|
|
310
|
+
async function getSelectOptions(fieldOrOpts) {
|
|
311
|
+
const options = fieldOrOpts.props?.options || fieldOrOpts;
|
|
312
312
|
if (options instanceof Observable) {
|
|
313
313
|
return firstValueFrom(options);
|
|
314
314
|
}
|
|
315
|
-
|
|
315
|
+
if (options instanceof Promise) {
|
|
316
|
+
return await options;
|
|
317
|
+
}
|
|
318
|
+
return Array.isArray(options) ? options : [];
|
|
316
319
|
}
|
|
317
320
|
function replaceFieldArray(field, items) {
|
|
318
321
|
const model = field.model || [];
|
|
@@ -354,10 +357,10 @@ function setFieldProp(field, prop, value) {
|
|
|
354
357
|
return setFieldProps(field, { [prop]: value });
|
|
355
358
|
}
|
|
356
359
|
function setFieldHidden(field, hidden = true) {
|
|
357
|
-
setFieldProp(field, "
|
|
360
|
+
setFieldProp(field, "__hidden", ObjectUtils.isFunction(hidden) ? hidden : () => hidden);
|
|
358
361
|
}
|
|
359
362
|
function setFieldDisabled(field, disabled = true) {
|
|
360
|
-
setFieldProp(field, "
|
|
363
|
+
setFieldProp(field, "__disabled", ObjectUtils.isFunction(disabled) ? disabled : () => disabled);
|
|
361
364
|
}
|
|
362
365
|
function setFieldHooks(field, hooks) {
|
|
363
366
|
field.hooks = field.hooks || {};
|
|
@@ -379,6 +382,10 @@ const MAX_INPUT_NUM = 1999999999;
|
|
|
379
382
|
const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
|
|
380
383
|
|
|
381
384
|
class ConfigForSchemaWrap {
|
|
385
|
+
opts;
|
|
386
|
+
mode;
|
|
387
|
+
injector;
|
|
388
|
+
schema;
|
|
382
389
|
get labelPrefix() {
|
|
383
390
|
return this.opts.labelPrefix;
|
|
384
391
|
}
|
|
@@ -391,6 +398,7 @@ class ConfigForSchemaWrap {
|
|
|
391
398
|
get context() {
|
|
392
399
|
return this.opts.context;
|
|
393
400
|
}
|
|
401
|
+
fieldCustomizer;
|
|
394
402
|
constructor(opts, mode, injector, schema) {
|
|
395
403
|
this.opts = opts;
|
|
396
404
|
this.mode = mode;
|
|
@@ -480,6 +488,11 @@ function getFormValidationErrors(controls, parentPath = "") {
|
|
|
480
488
|
}
|
|
481
489
|
|
|
482
490
|
class DynamicFormBuilderService {
|
|
491
|
+
injector;
|
|
492
|
+
events;
|
|
493
|
+
api;
|
|
494
|
+
languages;
|
|
495
|
+
language;
|
|
483
496
|
constructor(injector, events, api, languages) {
|
|
484
497
|
this.injector = injector;
|
|
485
498
|
this.events = events;
|
|
@@ -604,12 +617,13 @@ class DynamicFormBuilderService {
|
|
|
604
617
|
}, parent, options);
|
|
605
618
|
setFieldHooks(field, {
|
|
606
619
|
onInit: target => {
|
|
607
|
-
const
|
|
620
|
+
const factory = ReflectUtils.resolve(data.options, this.injector);
|
|
621
|
+
const options = factory(target, this.injector);
|
|
608
622
|
const root = target.formControl.root;
|
|
609
623
|
setFieldProp(target, "options", options instanceof Observable
|
|
610
624
|
? options
|
|
611
625
|
: controlValues(root).pipe(combineLatestWith(this.language), switchMap(async () => {
|
|
612
|
-
const results = await
|
|
626
|
+
const results = await factory(target, this.injector) || [];
|
|
613
627
|
return this.fixSelectOptions(target, results);
|
|
614
628
|
})));
|
|
615
629
|
}
|
|
@@ -745,6 +759,8 @@ class DynamicFormBuilderService {
|
|
|
745
759
|
if (type !== "array") {
|
|
746
760
|
wrappers.unshift(!type ? "form-group" : "form-field");
|
|
747
761
|
}
|
|
762
|
+
const disabled = ReflectUtils.resolve(data.disabled, this.injector);
|
|
763
|
+
const hidden = ReflectUtils.resolve(data.hidden, this.injector);
|
|
748
764
|
const field = {
|
|
749
765
|
key,
|
|
750
766
|
wrappers,
|
|
@@ -756,8 +772,6 @@ class DynamicFormBuilderService {
|
|
|
756
772
|
props: {
|
|
757
773
|
...(data.props || {}),
|
|
758
774
|
...props,
|
|
759
|
-
disabled: data.disabled === true,
|
|
760
|
-
hidden: data.hidden === true,
|
|
761
775
|
label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
|
|
762
776
|
?? this.getLabel(key, data.label, parent, options),
|
|
763
777
|
hideLabel: data.hideLabel === true,
|
|
@@ -766,7 +780,9 @@ class DynamicFormBuilderService {
|
|
|
766
780
|
className: data.className || "",
|
|
767
781
|
hideRequiredMarker: data.hideRequiredMarker === true,
|
|
768
782
|
formCheck: "nolabel",
|
|
769
|
-
labelPosition: "before"
|
|
783
|
+
labelPosition: "before",
|
|
784
|
+
__disabled: ObjectUtils.isFunction(disabled) ? disabled : () => disabled,
|
|
785
|
+
__hidden: ObjectUtils.isFunction(hidden) ? hidden : () => hidden
|
|
770
786
|
},
|
|
771
787
|
modelOptions: {
|
|
772
788
|
updateOn: "change"
|
|
@@ -776,7 +792,15 @@ class DynamicFormBuilderService {
|
|
|
776
792
|
serializer: () => data.serializer,
|
|
777
793
|
serialize: () => data.serialize,
|
|
778
794
|
"props.hideRequiredMarker": target => target.type === "checkbox",
|
|
779
|
-
"props.required": target => !!target.validators?.required
|
|
795
|
+
"props.required": target => !!target.validators?.required,
|
|
796
|
+
"props.disabled": target => {
|
|
797
|
+
const disabled = target.props?.__disabled;
|
|
798
|
+
return !!disabled(target, this.injector);
|
|
799
|
+
},
|
|
800
|
+
"props.hidden": target => {
|
|
801
|
+
const hidden = target.props?.__hidden;
|
|
802
|
+
return !!hidden(target, this.injector);
|
|
803
|
+
}
|
|
780
804
|
}
|
|
781
805
|
};
|
|
782
806
|
// Parent object will be available for customizers as a property, until it gets redefined by formly
|
|
@@ -841,8 +865,8 @@ class DynamicFormBuilderService {
|
|
|
841
865
|
}
|
|
842
866
|
});
|
|
843
867
|
}
|
|
844
|
-
static
|
|
845
|
-
static
|
|
868
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
869
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService });
|
|
846
870
|
}
|
|
847
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
|
|
848
872
|
type: Injectable
|
|
@@ -855,6 +879,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
855
879
|
}] }] });
|
|
856
880
|
|
|
857
881
|
class DynamicFormSchemaService {
|
|
882
|
+
openApi;
|
|
883
|
+
injector;
|
|
884
|
+
builder;
|
|
858
885
|
get api() {
|
|
859
886
|
return this.openApi.api;
|
|
860
887
|
}
|
|
@@ -1214,14 +1241,18 @@ class DynamicFormSchemaService {
|
|
|
1214
1241
|
validators.itemsMaxValue = maxValueValidation(items.maximum, true);
|
|
1215
1242
|
}
|
|
1216
1243
|
}
|
|
1217
|
-
static
|
|
1218
|
-
static
|
|
1244
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1245
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService });
|
|
1219
1246
|
}
|
|
1220
1247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormSchemaService, decorators: [{
|
|
1221
1248
|
type: Injectable
|
|
1222
1249
|
}], ctorParameters: () => [{ type: i2.OpenApiService }, { type: i0.Injector }, { type: DynamicFormBuilderService }] });
|
|
1223
1250
|
|
|
1224
1251
|
class DynamicFormService {
|
|
1252
|
+
fs;
|
|
1253
|
+
fb;
|
|
1254
|
+
injector;
|
|
1255
|
+
api;
|
|
1225
1256
|
constructor(fs, fb, injector, api) {
|
|
1226
1257
|
this.fs = fs;
|
|
1227
1258
|
this.fb = fb;
|
|
@@ -1353,8 +1384,8 @@ class DynamicFormService {
|
|
|
1353
1384
|
}
|
|
1354
1385
|
});
|
|
1355
1386
|
}
|
|
1356
|
-
static
|
|
1357
|
-
static
|
|
1387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, deps: [{ token: DynamicFormSchemaService }, { token: DynamicFormBuilderService }, { token: i0.Injector }, { token: API_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1388
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService });
|
|
1358
1389
|
}
|
|
1359
1390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, decorators: [{
|
|
1360
1391
|
type: Injectable
|
|
@@ -1364,6 +1395,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1364
1395
|
}] }] });
|
|
1365
1396
|
|
|
1366
1397
|
class AsyncSubmitDirective {
|
|
1398
|
+
method = input(null, { alias: "async-submit" });
|
|
1399
|
+
mode = input("click");
|
|
1400
|
+
form = input();
|
|
1401
|
+
context = input();
|
|
1402
|
+
onSuccess = output();
|
|
1403
|
+
onError = output();
|
|
1404
|
+
toaster = inject(TOASTER_SERVICE);
|
|
1405
|
+
renderer = inject(Renderer2);
|
|
1406
|
+
elem = inject(ElementRef);
|
|
1407
|
+
status = computed(() => {
|
|
1408
|
+
const form = this.form();
|
|
1409
|
+
return form?.status() || null;
|
|
1410
|
+
});
|
|
1411
|
+
group = computed(() => {
|
|
1412
|
+
const form = this.form();
|
|
1413
|
+
return form?.group() || null;
|
|
1414
|
+
});
|
|
1415
|
+
loading = signal(false);
|
|
1416
|
+
callback = signal(null);
|
|
1367
1417
|
get isDisabled() {
|
|
1368
1418
|
return this.status() !== "VALID";
|
|
1369
1419
|
}
|
|
@@ -1371,25 +1421,6 @@ class AsyncSubmitDirective {
|
|
|
1371
1421
|
return this.loading();
|
|
1372
1422
|
}
|
|
1373
1423
|
constructor() {
|
|
1374
|
-
this.method = input(null, { alias: "async-submit" });
|
|
1375
|
-
this.mode = input("click");
|
|
1376
|
-
this.form = input();
|
|
1377
|
-
this.context = input();
|
|
1378
|
-
this.onSuccess = output();
|
|
1379
|
-
this.onError = output();
|
|
1380
|
-
this.toaster = inject(TOASTER_SERVICE);
|
|
1381
|
-
this.renderer = inject(Renderer2);
|
|
1382
|
-
this.elem = inject(ElementRef);
|
|
1383
|
-
this.status = computed(() => {
|
|
1384
|
-
const form = this.form();
|
|
1385
|
-
return form?.status() || null;
|
|
1386
|
-
});
|
|
1387
|
-
this.group = computed(() => {
|
|
1388
|
-
const form = this.form();
|
|
1389
|
-
return form?.group() || null;
|
|
1390
|
-
});
|
|
1391
|
-
this.loading = signal(false);
|
|
1392
|
-
this.callback = signal(null);
|
|
1393
1424
|
if (this.elem.nativeElement.tagName === "BUTTON") {
|
|
1394
1425
|
this.renderer.setAttribute(this.elem.nativeElement, "type", "button");
|
|
1395
1426
|
}
|
|
@@ -1444,8 +1475,8 @@ class AsyncSubmitDirective {
|
|
|
1444
1475
|
this.toaster.error(reason.message, reason.context);
|
|
1445
1476
|
});
|
|
1446
1477
|
}
|
|
1447
|
-
static
|
|
1448
|
-
static
|
|
1478
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1479
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: { classPropertyName: "method", publicName: "async-submit", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 });
|
|
1449
1480
|
}
|
|
1450
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
|
|
1451
1482
|
type: Directive,
|
|
@@ -1466,12 +1497,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1466
1497
|
}] } });
|
|
1467
1498
|
|
|
1468
1499
|
class DynamicFieldType extends FieldType {
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
this._errorState = false;
|
|
1473
|
-
this._focused = false;
|
|
1474
|
-
}
|
|
1500
|
+
stateChanges = new Subject();
|
|
1501
|
+
_errorState = false;
|
|
1502
|
+
_focused = false;
|
|
1475
1503
|
ngOnDestroy() {
|
|
1476
1504
|
delete this.formField?._control;
|
|
1477
1505
|
this.stateChanges.complete();
|
|
@@ -1558,8 +1586,8 @@ class DynamicFieldType extends FieldType {
|
|
|
1558
1586
|
};
|
|
1559
1587
|
}
|
|
1560
1588
|
}
|
|
1561
|
-
static
|
|
1562
|
-
static
|
|
1589
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1590
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFieldType, isStandalone: false, selector: "dynamic-field-type", usesInheritance: true, ngImport: i0, template: "", isInline: true });
|
|
1563
1591
|
}
|
|
1564
1592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFieldType, decorators: [{
|
|
1565
1593
|
type: Component,
|
|
@@ -1571,57 +1599,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1571
1599
|
}] });
|
|
1572
1600
|
|
|
1573
1601
|
class DynamicFormComponent {
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
1579
|
-
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
testId: this.testId(),
|
|
1596
|
-
};
|
|
1597
|
-
const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
|
|
1598
|
-
return [
|
|
1599
|
-
this.builder.createFormGroup(null, () => fields, {
|
|
1600
|
-
label: "",
|
|
1601
|
-
useTabs: this.useTabs(),
|
|
1602
|
-
hidden: false,
|
|
1603
|
-
className: "dynamic-form-root-group"
|
|
1604
|
-
}, null, options)
|
|
1605
|
-
];
|
|
1606
|
-
});
|
|
1607
|
-
this.group = computed(() => {
|
|
1608
|
-
this.config();
|
|
1609
|
-
return new FormGroup$1({});
|
|
1610
|
-
});
|
|
1611
|
-
this.status$ = rxResource({
|
|
1612
|
-
request: () => this.group(),
|
|
1613
|
-
loader: p => controlStatus(p.request),
|
|
1614
|
-
defaultValue: "PENDING"
|
|
1615
|
-
});
|
|
1616
|
-
this.status = computed(() => this.status$.value());
|
|
1617
|
-
this.onSubmit = output();
|
|
1618
|
-
this.onChanges = outputFromObservable(this.fieldChanges);
|
|
1619
|
-
this.options = {
|
|
1620
|
-
fieldChanges: this.fieldChanges,
|
|
1621
|
-
formState: {
|
|
1622
|
-
injector: inject(Injector)
|
|
1623
|
-
}
|
|
1602
|
+
builder = inject(DynamicFormBuilderService);
|
|
1603
|
+
events = inject(EventsService);
|
|
1604
|
+
languages = inject(LANGUAGE_SERVICE);
|
|
1605
|
+
labelPrefix = input("label");
|
|
1606
|
+
labelCustomizer = input(null);
|
|
1607
|
+
testId = input("");
|
|
1608
|
+
useTabs = input(false);
|
|
1609
|
+
data = input({});
|
|
1610
|
+
fields = input(null);
|
|
1611
|
+
fieldChanges = new Subject();
|
|
1612
|
+
language = toSignal(this.events.languageChanged, {
|
|
1613
|
+
initialValue: this.languages.currentLanguage
|
|
1614
|
+
});
|
|
1615
|
+
enableTranslations = toSignal(this.events.translationsEnabled, {
|
|
1616
|
+
initialValue: this.languages.enableTranslations
|
|
1617
|
+
});
|
|
1618
|
+
config = computed(() => {
|
|
1619
|
+
const options = {
|
|
1620
|
+
labelPrefix: this.labelPrefix(),
|
|
1621
|
+
labelCustomizer: this.labelCustomizer(),
|
|
1622
|
+
testId: this.testId(),
|
|
1624
1623
|
};
|
|
1624
|
+
const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
|
|
1625
|
+
return [
|
|
1626
|
+
this.builder.createFormGroup(null, () => fields, {
|
|
1627
|
+
label: "",
|
|
1628
|
+
useTabs: this.useTabs(),
|
|
1629
|
+
hidden: false,
|
|
1630
|
+
className: "dynamic-form-root-group"
|
|
1631
|
+
}, null, options)
|
|
1632
|
+
];
|
|
1633
|
+
});
|
|
1634
|
+
group = computed(() => {
|
|
1635
|
+
this.config();
|
|
1636
|
+
return new FormGroup$1({});
|
|
1637
|
+
});
|
|
1638
|
+
status$ = rxResource({
|
|
1639
|
+
request: () => this.group(),
|
|
1640
|
+
loader: p => controlStatus(p.request),
|
|
1641
|
+
defaultValue: "PENDING"
|
|
1642
|
+
});
|
|
1643
|
+
status = computed(() => this.status$.value());
|
|
1644
|
+
onSubmit = output();
|
|
1645
|
+
onChanges = outputFromObservable(this.fieldChanges);
|
|
1646
|
+
options = {
|
|
1647
|
+
fieldChanges: this.fieldChanges,
|
|
1648
|
+
formState: {
|
|
1649
|
+
injector: inject(Injector)
|
|
1650
|
+
}
|
|
1651
|
+
};
|
|
1652
|
+
constructor() {
|
|
1625
1653
|
effect(() => {
|
|
1626
1654
|
this.language();
|
|
1627
1655
|
this.enableTranslations();
|
|
@@ -1638,8 +1666,8 @@ class DynamicFormComponent {
|
|
|
1638
1666
|
reset() {
|
|
1639
1667
|
this.options?.resetModel?.();
|
|
1640
1668
|
}
|
|
1641
|
-
static
|
|
1642
|
-
static
|
|
1669
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1670
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, labelCustomizer: { classPropertyName: "labelCustomizer", publicName: "labelCustomizer", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, useTabs: { classPropertyName: "useTabs", publicName: "useTabs", isSignal: true, isRequired: false, transformFunction: null }, 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", onChanges: "onChanges" }, 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 });
|
|
1643
1671
|
}
|
|
1644
1672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
|
|
1645
1673
|
type: Component,
|
|
@@ -1647,10 +1675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1647
1675
|
}], ctorParameters: () => [] });
|
|
1648
1676
|
|
|
1649
1677
|
class DynamicFormArrayComponent extends FieldArrayType {
|
|
1650
|
-
|
|
1651
|
-
super(...arguments);
|
|
1652
|
-
this.currentTab = signal(0);
|
|
1653
|
-
}
|
|
1678
|
+
currentTab = signal(0);
|
|
1654
1679
|
clearItems() {
|
|
1655
1680
|
const control = this.formControl;
|
|
1656
1681
|
while (control.length > 0) {
|
|
@@ -1668,8 +1693,8 @@ class DynamicFormArrayComponent extends FieldArrayType {
|
|
|
1668
1693
|
const length = this.field.fieldGroup.length;
|
|
1669
1694
|
this.currentTab.set(Math.min(this.currentTab(), length - 1));
|
|
1670
1695
|
}
|
|
1671
|
-
static
|
|
1672
|
-
static
|
|
1696
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1697
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n @if (props.label && props.hideLabel !== true) {\n <label class=\"field-label\">\n {{ props.label | translate }}\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\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\" (click)=\"removeItem(ix)\"></btn>\n }\n @if (itemField.insertItem) {\n <btn icon=\"plus\" (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 icon=\"trash\" label=\"button.clear-items\" (click)=\"clearItems()\"></btn>\n }\n @if (props.addItem) {\n <btn icon=\"plus\" label=\"button.insert-item\" (click)=\"addItem()\"></btn>\n }\n </div>\n </div>\n}\n", styles: [".form-array-item.hidden-tab{display:none}.form-array-buttons{display:flex;gap:5px;margin-bottom:5px}\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: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1673
1698
|
}
|
|
1674
1699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
|
|
1675
1700
|
type: Component,
|
|
@@ -1677,8 +1702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1677
1702
|
}] });
|
|
1678
1703
|
|
|
1679
1704
|
class DynamicFormChipsComponent extends DynamicFieldType {
|
|
1680
|
-
static
|
|
1681
|
-
static
|
|
1705
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n [type]=\"props.type\"\n [step]=\"props.step\"\n [minLength]=\"props.minLength\"\n [maxLength]=\"props.maxLength\"\n [min]=\"props.min\"\n [max]=\"props.max\"\n [multiple]=\"props.multiple\"\n [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ 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.ChipsComponent, selector: "chips", inputs: ["value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1682
1707
|
}
|
|
1683
1708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
|
|
1684
1709
|
type: Component,
|
|
@@ -1686,8 +1711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1686
1711
|
}] });
|
|
1687
1712
|
|
|
1688
1713
|
class DynamicFormUploadComponent extends DynamicFieldType {
|
|
1689
|
-
static
|
|
1690
|
-
static
|
|
1714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n [multiple]=\"props.multiple\"\n [inline]=\"props.inline\"\n [accept]=\"props.accept\"\n [baseUrl]=\"props.url\"\n [makeUpload]=\"props.createUploadData\"\n [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ 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.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1691
1716
|
}
|
|
1692
1717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
|
|
1693
1718
|
type: Component,
|
|
@@ -1698,8 +1723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1698
1723
|
* This is just a test wrapper component
|
|
1699
1724
|
*/
|
|
1700
1725
|
class DynamicFormAlertComponent extends FieldWrapper {
|
|
1701
|
-
static
|
|
1702
|
-
static
|
|
1726
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormAlertComponent, isStandalone: false, selector: "dynamic-form-alert", usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-alert\">\n <ng-container #fieldComponent></ng-container>\n</div>\n", styles: [".dynamic-form-alert{border:2px dashed red;width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
|
|
1703
1728
|
}
|
|
1704
1729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormAlertComponent, decorators: [{
|
|
1705
1730
|
type: Component,
|
|
@@ -1707,8 +1732,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1707
1732
|
}] });
|
|
1708
1733
|
|
|
1709
1734
|
class DynamicFormFieldComponent extends FieldWrapper {
|
|
1710
|
-
static
|
|
1711
|
-
static
|
|
1735
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1736
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "@if (props.label && props.hideLabel !== true) {\n <label class=\"field-label\" [for]=\"id\">\n {{ props.label | translate }}\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n @if (props.required && props.hideRequiredMarker !== true) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n<div class=\"field-container\">\n <ng-container #fieldComponent></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", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1712
1737
|
}
|
|
1713
1738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
|
|
1714
1739
|
type: Component,
|
|
@@ -1716,8 +1741,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1716
1741
|
}] });
|
|
1717
1742
|
|
|
1718
1743
|
class DynamicFormFieldsetComponent extends FieldWrapper {
|
|
1719
|
-
static
|
|
1720
|
-
static
|
|
1744
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1745
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-fieldset", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n <legend class=\"field-legend\" *ngIf=\"props.label && !field.parent.props.useTabs\">\n {{ props.label | translate }}\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}\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.LegacyFormlyField, selector: "formly-field" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1721
1746
|
}
|
|
1722
1747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
|
|
1723
1748
|
type: Component,
|
|
@@ -1725,8 +1750,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1725
1750
|
}] });
|
|
1726
1751
|
|
|
1727
1752
|
class DynamicFormGroupComponent extends FieldWrapper {
|
|
1728
|
-
static
|
|
1729
|
-
static
|
|
1753
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1754
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "@if (field.display) {\n @if (props.label && props.hideLabel !== true) {\n <label class=\"field-label\">\n {{ props.label | translate }}\n <p class=\"field-description\" *ngIf=\"props.description\">{{ props.description | translate }}</p>\n </label>\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 ? 'valid' : 'invalid']\"\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 </tabs>\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: 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: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1730
1755
|
}
|
|
1731
1756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
|
|
1732
1757
|
type: Component,
|
|
@@ -1788,16 +1813,16 @@ class NgxDynamicFormModule {
|
|
|
1788
1813
|
static provideForms(config) {
|
|
1789
1814
|
return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
|
|
1790
1815
|
}
|
|
1791
|
-
static
|
|
1792
|
-
static
|
|
1816
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1817
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
|
|
1793
1818
|
FormsModule,
|
|
1794
1819
|
ReactiveFormsModule,
|
|
1795
1820
|
NgxUtilsModule,
|
|
1796
1821
|
FormlyModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
|
|
1797
1822
|
ReactiveFormsModule,
|
|
1798
1823
|
NgxUtilsModule,
|
|
1799
|
-
FormlyModule] });
|
|
1800
|
-
static
|
|
1824
|
+
FormlyModule] });
|
|
1825
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, providers: [
|
|
1801
1826
|
...pipes
|
|
1802
1827
|
], imports: [CommonModule,
|
|
1803
1828
|
FormsModule,
|
|
@@ -1806,7 +1831,7 @@ class NgxDynamicFormModule {
|
|
|
1806
1831
|
FormlyModule, FormsModule,
|
|
1807
1832
|
ReactiveFormsModule,
|
|
1808
1833
|
NgxUtilsModule,
|
|
1809
|
-
FormlyModule] });
|
|
1834
|
+
FormlyModule] });
|
|
1810
1835
|
}
|
|
1811
1836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
|
|
1812
1837
|
type: NgModule,
|