@stemy/ngx-dynamic-form 19.7.5 → 19.7.7

package/fesm2022/stemy-ngx-dynamic-form.mjs

@@ -90,6 +90,12 @@ function FormFile(data) {
     console.warn(`@FormFile decorator is deprecated, use @FormUpload instead`);
     return FormUpload(data);
 }
+function FormStatic(data) {
+    data = data || {};
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => fb.createFormStatic(key, data, path, options));
+    };
+}
 function FormGroup(data) {
     data = data || {};
     return (target, key) => {
@@ -281,7 +287,7 @@ function convertToDateFormat(value, format) {
 }
 /**
  * Convert value to date object with format (date, date-time)
- * @param value Value to convert to date string
+ * @param value Value to convert to date
  * @param format Expected date format (date, date-time)
  */
 function convertToDate(value, format) {
@@ -289,6 +295,15 @@ function convertToDate(value, format) {
         ? value
         : new Date(convertToDateFormat(value, format));
 }
+/**
+ * Convert potential number value to an actual number
+ * @param value Value to convert to number
+ * @param defaultVal Default value if original is not a number
+ */
+function convertToNumber(value, defaultVal) {
+    const num = Number(value);
+    return isNaN(num) ? defaultVal ?? value : num;
+}
 function getFieldByPath(field, path) {
     if (field.path === path) {
         return field;
@@ -596,13 +611,13 @@ class DynamicFormBuilderService {
         switch (type) {
             case "number":
             case "integer":
-                props.min = isNaN(data.min) ? MIN_INPUT_NUM : data.min;
-                props.max = isNaN(data.max) ? MAX_INPUT_NUM : data.max;
+                props.min = convertToNumber(data.min, MIN_INPUT_NUM);
+                props.max = convertToNumber(data.max, MAX_INPUT_NUM);
                 break;
             case "date":
             case "datetime-local":
-                props.min = data.min;
-                props.max = data.max;
+                props.min = convertToDateFormat(data.min, type);
+                props.max = convertToDateFormat(data.max, type);
                 break;
             case "string":
             case "text":
@@ -611,7 +626,7 @@ class DynamicFormBuilderService {
                 props.maxLength = isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength;
                 break;
         }
-        return this.createFormField(key, type === "checkbox" || type === "textarea" ? type : "input", data, props, parent, options);
+        return this.createFormField(key, type === "checkbox" || type === "textarea" || type === "wysiwyg" ? type : "input", data, props, parent, options);
     }
     createFormSelect(key, data, parent, options) {
         data = data || {};
@@ -640,6 +655,13 @@ class DynamicFormBuilderService {
         });
         return field;
     }
+    createFormStatic(key, data, parent, options) {
+        data = data || {};
+        return this.createFormField(key, "static", data, {
+            properties: Array.isArray(data.properties) ? data.properties : null,
+            style: data.style === "list" ? "list" : "table"
+        }, parent, options);
+    }
     createFormUpload(key, data, parent, options) {
         data = data || {};
         if (data.asFile) {
@@ -786,8 +808,7 @@ class DynamicFormBuilderService {
                 ...props,
                 label: options.labelCustomizer?.(key, data.label, parent, options.labelPrefix)
                     ?? this.getLabel(key, data.label, parent, options),
-                description: options.labelCustomizer?.(key, data.description, parent, options.labelPrefix)
-                    ?? this.getLabel(key, data.description, parent, options),
+                description: data.description,
                 hideLabel: data.hideLabel === true,
                 classes: data.classes || [],
                 layout: data.layout || [],
@@ -1608,6 +1629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class DynamicFormComponent {
+    forms;
     builder = inject(DynamicFormBuilderService);
     events = inject(EventsService);
     languages = inject(LANGUAGE_SERVICE);
@@ -1658,7 +1680,8 @@ class DynamicFormComponent {
             injector: inject(Injector)
         }
     };
-    constructor() {
+    constructor(forms) {
+        this.forms = forms;
         effect(() => {
             this.language();
             this.enableTranslations();
@@ -1675,13 +1698,24 @@ class DynamicFormComponent {
     reset() {
         this.options?.resetModel?.();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    serialize(validate = true) {
+        return this.forms.serializeForm(this, validate);
+    }
+    getField(path) {
+        const config = untracked(() => this.config());
+        return getFieldByPath(config[0], path);
+    }
+    getControl(path) {
+        const field = this.getField(path);
+        return field?.formControl ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [{ token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
     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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: DynamicFormService }] });
 
 class DynamicFormArrayComponent extends FieldArrayType {
     currentTab = signal(0);
@@ -1719,6 +1753,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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       [strict]=\"props.strict\"\n       [options]=\"props.options | formlySelectOptions | async\"\n       [testId]=\"field.testId\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
         }] });
 
+class DynamicFormStaticComponent extends DynamicFieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormStaticComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormStaticComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<unordered-list [listStyle]=\"props.style\" [ngClass]=\"{disabled: props.disabled}\"\n                [data]=\"!props.properties ? {value: value} : props.properties | remap: value\">\n    <ng-template [type]=\"!props.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\n        {{ item.value | date }}\n    </ng-template>\n</unordered-list>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.UnorderedListTemplateDirective, selector: "ng-template[type][selector]", inputs: ["type", "selector"] }, { kind: "component", type: i2.UnorderedListComponent, selector: "unordered-list", inputs: ["data", "keyPrefix", "listStyle", "path", "level", "templates"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i2.RemapPipe, name: "remap" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormStaticComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<unordered-list [listStyle]=\"props.style\" [ngClass]=\"{disabled: props.disabled}\"\n                [data]=\"!props.properties ? {value: value} : props.properties | remap: value\">\n    <ng-template [type]=\"!props.properties ? 'key' : null\" selector=\"level == 0\" let-item=\"item\"></ng-template>\n    <ng-template type=\"value\" selector=\"valueType == 'date'\" let-item=\"item\">\n        {{ item.value | date }}\n    </ng-template>\n</unordered-list>\n" }]
+        }] });
+
 class DynamicFormUploadComponent extends DynamicFieldType {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     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 });
@@ -1728,6 +1771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ standalone: false, selector: "dynamic-form-upload", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }] });
 
