@stemy/ngx-dynamic-form 19.9.7 → 19.9.9

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

@@ -1,10 +1,10 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Inject, Injectable, untracked, input, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Pipe, Type, Component, output, Injector, ChangeDetectionStrategy, ViewEncapsulation, viewChild, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i2 from '@stemy/ngx-utils';
 import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, ForbiddenZone, ArrayUtils, API_SERVICE, StringUtils, AsyncMethodBase, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
 import { of, merge, Observable, firstValueFrom, BehaviorSubject, combineLatestWith, switchMap, distinctUntilChanged, first, Subject, filter } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { __decorate } from 'tslib';
-import * as i0 from '@angular/core';
-import { inject, Inject, Injectable, untracked, input, Renderer2, ElementRef, computed, signal, effect, HostBinding, Directive, Input, Pipe, Type, Component, output, Injector, ChangeDetectionStrategy, ViewEncapsulation, makeEnvironmentProviders, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { outputToObservable, toSignal, rxResource, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -17,6 +17,8 @@ import { FormlySelectModule } from '@ngx-formly/core/select';
 
 // --- Basic frm constants ---
 const FORM_ROOT_ID = "__root";
+// --- Module Configuration ---
+const DEFAULT_NUMERIC_STEP = new InjectionToken("DEFAULT_NUMERIC_STEP");
 
 function customizeFormField(...providers) {
     const factory = cachedFactory(providers);
@@ -319,10 +321,10 @@ function withName(fn, name) {
     mainFn.validatorName = name;
     return mainFn;
 }
-function validateEach(each, cb, name) {
+function validateEach(cb, name) {
     return withName((control, field) => {
         const value = control.value;
-        return each ? Array.isArray(value) && value.every(v => cb(v, field)) : cb(value, field);
+        return field.type === "array" ? Array.isArray(value) && value.every(v => cb(v, field)) : cb(value, field);
     }, name);
 }
 function addFieldValidators(field, validators) {
@@ -414,14 +416,14 @@ function arrayLengthValidation(min = 1, max = Number.MAX_SAFE_INTEGER) {
         return !Array.isArray(value) || (min <= value.length && value.length <= max);
     }, "arrayLength");
 }
-function minLengthValidation(minLength, each) {
-    return validateEach(each, v => typeof v == "string" && v.length >= minLength, "minLength");
+function minLengthValidation(minLength) {
+    return validateEach(v => typeof v == "string" && v.length >= minLength, "minLength");
 }
-function maxLengthValidation(maxLength, each) {
-    return validateEach(each, v => typeof v == "string" && v.length <= maxLength, "maxLength");
+function maxLengthValidation(maxLength) {
+    return validateEach(v => typeof v == "string" && v.length <= maxLength, "maxLength");
 }
-function minValueValidation(each) {
-    return validateEach(each, (v, f) => {
+function minValueValidation() {
+    return validateEach((v, f) => {
         const type = f.props.type || "number";
         const min = type.includes("date")
             ? convertToDate(f.props.min, type) : Number(f.props.min ?? 0);
@@ -432,8 +434,8 @@ function minValueValidation(each) {
         return v == null || v >= min;
     }, "minValue");
 }
-function maxValueValidation(each) {
-    return validateEach(each, (v, f) => {
+function maxValueValidation() {
+    return validateEach((v, f) => {
         const type = f.props.type || "number";
         const max = type.includes("date")
             ? convertToDate(f.props.max, type) : Number(f.props.max ?? 0);
@@ -448,7 +450,7 @@ function setFieldMinDate(field, min) {
     setFieldDefault(field, min);
     setFieldProp(field, "min", min);
     setFieldValue(field, min);
-    addFieldValidators(field, [minValueValidation(field.type === "array")]);
+    addFieldValidators(field, [minValueValidation()]);
 }
 
 class ModelUtils {
@@ -619,17 +621,20 @@ function getFormValidationErrors(controls, parentPath = "") {
     return errors;
 }
 
+const customInputTypes = ["checkbox", "textarea", "wysiwyg", "password"];
 class DynamicFormBuilderService {
     injector;
     events;
     api;
     languages;
+    defaultNumericStep;
     language;
-    constructor(injector, events, api, languages) {
+    constructor(injector, events, api, languages, defaultNumericStep) {
         this.injector = injector;
         this.events = events;
         this.api = api;
         this.languages = languages;
+        this.defaultNumericStep = defaultNumericStep;
         const lang = new BehaviorSubject(this.languages.currentLanguage);
         this.events.languageChanged.subscribe(value => lang.next(value));
         this.language = lang;
@@ -727,7 +732,7 @@ class DynamicFormBuilderService {
             type,
             autocomplete,
             pattern: ObjectUtils.isString(data.pattern) ? data.pattern : "",
-            step: data.step,
+            step: convertToNumber(data.step, this.defaultNumericStep),
             cols: data.cols || null,
             rows: data.rows || 10,
             placeholder: data.placeholder || "",
@@ -755,7 +760,7 @@ class DynamicFormBuilderService {
                 props.maxLength = isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength;
                 break;
         }
-        return this.createFormField(key, type === "checkbox" || type === "textarea" || type === "wysiwyg" ? type : "input", data, props, parent, options);
+        return this.createFormField(key, customInputTypes.includes(type) ? type : "input", data, props, parent, options);
     }
     createFormSelect(key, data, parent, options) {
         data = data || {};
@@ -1078,7 +1083,7 @@ class DynamicFormBuilderService {
         });
         return field;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: i2.EventsService }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }, { token: DEFAULT_NUMERIC_STEP }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
@@ -1089,6 +1094,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LANGUAGE_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DEFAULT_NUMERIC_STEP]
                 }] }] });
 
 class DynamicFormSchemaService {
@@ -1248,8 +1256,8 @@ class DynamicFormSchemaService {
             autocomplete: property.autocomplete,
             pattern: property.pattern,
             step: isNaN(sub.step) ? property.step : sub.step,
-            min: sub.minimum,
-            max: sub.maximum,
+            min: sub.minimum ?? sub.min,
+            max: sub.maximum ?? sub.max,
             minLength: sub.minLength,
             maxLength: sub.maxLength,
             placeholder: property.placeholder,
@@ -1293,8 +1301,8 @@ class DynamicFormSchemaService {
         return this.builder.createFormInput(property.id, {
             ...this.getFormFieldData(property, options),
             type,
-            min: convertToDateFormat(property.min, property.format),
-            max: convertToDateFormat(property.max, property.format),
+            min: convertToDateFormat(property.minimum ?? property.min, property.format),
+            max: convertToDateFormat(property.maximum ?? property.max, property.format),
         }, parent, options);
     }
     getFormSelectConfig($enum, property, options, parent) {
@@ -1432,10 +1440,10 @@ class DynamicFormSchemaService {
             validators.maxLength = maxLengthValidation(property.maxLength);
         }
         if (!isNaN(property.minimum)) {
-            validators.min = minValueValidation(convertToDate(property.minimum, property.format));
+            validators.min = minValueValidation();
         }
         if (!isNaN(property.maximum)) {
-            validators.max = maxValueValidation(convertToDate(property.maximum, property.format));
+            validators.max = maxValueValidation();
         }
         // if (isString(property.pattern) && property.pattern.length) {
         //     validators.pattern = property.pattern;
@@ -1450,16 +1458,16 @@ class DynamicFormSchemaService {
         if (!items)
             return;
         if (!isNaN(items.minLength)) {
-            validators.itemsMinLength = minLengthValidation(items.minLength, true);
+            validators.itemsMinLength = minLengthValidation(items.minLength);
         }
         if (!isNaN(items.maxLength)) {
-            validators.itemsMaxLength = maxLengthValidation(items.maxLength, true);
+            validators.itemsMaxLength = maxLengthValidation(items.maxLength);
         }
         if (!isNaN(items.minimum)) {
-            validators.itemsMinValue = minValueValidation(true);
+            validators.itemsMinValue = minValueValidation();
         }
         if (!isNaN(items.maximum)) {
-            validators.itemsMaxValue = maxValueValidation(true);
+            validators.itemsMaxValue = maxValueValidation();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormSchemaService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2123,6 +2131,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", 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 DynamicFormPasswordComponent extends DynamicFieldType {
+    type = signal("password");
+    icon = computed(() => {
+        return this.type() === "password" ? "eye" : "eye-slash";
+    });
+    input = viewChild.required("input");
+    switchType() {
+        const el = this.input().nativeElement;
+        const start = el.selectionStart;
+        const end = el.selectionEnd;
+        this.type.update(value => value === "password" ? "text" : "password");
+        requestAnimationFrame(() => {
+            el.focus();
+            el.setSelectionRange(start, end);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.19", type: DynamicFormPasswordComponent, isStandalone: false, selector: "dynamic-form-password", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"], dependencies: [{ kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "type", "size"] }, { kind: "directive", type: i3.LegacyFormlyAttributes, selector: "[formlyAttributes]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-password", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-password-group\">\n    <input #input\n           class=\"form-control\"\n           [attr.type]=\"type()\"\n           [attr.data-testid]=\"field.testId\"\n           [formControl]=\"formControl\"\n           [formlyAttributes]=\"field\" />\n    <btn type=\"transparent\"\n         [icon]=\"icon()\"\n         [attr.data-testid]=\"field.testId + '-toggle'\"\n         (mousedown)=\"switchType()\"></btn>\n</div>\n", styles: [".form-password-group{position:relative}.form-password-group btn{display:block;position:absolute;aspect-ratio:1;top:0;bottom:0;right:0}\n"] }]
+        }] });
+
 class DynamicFormStaticComponent extends DynamicFieldType {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: DynamicFormStaticComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", 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 });
@@ -2235,6 +2267,7 @@ const components = [
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormPasswordComponent,
     DynamicFormStaticComponent,
     DynamicFormTranslationComponent,
     DynamicFormUploadComponent,
@@ -2262,6 +2295,7 @@ class NgxDynamicFormModule {
                 types: [
                     { name: "array", component: DynamicFormArrayComponent },
                     { name: "chips", component: DynamicFormChipsComponent },
+                    { name: "password", component: DynamicFormPasswordComponent },
                     { name: "static", component: DynamicFormStaticComponent },
                     { name: "translation", component: DynamicFormTranslationComponent },
                     { name: "upload", component: DynamicFormUploadComponent },
@@ -2281,7 +2315,11 @@ class NgxDynamicFormModule {
             ...formlyConfigs,
             DynamicFormService,
             DynamicFormBuilderService,
-            DynamicFormSchemaService
+            DynamicFormSchemaService,
+            {
+                provide: DEFAULT_NUMERIC_STEP,
+                useValue: (config?.defaultNumericStep ?? 1)
+            }
         ];
     }
     static forRoot(config) {
@@ -2294,12 +2332,12 @@ class NgxDynamicFormModule {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
-            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
+            FormlySelectModule], exports: [DynamicFieldType, DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormPasswordComponent, DynamicFormStaticComponent, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, DynamicFormAlertComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, AsyncSubmitDirective, DynamicFormTemplateDirective, DynamicFormTemplatePipe, FormsModule,
             ReactiveFormsModule,
             NgxUtilsModule,
             FormlyModule,
@@ -2353,5 +2391,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
+export { AsyncSubmitDirective, DEFAULT_NUMERIC_STEP, DynamicFieldType, DynamicFormAlertComponent, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormPasswordComponent, DynamicFormSchemaService, DynamicFormService, DynamicFormStaticComponent, DynamicFormTemplateDirective, DynamicFormTemplatePipe, DynamicFormTemplateService, DynamicFormTranslationComponent, DynamicFormUploadComponent, DynamicFormWysiwygComponent, EDITOR_FORMATS, FORM_ROOT_ID, FormArray, FormFieldSet, FormGroup, FormInput, FormSelect, FormSerializable, FormStatic, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, RichTranslationModel, TranslationModel, addFieldValidators, arrayLengthValidation, clearFieldArray, controlStatus, controlValues, convertToDate, convertToDateFormat, convertToNumber, customizeFormField, emailValidation, getFieldByPath, getFieldsByKey, getFieldsByPredicate, getSelectOptions, insertToFieldArray, isFieldHidden, isFieldVisible, jsonValidation, maxLengthValidation, maxValueValidation, minLengthValidation, minValueValidation, phoneValidation, removeFieldValidators, removeFromFieldArray, replaceFieldArray, replaceSpecialChars, requiredValidation, setFieldDefault, setFieldDisabled, setFieldHidden, setFieldHooks, setFieldMinDate, setFieldProp, setFieldProps, setFieldSerialize, setFieldValue, translationValidation };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map