@ng-forge/dynamic-forms-ionic 0.5.0 → 0.5.2

package/fesm2022/ng-forge-dynamic-forms-ionic.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, input, computed, ChangeDetectionStrategy, Component, ElementRef, signal, InjectionToken, linkedSignal, model, isSignal } from '@angular/core';
 import { IonButton, IonCheckbox, IonNote, IonInput, IonModal, IonDatetime, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle, IonItem, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonRange, IonTextarea, IonToggle } from '@ionic/angular/standalone';
-import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe, DEFAULT_PROPS, buildBaseInputs, RootFormRegistryService, FORM_OPTIONS, resolveSubmitButtonDisabled, FIELD_SIGNAL_CONTEXT, resolveNextButtonDisabled, NextPageEvent, PreviousPageEvent, DynamicFormLogger, AddArrayItemEvent, RemoveArrayItemEvent } from '@ng-forge/dynamic-forms';
+import { EventBus, ARRAY_CONTEXT, resolveTokens, DynamicTextPipe, DEFAULT_PROPS, buildBaseInputs } from '@ng-forge/dynamic-forms';
 import { AsyncPipe } from '@angular/common';
 import { FormField } from '@angular/forms/signals';
-import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqual, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
+import { createResolvedErrorsSignal, shouldShowErrors, setupMetaTracking, isEqual, valueFieldMapper, optionsFieldMapper, checkboxFieldMapper, submitButtonFieldMapper, nextButtonFieldMapper, previousButtonFieldMapper, addArrayItemButtonMapper, prependArrayItemButtonMapper, insertArrayItemButtonMapper, removeArrayItemButtonMapper, popArrayItemButtonMapper, shiftArrayItemButtonMapper, datepickerFieldMapper } from '@ng-forge/dynamic-forms/integration';
 import { format } from 'date-fns';
 import { explicitEffect } from 'ngxtension/explicit-effect';
 
