@stemy/ngx-dynamic-form 19.8.9 → 19.8.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i2 from '@stemy/ngx-utils';
2
- import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, FactoryDependencies, ForbiddenZone, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
2
+ import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, FactoryDependencies, ForbiddenZone, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
3
3
  import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject } from 'rxjs';
4
4
  import { debounceTime } from 'rxjs/operators';
5
5
  import { __decorate } from 'tslib';
@@ -48,10 +48,11 @@ function defineFormControl(target, propertyKey, cb) {
48
48
  ReflectUtils.defineMetadata("dynamicFormField", builder, target, propertyKey);
49
49
  ReflectUtils.defineMetadata("dynamicFormFields", fields, target);
50
50
  }
51
- function FormSerializable(data) {
52
- return (target, key) => {
53
- defineFormControl(target, key, (fb) => fb.createFormSerializer(data));
54
- };
51
+ function defineFormFieldSet(target, data) {
52
+ const fieldSets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
53
+ const existing = fieldSets.get(data.id) || data;
54
+ fieldSets.set(data.id, Object.assign({}, existing, data));
55
+ ReflectUtils.defineMetadata("dynamicFormFieldSets", fieldSets, target);
55
56
  }
56
57
  function FormInput(data) {
57
58
  data = data || {};
@@ -83,10 +84,6 @@ function FormUpload(data) {
83
84
  defineFormControl(target, key, (fb, path, options) => fb.createFormUpload(key, data, path, options));
84
85
  };
85
86
  }
86
- function FormFile(data) {
87
- console.warn(`@FormFile decorator is deprecated, use @FormUpload instead`);
88
- return FormUpload(data);
89
- }
90
87
  function FormStatic(data) {
91
88
  data = data || {};
92
89
  return (target, key) => {
@@ -110,9 +107,15 @@ function FormArray(itemType, data) {
110
107
  });
111
108
  };
112
109
  }
