@decaf-ts/for-angular 0.0.23 → 0.0.25

package/fesm2022/decaf-ts-for-angular.mjs

@@ -1,4 +1,4 @@
-import { UIKeys, parseValueByType, HTML5InputTypes, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
+import { UIKeys, parseValueByType, HTML5CheckTypes, escapeHtml, HTML5InputTypes, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, isDevMode, reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, ElementRef, HostListener, CUSTOM_ELEMENTS_SCHEMA, Inject, ChangeDetectorRef, Renderer2, Injector, Directive } from '@angular/core';
 import { CommonModule, NgComponentOutlet, Location } from '@angular/common';
@@ -14,9 +14,9 @@ import { apply, metadata } from '@decaf-ts/reflection';
 import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonIcon, IonButton, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonContent, IonPopover, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonLoading } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
-import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline } from 'ionicons/icons';
+import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { forkJoin, fromEvent, debounceTime, Subject } from 'rxjs';
+import { forkJoin, fromEvent, debounceTime, Subject, timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -226,12 +226,12 @@ class ValidatorFactory {
         if (!Validation.keys().includes(key))
             throw new Error('Unsupported custom validation');
         const validatorFn = (control) => {
-            const { name, type } = fieldProps;
+            const { type } = fieldProps;
             const { validatorKey, props } = resolveValidatorKeyProps(key, fieldProps[key], type);
             const validator = Validation.get(validatorKey);
             // parseValueByType does not support undefined values
             const value = typeof control.value !== 'undefined'
-                ? parseValueByType(type, type === HTML5InputTypes.CHECKBOX ? name : control.value, fieldProps)
+                ? parseValueByType(type, control.value, fieldProps)
                 : undefined;
             // Create a proxy to enable access to parent and child values
             let proxy = ValidatorFactory.createProxy({});
@@ -875,12 +875,61 @@ class NgxFormService {
      * @memberOf NgxFormService
      */
     static { this.formRegistry = new Map(); }
+    static { this.pageMapper = {}; }
+    /**
+     * @description Creates a new form group or form array with the specified identifier.
+     * @summary Generates a FormGroup or FormArray based on the provided properties. If pages are specified
+     * and greater than 1, creates a FormArray; otherwise creates a FormGroup. The form can optionally
+     * be registered in the global form registry for later access throughout the application.
+     *
+     * @param {string} id - Unique identifier for the form
+     * @param {Partial<IComponentInput>} [props={}] - Configuration properties for the form
+     * @param {boolean} [registry=true] - Whether to register the form in the global registry
+     * @return {FormGroup | FormArray} The created form instance
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant FR as Form Registry
+     *   participant AF as Angular Forms
+     *
+     *   C->>NFS: createForm(id, props, registry)
+     *   NFS->>FR: Check if form exists
+     *   alt Form doesn't exist
+     *     alt props.pages > 1
+     *       NFS->>AF: new FormArray([])
+     *     else
+     *       NFS->>AF: new FormGroup({})
+     *     end
+     *     alt registry is true
+     *       NFS->>FR: addRegistry(id, form)
+     *     end
+     *   end
+     *   NFS-->>C: Return FormGroup | FormArray
+     *
+     * @static
+     * @memberOf NgxFormService
+     */
+    static createForm(id, props = {}, registry = true) {
+        const form = this.formRegistry.get(id) ?? (props?.pages && props?.pages > 1 ? new FormArray([]) : new FormGroup({}));
+        if (!this.formRegistry.has(id) && registry)
+            this.addRegistry(id, form);
+        return form;
+    }
     /**
      * @description Adds a form to the registry.
-     * @summary Registers a FormGroup with a unique identifier. Throws an error if the identifier is already in use.
-     * @param {string} formId - The unique identifier for the form.
-     * @param {FormGroup} formGroup - The FormGroup to be registered.
-     * @throws {Error} If a FormGroup with the given id is already registered.
+     * @summary Registers a FormGroup or FormArray with a unique identifier for global access throughout
+     * the application. This allows forms to be retrieved and managed centrally. Throws an error if
+     * the identifier is already in use to prevent conflicts.
+     *
+     * @param {string} formId - The unique identifier for the form
+     * @param {FormParent} formGroup - The FormGroup or FormArray to be registered
+     * @return {void}
+     * @throws {Error} If a FormGroup with the given id is already registered
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static addRegistry(formId, formGroup) {
         if (this.formRegistry.has(formId))
@@ -889,8 +938,15 @@ class NgxFormService {
     }
     /**
      * @description Removes a form from the registry.
-     * @summary Deletes a FormGroup from the registry using its unique identifier.
-     * @param {string} formId - The unique identifier of the form to be removed.
+     * @summary Deletes a FormGroup or FormArray from the registry using its unique identifier.
+     * This cleans up the registry and allows the identifier to be reused. The form itself
+     * is not destroyed, only removed from the central registry.
+     *
+     * @param {string} formId - The unique identifier of the form to be removed
+     * @return {void}
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static removeRegistry(formId) {
         this.formRegistry.delete(formId);
@@ -898,9 +954,38 @@ class NgxFormService {
     /**
      * @description Resolves the parent group and control name from a path.
      * @summary Traverses the form group structure to find the parent group and control name for a given path.
-     * @param {FormGroup} formGroup - The root FormGroup.
-     * @param {string} path - The path to the control.
-     * @return {FormParentGroup} A tuple containing the parent FormGroup and the control name.
+     * Handles complex nested structures including arrays and sub-groups. Creates missing intermediate
+     * groups as needed and properly configures FormArray controls for multiple value scenarios.
+     *
+     * @param {FormGroup} formGroup - The root FormGroup to traverse
+     * @param {string} path - The dot-separated path to the control (e.g., 'user.address.street')
+     * @param {IComponentInput} componentProps - Properties defining the component configuration
+     * @param {KeyValue} parentProps - Properties from the parent component for context
+     * @return {FormParentGroup} A tuple containing the parent FormGroup and the control name
+     *
+     * @private
+     * @mermaid
+     * sequenceDiagram
+     *   participant NFS as NgxFormService
+     *   participant FG as FormGroup
+     *   participant FA as FormArray
+     *
+     *   NFS->>NFS: Split path into parts
+     *   loop For each path part
+     *     alt Control doesn't exist
+     *       alt isMultiple and part is childOf
+     *         NFS->>FA: new FormArray([new FormGroup({})])
+     *       else
+     *         NFS->>FG: new FormGroup({})
+     *       end
+     *       NFS->>FG: addControl(part, newControl)
+     *     end
+     *     NFS->>NFS: Navigate to next level
+     *   end
+     *   NFS-->>NFS: Return [parentGroup, controlName]
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static resolveParentGroup(formGroup, path, componentProps, parentProps) {
         const isMultiple = parentProps?.['multiple'] || parentProps?.['type'] === 'Array' || false;
@@ -1079,19 +1164,62 @@ class NgxFormService {
         if (!parentGroup.get(controlName)) {
             const control = NgxFormService.fromProps(componentProps, componentProps.updateMode || 'change');
             NgxFormService.register(control, componentProps);
-            parentGroup.addControl(controlName, control);
+            if (parentGroup instanceof FormGroup) {
+                parentGroup.addControl(controlName, control);
+            }
+            if (parentGroup instanceof FormArray) {
+                const root = parentGroup.controls[componentProps?.['page'] - 1];
+                if (root) {
+                    root.addControl(controlName, control);
+                }
+                else {
+                    parentGroup.push({ [controlName]: control });
+                }
+            }
         }
-        componentProps['formGroup'] = parentGroup;
+        const root = parentGroup instanceof FormArray ? parentGroup.controls[componentProps?.['page'] - 1] : parentGroup;
+        componentProps['formGroup'] = root;
         componentProps['formControl'] = parentGroup.get(controlName);
         componentProps['multiple'] = isMultiple;
     }
     /**
      * @description Retrieves a control from a registered form.
      * @summary Finds and returns an AbstractControl from a registered form using the form id and optional path.
-     * @param {string} formId - The unique identifier of the form.
-     * @param {string} [path] - The path to the control within the form.
-     * @return {AbstractControl} The requested AbstractControl.
-     * @throws {Error} If the form is not found in the registry or the control is not found in the form.
+     * This method provides centralized access to form controls across the application by leveraging
+     * the form registry system.
+     *
+     * @param {string} formId - The unique identifier of the form in the registry
+     * @param {string} [path] - The optional dot-separated path to a specific control within the form
+     * @return {AbstractControl} The requested AbstractControl (FormGroup, FormArray, or FormControl)
+     * @throws {Error} If the form is not found in the registry or the control is not found in the form
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant FR as Form Registry
+     *
+     *   C->>NFS: getControlFromForm(formId, path?)
+     *   NFS->>FR: Get form by formId
+     *   alt Form not found
+     *     FR-->>NFS: null
+     *     NFS-->>C: Throw Error
+     *   else Form found
+     *     FR-->>NFS: Return form
+     *     alt path provided
+     *       NFS->>NFS: form.get(path)
+     *       alt Control not found
+     *         NFS-->>C: Throw Error
+     *       else
+     *         NFS-->>C: Return control
+     *       end
+     *     else
+     *       NFS-->>C: Return form
+     *     end
+     *   end
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static getControlFromForm(formId, path) {
         const form = this.formRegistry.get(formId);
@@ -1104,13 +1232,77 @@ class NgxFormService {
             throw new Error(`Control with path '${path}' not found in form '${formId}'.`);
         return control;
     }
+    /**
+     * @description Creates a form from UI model metadata children.
+     * @summary Generates a FormGroup from an array of UIModelMetadata objects, extracting component
+     * properties and creating appropriate form controls. This method is specifically designed to work
+     * with the UI decorator system and provides automatic form generation from metadata.
+     *
+     * @param {string} id - Unique identifier for the form
+     * @param {boolean} [registry=false] - Whether to register the created form in the global registry
+     * @param {UIModelMetadata[]} [children] - Array of UI model metadata objects to create controls from
+     * @return {FormGroup} The created FormGroup with controls for each child metadata
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant AF as Angular Forms
+     *
+     *   C->>NFS: createFormFromChildren(id, registry, children)
+     *   NFS->>AF: new FormGroup({})
+     *   loop For each child metadata
+     *     NFS->>NFS: addFormControl(form, child.props)
+     *     NFS->>AF: Create and add FormControl
+     *   end
+     *   alt registry is true
+     *     NFS->>NFS: addRegistry(id, form)
+     *   end
+     *   NFS-->>C: Return FormGroup
+     *
+     * @static
+     * @memberOf NgxFormService
+     */
+    static createFormFromChildren(id, registry = false, children) {
+        const form = new FormGroup({});
+        if (children?.length)
+            children.forEach(child => {
+                this.addFormControl(form, child.props);
+            });
+        if (registry)
+            this.addRegistry(id, form);
+        return form;
+    }
     /**
      * @description Creates a form from component configurations.
      * @summary Generates a FormGroup based on an array of component configurations and optionally registers it.
-     * @param {string} id - The unique identifier for the form.
-     * @param {IComponentConfig[]} components - An array of component configurations.
-     * @param {boolean} [registry=false] - Whether to register the created form.
-     * @return {FormGroup} The created FormGroup.
+     * This method processes component input configurations to create appropriate form controls with
+     * validation and initial values.
+     *
+     * @param {string} id - The unique identifier for the form
+     * @param {IComponentConfig[]} components - An array of component configurations defining the form structure
+     * @param {boolean} [registry=false] - Whether to register the created form in the global registry
+     * @return {FormGroup} The created FormGroup with controls for each component configuration
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant AF as Angular Forms
+     *
+     *   C->>NFS: createFormFromComponents(id, components, registry)
+     *   NFS->>AF: new FormGroup({})
+     *   loop For each component config
+     *     NFS->>NFS: addFormControl(form, component.inputs)
+     *     NFS->>AF: Create and add FormControl
+     *   end
+     *   alt registry is true
+     *     NFS->>NFS: addRegistry(id, form)
+     *   end
+     *   NFS-->>C: Return FormGroup
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static createFormFromComponents(id, components, registry = false) {
         const form = new FormGroup({});
@@ -1124,14 +1316,61 @@ class NgxFormService {
     /**
      * @description Adds a control to a form based on component properties.
      * @summary Creates and adds a form control to a form (existing or new) based on the provided component properties.
-     * @param {string} id - The unique identifier of the form.
-     * @param {FieldProperties} componentProperties - The properties of the component to create the control from.
-     * @return {AbstractControl} The form or created control.
+     * Handles multi-page forms by managing FormArray structures and proper indexing. This method supports
+     * complex form scenarios including nested controls and page-based form organization.
+     *
+     * @param {string} id - The unique identifier of the form
+     * @param {FieldProperties} componentProperties - The properties of the component to create the control from
+     * @param {FieldProperties} [parentProps] - Optional parent properties for context and configuration
+     * @return {AbstractControl} The form or created control
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant F as Form
+     *
+     *   C->>NFS: addControlFromProps(id, componentProps, parentProps?)
+     *   NFS->>NFS: createForm(id, parentProps, true)
+     *   alt Multi-page form (parentProps.pages > 1)
+     *     NFS->>NFS: Calculate page index
+     *     NFS->>F: Get or create FormGroup at index
+     *     NFS->>NFS: Set form to page FormGroup
+     *   end
+     *   alt componentProperties has path
+     *     NFS->>NFS: addFormControl(form, componentProperties, parentProps)
+     *   end
+     *   NFS-->>C: Return form/control
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static addControlFromProps(id, componentProperties, parentProps) {
-        const form = this.formRegistry.get(id) ?? new FormGroup({});
-        if (!this.formRegistry.has(id))
-            this.addRegistry(id, form);
+        let form = this.createForm(id, parentProps, true);
+        const formLength = form.length;
+        if (parentProps?.pages && parentProps?.pages > 1) {
+            let index = componentProperties.page || parentProps.page;
+            if (!(typeof index === 'number') || index === 0)
+                throw Error(`Property 'page' is required and greather than 0 on ${componentProperties.name}`);
+            if (index > formLength) {
+                if (form?.['lastIndex'] && index === form['lastIndex']['page']) {
+                    index = form['lastIndex']['index'];
+                }
+                else {
+                    form['lastIndex'] = {
+                        page: index,
+                        index: formLength + 1
+                    };
+                    index = formLength + 1;
+                }
+            }
+            let group = form.controls[index - 1];
+            if (!group) {
+                group = new FormGroup({});
+                form.insert(index, group);
+            }
+            form = group;
+        }
         if (componentProperties.path)
             this.addFormControl(form, componentProperties, parentProps);
         return form;
@@ -1139,8 +1378,45 @@ class NgxFormService {
     /**
      * @description Retrieves form data from a FormGroup.
      * @summary Extracts and processes the data from a FormGroup, handling different input types and nested form groups.
-     * @param {FormGroup} formGroup - The FormGroup to extract data from.
-     * @return {Record<string, unknown>} An object containing the form data.
+     * Performs type conversion for various HTML5 input types, validates nested controls, and manages
+     * multiple control scenarios. Automatically enables all group controls after data extraction.
+     *
+     * @param {FormGroup} formGroup - The FormGroup to extract data from
+     * @return {Record<string, unknown>} An object containing the processed form data with proper type conversions
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant FG as FormGroup
+     *   participant FC as FormControl
+     *
+     *   C->>NFS: getFormData(formGroup)
+     *   loop For each control in formGroup
+     *     alt Control is not FormControl
+     *       NFS->>NFS: Recursive getFormData(control)
+     *       alt parentProps.multiple and !isValid
+     *         NFS->>NFS: reset(control)
+     *       end
+     *     else Control is FormControl
+     *       NFS->>FC: Get control value
+     *       NFS->>NFS: Apply type conversion based on props.type
+     *       alt HTML5CheckTypes
+     *         NFS->>NFS: Keep boolean value
+     *       else NUMBER type
+     *         NFS->>NFS: parseToNumber(value)
+     *       else DATE/DATETIME types
+     *         NFS->>NFS: new Date(value)
+     *       else Other types
+     *         NFS->>NFS: escapeHtml(value)
+     *       end
+     *     end
+     *   end
+     *   NFS->>NFS: enableAllGroupControls(formGroup)
+     *   NFS-->>C: Return processed data object
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static getFormData(formGroup) {
         const data = {};
@@ -1185,10 +1461,51 @@ class NgxFormService {
     /**
      * @description Validates fields in a form control or form group.
      * @summary Recursively validates all fields in a form control or form group, marking them as touched and dirty.
-     * @param {AbstractControl} control - The control or form group to validate.
-     * @param {string} [path] - The path to the control within the form.
-     * @return {boolean} True if all fields are valid, false otherwise.
-     * @throws {Error} If no control is found at the specified path or if the control type is unknown.
+     * Performs comprehensive validation including uniqueness checks for primary keys in FormArray scenarios.
+     * This method ensures all validation rules are applied and form state is properly updated.
+     *
+     * @param {AbstractControl} control - The control or form group to validate
+     * @param {string} [pk] - Optional primary key field name for uniqueness validation
+     * @param {string} [path] - The path to the control within the form for error reporting
+     * @return {boolean} True if all fields are valid, false otherwise
+     * @throws {Error} If no control is found at the specified path or if the control type is unknown
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant FC as FormControl
+     *   participant FG as FormGroup
+     *   participant FA as FormArray
+     *
+     *   C->>NFS: validateFields(control, pk?, path?)
+     *   alt Control is FormControl
+     *     NFS->>FC: markAsTouched()
+     *     NFS->>FC: markAsDirty()
+     *     NFS->>FC: updateValueAndValidity()
+     *     alt Is in FormArray group
+     *       NFS->>NFS: Check uniqueness in group
+     *       alt Not unique
+     *         NFS->>FC: setErrors({notUnique: true})
+     *       end
+     *     end
+     *     NFS-->>C: Return control.valid
+     *   else Control is FormGroup
+     *     loop For each child control
+     *       NFS->>NFS: Recursive validateFields(child)
+     *     end
+     *     NFS-->>C: Return allValid
+     *   else Control is FormArray
+     *     loop For each array control
+     *       NFS->>NFS: Recursive validateFields(child)
+     *     end
+     *     NFS-->>C: Return allValid
+     *   else Unknown control type
+     *     NFS-->>C: Throw Error
+     *   end
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static validateFields(control, pk, path) {
         control = path ? control.get(path) : control;
@@ -1228,13 +1545,13 @@ class NgxFormService {
                 });
             }
         }
-        function getControlName(control) {
-            const group = control.parent;
-            if (!group)
-                return null;
-            return Object.keys(group.controls).find(name => control === group.get(name)) || null;
-        }
-        return !getControlName(control) ? true : control.valid;
+        // function getControlName(control: AbstractControl): string | null {
+        //   const group = control.parent as FormGroup;
+        //   if (!group)
+        //       return null;
+        //   return Object.keys(group.controls).find(name => control === group.get(name)) || null;
+        // }
+        return control.valid;
     }
     /**
      * @description Generates validators from component properties.
@@ -1252,10 +1569,38 @@ class NgxFormService {
     }
     /**
      * @description Creates a FormControl from component properties.
-     * @summary Generates a FormControl with validators based on the provided component properties.
-     * @param {FieldProperties} props - The component properties.
-     * @param {FieldUpdateMode} [updateMode='change'] - The update mode for the control.
-     * @return {FormControl} The created FormControl.
+     * @summary Generates a FormControl with validators and initial configuration based on the provided
+     * component properties. Handles different input types, sets initial values, and configures
+     * validation rules and update modes.
+     *
+     * @param {FieldProperties} props - The component properties defining the control configuration
+     * @param {FieldUpdateMode} [updateMode='change'] - The update mode for the control ('change', 'blur', 'submit')
+     * @return {FormControl} The created FormControl with proper configuration and validators
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant VF as ValidatorFactory
+     *   participant AF as Angular Forms
+     *
+     *   C->>NFS: fromProps(props, updateMode?)
+     *   NFS->>NFS: validatorsFromProps(props)
+     *   NFS->>VF: Create validators from props
+     *   VF-->>NFS: Return validator array
+     *   NFS->>NFS: Compose validators
+     *   alt props.value exists and not checkbox
+     *     alt props.type is DATE
+     *       NFS->>NFS: Validate date format
+     *     end
+     *     NFS->>NFS: Set initial value
+     *   end
+     *   NFS->>AF: new FormControl(config)
+     *   AF-->>NFS: Return FormControl
+     *   NFS-->>C: Return configured FormControl
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static fromProps(props, updateMode = 'change') {
         const validators = this.validatorsFromProps(props);
@@ -1273,21 +1618,50 @@ class NgxFormService {
         });
     }
     /**
-     * @description Retrieves properties from a FormControl.
-     * @summary Gets the FieldProperties associated with a FormControl from the internal WeakMap.
-     * @param {FormControl} control - The FormControl to get properties for.
-     * @return {FieldProperties} The properties associated with the control.
+     * @description Retrieves properties from a FormControl, FormArray, or FormGroup.
+     * @summary Gets the FieldProperties associated with a form control from the internal WeakMap.
+     * This method provides access to the original component properties that were used to create
+     * the control, enabling validation, rendering, and behavior configuration.
+     *
+     * @param {FormControl | FormArray | FormGroup} control - The form control to get properties for
+     * @return {FieldProperties} The properties associated with the control, or empty object if not found
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static getPropsFromControl(control) {
         return this.controls.get(control) || {};
     }
     /**
-     * @description Finds a parent element with a specific tag.
-     * @summary Traverses up the DOM tree to find the nearest parent element with the specified tag.
-     * @param {HTMLElement} el - The starting element.
-     * @param {string} tag - The tag name to search for.
-     * @return {HTMLElement} The found parent element.
-     * @throws {Error} If no parent with the specified tag is found.
+     * @description Finds a parent element with a specific tag in the DOM tree.
+     * @summary Traverses up the DOM tree to find the nearest parent element with the specified tag name.
+     * This is useful for finding container elements or specific parent components in the DOM hierarchy.
+     * The search is case-insensitive for tag name matching.
+     *
+     * @param {HTMLElement} el - The starting element to traverse from
+     * @param {string} tag - The tag name to search for (case-insensitive)
+     * @return {HTMLElement} The found parent element with the specified tag
+     * @throws {Error} If no parent with the specified tag is found in the DOM tree
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Component
+     *   participant NFS as NgxFormService
+     *   participant DOM as DOM Tree
+     *
+     *   C->>NFS: getParentEl(element, tagName)
+     *   loop Traverse up DOM tree
+     *     NFS->>DOM: Get parentElement
+     *     DOM-->>NFS: Return parent or null
+     *     alt Parent exists and tag matches
+     *       NFS-->>C: Return parent element
+     *     else Parent is null
+     *       NFS-->>C: Throw Error
+     *     end
+     *   end
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static getParentEl(el, tag) {
         let parent;
@@ -1300,10 +1674,17 @@ class NgxFormService {
         throw new Error(`No parent with the tag ${tag} was found for provided element`);
     }
     /**
-     * @description Registers a control with its properties.
-     * @summary Associates a control with its properties in the internal WeakMap.
-     * @param {AbstractControl} control - The control to register.
-     * @param {FieldProperties} props - The properties to associate with the control.
+     * @description Registers a control with its properties in the internal WeakMap.
+     * @summary Associates a form control with its component properties for later retrieval.
+     * This enables the service to maintain metadata about controls without creating memory leaks,
+     * as WeakMap automatically cleans up references when controls are garbage collected.
+     *
+     * @param {AbstractControl} control - The control to register (FormControl, FormGroup, or FormArray)
+     * @param {FieldProperties} props - The properties to associate with the control
+     * @return {void}
+     *
+     * @static
+     * @memberOf NgxFormService
      */
     static register(control, props) {
         this.controls.set(control, props);
@@ -1391,6 +1772,8 @@ class NgxRenderingEngine extends RenderingEngine {
      * @type {string | undefined}
      */
     static { this._operation = undefined; }
+    static { this._projectable = true; }
+    static { this._parentProps = undefined; }
     /**
      * @description Constructs a new NgxRenderingEngine instance
      * @summary Initializes a new instance of the Angular rendering engine by calling the parent
@@ -1459,7 +1842,6 @@ class NgxRenderingEngine extends RenderingEngine {
         const hiddenOn = inputs?.hidden || [];
         if (hiddenOn.includes(operation))
             return { inputs, injector };
-        // const hiddenOn = inputs?.hidden || [];
         const result = {
             component,
             inputs,
@@ -1469,6 +1851,8 @@ class NgxRenderingEngine extends RenderingEngine {
             result.inputs['rendererId'] = fieldDef.rendererId;
         // process children
         if (fieldDef.children?.length) {
+            if (!NgxRenderingEngine._parentProps && inputs?.pages)
+                NgxRenderingEngine._parentProps = { pages: inputs?.pages };
             result.children = fieldDef.children.map((child) => {
                 if (child?.children?.length) {
                     child.children = child.children.filter(c => {
@@ -1477,15 +1861,18 @@ class NgxRenderingEngine extends RenderingEngine {
                             return c;
                     });
                 }
-                // create a child form and add its controls as properties of child.props
-                NgxFormService.addControlFromProps(registryFormId, child.props, inputs);
+                NgxFormService.addControlFromProps(registryFormId, child.props, { ...inputs, ...NgxRenderingEngine._parentProps || {} });
                 return this.fromFieldDefinition(child, vcr, injector, tpl, registryFormId);
             });
         }
         // generating DOM
+        const projectable = NgxRenderingEngine._projectable;
         vcr.clear();
-        const template = vcr.createEmbeddedView(tpl, injector).rootNodes;
-        const componentInstance = NgxRenderingEngine.createComponent(component, { ...inputs, model: this._model }, componentMetadata, vcr, injector, template);
+        const template = !projectable ? [] : vcr.createEmbeddedView(tpl, injector).rootNodes;
+        const hasChildren = Object.values(possibleInputs).some(({ propName }) => propName === 'children');
+        const hasModel = Object.values(possibleInputs).some(({ propName }) => propName === 'children');
+        const componentInputs = Object.assign(inputs, (hasModel ? { model: this._model } : {}), (hasChildren ? { children: fieldDef?.['children'] || [] } : {}));
+        const componentInstance = NgxRenderingEngine.createComponent(component, componentInputs, componentMetadata, vcr, injector, template);
         result.instance = NgxRenderingEngine._instance = componentInstance.instance;
         return result;
     }
@@ -1533,8 +1920,11 @@ class NgxRenderingEngine extends RenderingEngine {
      *
      * @return {Promise<void>} A promise that resolves when the instance is destroyed
      */
-    static async destroy() {
+    static async destroy(formId) {
+        if (formId)
+            NgxFormService.removeRegistry(formId);
         NgxRenderingEngine._instance = undefined;
+        NgxRenderingEngine._parentProps = undefined;
     }
     /**
      * @description Renders a model into an Angular component output
@@ -1566,18 +1956,20 @@ class NgxRenderingEngine extends RenderingEngine {
      *   FromField-->>Render: AngularDynamicOutput
      *   Render-->>Client: return AngularDynamicOutput
      */
-    render(model, globalProps, vcr, injector, tpl) {
+    render(model, globalProps, vcr, injector, tpl, projectable = true) {
         let result;
         try {
             this._model = model;
+            NgxRenderingEngine._projectable = projectable;
             const formId = Date.now().toString(36).toUpperCase();
             const fieldDef = this.toFieldDefinition(model, globalProps);
             const props = fieldDef.props;
             if (!NgxRenderingEngine._operation)
                 NgxRenderingEngine._operation = props?.['operation'] || undefined;
+            const formGroup = NgxFormService.createForm(formId, props);
             result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl, formId);
-            result.instance['formGroup'] = NgxFormService.getControlFromForm(formId);
-            NgxFormService.removeRegistry(formId);
+            result.instance['formGroup'] = formGroup;
+            NgxRenderingEngine.destroy(formId);
         }
         catch (e) {
             throw new InternalError(`Failed to render Model ${model.constructor.name}: ${e}`);
@@ -1774,6 +2166,7 @@ class ComponentRendererComponent {
          * @memberOf ComponentRendererComponent
          */
         this.injector = inject(EnvironmentInjector);
+        this.children = [];
         /**
          * @description Event emitter for events from the rendered component.
          * @summary This output property emits events that originate from the dynamically rendered
@@ -1884,6 +2277,8 @@ class ComponentRendererComponent {
         const props = globals?.['item'] || globals?.['props'] || {};
         if (props?.['tag'])
             delete props['tag'];
+        if (props?.['children'] && !this.children.length)
+            this.children = props['children'];
         const inputKeys = Object.keys(props);
         const unmappedKeys = [];
         for (const input of inputKeys) {
@@ -1896,7 +2291,8 @@ class ComponentRendererComponent {
             }
         }
         this.vcr.clear();
-        this.component = NgxRenderingEngine.createComponent(component, props, metadata, this.vcr, this.injector, []);
+        const template = this.children?.length ? this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes : [];
+        this.component = NgxRenderingEngine.createComponent(component, props, metadata, this.vcr, this.injector, template);
         this.subscribeEvents();
     }
     createParentComponent() {
@@ -1987,11 +2383,11 @@ class ComponentRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "rendererId" } }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n</ng-template>\n\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", children: "children", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(children?.length) {\n    @for(child of children; track child) {\n      @if(child.children?.length) {\n      <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n      } @else {\n        <ngx-decaf-component-renderer\n          [tag]=\"child?.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{props: child.props}\" />\n      }\n    }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, host: { '[attr.id]': 'rendererId' }, template: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n</ng-template>\n\n\n\n" }]
+            args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, host: { '[attr.id]': 'uid' }, template: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(children?.length) {\n    @for(child of children; track child) {\n      @if(child.children?.length) {\n      <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n      } @else {\n        <ngx-decaf-component-renderer\n          [tag]=\"child?.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{props: child.props}\" />\n      }\n    }\n  }\n</ng-template>\n\n\n" }]
         }], ctorParameters: () => [], propDecorators: { vcr: [{
                 type: ViewChild,
                 args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
@@ -2000,6 +2396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ required: true }]
             }], globals: [{
                 type: Input
+            }], children: [{
+                type: Input
             }], listenEvent: [{
                 type: Output
             }], model: [{
@@ -2117,24 +2515,26 @@ class NgxCrudFormField {
      */
     getErrors(parent) {
         const formControl = this.formControl;
-        const accordionComponent = parent.closest('ngx-decaf-fieldset')?.querySelector('ion-accordion-group');
-        if ((!formControl.pristine || formControl.touched) && !formControl.valid) {
-            const errors = Object.keys(formControl.errors ?? {}).map(key => ({
-                key: key,
-                message: key,
-            }));
-            if (errors.length) {
-                if (accordionComponent && !this.validationErrorEventDispateched) {
-                    const validationErrorEvent = new CustomEvent(EventConstants.VALIDATION_ERROR, {
-                        detail: { fieldName: this.name, hasErrors: true },
-                        bubbles: true
-                    });
-                    accordionComponent.dispatchEvent(validationErrorEvent);
-                    this.validationErrorEventDispateched = true;
+        if (formControl) {
+            const accordionComponent = parent.closest('ngx-decaf-fieldset')?.querySelector('ion-accordion-group');
+            if ((!formControl.pristine || formControl.touched) && !formControl.valid) {
+                const errors = Object.keys(formControl.errors ?? {}).map(key => ({
+                    key: key,
+                    message: key,
+                }));
+                if (errors.length) {
+                    if (accordionComponent && !this.validationErrorEventDispateched) {
+                        const validationErrorEvent = new CustomEvent(EventConstants.VALIDATION_ERROR, {
+                            detail: { fieldName: this.name, hasErrors: true },
+                            bubbles: true
+                        });
+                        accordionComponent.dispatchEvent(validationErrorEvent);
+                        this.validationErrorEventDispateched = true;
+                    }
                 }
+                for (const error of errors)
+                    return `* ${this.sf(this.translateService.instant(`errors.${error?.['message']}`), this[error?.['key']] ?? "")}`;
             }
-            for (const error of errors)
-                return `* ${this.sf(this.translateService.instant(`errors.${error?.['message']}`), this[error?.['key']] ?? "")}`;
         }
     }
 }
@@ -2248,6 +2648,11 @@ var component = {
 		step3: "Type a value",
 		no_suggestions: "No suggestions",
 		sort: "Sort by"
+	},
+	stepped_form: {
+		next: "Next",
+		previous: "Previous",
+		submit: "Submit"
 	}
 };
 var en = {
@@ -2408,6 +2813,15 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
          * @memberOf CrudFieldComponent
          */
         this.value = '';
+        /**
+         * @description Whether the field should be hidden.
+         * @summary When true, the field will not be visible in the UI but will still be part of the form model.
+         * This is useful for fields that need to be included in form submission but should not be displayed to the user.
+         *
+         * @type {boolean}
+         * @memberOf CrudFieldComponent
+         */
+        this.hidden = false;
         /**
          * @description Interface style for select inputs.
          * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
@@ -2688,7 +3102,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
         component.dispatchEvent(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
@@ -2709,7 +3123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonText,
                         IonTextarea,
                         IonIcon
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n             #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\"  #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\n            [required]=\"required !== undefined ? required : null\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [inputmode]=\"inputmode\"\n            [spellcheck]=\"spellcheck\"\n            [rows]=\"rows\"\n            [labelPlacement]=\"labelPlacement\"\n            [value]=\"value\"\n            [fill]=\"fill\"\n            [errorText]=\"getErrors(container)\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\n            [minlength]=\"minlength !== undefined ? minlength : null\"\n            [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n            [readonly]=\"readonly !== undefined ? readonly : null\"\n            [max]=\"max !== undefined ? max : null\"\n            [min]=\"min !== undefined ? min : null\"\n            [pattern]=\"pattern !== undefined ? pattern : null\"\n            [step]=\"step !== undefined ? step : null\"\n            [fill]=\"fill\"\n            [placeholder]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2806,6 +3220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], uid: [{
                 type: Input
+            }], page: [{
+                type: Input
             }], translatable: [{
                 type: Input
             }], activeFormGroup: [{
@@ -3235,7 +3651,9 @@ class NgxBaseComponent {
      * an initialization message with the component name. This method is typically called
      * during the component's lifecycle setup.
      */
-    initialize() {
+    async initialize(parseProps = true, skip) {
+        if (!this.initialized && parseProps)
+            return this.parseProps(this, skip || []);
         this.initialized = true;
     }
     /**
@@ -3315,11 +3733,15 @@ class NgxBaseComponent {
      * @protected
      * @memberOf NgxBaseComponent
      */
-    parseProps(instance) {
+    parseProps(instance, skip) {
         Object.keys(instance).forEach((key) => {
-            if (Object.keys(this.props).includes(key))
+            if (Object.keys(this.props).includes(key) && !skip.includes(key)) {
                 this[key] = this.props[key];
+                delete this.props[key];
+            }
         });
+        if (!this.initialized)
+            this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NgxBaseComponent, isStandalone: true, selector: "ng-component", inputs: { rendererId: "rendererId", model: "model", props: "props", item: "item", pk: "pk", route: "route", operations: "operations", uid: "uid", mapper: "mapper", locale: "locale", translatable: "translatable", className: "className", mode: "mode", renderChild: "renderChild" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<div></div>', isInline: true }); }
@@ -3594,14 +4016,14 @@ let CrudFormComponent = class CrudFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", modelId: "modelId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", modelId: "modelId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic()
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], modelId: [{
@@ -3842,7 +4264,7 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
      * @memberOf EmptyStateComponent
      */
     async ngOnInit() {
-        this.parseProps(this);
+        this.initialize();
         this.translatable = stringToBoolean(this.translatable);
         this.showIcon = stringToBoolean(this.showIcon);
         this.locale = this.getLocale(this.translatable);
@@ -4580,7 +5002,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", page: "page", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -4601,7 +5023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonReorderGroup,
                         IonButton,
                         IonIcon,
-                    ], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
+                    ], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -4609,6 +5031,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], childOf: [{
                 type: Input
+            }], page: [{
+                type: Input
             }], uid: [{
                 type: Input
             }], customTypes: [{
@@ -5832,6 +6256,11 @@ class ModelRendererComponent {
          * @description Global variables to be passed to the rendered component
          */
         this.globals = {};
+        /**
+         * @description Set if render content projection is allowed
+         * @default true
+         */
+        this.projectable = true;
         /**
          * @description Event emitter for custom events from the rendered component
          */
@@ -5849,7 +6278,7 @@ class ModelRendererComponent {
             typeof model === 'string'
                 ? Model.build({}, model)
                 : model;
-        this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner);
+        this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner, this.projectable);
         if (this.output?.inputs)
             this.rendererId = sf(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
         this.instance = this.output?.instance;
@@ -5907,7 +6336,7 @@ class ModelRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModelRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "rendererId" } }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }, { propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <!-- Keep to avoid id conflicts -->\n  <div [id]=\"rendererId\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", projectable: "projectable", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "rendererId" } }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }, { propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <!-- Keep to avoid id conflicts -->\n  <div [id]=\"rendererId\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModelRendererComponent, decorators: [{
             type: Component,
@@ -5917,6 +6346,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ required: true }]
             }], globals: [{
                 type: Input
+            }], projectable: [{
+                type: Input
             }], inner: [{
                 type: ViewChild,
                 args: ['inner', { read: TemplateRef, static: true }]
@@ -6050,40 +6481,15 @@ class LayoutComponent extends NgxBaseComponent {
      *
      * @memberOf LayoutComponent
      */
-    ngOnInit() {
-        this.initialize();
-    }
-    /**
-     * @description Initializes the layout component with processed properties.
-     * @summary Overrides the base component's initialize method to set up the grid layout.
-     * This method processes input properties, normalizes the breakpoint value, converts
-     * rows and columns to their array representations, and marks the component as initialized.
-     * The initialization ensures all properties are in the correct format for rendering.
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant L as LayoutComponent
-     *   participant B as NgxBaseComponent
-     *
-     *   L->>B: parseProps(this)
-     *   Note over L: Process component properties
-     *   L->>L: Normalize breakpoint to lowercase
-     *   L->>L: Convert rows to array format
-     *   L->>L: Convert cols to array format
-     *   L->>L: Set initialized = true
-     *
-     * @override
-     * @memberOf LayoutComponent
-     */
-    initialize() {
-        this.parseProps(this);
+    async ngOnInit() {
+        await this.initialize();
         this.breakpoint = this.breakpoint.slice(0, 2).toLowerCase();
         this.cols = this._cols;
         this.rows = this._rows;
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "projectable", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
@@ -7237,7 +7643,7 @@ let ListComponent = class ListComponent extends NgxBaseComponent {
         await this.refresh();
         if (this.operations.includes(OperationKeys.CREATE) && this.route)
             this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
-        this.initialize();
+        await this.initialize();
         if (this.model instanceof Model && this._repository)
             this._repository.observe(this.observer);
     }
@@ -7933,7 +8339,7 @@ let ListComponent = class ListComponent extends NgxBaseComponent {
         }, []);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", translatable: "translatable", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", emptyIcon: "emptyIcon", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" } }, usesInheritance: true, ngImport: i0, template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar && data?.length) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", translatable: "translatable", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", emptyIcon: "emptyIcon", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" } }, usesInheritance: true, ngImport: i0, template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar && data?.length) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -8020,6 +8426,296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['window:BackButtonNavigationEndEvent', ['$event']]
             }] } });
 
+let SteppedFormComponent = class SteppedFormComponent {
+    /**
+     * @description Creates an instance of SteppedFormComponent.
+     * @summary Initializes a new SteppedFormComponent instance and registers the required
+     * Ionic icons for navigation buttons (forward and back arrows).
+     *
+     * @memberOf SteppedFormComponent
+     */
+    constructor() {
+        /**
+         * @description Number of pages in the stepped form.
+         * @summary Represents the total number of steps/pages in the multi-step form.
+         * This value is automatically calculated based on the page properties of the children
+         * or can be explicitly set. Each page represents a logical group of form fields.
+         *
+         * @type {number}
+         * @default 1
+         * @memberOf SteppedFormComponent
+         */
+        this.pages = 1;
+        /**
+         * @description The CRUD operation type for this form.
+         * @summary Defines the type of operation being performed (CREATE, READ, UPDATE, DELETE).
+         * This affects form behavior, validation rules, and field accessibility. For example,
+         * READ operations might disable form fields, while CREATE operations enable all fields.
+         *
+         * @type {CrudOperations}
+         * @default OperationKeys.CREATE
+         * @memberOf SteppedFormComponent
+         */
+        this.operation = OperationKeys.CREATE;
+        /**
+         * @description The initial page to display when the form loads.
+         * @summary Specifies which page of the multi-step form should be shown first.
+         * This allows starting the form at any step, useful for scenarios like editing
+         * existing data where you might want to jump to a specific section.
+         *
+         * @type {number}
+         * @default 1
+         * @memberOf SteppedFormComponent
+         */
+        this.startPage = 1;
+        /**
+         * @description Array of UI model metadata for the currently active page.
+         * @summary Contains only the UI model metadata for fields that should be displayed
+         * on the currently active page. This is a filtered subset of the children array,
+         * updated whenever the user navigates between pages.
+         *
+         * @type {UIModelMetadata[] | undefined}
+         * @memberOf SteppedFormComponent
+         */
+        this.activeChildren = undefined;
+        /**
+         * @description FormGroup for the currently active page.
+         * @summary The FormGroup instance that manages form controls and validation
+         * for the current page only. This is extracted from the main formGroup
+         * when using FormArray structure.
+         *
+         * @type {FormGroup | undefined}
+         * @memberOf SteppedFormComponent
+         */
+        this.activeFormGroup = undefined;
+        /**
+         * @description The currently active page number.
+         * @summary Tracks which page of the multi-step form is currently being displayed.
+         * This property is updated as users navigate through the form steps using
+         * the next/back buttons or programmatic navigation.
+         *
+         * @type {number}
+         * @memberOf SteppedFormComponent
+         */
+        this.activePage = 1;
+        /**
+         * @description Array representing the structure of pages.
+         * @summary Contains metadata about each page, including page numbers and indices.
+         * This array is built during initialization to organize the form fields into
+         * logical pages and provide navigation structure.
+         *
+         * @type {UIModelMetadata[]}
+         * @memberOf SteppedFormComponent
+         */
+        this.pagesArray = [];
+        /**
+         * @description Event emitter for form submission.
+         * @summary Emits events when the form is submitted, typically on the last page
+         * when all validation passes. The emitted event contains the form data and
+         * event type information for parent components to handle.
+         *
+         * @type {EventEmitter<BaseCustomEvent>}
+         * @memberOf SteppedFormComponent
+         */
+        this.submitEvent = new EventEmitter();
+        addIcons({ arrowForwardOutline, arrowBackOutline });
+    }
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the stepped form by organizing children into pages, calculating the total
+     * number of pages, and initializing the active page. This method processes the UI model metadata
+     * to create a logical page structure and ensures proper page assignments for all form fields.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant S as SteppedFormComponent
+     *   participant F as Form Service
+     *
+     *   A->>S: ngOnInit()
+     *   S->>S: Set activePage = startPage
+     *   S->>S: Process children into pagesArray
+     *   S->>S: Calculate total pages
+     *   S->>S: Assign page props to children
+     *   S->>S: getCurrentFormGroup(activePage)
+     *   S->>F: Extract FormGroup for active page
+     *   F-->>S: Return activeFormGroup
+     *
+     * @memberOf SteppedFormComponent
+     */
+    ngOnInit() {
+        if (!this.locale)
+            this.locale = getLocaleContext("SteppedFormComponent");
+        this.activePage = this.startPage;
+        this.pagesArray = this.children.reduce((acc, curr, index) => {
+            const page = curr.props?.['page'] || index + 1;
+            if (!acc[page])
+                acc[page] = [];
+            acc[page].push({ index: page });
+            return acc;
+        }, []).filter(Boolean);
+        this.pages = this.pagesArray.length;
+        this.children = [...this.children.map((c) => {
+                if (!c.props)
+                    c.props = {};
+                const page = c.props['page'] || 1;
+                // prevent page overflow
+                c.props['page'] = page > this.pages ? this.pages : page;
+                return c;
+            })];
+        this.getCurrentFormGroup(this.activePage);
+    }
+    /**
+     * @description Cleanup method called when the component is destroyed.
+     * @summary Unsubscribes from any active timer subscriptions to prevent memory leaks.
+     * This is part of Angular's component lifecycle and ensures proper resource cleanup.
+     *
+     * @memberOf SteppedFormComponent
+     */
+    ngOnDestroy() {
+        if (this.timerSubscription)
+            this.timerSubscription.unsubscribe();
+    }
+    /**
+     * @description Handles navigation to the next page or form submission.
+     * @summary Validates the current page's form fields and either navigates to the next page
+     * or submits the entire form if on the last page. Form validation must pass before
+     * proceeding. On successful submission, emits a submit event with form data.
+     *
+     * @param {boolean} lastPage - Whether this is the last page of the form
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant S as SteppedFormComponent
+     *   participant F as Form Service
+     *   participant P as Parent Component
+     *
+     *   U->>S: Click Next/Submit
+     *   S->>F: validateFields(activeFormGroup)
+     *   F-->>S: Return validation result
+     *   alt Not last page and valid
+     *     S->>S: activePage++
+     *     S->>S: getCurrentFormGroup(activePage)
+     *   else Last page and valid
+     *     S->>F: getFormData(formGroup)
+     *     F-->>S: Return form data
+     *     S->>P: submitEvent.emit({data, name: SUBMIT})
+     *   end
+     *
+     * @memberOf SteppedFormComponent
+     */
+    handleNext(lastPage = false) {
+        const isValid = NgxFormService.validateFields(this.activeFormGroup);
+        if (!lastPage) {
+            if (isValid) {
+                this.activePage = this.activePage + 1;
+                this.getCurrentFormGroup(this.activePage);
+            }
+        }
+        else {
+            if (isValid) {
+                const data = Object.assign({}, ...Object.values(NgxFormService.getFormData(this.formGroup)));
+                this.submitEvent.emit({
+                    data,
+                    name: EventConstants.SUBMIT,
+                });
+            }
+        }
+    }
+    /**
+     * @description Handles navigation to the previous page.
+     * @summary Moves the user back to the previous page in the stepped form.
+     * This method decrements the active page number and updates the form
+     * group and children to display the previous page's content.
+     *
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant S as SteppedFormComponent
+     *
+     *   U->>S: Click Back
+     *   S->>S: activePage--
+     *   S->>S: getCurrentFormGroup(activePage)
+     *   Note over S: Update active form and children
+     *
+     * @memberOf SteppedFormComponent
+     */
+    handleBack() {
+        this.activePage = this.activePage - 1;
+        this.getCurrentFormGroup(this.activePage);
+    }
+    /**
+     * @description Updates the active form group and children for the specified page.
+     * @summary Extracts the FormGroup for the given page from the FormArray and filters
+     * the children to show only fields belonging to that page. Uses a timer to ensure
+     * proper Angular change detection when updating the activeChildren.
+     *
+     * @param {number} page - The page number to activate
+     * @return {void}
+     *
+     * @private
+     * @mermaid
+     * sequenceDiagram
+     *   participant S as SteppedFormComponent
+     *   participant F as FormArray
+     *   participant T as Timer
+     *
+     *   S->>F: Extract FormGroup at index (page - 1)
+     *   F-->>S: Return page FormGroup
+     *   S->>S: Set activeChildren = undefined
+     *   S->>T: timer(10).subscribe()
+     *   T-->>S: Filter children for active page
+     *   S->>S: Set activeChildren
+     *
+     * @memberOf SteppedFormComponent
+     */
+    getCurrentFormGroup(page) {
+        this.activeFormGroup = this.formGroup.at(page - 1);
+        this.activeChildren = undefined;
+        this.timerSubscription = timer(10).subscribe(() => {
+            this.activeChildren = this.children.filter(c => c.props?.['page'] === page);
+            console.log(this.activeChildren);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { locale: "locale", pages: "pages", operation: "operation", startPage: "startPage", children: "children", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div>\n        @for(page of pagesArray; track $index;) {\n        <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n      }\n    </div>\n  </div>\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
+};
+SteppedFormComponent = __decorate([
+    Dynamic(),
+    __metadata("design:paramtypes", [])
+], SteppedFormComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-stepped-form', imports: [
+                        TranslatePipe,
+                        ReactiveFormsModule,
+                        IonSkeletonText,
+                        IonText,
+                        IonButton,
+                        IonIcon,
+                        ModelRendererComponent,
+                        ComponentRendererComponent
+                    ], standalone: true, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div>\n        @for(page of pagesArray; track $index;) {\n        <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n      }\n    </div>\n  </div>\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { locale: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], operation: [{
+                type: Input
+            }], startPage: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output
+            }] } });
+
 class CollapsableDirective {
     constructor() {
         this.element = inject(ElementRef);
@@ -8061,7 +8757,8 @@ const Components = [
     CrudFormComponent,
     FieldsetComponent,
     LayoutComponent,
-    FilterComponent
+    FilterComponent,
+    SteppedFormComponent
 ];
 class ForAngularComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -8077,7 +8774,8 @@ class ForAngularComponentsModule {
             CrudFormComponent,
             FieldsetComponent,
             LayoutComponent,
-            FilterComponent, CollapsableDirective], exports: [ModelRendererComponent,
+            FilterComponent,
+            SteppedFormComponent, CollapsableDirective], exports: [ModelRendererComponent,
             ComponentRendererComponent,
             CrudFieldComponent,
             CrudFormComponent,
@@ -8089,7 +8787,8 @@ class ForAngularComponentsModule {
             CrudFormComponent,
             FieldsetComponent,
             LayoutComponent,
-            FilterComponent, CollapsableDirective] }); }
+            FilterComponent,
+            SteppedFormComponent, CollapsableDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
             CrudFormComponent,
             EmptyStateComponent,
@@ -8099,14 +8798,15 @@ class ForAngularComponentsModule {
             PaginationComponent,
             CrudFormComponent,
             FieldsetComponent,
-            FilterComponent] }); }
+            FilterComponent,
+            SteppedFormComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...Components, ...Directives],
                     declarations: [],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    schemas: [],
                     exports: [...Components, ...Directives],
                 }]
         }] });
@@ -8125,5 +8825,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, MultiI18nLoader, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getI18nLoaderFactoryProviderConfig, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, MultiI18nLoader, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getI18nLoaderFactoryProviderConfig, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map