@stemy/ngx-dynamic-form 19.9.8 → 19.9.10

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);
@@ -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 || {};
@@ -1044,11 +1049,12 @@ class DynamicFormBuilderService {
                 const idName = String(field.id || field.key || "").replace(/\./, "-");
                 let baseName = `dynamic-form-fieldset dynamic-form-fieldset-${idName}`;
                 if (!this.isFieldset(target)) {
+                    const labelAlign = target.props?.labelAlign || "before";
                     const type = String(target.type || "group").replace("formly-", "");
                     const typeName = ObjectUtils.isConstructor(type)
                         ? `${target.type.name}`.toLowerCase().replace("component", "")
                         : type;
-                    baseName = `dynamic-form-field dynamic-form-field-${target.key} dynamic-form-${typeName}`;
+                    baseName = `dynamic-form-field dynamic-form-field-${target.key} dynamic-form-label-${labelAlign} dynamic-form-${typeName}`;
                 }
                 const classesName = Array.isArray(classes) ? classes : [classes];
                 const layoutName = Array.isArray(layout) ? layout : [layout];
@@ -1078,7 +1084,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 +1095,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 {
@@ -2123,6 +2132,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 +2268,7 @@ const components = [
     DynamicFormComponent,
     DynamicFormArrayComponent,
     DynamicFormChipsComponent,
+    DynamicFormPasswordComponent,
     DynamicFormStaticComponent,
     DynamicFormTranslationComponent,
     DynamicFormUploadComponent,
@@ -2262,6 +2296,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 +2316,11 @@ class NgxDynamicFormModule {
             ...formlyConfigs,
             DynamicFormService,
             DynamicFormBuilderService,
-            DynamicFormSchemaService
+            DynamicFormSchemaService,
+            {
+                provide: DEFAULT_NUMERIC_STEP,
+                useValue: (config?.defaultNumericStep ?? 1)
+            }
         ];
     }
     static forRoot(config) {
@@ -2294,12 +2333,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 +2392,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