113
- function FormModel(data) {
114
- console.warn(`@FormModel decorator is deprecated, use @FormGroup instead`);
115
- return FormGroup(data);
110
+ function FormSerializable(data) {
111
+ return (target, key) => {
112
+ defineFormControl(target, key, (fb) => fb.createFormSerializer(key, data));
113
+ };
114
+ }
115
+ function FormFieldSet(data) {
116
+ return (target) => {
117
+ defineFormFieldSet(target, data);
118
+ };
116
119
  }
117
120
 
118
121
  function validationMessage(errorKey) {
@@ -476,6 +479,9 @@ class ConfigForSchemaWrap {
476
479
  get labelCustomizer() {
477
480
  return this.opts.labelCustomizer;
478
481
  }
482
+ get legacyLabels() {
483
+ return this.opts.legacyLabels;
484
+ }
479
485
  get testId() {
480
486
  return this.opts.testId;
481
487
  }
@@ -584,9 +590,11 @@ class DynamicFormBuilderService {
584
590
  this.events.languageChanged.subscribe(value => lang.next(value));
585
591
  this.language = lang;
586
592
  }
587
- resolveFormFields(target, parent, options) {
588
- const prototype = target?.prototype || {};
589
- const fields = ReflectUtils.getMetadata("dynamicFormFields", target?.prototype || {}) || new Set();
593
+ resolveFormFields(type, parent, options) {
594
+ const target = type || { prototype: null };
595
+ const prototype = target.prototype || target;
596
+ const fields = ReflectUtils.getMetadata("dynamicFormFields", prototype) || new Set();
597
+ const sets = ReflectUtils.getMetadata("dynamicFormFieldSets", target) || new Map();
590
598
  const result = [];
591
599
  for (const key of fields) {
592
600
  const builder = ReflectUtils.getMetadata("dynamicFormField", prototype, key);
@@ -595,25 +603,25 @@ class DynamicFormBuilderService {
595
603
  result.push(field);
596
604
  }
597
605
  }
598
- return this.createFieldSets(result, parent, options);
606
+ return this.createFieldSets(result, parent, options, Array.from(sets.values()));
599
607
  }
600
- resolveFormGroup(key, target, data, parent = null, options = {}) {
608
+ resolveFormGroup(key, target, data, parent = null, options) {
601
609
  return this.createFormGroup(key, sp => this.resolveFormFields(target, sp, options), data, parent, options);
602
610
  }
603
- resolveFormArray(key, itemType, data, parent = null, options = {}) {
611
+ resolveFormArray(key, itemType, data, parent = null, options) {
604
612
  return this.createFormArray(key, sp => {
605
613
  return typeof itemType === "function" ? this.resolveFormFields(itemType, sp, options) : this.createFormInput("", typeof itemType === "string" ? { type: `${itemType}` } : itemType, sp, options);
606
614
  }, data, parent, options);
607
615
  }
608
- createFieldSets(fields, parent, options) {
616
+ createFieldSets(fields, parent, options, sets = []) {
609
617
  const result = [];
610
618
  const groups = {};
611
619
  fields = Array.from(fields || [])
612
620
  .sort((a, b) => a.priority - b.priority);
613
- fields.forEach(f => {
614
- if (Array.isArray(f.fieldGroup) && Array.isArray(f.wrappers) && f.wrappers[0] === "form-fieldset") {
621
+ fields.forEach(field => {
622
+ if (this.isFieldset(field)) {
615
623
  // This field is an already existing set
616
- groups[f.id] = f.fieldGroup;
624
+ groups[field.id] = field.fieldGroup;
617
625
  }
618
626
  });
619
627
  for (const field of fields) {
@@ -621,6 +629,7 @@ class DynamicFormBuilderService {
621
629
  // If we have a fieldset name defined, then push the property fields into a group
622
630
  if (fsName) {
623
631
  const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
632
+ const set = sets.find(s => s.id === fsName);
624
633
  let fieldGroup = groups[id];
625
634
  if (!fieldGroup) {
626
635
  fieldGroup = [];
@@ -630,9 +639,10 @@ class DynamicFormBuilderService {
630
639
  fieldGroup,
631
640
  wrappers: ["form-fieldset"],
632
641
  props: {
633
- label: this.getLabel(fsName, fsName, parent, options),
642
+ label: this.getLabel(fsName, null, parent, options, "title"),
634
643
  hidden: false,
635
- className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
644
+ classes: set?.classes,
645
+ layout: set?.layout,
636
646
  },
637
647
  hooks: {},
638
648
  expressions: {}
@@ -646,13 +656,14 @@ class DynamicFormBuilderService {
646
656
  }
647
657
  else if (field.asFieldSet && !groups[field.id]) {
648
658
  const fsName = String(field.key);
649
- const id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
650
- field.id = id;
659
+ const set = sets.find(s => s.id === fsName);
660
+ field.id = !parent?.path ? fsName : `${parent.path}.${fsName}`;
651
661
  field.wrappers = ["form-fieldset"];
652
662
  field.props = {
653
- label: this.getLabel(fsName, fsName, parent, options),
663
+ label: this.getLabel(fsName, null, parent, options, "title"),
654
664
  hidden: false,
655
- className: `dynamic-form-fieldset dynamic-form-fieldset-${id}`
665
+ classes: set?.classes,
666
+ layout: set?.layout,
656
667
  };
657
668
  field.expressions = {};
658
669
  this.setExpressions(field, options);
@@ -807,6 +818,7 @@ class DynamicFormBuilderService {
807
818
  if (lang && translation) {
808
819
  // Use translation component if the sub items are correct
809
820
  array.type = "translation";
821
+ lang.serialize = () => true;
810
822
  setFieldHidden(lang);
811
823
  setFieldProp(translation, "label", "");
812
824
  }
@@ -840,12 +852,13 @@ class DynamicFormBuilderService {
840
852
  ? result.then(handleItems)
841
853
  : handleItems(result);
842
854
  }
843
- createFormSerializer(data) {
855
+ createFormSerializer(key, data) {
844
856
  const options = ObjectUtils.isFunction(data) ? {
845
857
  serializer: data,
846
858
  } : data || { serialize: true };
847
859
  const serialize = ReflectUtils.resolve(options.serialize, this.injector);
848
860
  return {
861
+ key,
849
862
  serialize: ObjectUtils.isFunction(serialize) ? serialize : () => {
850
863
  return serialize;
851
864
  },
@@ -872,25 +885,40 @@ class DynamicFormBuilderService {
872
885
  control.setValue(field.defaultValue);
873
886
  return options;
874
887
  }
875
- getLabel(key, label, parent, options) {
888
+ isFieldset(field) {
889
+ return Array.isArray(field.fieldGroup) && Array.isArray(field.wrappers) && field.wrappers[0] === "form-fieldset";
890
+ }
891
+ getLabel(key, label, parent, options, legacyPrefix = "") {
892
+ options = options || { labelPrefix: "" };
876
893
  const labelPrefix = !ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix;
877
- const pathPrefix = `${parent?.props?.label || labelPrefix}`;
894
+ if (ObjectUtils.isFunction(options.labelCustomizer)) {
895
+ return options.labelCustomizer(key, label, parent, labelPrefix) || "";
896
+ }
897
+ // Exceptional case, to be able to have an "empty" label element in the HTML just to fill the space.
898
+ if (label === " ")
899
+ return "\\s";
900
+ const pathPrefix = options.legacyLabels
901
+ ? String(legacyPrefix || labelPrefix)
902
+ : String(parent?.props?.label || labelPrefix);
878
903
  const labelItems = ObjectUtils.isString(label)
879
904
  ? (!label ? [] : [labelPrefix, label])
880
905
  : [pathPrefix, `${key || ""}`];
881
906
  return labelItems.filter(l => l.length > 0).join(".");
882
907
  }
883
908
  createFormField(key, type, data, props, parent, options) {
884
- const wrappers = Array.isArray(data.wrappers) ? Array.from(data.wrappers) : [];
885
- if (type !== "array" && wrappers.length === 0) {
886
- wrappers.unshift(!type ? "form-group" : "form-field");
909
+ let wrappers = Array.isArray(data.wrappers) ? Array.from(data.wrappers) : [];
910
+ if (type !== "array") {
911
+ wrappers = !type
912
+ ? ArrayUtils.unique([wrappers.length === 0 ? "form-group" : undefined, ...wrappers])
913
+ : ArrayUtils.unique(["form-field", ...wrappers]);
887
914
  }
888
915
  const disabled = ReflectUtils.resolve(data.disabled, this.injector);
889
916
  const hidden = ReflectUtils.resolve(data.hidden, this.injector);
890
917
  const field = {
891
- ...this.createFormSerializer(data),
918
+ ...this.createFormSerializer(key, data),
892
919
  fieldSet: String(data.fieldSet || ""),
893
920
  priority: isNaN(data.priority) ? Number.MAX_SAFE_INTEGER : Number(data.priority),
921
+ wrappers: wrappers.filter(ObjectUtils.isDefined),
894
922
  type: data.componentType || type,
895
923
  resetOnHide: false,
896
924
  validators: {},
@@ -898,8 +926,7 @@ class DynamicFormBuilderService {
898
926
  props: {
899
927
  ...(data.props || {}),
900
928
  ...props,
901
- label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
902
- ?? this.getLabel(key, data.label, parent, options),
929
+ label: this.getLabel(key, data.label, parent, options),
903
930
  labelAlign: data.labelAlign === "after" ? "after" : "before",
904
931
  description: data.description,
905
932
  hideLabel: data.hideLabel === true,
@@ -924,9 +951,7 @@ class DynamicFormBuilderService {
924
951
  const hidden = target.props?.__hidden;
925
952
  return !!hidden(target, this.injector);
926
953
  }
927
- },
928
- key,
929
- wrappers,
954
+ }
930
955
  };
931
956
  // Parent object will be available for customizers as a property, until it gets redefined by formly
932
957
  Object.defineProperty(field, "parent", {
@@ -965,11 +990,22 @@ class DynamicFormBuilderService {
965
990
  if (className) {
966
991
  return className;
967
992
  }
968
- const type = String(target.type || "group").replace("formly-", "");
969
- const typeName = ObjectUtils.isConstructor(type)
970
- ? `${target.type.name}`.toLowerCase().replace("component", "")
971
- : type;
972
- return [`dynamic-form-field`, `dynamic-form-field-${target.key}`, `dynamic-form-${typeName}`].concat(Array.isArray(classes) ? classes : [classes || ""], (Array.isArray(layout) ? layout : [layout || ""]).map(layout => `dynamic-form-layout-${layout}`)).filter(c => c?.length > 0).join(" ");
993
+ const idName = String(field.id || field.key || "").replace(/\./, "-");
994
+ let baseName = `dynamic-form-fieldset dynamic-form-fieldset-${idName}`;
995
+ if (!this.isFieldset(target)) {
996
+ const type = String(target.type || "group").replace("formly-", "");
997
+ const typeName = ObjectUtils.isConstructor(type)
998
+ ? `${target.type.name}`.toLowerCase().replace("component", "")
999
+ : type;
1000
+ baseName = `dynamic-form-field dynamic-form-field-${target.key} dynamic-form-${typeName}`;
1001
+ }
1002
+ const classesName = Array.isArray(classes) ? classes : [classes];
1003
+ const layoutName = Array.isArray(layout) ? layout : [layout];
1004
+ return [
1005
+ baseName,
1006
+ ...classesName,
1007
+ ...layoutName.map(l => !l ? null : `dynamic-form-layout-${l}`)
1008
+ ].filter(ObjectUtils.isStringWithValue).join(" ");
973
1009
  },
974
1010
  path: target => {
975
1011
  const tp = target.parent;
@@ -979,7 +1015,7 @@ class DynamicFormBuilderService {
979
1015
  },
980
1016
  testId: target => {
981
1017
  const tp = target.parent;
982
- const prefix = !tp?.testId ? options.testId || "" : tp.testId;
1018
+ const prefix = !tp?.testId ? options?.testId || "" : tp.testId;
983
1019
  const key = !target.key ? `` : `-${target.key}`;
984
1020
  return !prefix ? String(target.key ?? "") : `${prefix}${key}`;
985
1021
  }
@@ -1035,7 +1071,7 @@ class DynamicFormSchemaService {
1035
1071
  const propFields = await this.getFormFieldsForProp(property, schema, options, parent);
1036
1072
  fields.push(...propFields);
1037
1073
  }
1038
- return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options);
1074
+ return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options, schema.sets || []);
1039
1075
  }
1040
1076
  async getFormFieldsForProp(property, schema, options, parent) {
1041
1077
  const field = await this.getFormFieldForProp(property, options, parent);
@@ -1724,6 +1760,7 @@ class DynamicFormComponent {
1724
1760
  labelCustomizer = input(null);
1725
1761
  testId = input("");
1726
1762
  useTabs = input(false);
1763
+ legacyLabels = input(false);
1727
1764
  data = input({});
1728
1765
  fields = input(null);
1729
1766
  fieldChanges = new Subject();
@@ -1737,6 +1774,7 @@ class DynamicFormComponent {
1737
1774
  const options = {
1738
1775
  labelPrefix: this.labelPrefix(),
1739
1776
  labelCustomizer: this.labelCustomizer(),
1777
+ legacyLabels: this.legacyLabels(),
1740
1778
  testId: this.testId(),
1741
1779
  };
1742
1780
  const fields = this.fields() || this.builder.resolveFormFields(this.data()?.constructor, null, options);
@@ -1797,7 +1835,7 @@ class DynamicFormComponent {
1797
1835
  return field?.formControl ?? null;
1798
1836
  }
1799
1837
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
1800
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 });
1838
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", 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 }, legacyLabels: { classPropertyName: "legacyLabels", publicName: "legacyLabels", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", 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 });
1801
1839
  }
1802
1840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormComponent, decorators: [{
1803
1841
  type: Component,
@@ -1824,11 +1862,11 @@ class DynamicFormArrayComponent extends FieldArrayType {
1824
1862
  this.currentTab.set(Math.min(this.currentTab(), length - 1));
1825
1863
  }
1826
1864
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1827
- 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: "@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 @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\" (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\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.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1865
+ 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\" (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\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 });
1828
1866
  }
1829
1867
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
1830
1868
  type: Component,
1831
- args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, 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 @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\" (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\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"] }]
1869
+ args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, 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\" (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\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"] }]
1832
1870
  }] });
1833
1871
 
1834
1872
  class DynamicFormChipsComponent extends DynamicFieldType {
@@ -1921,29 +1959,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
1921
1959
 
1922
1960
  class DynamicFormFieldComponent extends FieldWrapper {
1923
1961
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1924
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n @if (props.label && props.hideLabel !== true) {\n <label class=\"field-label\" [for]=\"id\">\n <span [innerHTML]=\"props.label | translate | 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</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1962
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <label class=\"field-label\" [for]=\"id\">\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</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></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.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1925
1963
  }
1926
1964
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
1927
1965
  type: Component,
1928
- args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n @if (props.label && props.hideLabel !== true) {\n <label class=\"field-label\" [for]=\"id\">\n <span [innerHTML]=\"props.label | translate | 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</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
1966
+ args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<ng-template #labelTemplate>\n @let label = !props.label || props.hideLabel ? null : props.label | translate;\n @if (label) {\n <label class=\"field-label\" [for]=\"id\">\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</ng-template>\n@if (props.labelAlign === \"before\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\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@if (props.labelAlign === \"after\") {\n <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n}\n" }]
1929
1967
  }] });
1930
1968
 
1931
1969
  class DynamicFormFieldsetComponent extends FieldWrapper {
1932
1970
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1933
- 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: "@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 });
1971
+ 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 <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}\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.SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1934
1972
  }
1935
1973
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
1936
1974
  type: Component,
1937
- args: [{ standalone: false, selector: "dynamic-form-fieldset", encapsulation: ViewEncapsulation.None, 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" }]
1975
+ 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 <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}\n" }]
1938
1976
  }] });
1939
1977
 
1940
1978
  class DynamicFormGroupComponent extends FieldWrapper {
1941
1979
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
1942
- 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: "@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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\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 === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\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: "component", type: i3.LegacyFormlyValidationMessage, selector: "formly-validation-message" }, { kind: "pipe", type: i2.IncludesPipe, name: "includes" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
1980
+ 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: "@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 <tabs class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"ix\"\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\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: "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" }], encapsulation: i0.ViewEncapsulation.None });
1943
1981
  }
1944
1982
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
1945
1983
  type: Component,
1946
- args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, 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 @if (props.markRequired) {\n <span class=\"field-required\" aria-hidden=\"true\">*</span>\n }\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 === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\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"] }]
1984
+ args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, 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 <tabs class=\"field-container\">\n @for (itemField of field.fieldGroup; track itemField; let ix = $index) {\n @if (itemField.display) {\n @if (props.useTabs && itemField.wrappers | includes: 'form-fieldset') {\n <div class=\"form-fieldset-item\"\n [tabsItem]=\"ix\"\n [classes]=\"['form-fieldset-tab', itemField.valid === false ? 'invalid' : 'valid']\"\n [label]=\"itemField.props.label\">\n <formly-field [field]=\"itemField\"></formly-field>\n </div>\n } @else {\n <formly-field [field]=\"itemField\"></formly-field>\n }\n }\n }\n <div *ngIf=\"showError\" class=\"field-errors invalid-feedback\">\n <formly-validation-message\n [field]=\"field\"\n id=\"{{ id }}-formly-validation-error\"\n role=\"alert\"\n ></formly-validation-message>\n </div>\n </tabs>\n}\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"] }]
1947
1985
  }] });
1948
1986
 
1949
1987
  // --- Components ---
@@ -2067,5 +2105,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
2067
2105
  * Generated bundle index. Do not edit.
2068
2106
  */
2069
2107
 
2070
- export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFile, FormGroup, FormInput, FormModel, 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, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldValue, translationValidation };
2108
+ export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, 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, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, setFieldValue, translationValidation };
2071
2109
  //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map