@@ -948,7 +948,7 @@ class IonicSelectFieldComponent {
     validationMessages = input(...(ngDevMode ? [undefined, { debugName: "validationMessages" }] : []));
     defaultValidationMessages = input(...(ngDevMode ? [undefined, { debugName: "defaultValidationMessages" }] : []));
     constructor() {
-        setupMetaTracking(this.elementRef, this.meta);
+        setupMetaTracking(this.elementRef, this.meta, { selector: 'ion-select' });
     }
     resolvedErrors = createResolvedErrorsSignal(this.field, this.validationMessages, this.defaultValidationMessages);
     showErrors = shouldShowErrors(this.field);
@@ -1533,7 +1533,11 @@ const IonicField = {
     Next: 'next',
     Previous: 'previous',
     AddArrayItem: 'addArrayItem',
+    PrependArrayItem: 'prependArrayItem',
+    InsertArrayItem: 'insertArrayItem',
     RemoveArrayItem: 'removeArrayItem',
+    PopArrayItem: 'popArrayItem',
+    ShiftArrayItem: 'shiftArrayItem',
     Textarea: 'textarea',
     Radio: 'radio',
     MultiCheckbox: 'multi-checkbox',
@@ -1547,11 +1551,15 @@ const IonicField = {
  * For specific button types (submit, next, prev, add/remove array items),
  * use the dedicated field types and their specific mappers.
  *
+ * Supports template property for array events (AppendArrayItemEvent, PrependArrayItemEvent, InsertArrayItemEvent)
+ * which enables the $template token in eventArgs.
+ *
  * @param fieldDef The button field definition
  * @returns Signal containing Record of input names to values for ngComponentOutlet
  */
 function buttonFieldMapper(fieldDef) {
     const defaultProps = inject(DEFAULT_PROPS);
+    const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
     return computed(() => {
         const baseInputs = buildBaseInputs(fieldDef, defaultProps());
         const inputs = {
@@ -1571,226 +1579,33 @@ function buttonFieldMapper(fieldDef) {
         if ('eventArgs' in fieldDef && fieldDef.eventArgs !== undefined) {
             inputs['eventArgs'] = fieldDef.eventArgs;
         }
-        return inputs;
-    });
-}
-
-/**
- * Mapper for submit button - configures native form submission via type="submit"
- *
- * Unlike other buttons, submit buttons don't dispatch events directly.
- * Instead, they trigger native form submission which the form component
- * intercepts and dispatches to the EventBus.
- *
- * Disabled state is resolved using the button-logic-resolver which considers:
- * 1. Explicit `disabled: true` on the field definition
- * 2. Field-level `logic` array (if present, overrides form-level defaults)
- * 3. Form-level `options.submitButton` defaults (disableWhenInvalid, disableWhileSubmitting)
- *
- * @param fieldDef The submit button field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function submitButtonFieldMapper(fieldDef) {
-    const rootFormRegistry = inject(RootFormRegistryService);
-    const defaultProps = inject(DEFAULT_PROPS);
-    const formOptions = inject(FORM_OPTIONS);
-    const fieldWithLogic = fieldDef;
-    return computed(() => {
-        const baseInputs = buildBaseInputs(fieldDef, defaultProps());
-        // Use rootFormRegistry instead of fieldSignalContext.form because when the submit button
-        // is inside a group/array, fieldSignalContext.form points to the nested form tree,
-        // not the root form. We need root form validity for submit button disabled state (#157).
-        const disabledSignal = resolveSubmitButtonDisabled({
-            form: rootFormRegistry.getRootForm(),
-            formOptions: formOptions(),
-            fieldLogic: fieldWithLogic.logic,
-            explicitlyDisabled: fieldDef.disabled,
-        });
-        const inputs = {
-            ...baseInputs,
-            // No event - native form submit handles it via form's onNativeSubmit
-            // Set type="submit" to trigger native form submission
-            props: { ...fieldDef.props, type: 'submit' },
-            // Evaluate the signal inside the computed - component receives plain boolean
-            disabled: disabledSignal(),
-        };
-        if (fieldDef.hidden !== undefined) {
-            inputs['hidden'] = fieldDef.hidden;
-        }
-        return inputs;
-    });
-}
-/**
- * Mapper for next page button - preconfigures NextPageEvent
- *
- * Disabled state is resolved using the button-logic-resolver which considers:
- * 1. Explicit `disabled: true` on the field definition
- * 2. Field-level `logic` array (if present, overrides form-level defaults)
- * 3. Form-level `options.nextButton` defaults (disableWhenPageInvalid, disableWhileSubmitting)
- *
- * @param fieldDef The next button field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function nextButtonFieldMapper(fieldDef) {
-    const fieldSignalContext = inject(FIELD_SIGNAL_CONTEXT);
-    const defaultProps = inject(DEFAULT_PROPS);
-    const formOptions = inject(FORM_OPTIONS);
-    const fieldWithLogic = fieldDef;
-    return computed(() => {
-        const baseInputs = buildBaseInputs(fieldDef, defaultProps());
-        const disabledSignal = resolveNextButtonDisabled({
-            form: fieldSignalContext.form,
-            formOptions: formOptions(),
-            fieldLogic: fieldWithLogic.logic,
-            explicitlyDisabled: fieldDef.disabled,
-            currentPageValid: fieldSignalContext.currentPageValid,
-        });
-        const inputs = {
-            ...baseInputs,
-            event: NextPageEvent,
-            // Evaluate the signal inside the computed - component receives plain boolean
-            disabled: disabledSignal(),
-        };
-        if (fieldDef.hidden !== undefined) {
-            inputs['hidden'] = fieldDef.hidden;
-        }
-        return inputs;
-    });
-}
-/**
- * Mapper for previous page button - preconfigures PreviousPageEvent
- * Note: Does not auto-disable based on validation. Users can explicitly disable if needed.
- *
- * @param fieldDef The previous button field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function previousButtonFieldMapper(fieldDef) {
-    const defaultProps = inject(DEFAULT_PROPS);
-    return computed(() => {
-        const baseInputs = buildBaseInputs(fieldDef, defaultProps());
-        const inputs = {
-            ...baseInputs,
-            event: PreviousPageEvent,
-        };
-        // Add disabled binding only if explicitly set by user
-        if (fieldDef.disabled !== undefined) {
-            inputs['disabled'] = fieldDef.disabled;
-        }
-        if (fieldDef.hidden !== undefined) {
-            inputs['hidden'] = fieldDef.hidden;
-        }
-        return inputs;
-    });
-}
-/**
- * Mapper for add array item button - preconfigures AddArrayItemEvent with array context.
- *
- * Supports two modes:
- * 1. Inside array template: Uses ARRAY_CONTEXT to determine target array
- * 2. Outside array: Uses `arrayKey` property from field definition
- *
- * @param fieldDef The add array item button field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
- */
-function addArrayItemButtonFieldMapper(fieldDef) {
-    const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
-    const logger = inject(DynamicFormLogger);
-    const defaultProps = inject(DEFAULT_PROPS);
-    // Determine the target array key
-    // Priority: explicit arrayKey from fieldDef > arrayKey from context
-    const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
-    if (!targetArrayKey) {
-        logger.warn(`addArrayItem button "${fieldDef.key}" has no array context. ` +
-            'Either place it inside an array field, or provide an explicit arrayKey property.');
-    }
-    // Set default eventArgs for AddArrayItemEvent (arrayKey)
-    // User can override by providing eventArgs in field definition
-    const defaultEventArgs = ['$arrayKey'];
-    const eventArgs = 'eventArgs' in fieldDef && fieldDef.eventArgs !== undefined ? fieldDef.eventArgs : defaultEventArgs;
-    return computed(() => {
-        const baseInputs = buildBaseInputs(fieldDef, defaultProps());
-        // Read signal value if index is a signal (supports differential updates)
-        const getIndex = () => {
-            if (!arrayContext)
-                return -1;
-            return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
-        };
-        const inputs = {
-            ...baseInputs,
-            event: AddArrayItemEvent,
-            eventArgs,
-            eventContext: {
+        // Add eventContext for token resolution (supports $template, $arrayKey, $index, etc.)
+        const template = 'template' in fieldDef ? fieldDef.template : undefined;
+        if (template || arrayContext) {
+            // Read signal value if index is a signal (supports differential updates)
+            const getIndex = () => {
+                if (!arrayContext)
+                    return -1;
+                return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
+            };
+            inputs['eventContext'] = {
                 key: fieldDef.key,
                 index: getIndex(),
-                arrayKey: targetArrayKey ?? '',
+                arrayKey: arrayContext?.arrayKey ?? '',
                 formValue: arrayContext?.formValue ?? {},
-            },
-        };
-        // Add disabled binding only if explicitly set by user
-        if (fieldDef.disabled !== undefined) {
-            inputs['disabled'] = fieldDef.disabled;
-        }
-        if (fieldDef.hidden !== undefined) {
-            inputs['hidden'] = fieldDef.hidden;
+                template,
+            };
         }
         return inputs;
     });
 }
+
 /**
- * Mapper for remove array item button - preconfigures RemoveArrayItemEvent with array context.
+ * Navigation button mappers for Ionic - re-exported from integration package.
  *
- * Supports two modes:
- * 1. Inside array template: Uses ARRAY_CONTEXT to determine target array and removes item at current index
- * 2. Outside array: Uses `arrayKey` property from field definition, removes last item by default
- *
- * @param fieldDef The remove array item button field definition
- * @returns Signal containing Record of input names to values for ngComponentOutlet
+ * These mappers handle submit, next, and previous buttons with proper
+ * disabled state resolution based on form validity and options.
  */
-function removeArrayItemButtonFieldMapper(fieldDef) {
-    const arrayContext = inject(ARRAY_CONTEXT, { optional: true });
-    const logger = inject(DynamicFormLogger);
-    const defaultProps = inject(DEFAULT_PROPS);
-    // Determine the target array key
-    // Priority: explicit arrayKey from fieldDef > arrayKey from context
-    const targetArrayKey = fieldDef.arrayKey ?? arrayContext?.arrayKey;
-    if (!targetArrayKey) {
-        logger.warn(`removeArrayItem button "${fieldDef.key}" has no array context. ` +
-            'Either place it inside an array field, or provide an explicit arrayKey property.');
-    }
-    // Set default eventArgs for RemoveArrayItemEvent (arrayKey, index if inside array)
-    // When outside array, only pass arrayKey (removes last by default)
-    // User can override by providing eventArgs in field definition
-    const defaultEventArgs = arrayContext ? ['$arrayKey', '$index'] : ['$arrayKey'];
-    const eventArgs = 'eventArgs' in fieldDef && fieldDef.eventArgs !== undefined ? fieldDef.eventArgs : defaultEventArgs;
-    return computed(() => {
-        const baseInputs = buildBaseInputs(fieldDef, defaultProps());
-        // Read signal value if index is a signal (supports differential updates)
-        const getIndex = () => {
-            if (!arrayContext)
-                return -1; // -1 means remove last (no specific index)
-            return isSignal(arrayContext.index) ? arrayContext.index() : arrayContext.index;
-        };
-        const inputs = {
-            ...baseInputs,
-            event: RemoveArrayItemEvent,
-            eventArgs,
-            eventContext: {
-                key: fieldDef.key,
-                index: getIndex(),
-                arrayKey: targetArrayKey ?? '',
-                formValue: arrayContext?.formValue ?? {},
-            },
-        };
-        // Add disabled binding only if explicitly set by user
-        if (fieldDef.disabled !== undefined) {
-            inputs['disabled'] = fieldDef.disabled;
-        }
-        if (fieldDef.hidden !== undefined) {
-            inputs['hidden'] = fieldDef.hidden;
-        }
-        return inputs;
-    });
-}
 
 /**
  * Ionic field type definitions
@@ -1840,13 +1655,37 @@ const IONIC_FIELD_TYPES = [
     {
         name: IonicField.AddArrayItem,
         loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
-        mapper: addArrayItemButtonFieldMapper,
+        mapper: addArrayItemButtonMapper,
+        valueHandling: 'exclude',
+    },
+    {
+        name: IonicField.PrependArrayItem,
+        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        mapper: prependArrayItemButtonMapper,
+        valueHandling: 'exclude',
+    },
+    {
+        name: IonicField.InsertArrayItem,
+        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        mapper: insertArrayItemButtonMapper,
         valueHandling: 'exclude',
     },
     {
         name: IonicField.RemoveArrayItem,
         loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
-        mapper: removeArrayItemButtonFieldMapper,
+        mapper: removeArrayItemButtonMapper,
+        valueHandling: 'exclude',
+    },
+    {
+        name: IonicField.PopArrayItem,
+        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        mapper: popArrayItemButtonMapper,
+        valueHandling: 'exclude',
+    },
+    {
+        name: IonicField.ShiftArrayItem,
+        loadComponent: () => Promise.resolve().then(function () { return ionicButton_component; }),
+        mapper: shiftArrayItemButtonMapper,
         valueHandling: 'exclude',
     },
     {