+class DynamicFormWysiwygComponent extends DynamicFieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormWysiwygComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormWysiwygComponent, isStandalone: false, selector: "dynamic-form-wysiwyg", usesInheritance: true, ngImport: i0, template: "<wysiwyg [formControl]=\"formControl\"\n         [formlyAttributes]=\"field\">\n</wysiwyg>\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.WysiwygComponent, selector: "wysiwyg", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormWysiwygComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-wysiwyg", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<wysiwyg [formControl]=\"formControl\"\n         [formlyAttributes]=\"field\">\n</wysiwyg>\n" }]
+        }] });
+
 /**
  * This is just a test wrapper component
  */
@@ -1773,7 +1825,9 @@ const components = [
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormStaticComponent,
     DynamicFormUploadComponent,
+    DynamicFormWysiwygComponent,
     DynamicFormAlertComponent,
     DynamicFormFieldComponent,
     DynamicFormFieldsetComponent,
@@ -1794,7 +1848,9 @@ class NgxDynamicFormModule {
                 types: [
                     { name: "array", component: DynamicFormArrayComponent },
                     { name: "chips", component: DynamicFormChipsComponent },
-                    { name: "upload", component: DynamicFormUploadComponent }
+                    { name: "static", component: DynamicFormStaticComponent },
+                    { name: "upload", component: DynamicFormUploadComponent },
+                    { name: "wysiwyg", component: DynamicFormWysiwygComponent },
                 ],
                 wrappers: [
                     { name: "form-alert", component: DynamicFormAlertComponent },
@@ -1823,12 +1879,12 @@ class NgxDynamicFormModule {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    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,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
-            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormUploadComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
@@ -1882,5 +1938,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldProp, setFieldProps, translationValidation };
+export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, 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, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map