@decaf-ts/for-angular 0.0.4 → 0.0.5

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

@@ -0,0 +1,2138 @@
+import { UIKeys, parseValueByType, HTML5InputTypes, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
+import * as i0 from '@angular/core';
+import { reflectComponentType, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, ComparisonValidationKeys, PathProxyEngine, isValidDate, parseDate, Model, sf } from '@decaf-ts/decorator-validation';
+import * as i1 from '@angular/common';
+import { NgComponentOutlet, Location } from '@angular/common';
+import { apply, metadata } from '@decaf-ts/reflection';
+import { InternalError, OperationKeys } from '@decaf-ts/db-decorators';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { getLogger, ForAngularModule } from 'src/lib/for-angular.module';
+import { NgxRenderingEngine2 as NgxRenderingEngine2$1 } from 'src/lib/engine/NgxRenderingEngine2';
+import { __decorate, __metadata } from 'tslib';
+import * as i1$1 from '@ionic/angular/standalone';
+import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonText, IonIcon } from '@ionic/angular/standalone';
+import * as i3 from '@ngx-translate/core';
+
+/**
+ * @description Angular engine key constants
+ * @summary Contains key strings used by the Angular rendering engine for reflection,
+ * dynamic component creation, and other engine operations.
+ * @typedef {Object} AngularEngineKeys
+ * @property {string} REFLECT - Prefix for reflection metadata keys
+ * @property {string} DYNAMIC - Key for dynamic component identification
+ * @property {string} ANNOTATIONS - Key for component annotations
+ * @property {string} ECMP - Key for embedded components
+ * @property {string} NG_REFLECT - Prefix for Angular reflection attributes
+ * @property {string} RENDERED - Prefix for rendered component markers
+ * @property {string} MAPPER - Key for property mappers
+ * @property {string} CHILDREN - Key for child components
+ * @property {string} LISTABLE - Key for listable components
+ * @property {string} RENDER - Key for renderable components
+ * @property {string} RENDERED_ID - Template for rendered component IDs
+ * @property {string} PARENT - Key for comparison decorators and validators
+ * @const AngularEngineKeys
+ * @memberOf module:engine
+ */
+const AngularEngineKeys = {
+    REFLECT: `${UIKeys.REFLECT}.angular.`,
+    DYNAMIC: 'dynamic-component',
+    ANNOTATIONS: '__annotations__',
+    ECMP: 'ecmp',
+    NG_REFLECT: 'ng-reflect-',
+    RENDERED: 'rendered-as-',
+    MAPPER: 'mapper',
+    CHILDREN: 'children',
+    LISTABLE: 'listable',
+    RENDER: 'render',
+    RENDERED_ID: 'rendered-as-{0}',
+    PARENT: '_parent',
+    VALIDATION_PARENT_KEY: VALIDATION_PARENT_KEY
+};
+/**
+ * @description Form validation state constants
+ * @summary Contains constants representing the possible validation states of a form.
+ * These are used to check and handle form validation throughout the application.
+ * @typedef {Object} FormConstants
+ * @property {string} VALID - Constant representing a valid form state
+ * @property {string} INVALID - Constant representing an invalid form state
+ * @const FormConstants
+ * @memberOf module:engine
+ */
+const FormConstants = {
+    VALID: 'VALID',
+    INVALID: 'INVALID',
+};
+/**
+ * @description Event name constants
+ * @summary Enum containing constants for event names used throughout the application.
+ * These are used to standardize event naming and handling.
+ * @enum {string}
+ * @readonly
+ * @property {string} BACK_BUTTON_NAVIGATION - Event fired when back button navigation ends
+ * @property {string} REFRESH_EVENT - Event fired when a refresh action occurs
+ * @property {string} CLICK_EVENT - Event fired when a click action occurs
+ * @property {string} SUBMIT_EVENT - Event fired when a form submission occurs
+ * @memberOf module:engine
+ */
+var EventConstants;
+(function (EventConstants) {
+    EventConstants["BACK_BUTTON_NAVIGATION"] = "backButtonNavigationEndEvent";
+    EventConstants["REFRESH_EVENT"] = "RefreshEvent";
+    EventConstants["CLICK_EVENT"] = "ClickEvent";
+    EventConstants["SUBMIT_EVENT"] = "SubmitEvent";
+})(EventConstants || (EventConstants = {}));
+/**
+ * @description Logger level constants
+ * @summary Enum defining the logging levels used in the application's logging system.
+ * Lower values represent more verbose logging, while higher values represent more critical logs.
+ * @enum {number}
+ * @readonly
+ * @property {number} ALL - Log everything (most verbose)
+ * @property {number} DEBUG - Log debug information
+ * @property {number} INFO - Log informational messages
+ * @property {number} WARN - Log warnings
+ * @property {number} ERROR - Log errors
+ * @property {number} CRITICAL - Log critical errors (least verbose)
+ * @memberOf module:engine
+ */
+var LoggerLevels;
+(function (LoggerLevels) {
+    LoggerLevels[LoggerLevels["ALL"] = 0] = "ALL";
+    LoggerLevels[LoggerLevels["DEBUG"] = 1] = "DEBUG";
+    LoggerLevels[LoggerLevels["INFO"] = 2] = "INFO";
+    LoggerLevels[LoggerLevels["WARN"] = 3] = "WARN";
+    LoggerLevels[LoggerLevels["ERROR"] = 4] = "ERROR";
+    LoggerLevels[LoggerLevels["CRITICAL"] = 5] = "CRITICAL";
+})(LoggerLevels || (LoggerLevels = {}));
+;
+/**
+ * @description Route direction constants
+ * @summary Enum defining the possible navigation directions in the application.
+ * Used for controlling navigation flow and animation directions.
+ * @enum {string}
+ * @readonly
+ * @property {string} BACK - Navigate back to the previous page
+ * @property {string} FORWARD - Navigate forward to the next page
+ * @property {string} ROOT - Navigate to the root/home page
+ * @memberOf module:engine
+ */
+var RouteDirections;
+(function (RouteDirections) {
+    RouteDirections["BACK"] = "back";
+    RouteDirections["FORWARD"] = "forward";
+    RouteDirections["ROOT"] = "root";
+})(RouteDirections || (RouteDirections = {}));
+/**
+ * @description Component tag name constants
+ * @summary Enum defining the tag names for custom components used in the application.
+ * These tag names are used for component registration and rendering.
+ * @enum {string}
+ * @readonly
+ * @property {string} LIST_ITEM - Tag name for list item component
+ * @property {string} LIST_INFINITE - Tag name for infinite scrolling list component
+ * @property {string} LIST_PAGINATED - Tag name for paginated list component
+ * @memberOf module:engine
+ */
+var ComponentsTagNames;
+(function (ComponentsTagNames) {
+    ComponentsTagNames["LIST_ITEM"] = "ngx-decaf-list-item";
+    ComponentsTagNames["LIST_INFINITE"] = "ngx-decaf-list-infinite";
+    ComponentsTagNames["LIST_PAGINATED"] = "ngx-decaf-list-paginated";
+})(ComponentsTagNames || (ComponentsTagNames = {}));
+/**
+ * @description Base component property name constants
+ * @summary Enum defining the standard property names used by base components in the application.
+ * These property names are used for consistent property access across components.
+ * @enum {string}
+ * @readonly
+ * @property {string} MODEL - Property name for the component's data model
+ * @property {string} LOCALE - Property name for localization settings
+ * @property {string} PK - Property name for primary key
+ * @property {string} ITEMS - Property name for collection items
+ * @property {string} ROUTE - Property name for routing information
+ * @property {string} OPERATIONS - Property name for available operations
+ * @property {string} UID - Property name for unique identifier
+ * @property {string} TRANSLATABLE - Property name for translation flag
+ * @property {string} MAPPER - Property name for property mapper
+ * @property {string} INITIALIZED - Property name for initialization state
+ * @memberOf module:engine
+ */
+var BaseComponentProps;
+(function (BaseComponentProps) {
+    BaseComponentProps["MODEL"] = "model";
+    BaseComponentProps["LOCALE"] = "locale";
+    BaseComponentProps["PK"] = "pk";
+    BaseComponentProps["ITEMS"] = "items";
+    BaseComponentProps["ROUTE"] = "route";
+    BaseComponentProps["OPERATIONS"] = "operations";
+    BaseComponentProps["UID"] = "uid";
+    BaseComponentProps["TRANSLATABLE"] = "translatable";
+    BaseComponentProps["MAPPER"] = "mapper";
+    BaseComponentProps["INITIALIZED"] = "initialized";
+})(BaseComponentProps || (BaseComponentProps = {}));
+
+/**
+ *
+ * Resolves the correct validator key and its associated properties based on the input key and type.
+ *
+ * When the validation key is TYPE, it's necessary to resolve the actual validator based on the
+ * field's type (e.g., 'password', 'email', 'url') instead of using the generic getValidator("type") logic.
+ * This allows directly invoking specific validators like getValidator('password'), ensuring the correct
+ * behavior for type-based validation.
+ *
+ * @param key - The validation key (e.g., 'type', 'required', etc.).
+ * @param value - The value that needs be provided to the validator.
+ * @param type - The field's declared type.
+ * @returns An object containing the resolved validator key and its corresponding props.
+ */
+const resolveValidatorKeyProps = (key, value, type) => {
+    const patternValidators = {
+        [ValidationKeys.PASSWORD]: DEFAULT_PATTERNS.PASSWORD.CHAR8_ONE_OF_EACH,
+        [ValidationKeys.EMAIL]: DEFAULT_PATTERNS.EMAIL,
+        [ValidationKeys.URL]: DEFAULT_PATTERNS.URL,
+    };
+    const isTypeBased = key === ValidationKeys.TYPE && Object.keys(patternValidators).includes(type);
+    const validatorKey = isTypeBased ? type : key;
+    const props = {
+        [validatorKey]: value,
+        // Email, Password, and URL are validated using the "pattern" key
+        ...(isTypeBased && { [ValidationKeys.PATTERN]: patternValidators[type] }),
+    };
+    return { validatorKey, props };
+};
+class ValidatorFactory {
+    static spawn(fieldProps, key) {
+        if (!Validation.keys().includes(key))
+            throw new Error('Unsupported custom validation');
+        const validatorFn = (control) => {
+            const { name, 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)
+                : undefined;
+            // Create a proxy to enable access to parent and child values
+            let proxy = ValidatorFactory.createProxy({});
+            if (Object.values(ComparisonValidationKeys).includes(key)) {
+                const parent = control instanceof FormGroup ? control : control[AngularEngineKeys.PARENT];
+                proxy = ValidatorFactory.createProxy(parent);
+            }
+            let errs;
+            try {
+                errs = validator.hasErrors(value, props, proxy);
+            }
+            catch (e) {
+                errs = `${key} validator failed to validate: ${e}`;
+                console.warn(errs);
+            }
+            return errs ? { [validatorKey]: true } : null;
+        };
+        Object.defineProperty(validatorFn, 'name', {
+            value: `${key}Validator`,
+        });
+        return validatorFn;
+    }
+    /**
+     * @summary Creates a proxy wrapper for an Angular AbstractControl to assist with custom validation logic.
+     * @description Returns a structured proxy object that simulates a hierarchical tree of form values.
+     * Enables Validators handling method to access parent and child properties using consistent dot-notation in Angular forms.
+     *
+     * @param {AbstractControl} control - The control to wrap in a proxy.
+     * @returns {PathProxy<any>} A proxy object exposing form values and enabling recursive parent access.
+     */
+    static createProxy(control) {
+        return PathProxyEngine.create(control, {
+            getValue(target, prop) {
+                if (target instanceof FormControl)
+                    return target.value;
+                if (target instanceof FormGroup) {
+                    const control = target.controls[prop];
+                    return control instanceof FormControl ? control.value : control;
+                }
+                // const value = target[prop];
+                // if (value instanceof FormControl)
+                //   return value.value;
+                //
+                // if (value instanceof FormGroup) {
+                //   const control = value.controls[prop];
+                //   return control instanceof FormControl ? control.value : control;
+                // }
+                return target[prop];
+            },
+            getParent: function (target) {
+                return target._parent;
+            },
+            ignoreUndefined: true,
+            ignoreNull: true,
+        });
+    }
+}
+
+/**
+ * @description Service for managing Angular forms and form controls.
+ * @summary The NgxFormService provides utility methods for creating, managing, and validating Angular forms and form controls. It includes functionality for registering forms, adding controls, validating fields, and handling form data.
+ *
+ * @class
+ * @param {WeakMap<AbstractControl, FieldProperties>} controls - A WeakMap to store control properties.
+ * @param {Map<string, FormGroup>} formRegistry - A Map to store registered forms.
+ *
+ * @example
+ * // Creating a form from components
+ * const components = [
+ *   { inputs: { name: 'username', type: 'text', required: true } },
+ *   { inputs: { name: 'password', type: 'password', minLength: 8 } }
+ * ];
+ * const form = NgxFormService.createFormFromComponents('loginForm', components, true);
+ *
+ * // Validating fields
+ * NgxFormService.validateFields(form);
+ *
+ * // Getting form data
+ * const formData = NgxFormService.getFormData(form);
+ *
+ * @mermaid
+ * sequenceDiagram
+ *   participant C as Component
+ *   participant NFS as NgxFormService
+ *   participant AF as Angular Forms
+ *   C->>NFS: createFormFromComponents()
+ *   NFS->>AF: new FormGroup()
+ *   NFS->>NFS: addFormControl()
+ *   NFS->>AF: addControl()
+ *   NFS-->>C: Return FormGroup
+ *   C->>NFS: validateFields()
+ *   NFS->>AF: markAsTouched(), markAsDirty(), updateValueAndValidity()
+ *   C->>NFS: getFormData()
+ *   NFS->>AF: Get control values
+ *   NFS-->>C: Return form data
+ */
+class NgxFormService {
+    static { this.controls = new WeakMap(); }
+    static { this.formRegistry = new Map(); }
+    /**
+     * @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.
+     */
+    static addRegistry(formId, formGroup) {
+        if (this.formRegistry.has(formId))
+            throw new Error(`A FormGroup with id '${formId}' is already registered.`);
+        this.formRegistry.set(formId, formGroup);
+    }
+    /**
+     * @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.
+     */
+    static removeRegistry(formId) {
+        this.formRegistry.delete(formId);
+    }
+    /**
+     * @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.
+     */
+    static resolveParentGroup(formGroup, path) {
+        const parts = path.split('.');
+        const controlName = parts.pop();
+        let currentGroup = formGroup;
+        for (const part of parts) {
+            if (!currentGroup.get(part)) {
+                currentGroup.addControl(part, new FormGroup({}));
+            }
+            currentGroup = currentGroup.get(part);
+        }
+        return [currentGroup, controlName];
+    }
+    /**
+     * @description Adds a form control to a form group.
+     * @summary Creates and adds a form control to the specified form group based on the provided component properties.
+     * @param {FormGroup} formGroup - The form group to add the control to.
+     * @param {ComponentInput} componentProps - The properties of the component to create the control from.
+     */
+    static addFormControl(formGroup, componentProps) {
+        const { name, childOf } = componentProps;
+        const fullPath = childOf ? `${childOf}.${name}` : name;
+        const [parentGroup, controlName] = this.resolveParentGroup(formGroup, fullPath);
+        if (!parentGroup.get(controlName)) {
+            const control = NgxFormService.fromProps(componentProps, componentProps.updateMode || 'change');
+            NgxFormService.register(control, componentProps);
+            parentGroup.addControl(controlName, control);
+        }
+        componentProps['formGroup'] = parentGroup;
+        componentProps['formControl'] = parentGroup.get(controlName);
+    }
+    /**
+     * @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.
+     */
+    static getControlFromForm(formId, path) {
+        const form = this.formRegistry.get(formId);
+        if (!form)
+            throw new Error(`Form with id '${formId}' not found in the registry.`);
+        if (!path)
+            return form;
+        const control = form.get(path);
+        if (!control)
+            throw new Error(`Control with path '${path}' not found in form '${formId}'.`);
+        return control;
+    }
+    /**
+     * @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 {ComponentConfig[]} components - An array of component configurations.
+     * @param {boolean} [registry=false] - Whether to register the created form.
+     * @return {FormGroup} The created FormGroup.
+     */
+    static createFormFromComponents(id, components, registry = false) {
+        const form = new FormGroup({});
+        components.forEach(component => {
+            this.addFormControl(form, component.inputs);
+        });
+        if (registry)
+            this.addRegistry(id, form);
+        return form;
+    }
+    /**
+     * @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.
+     */
+    static addControlFromProps(id, componentProperties) {
+        const form = this.formRegistry.get(id) ?? new FormGroup({});
+        if (!this.formRegistry.has(id))
+            this.addRegistry(id, form);
+        if (componentProperties.path)
+            this.addFormControl(form, componentProperties);
+        return form;
+    }
+    /**
+     * @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.
+     */
+    static getFormData(formGroup) {
+        const data = {};
+        for (const key in formGroup.controls) {
+            const control = formGroup.controls[key];
+            if (!(control instanceof FormControl)) {
+                data[key] = NgxFormService.getFormData(control);
+                continue;
+            }
+            const props = NgxFormService.getPropsFromControl(control);
+            let value = control.value;
+            if (!HTML5CheckTypes.includes(props['type'])) {
+                switch (props['type']) {
+                    case HTML5InputTypes.NUMBER:
+                        value = parseToNumber(value);
+                        break;
+                    case HTML5InputTypes.DATE:
+                    case HTML5InputTypes.DATETIME_LOCAL:
+                        value = new Date(value);
+                        break;
+                    default:
+                        value = escapeHtml(value);
+                }
+            }
+            data[key] = value;
+        }
+        return data;
+    }
+    /**
+     * @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.
+     */
+    static validateFields(control, path) {
+        control = path ? control.get(path) : control;
+        if (!control)
+            throw new Error(`No control found at path: ${path || 'root'}.`);
+        const isAllowed = [FormGroup, FormControl].some(type => control instanceof type);
+        if (!isAllowed)
+            throw new Error(`Unknown control type at: ${path || 'root'}`);
+        control.markAsTouched();
+        control.markAsDirty();
+        control.updateValueAndValidity({ emitEvent: true });
+        if (control instanceof FormGroup) {
+            Object.values(control.controls).forEach((childControl) => {
+                this.validateFields(childControl);
+            });
+        }
+        return control.valid;
+    }
+    /**
+     * @description Generates validators from component properties.
+     * @summary Creates an array of ValidatorFn based on the supported validation keys in the component properties.
+     * @param {FieldProperties} props - The component properties.
+     * @return {ValidatorFn[]} An array of validator functions.
+     */
+    static validatorsFromProps(props) {
+        const supportedValidationKeys = Validation.keys();
+        return Object.keys(props)
+            .filter((k) => supportedValidationKeys.includes(k))
+            .map((k) => {
+            return ValidatorFactory.spawn(props, k);
+        });
+    }
+    /**
+     * @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.
+     */
+    static fromProps(props, updateMode = 'change') {
+        const validators = this.validatorsFromProps(props);
+        const composed = validators.length ? Validators.compose(validators) : null;
+        return new FormControl({
+            value: props.value && props.type !== HTML5InputTypes.CHECKBOX
+                ? props.type === HTML5InputTypes.DATE
+                    ? !isValidDate(parseDate(props.format, props.value))
+                        ? undefined : props.value :
+                    props.value : undefined,
+            disabled: props.disabled,
+        }, {
+            validators: composed,
+            updateOn: updateMode,
+        });
+    }
+    /**
+     * @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.
+     */
+    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.
+     */
+    static getParentEl(el, tag) {
+        let parent;
+        while ((parent = el.parentElement) !== null) {
+            if (parent.tagName.toLowerCase() === tag.toLowerCase()) {
+                return parent;
+            }
+            el = parent;
+        }
+        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.
+     */
+    static register(control, props) {
+        this.controls.set(control, props);
+    }
+    /**
+     * @description Unregisters a control.
+     * @summary Removes a control and its associated properties from the internal WeakMap.
+     * @param {AbstractControl} control - The control to unregister.
+     * @return {boolean} True if the control was successfully unregistered, false otherwise.
+     */
+    static unregister(control) {
+        return this.controls.delete(control);
+    }
+    /**
+     * @description Resets a form group.
+     * @summary Recursively resets all controls in a form group, clearing values, errors, and marking them as pristine and untouched.
+     * @param {FormGroup} formGroup - The form group to reset.
+     */
+    static reset(formGroup) {
+        for (const key in formGroup.controls) {
+            const control = formGroup.controls[key];
+            if (!(control instanceof FormControl)) {
+                NgxFormService.reset(control);
+                continue;
+            }
+            const { type } = NgxFormService.getPropsFromControl(control);
+            if (!HTML5CheckTypes.includes(type))
+                control.setValue(undefined);
+            control.markAsPristine();
+            control.markAsUntouched();
+            control.setErrors(null);
+            control.updateValueAndValidity();
+        }
+    }
+}
+
+/**
+ * @description Angular implementation of the RenderingEngine with enhanced features
+ * @summary This class extends the base RenderingEngine to provide Angular-specific rendering capabilities
+ * with additional features compared to NgxRenderingEngine. It handles the conversion of field definitions
+ * to Angular components, manages component registration, and provides utilities for component creation
+ * and input handling. This implementation uses Angular's newer component APIs.
+ *
+ * @template AngularFieldDefinition - Type for Angular-specific field definitions
+ * @template AngularDynamicOutput - Type for Angular-specific component output
+ *
+ * @class NgxRenderingEngine2
+ * @example
+ * ```typescript
+ * const engine = NgxRenderingEngine2.get();
+ * engine.initialize();
+ * const output = engine.render(myModel, {}, viewContainerRef, injector, templateRef);
+ * ```
+ *
+ * @mermaid
+ * sequenceDiagram
+ *   participant Client
+ *   participant Engine as NgxRenderingEngine2
+ *   participant Components as RegisteredComponents
+ *
+ *   Client->>Engine: get()
+ *   Client->>Engine: initialize()
+ *   Client->>Engine: render(model, props, vcr, injector, tpl)
+ *   Engine->>Engine: toFieldDefinition(model, props)
+ *   Engine->>Engine: fromFieldDefinition(fieldDef, vcr, injector, tpl)
+ *   Engine->>Components: components(fieldDef.tag)
+ *   Components-->>Engine: component constructor
+ *   Engine->>Engine: createComponent(component, inputs, metadata, vcr, injector, template)
+ *   Engine-->>Client: return AngularDynamicOutput
+ */
+class NgxRenderingEngine2 extends RenderingEngine {
+    /**
+     * @description Creates a new instance of NgxRenderingEngine2
+     * @summary Initializes the rendering engine with the 'angular' engine type.
+     * This constructor sets up the base configuration needed for Angular-specific rendering.
+     */
+    constructor() {
+        super('angular');
+    }
+    /**
+     * @description Converts a field definition to an Angular component output
+     * @summary This private method takes a field definition and creates the corresponding Angular component.
+     * It handles component instantiation, input property mapping, and child component rendering.
+     * The method validates input properties against the component's metadata and processes
+     * child components recursively.
+     *
+     * @param {FieldDefinition<AngularFieldDefinition>} fieldDef - The field definition to convert
+     * @param {ViewContainerRef} vcr - The view container reference for component creation
+     * @param {Injector} injector - The Angular injector for dependency injection
+     * @param {TemplateRef<any>} tpl - The template reference for content projection
+     * @param {string} registryFormId - Form identifier for the component renderer
+     * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant Method as fromFieldDefinition
+     *   participant Components as NgxRenderingEngine2.components
+     *   participant Angular as Angular Core
+     *   participant Process as processChild
+     *
+     *   Method->>Components: components(fieldDef.tag)
+     *   Components-->>Method: component constructor
+     *   Method->>Angular: reflectComponentType(component)
+     *   Angular-->>Method: componentMetadata
+     *   Method->>Method: Validate input properties
+     *   Method->>Method: Create result object
+     *   alt Has children
+     *     Method->>Process: Process children recursively
+     *     Process->>Method: Return processed children
+     *     Method->>Angular: Create embedded view
+     *     Method->>Method: Create component instance
+     *   end
+     *   Method-->>Caller: return AngularDynamicOutput
+     */
+    fromFieldDefinition(fieldDef, vcr, injector, tpl, registryFormId = Date.now().toString(36).toUpperCase()) {
+        const cmp = fieldDef?.component || NgxRenderingEngine2.components(fieldDef.tag);
+        const component = (cmp.constructor);
+        const componentMetadata = reflectComponentType(component);
+        if (!componentMetadata) {
+            throw new InternalError(`Metadata for component ${fieldDef.tag} not found.`);
+        }
+        const { inputs: possibleInputs } = componentMetadata;
+        const inputs = { ...fieldDef.props };
+        const unmappedKeys = Object.keys(inputs).filter(input => {
+            const isMapped = possibleInputs.find(({ propName }) => propName === input);
+            if (!isMapped)
+                delete inputs[input];
+            return !isMapped;
+        });
+        if (unmappedKeys.length > 0)
+            console.warn(`Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`);
+        const result = {
+            component,
+            inputs,
+            injector,
+        };
+        if (fieldDef.rendererId)
+            result.inputs['rendererId'] = fieldDef.rendererId;
+        // process children
+        if (fieldDef.children?.length) {
+            result.children = fieldDef.children.map((child) => {
+                // create a child form and add its controls as properties of child.props
+                NgxFormService.addControlFromProps(registryFormId, child.props);
+                return this.fromFieldDefinition(child, vcr, injector, tpl, registryFormId);
+            });
+        }
+        // generating DOM
+        vcr.clear();
+        const template = vcr.createEmbeddedView(tpl, injector).rootNodes;
+        const componentInstance = NgxRenderingEngine2.createComponent(component, { ...inputs, model: this._model }, componentMetadata, vcr, injector, template);
+        result.instance = NgxRenderingEngine2._instance = componentInstance.instance;
+        return result;
+    }
+    /**
+     * @description Creates an Angular component instance
+     * @summary This static utility method creates an Angular component instance with the specified
+     * inputs and template. It uses Angular's component creation API to instantiate the component
+     * and then sets the input properties using the provided metadata.
+     *
+     * @param {Type<unknown>} component - The component type to create
+     * @param {KeyValue} [inputs={}] - The input properties to set on the component
+     * @param {ComponentMirror<unknown>} metadata - The component metadata for input validation
+     * @param {ViewContainerRef} vcr - The view container reference for component creation
+     * @param {Injector} injector - The Angular injector for dependency injection
+     * @param {any} [template=[]] - The template nodes to project into the component
+     * @return {ComponentRef<unknown>} The created component reference
+     */
+    static createComponent(component, inputs = {}, metadata, vcr, injector, template = []) {
+        const componentInstance = vcr.createComponent(component, {
+            environmentInjector: injector,
+            projectableNodes: [template],
+        });
+        this.setInputs(componentInstance, inputs, metadata);
+        return componentInstance;
+    }
+    /**
+     * @description Extracts decorator metadata from a model
+     * @summary This method provides access to the field definition generated from a model's
+     * decorators. It's a convenience wrapper around the toFieldDefinition method that
+     * converts a model to a field definition based on its decorators and the provided
+     * global properties.
+     *
+     * @param {Model} model - The model to extract decorators from
+     * @param {Record<string, unknown>} globalProps - Global properties to include in the field definition
+     * @return {FieldDefinition<AngularFieldDefinition>} The field definition generated from the model
+     */
+    getDecorators(model, globalProps) {
+        return this.toFieldDefinition(model, globalProps);
+    }
+    /**
+     * @description Destroys the current engine instance
+     * @summary This static method clears the current instance reference, effectively
+     * destroying the singleton instance of the rendering engine. This can be used
+     * to reset the engine state or to prepare for a new instance creation.
+     *
+     * @return {Promise<void>} A promise that resolves when the instance is destroyed
+     */
+    static async destroy() {
+        NgxRenderingEngine2._instance = undefined;
+    }
+    /**
+     * @description Renders a model into an Angular component output
+     * @summary This method takes a model and converts it to an Angular component output.
+     * It first stores a reference to the model, then converts it to a field definition
+     * using the base RenderingEngine's toFieldDefinition method, and finally converts
+     * that field definition to an Angular component output using fromFieldDefinition.
+     *
+     * @template M - Type extending Model
+     * @param {M} model - The model to render
+     * @param {Record<string, unknown>} globalProps - Global properties to pass to the component
+     * @param {ViewContainerRef} vcr - The view container reference for component creation
+     * @param {Injector} injector - The Angular injector for dependency injection
+     * @param {TemplateRef<any>} tpl - The template reference for content projection
+     * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant Client as Client Code
+     *   participant Render as render method
+     *   participant ToField as toFieldDefinition
+     *   participant FromField as fromFieldDefinition
+     *
+     *   Client->>Render: render(model, globalProps, vcr, injector, tpl)
+     *   Render->>Render: Store model reference
+     *   Render->>ToField: toFieldDefinition(model, globalProps)
+     *   ToField-->>Render: fieldDef
+     *   Render->>FromField: fromFieldDefinition(fieldDef, vcr, injector, tpl)
+     *   FromField-->>Render: AngularDynamicOutput
+     *   Render-->>Client: return AngularDynamicOutput
+     */
+    render(model, globalProps, vcr, injector, tpl) {
+        let result;
+        try {
+            this._model = model;
+            const formId = Date.now().toString(36).toUpperCase();
+            const fieldDef = this.toFieldDefinition(model, globalProps);
+            result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl, formId);
+            result.instance['formGroup'] = NgxFormService.getControlFromForm(formId);
+            NgxFormService.removeRegistry(formId);
+        }
+        catch (e) {
+            throw new InternalError(`Failed to render Model ${model.constructor.name}: ${e}`);
+        }
+        return result;
+    }
+    /**
+     * @description Initializes the rendering engine
+     * @summary This method initializes the rendering engine. It checks if the engine is already initialized
+     * and sets the initialized flag to true. This method is called before the engine is used
+     * to ensure it's properly set up for rendering operations.
+     *
+     * @param {...any[]} args - Initialization arguments
+     * @return {Promise<void>} A promise that resolves when initialization is complete
+     */
+    async initialize(...args) {
+        if (this.initialized)
+            return;
+        // ValidatableByType[]
+        this.initialized = true;
+    }
+    /**
+     * @description Registers a component with the rendering engine
+     * @summary This static method registers a component constructor with the rendering engine
+     * under a specific name. It initializes the components registry if needed and throws
+     * an error if a component is already registered under the same name to prevent
+     * accidental overrides.
+     *
+     * @param {string} name - The name to register the component under
+     * @param {Constructor<unknown>} constructor - The component constructor
+     * @return {void}
+     */
+    static registerComponent(name, constructor) {
+        if (!this._components)
+            this._components = {};
+        if (name in this._components)
+            throw new InternalError(`Component already registered under ${name}`);
+        this._components[name] = {
+            constructor: constructor,
+        };
+    }
+    /**
+     * @description Retrieves registered components from the rendering engine
+     * @summary This static method retrieves either all registered components or a specific component
+     * by its selector. When called without a selector, it returns an array of all registered
+     * components. When called with a selector, it returns the specific component if found,
+     * or throws an error if the component is not registered.
+     *
+     * @param {string} [selector] - Optional selector to retrieve a specific component
+     * @return {Object|Array} Either a specific component or an array of all components
+     */
+    static components(selector) {
+        if (!selector)
+            return Object.values(this._components);
+        if (!(selector in this._components))
+            throw new InternalError(`No Component registered under ${selector}`);
+        return this._components[selector];
+    }
+    /**
+     * @description Generates a key for reflection metadata
+     * @summary This static method generates a key for reflection metadata by prefixing the input key
+     * with the Angular engine's reflection prefix. This is used for storing and retrieving
+     * metadata in a namespaced way to avoid conflicts with other metadata.
+     *
+     * @param {string} key - The base key to prefix
+     * @return {string} The prefixed key for reflection metadata
+     */
+    static key(key) {
+        return `${AngularEngineKeys.REFLECT}${key}`;
+    }
+    /**
+     * @description Sets input properties on a component instance
+     * @summary This static utility method sets input properties on a component instance
+     * based on the provided inputs object and component metadata. It handles both simple
+     * values and nested objects, recursively processing object properties. The method
+     * validates each input against the component's metadata to ensure only valid inputs
+     * are set.
+     *
+     * @param {ComponentRef<unknown>} component - The component reference to set inputs on
+     * @param {KeyValue} inputs - The input properties to set
+     * @param {ComponentMirror<unknown>} metadata - The component metadata for input validation
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant Caller
+     *   participant SetInputs as setInputs
+     *   participant Parse as parseInputValue
+     *   participant Component as ComponentRef
+     *
+     *   Caller->>SetInputs: setInputs(component, inputs, metadata)
+     *   SetInputs->>SetInputs: Iterate through inputs
+     *   loop For each input
+     *     SetInputs->>SetInputs: Check if input exists in metadata
+     *     alt Input is 'props'
+     *       SetInputs->>Parse: parseInputValue(component, value)
+     *       Parse->>Parse: Recursively process nested objects
+     *       Parse->>Component: setInput(key, value)
+     *     else Input is valid
+     *       SetInputs->>Component: setInput(key, value)
+     *     end
+     *   end
+     */
+    static setInputs(component, inputs, metadata) {
+        function parseInputValue(component, input) {
+            Object.keys(input).forEach(key => {
+                const value = input[key];
+                if (typeof value === 'object' && !!value)
+                    return parseInputValue(component, value);
+                component.setInput(key, value);
+            });
+        }
+        Object.entries(inputs).forEach(([key, value]) => {
+            const prop = metadata.inputs.find((item) => item.propName === key);
+            if (prop) {
+                if (key === 'props')
+                    parseInputValue(component, value);
+                // if(key === 'locale' && !value)
+                //   value = getLocaleFromClassName(this._componentName);
+                component.setInput(key, value);
+            }
+        });
+    }
+}
+
+/**
+ * @description Marks an Angular component as dynamically loadable
+ * @summary Decorator that registers an Angular component with the NgxRenderingEngine2 for dynamic loading.
+ * This decorator must be applied before the @Component decorator to properly extract component metadata.
+ * It adds metadata to the component class and registers it with the rendering engine using its selector.
+ * @function Dynamic
+ * @return {Function} A decorator function that can be applied to Angular component classes
+ * @mermaid
+ * sequenceDiagram
+ *   participant C as Component Class
+ *   participant D as Dynamic Decorator
+ *   participant R as NgxRenderingEngine2
+ *   participant M as Angular Metadata
+ *   C->>D: Apply decorator
+ *   D->>M: reflectComponentType()
+ *   M-->>D: Return component metadata
+ *   alt No metadata found
+ *     D->>D: Throw InternalError
+ *   else Metadata found
+ *     D->>R: registerComponent(selector, constructor)
+ *     D->>C: Apply metadata
+ *   end
+ * @category Decorators
+ */
+function Dynamic() {
+    return apply((original) => {
+        const metadata = reflectComponentType(original);
+        if (!metadata)
+            throw new InternalError(`Could not find Component metadata. @Dynamic decorator must come above @Component`);
+        NgxRenderingEngine2.registerComponent(metadata.selector, original);
+    }, metadata(NgxRenderingEngine2.key(AngularEngineKeys.DYNAMIC), true));
+}
+
+/**
+ * @description Abstract base class for dynamic Angular modules
+ * @summary The DynamicModule serves as a base class for Angular modules that need to be
+ * dynamically loaded or configured at runtime. It provides a common type for the rendering
+ * engine to identify and work with dynamic modules.
+ * @class DynamicModule
+ * @example
+ * ```typescript
+ * @NgModule({
+ *   declarations: [MyComponent],
+ *   imports: [CommonModule]
+ * })
+ * export class MyDynamicModule extends DynamicModule {}
+ * ```
+ */
+class DynamicModule {
+}
+
+/**
+ * @description Angular implementation of the RenderingEngine
+ * @summary This class extends the base RenderingEngine to provide Angular-specific rendering capabilities.
+ * It handles the conversion of field definitions to Angular components and manages component registration.
+ * @template AngularFieldDefinition - Type for Angular-specific field definitions
+ * @template AngularDynamicOutput - Type for Angular-specific component output
+ * @param {Injector} injector - Angular injector for dependency injection
+ * @param {ViewContainerRef} vcr - View container reference for component creation
+ * @param {TemplateRef<any>} tpl - Template reference for content projection
+ * @class NgxRenderingEngine
+ * @example
+ * ```typescript
+ * const engine = new NgxRenderingEngine();
+ * engine.initialize();
+ * const output = engine.render(myModel, {}, viewContainerRef, injector, templateRef);
+ * ```
+ * @mermaid
+ * sequenceDiagram
+ *   participant Client
+ *   participant Engine as NgxRenderingEngine
+ *   participant Components as RegisteredComponents
+ *
+ *   Client->>Engine: new NgxRenderingEngine()
+ *   Client->>Engine: initialize()
+ *   Client->>Engine: render(model, props, vcr, injector, tpl)
+ *   Engine->>Engine: toFieldDefinition(model, props)
+ *   Engine->>Engine: fromFieldDefinition(fieldDef, vcr, injector, tpl)
+ *   Engine->>Components: components(fieldDef.tag)
+ *   Components-->>Engine: component constructor
+ *   Engine->>Client: return AngularDynamicOutput
+ */
+class NgxRenderingEngine extends RenderingEngine {
+    constructor() {
+        super('angular');
+    }
+    /**
+     * @description Converts a field definition to an Angular component output
+     * @summary This private method takes a field definition and creates the corresponding Angular component.
+     * It handles component instantiation, input property mapping, and child component rendering.
+     * @param {FieldDefinition<AngularFieldDefinition>} fieldDef - The field definition to convert
+     * @param {ViewContainerRef} vcr - The view container reference for component creation
+     * @param {Injector} injector - The Angular injector for dependency injection
+     * @param {TemplateRef<any>} tpl - The template reference for content projection
+     * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
+     * @mermaid
+     * sequenceDiagram
+     *   participant Method as fromFieldDefinition
+     *   participant Components as NgxRenderingEngine.components
+     *   participant Angular as Angular Core
+     *
+     *   Method->>Components: components(fieldDef.tag)
+     *   Components-->>Method: component constructor
+     *   Method->>Angular: reflectComponentType(component)
+     *   Angular-->>Method: componentMetadata
+     *   Method->>Method: Check input properties
+     *   Method->>Method: Create result object
+     *   Method->>Method: Process children if any
+     *   Method-->>Caller: return AngularDynamicOutput
+     */
+    fromFieldDefinition(fieldDef, vcr, injector, tpl) {
+        const component = NgxRenderingEngine.components(fieldDef.tag)
+            .constructor;
+        const componentMetadata = reflectComponentType(component);
+        if (!componentMetadata) {
+            throw new InternalError(`Metadata for component ${fieldDef.tag} not found.`);
+        }
+        const inputs = fieldDef.props;
+        const possibleInputs = componentMetadata.inputs;
+        const inputKeys = Object.keys(inputs);
+        for (const input of possibleInputs) {
+            const index = inputKeys.indexOf(input.propName);
+            if (index !== -1) {
+                inputKeys.splice(index, 1);
+            }
+            if (!inputKeys.length)
+                break;
+        }
+        if (inputKeys.length)
+            console.warn(`Unmapped input properties for component ${fieldDef.tag}: ${inputKeys.join(', ')}`);
+        const result = {
+            component: component,
+            inputs: inputs || {},
+            injector: injector,
+        };
+        if (fieldDef.rendererId) {
+            result.inputs['rendererId'] =
+                fieldDef.rendererId;
+        }
+        if (fieldDef.children && fieldDef.children.length) {
+            result.children = fieldDef.children.map((child) => {
+                return this.fromFieldDefinition(child, vcr, injector, tpl);
+            });
+            const template = vcr.createEmbeddedView(tpl, injector).rootNodes;
+            result.content = [template];
+        }
+        return result;
+    }
+    /**
+     * @description Renders a model into an Angular component output
+     * @summary This method takes a model and converts it to an Angular component output.
+     * It first converts the model to a field definition using the base RenderingEngine's
+     * toFieldDefinition method, then converts that field definition to an Angular component output.
+     * @template M - Type extending Model
+     * @param {M} model - The model to render
+     * @param {Record<string, unknown>} globalProps - Global properties to pass to the component
+     * @param {ViewContainerRef} vcr - The view container reference for component creation
+     * @param {Injector} injector - The Angular injector for dependency injection
+     * @param {TemplateRef<any>} tpl - The template reference for content projection
+     * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
+     * @mermaid
+     * sequenceDiagram
+     *   participant Client as Client Code
+     *   participant Render as render method
+     *   participant ToField as toFieldDefinition
+     *   participant FromField as fromFieldDefinition
+     *
+     *   Client->>Render: render(model, globalProps, vcr, injector, tpl)
+     *   Render->>ToField: toFieldDefinition(model, globalProps)
+     *   ToField-->>Render: fieldDef
+     *   Render->>FromField: fromFieldDefinition(fieldDef, vcr, injector, tpl)
+     *   FromField-->>Render: AngularDynamicOutput
+     *   Render-->>Client: return AngularDynamicOutput
+     */
+    render(model, globalProps, vcr, injector, tpl) {
+        let result;
+        try {
+            const fieldDef = this.toFieldDefinition(model, globalProps);
+            result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl);
+        }
+        catch (e) {
+            throw new InternalError(`Failed to render Model ${model.constructor.name}: ${e}`);
+        }
+        return result;
+    }
+    /**
+     * @description Initializes the rendering engine
+     * @summary This method initializes the rendering engine. It checks if the engine is already initialized
+     * and sets the initialized flag to true. This method is called before the engine is used.
+     * @param {...any[]} args - Initialization arguments
+     * @return {Promise<void>} A promise that resolves when initialization is complete
+     */
+    async initialize(...args) {
+        if (this.initialized)
+            return;
+        // ValidatableByType[]
+        this.initialized = true;
+    }
+    /**
+     * @description Registers a component with the rendering engine
+     * @summary This static method registers a component constructor with the rendering engine
+     * under a specific name. It throws an error if a component is already registered under the same name.
+     * @param {string} name - The name to register the component under
+     * @param {Constructor<unknown>} constructor - The component constructor
+     * @return {void}
+     */
+    static registerComponent(name, constructor) {
+        if (!this._components)
+            this._components = {};
+        if (name in this._components)
+            throw new InternalError(`Component already registered under ${name}`);
+        this._components[name] = {
+            constructor: constructor,
+        };
+    }
+    /**
+     * @description Retrieves registered components from the rendering engine
+     * @summary This static method retrieves either all registered components or a specific component
+     * by its selector. It throws an error if the requested component is not registered.
+     * @param {string} [selector] - Optional selector to retrieve a specific component
+     * @return {Object|Array} Either a specific component or an array of all components
+     */
+    static components(selector) {
+        if (!selector)
+            return Object.values(this._components);
+        if (!(selector in this._components))
+            throw new InternalError(`No Component registered under ${selector}`);
+        return this._components[selector];
+    }
+    /**
+     * @description Generates a key for reflection metadata
+     * @summary This static method generates a key for reflection metadata by prefixing the input key
+     * with the Angular engine's reflection prefix. This is used for storing and retrieving metadata.
+     * @param {string} key - The base key to prefix
+     * @return {string} The prefixed key for reflection metadata
+     */
+    static key(key) {
+        return `${AngularEngineKeys.REFLECT}${key}`;
+    }
+}
+
+/**
+ * @module engine
+ * @description Angular rendering engine for Decaf applications
+ * @summary The engine module provides core functionality for rendering Angular components
+ * in Decaf applications. It includes constants, decorators, rendering engines, and utility types
+ * that enable dynamic component creation, property mapping, and component lifecycle management.
+ * Key exports include {@link NgxRenderingEngine}, {@link DynamicModule}, and various decorators
+ * for component configuration.
+ */
+
+/**
+ * @description Dynamic component renderer for Decaf Angular applications.
+ * @summary This component provides a flexible way to dynamically render Angular components
+ * at runtime based on a tag name. It handles the creation, property binding, and event
+ * subscription for dynamically loaded components. This is particularly useful for
+ * building configurable UIs where components need to be determined at runtime.
+ *
+ * @component {ComponentRendererComponent}
+ * @example
+ * <ngx-decaf-component-renderer
+ *   [tag]="tag"
+ *   [globals]="globals"
+ *   (listenEvent)="listenEvent($event)">
+ * </ngx-decaf-component-renderer>
+ *
+ * @mermaid
+ * classDiagram
+ *   class ComponentRendererComponent {
+ *     +ViewContainerRef vcr
+ *     +string tag
+ *     +Record~string, unknown~ globals
+ *     +EnvironmentInjector injector
+ *     +ComponentRef~unknown~ component
+ *     +EventEmitter~ModelRenderCustomEvent~ listenEvent
+ *     +ngOnInit()
+ *     +ngOnDestroy()
+ *     +ngOnChanges(changes)
+ *     -createComponent(tag, globals)
+ *     -subscribeEvents()
+ *     -unsubscribeEvents()
+ *   }
+ *   ComponentRendererComponent --|> OnInit
+ *   ComponentRendererComponent --|> OnChanges
+ *   ComponentRendererComponent --|> OnDestroy
+ *
+ * @implements {OnInit}
+ * @implements {OnChanges}
+ * @implements {OnDestroy}
+ */
+class ComponentRendererComponent {
+    /**
+     * @description Creates an instance of ComponentRendererComponent.
+     * @summary Initializes a new ComponentRendererComponent. This component doesn't require
+     * any dependencies to be injected in its constructor as it uses the inject function to
+     * obtain the EnvironmentInjector.
+     *
+     * @memberOf ComponentRendererComponent
+     */
+    constructor() {
+        /**
+         * @description Global properties to pass to the rendered component.
+         * @summary This input property allows passing a set of properties to the dynamically
+         * rendered component. These properties will be mapped to the component's inputs if they
+         * match. Properties that don't match any input on the target component will be filtered out
+         * with a warning.
+         *
+         * @type {Record<string, unknown>}
+         * @default {}
+         * @memberOf ComponentRendererComponent
+         */
+        this.globals = {};
+        /**
+         * @description Injector used for dependency injection in the dynamic component.
+         * @summary This injector is used when creating the dynamic component to provide it with
+         * access to the application's dependency injection system. It ensures that the dynamically
+         * created component can access the same services and dependencies as statically created
+         * components.
+         *
+         * @type {EnvironmentInjector}
+         * @memberOf ComponentRendererComponent
+         */
+        this.injector = inject(EnvironmentInjector);
+        /**
+         * @description Event emitter for events from the rendered component.
+         * @summary This output property emits events that originate from the dynamically rendered
+         * component. It allows the parent component to listen for and respond to events from the
+         * dynamic component, creating a communication channel between the parent and the dynamically
+         * rendered child.
+         *
+         * @type {EventEmitter<ModelRenderCustomEvent>}
+         * @memberOf ComponentRendererComponent
+         */
+        this.listenEvent = new EventEmitter();
+        this.parent = undefined;
+        this.logger = getLogger(this);
+    }
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the component by creating the dynamic component specified by the tag input.
+     * This method is called once when the component is initialized and triggers the dynamic
+     * component creation process with the provided tag name and global properties.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine2
+     *
+     *   A->>C: ngOnInit()
+     *   C->>C: createComponent(tag, globals)
+     *   C->>R: components(tag)
+     *   R-->>C: Return component constructor
+     *   C->>C: Process component inputs
+     *   C->>C: Create component instance
+     *   C->>C: subscribeEvents()
+     *
+     * @return {void}
+     * @memberOf ComponentRendererComponent
+     */
+    ngOnInit() {
+        if (!this.parent)
+            this.createComponent(this.tag, this.globals);
+        this.createParentComponent();
+    }
+    /**
+     * @description Cleans up resources when the component is destroyed.
+     * @summary Performs cleanup operations when the component is being destroyed by Angular.
+     * This includes unsubscribing from all event emitters of the dynamic component and
+     * destroying the rendering engine instance to prevent memory leaks.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine2
+     *
+     *   A->>C: ngOnDestroy()
+     *   alt component exists
+     *     C->>C: unsubscribeEvents()
+     *     C->>R: destroy()
+     *   end
+     *
+     * @return {Promise<void>} A promise that resolves when cleanup is complete
+     * @memberOf ComponentRendererComponent
+     */
+    async ngOnDestroy() {
+        if (this.component) {
+            this.unsubscribeEvents();
+            NgxRenderingEngine2$1.destroy();
+        }
+    }
+    /**
+     * @description Creates and renders a dynamic component.
+     * @summary This method handles the creation of a dynamic component based on the provided tag.
+     * It retrieves the component constructor from the rendering engine, processes its inputs,
+     * filters out unmapped properties, creates the component instance, and sets up event subscriptions.
+     *
+     * @param {string} tag - The tag name of the component to create
+     * @param {KeyValue} globals - Global properties to pass to the component
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine2
+     *   participant V as ViewContainerRef
+     *
+     *   C->>R: components(tag)
+     *   R-->>C: Return component constructor
+     *   C->>C: reflectComponentType(component)
+     *   C->>C: Process input properties
+     *   C->>C: Filter unmapped properties
+     *   C->>V: clear()
+     *   C->>R: createComponent(component, props, metadata, vcr, injector, [])
+     *   R-->>C: Return component reference
+     *   C->>C: subscribeEvents()
+     *
+     * @private
+     * @memberOf ComponentRendererComponent
+     */
+    createComponent(tag, globals = {}) {
+        const component = NgxRenderingEngine2$1.components(tag)
+            ?.constructor;
+        const metadata = reflectComponentType(component);
+        const componentInputs = metadata.inputs;
+        const props = globals?.['item'];
+        delete props['tag'];
+        const inputKeys = Object.keys(props);
+        const unmappedKeys = [];
+        for (const input of inputKeys) {
+            if (!inputKeys.length)
+                break;
+            const prop = componentInputs.find((item) => item.propName === input);
+            if (!prop) {
+                delete props[input];
+                unmappedKeys.push(input);
+            }
+        }
+        if (unmappedKeys.length)
+            this.logger.info(`Unmapped input properties for component ${tag}: ${unmappedKeys.join(', ')}`);
+        this.vcr.clear();
+        this.component = NgxRenderingEngine2$1.createComponent(component, props, metadata, this.vcr, this.injector, []);
+        this.subscribeEvents();
+    }
+    createParentComponent() {
+        const { component, inputs } = this.parent;
+        const metadata = reflectComponentType(component);
+        const template = this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes;
+        this.component = NgxRenderingEngine2$1.createComponent(component, inputs, metadata, this.vcr, this.injector, template);
+        this.subscribeEvents();
+    }
+    /**
+     * @description Subscribes to events emitted by the dynamic component.
+     * @summary This method sets up subscriptions to all EventEmitter properties of the
+     * dynamically created component. When an event is emitted by the dynamic component,
+     * it is captured and re-emitted through the listenEvent output property with additional
+     * metadata about the event source.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant D as Dynamic Component
+     *   participant P as Parent Component
+     *
+     *   C->>C: subscribeEvents()
+     *   C->>D: Get instance properties
+     *   loop For each property
+     *     C->>C: Check if property is EventEmitter
+     *     alt is EventEmitter
+     *       C->>D: Subscribe to event
+     *       D-->>C: Event emitted
+     *       C->>P: Re-emit event with metadata
+     *     end
+     *   end
+     *
+     * @private
+     * @return {void}
+     * @memberOf ComponentRendererComponent
+     */
+    subscribeEvents() {
+        if (this.component) {
+            const instance = this.component?.instance;
+            const componentKeys = Object.keys(instance);
+            for (const key of componentKeys) {
+                const value = instance[key];
+                if (value instanceof EventEmitter)
+                    instance[key].subscribe((event) => {
+                        this.listenEvent.emit({
+                            name: key,
+                            ...event,
+                        });
+                    });
+            }
+        }
+    }
+    /**
+     * @description Unsubscribes from all events of the dynamic component.
+     * @summary This method cleans up event subscriptions when the component is being destroyed.
+     * It iterates through all properties of the dynamic component instance and unsubscribes
+     * from any EventEmitter properties to prevent memory leaks and unexpected behavior after
+     * the component is destroyed.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant D as Dynamic Component
+     *
+     *   C->>C: unsubscribeEvents()
+     *   C->>D: Get instance properties
+     *   loop For each property
+     *     C->>C: Check if property is EventEmitter
+     *     alt is EventEmitter
+     *       C->>D: Unsubscribe from event
+     *     end
+     *   end
+     *
+     * @private
+     * @return {void}
+     * @memberOf ComponentRendererComponent
+     */
+    unsubscribeEvents() {
+        if (this.component) {
+            const instance = this.component?.instance;
+            const componentKeys = Object.keys(instance);
+            for (const key of componentKeys) {
+                const value = instance[key];
+                if (value instanceof EventEmitter)
+                    instance[key].unsubscribe();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, 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: "<ng-template #componentViewContainer></ng-template>\n\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", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "parent"], outputs: ["listenEvent"] }, { kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-component-renderer', imports: [ForAngularModule], standalone: true, template: "<ng-template #componentViewContainer></ng-template>\n\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" }]
+        }], ctorParameters: () => [], propDecorators: { vcr: [{
+                type: ViewChild,
+                args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
+            }], tag: [{
+                type: Input,
+                args: [{ required: true }]
+            }], globals: [{
+                type: Input
+            }], listenEvent: [{
+                type: Output
+            }], parent: [{
+                type: Input
+            }], inner: [{
+                type: ViewChild,
+                args: ['inner', { read: TemplateRef, static: true }]
+            }] } });
+
+/**
+ * @description Component for rendering dynamic models
+ * @summary This component is responsible for dynamically rendering models,
+ * handling model changes, and managing event subscriptions for the rendered components.
+ * It uses the NgxRenderingEngine2 to render the models and supports both string and Model inputs.
+ * @class
+ * @template M - Type extending Model
+ * @param {Injector} injector - Angular Injector for dependency injection
+ * @example
+ * <ngx-decaf-model-renderer
+ *   [model]="myModel"
+ *   [globals]="globalVariables"
+ *   (listenEvent)="handleEvent($event)">
+ * </ngx-decaf-model-renderer>
+ * @mermaid
+ * sequenceDiagram
+ *   participant App
+ *   participant ModelRenderer
+ *   participant RenderingEngine
+ *   participant Model
+ *   App->>ModelRenderer: Input model
+ *   ModelRenderer->>Model: Parse if string
+ *   Model-->>ModelRenderer: Parsed model
+ *   ModelRenderer->>RenderingEngine: Render model
+ *   RenderingEngine-->>ModelRenderer: Rendered output
+ *   ModelRenderer->>ModelRenderer: Subscribe to events
+ *   ModelRenderer-->>App: Emit events
+ */
+class ModelRendererComponent {
+    constructor(injector) {
+        this.injector = injector;
+        /**
+         * @description Global variables to be passed to the rendered component
+         */
+        this.globals = {};
+        /**
+         * @description Event emitter for custom events from the rendered component
+         */
+        this.listenEvent = new EventEmitter();
+        this.JSON = JSON;
+    }
+    /**
+     * @description Refreshes the rendered model
+     * @param {string | M} model - The model to be rendered
+     */
+    refresh(model) {
+        model =
+            typeof model === 'string'
+                ? Model.build({}, JSON.parse(model))
+                : model;
+        this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner);
+        if (this.output?.inputs)
+            this.rendererId = sf(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
+        this.instance = this.output?.instance;
+        this.subscribeEvents();
+    }
+    /**
+     * @description Lifecycle hook that is called when data-bound properties of a directive change
+     * @param {SimpleChanges} changes - Object containing changes
+     */
+    ngOnChanges(changes) {
+        if (changes[BaseComponentProps.MODEL]) {
+            const { currentValue, previousValue, firstChange } = changes[BaseComponentProps.MODEL];
+            this.refresh(currentValue);
+        }
+    }
+    /**
+     * @description Lifecycle hook that is called when a directive, pipe, or service is destroyed
+     * @return {Promise<void>}
+     */
+    async ngOnDestroy() {
+        if (this.instance) {
+            this.unsubscribeEvents();
+            await NgxRenderingEngine2.destroy();
+        }
+        this.output = undefined;
+    }
+    subscribeEvents() {
+        if (this.instance) {
+            const componentKeys = Object.keys(this.instance);
+            for (const key of componentKeys) {
+                const value = this.instance[key];
+                if (value instanceof EventEmitter)
+                    this.instance[key].subscribe((event) => {
+                        this.listenEvent.emit({
+                            component: this.output?.component.name || '',
+                            name: key,
+                            ...event,
+                        });
+                    });
+            }
+        }
+    }
+    /**
+     * @description Unsubscribes from events emitted by the rendered component
+     */
+    unsubscribeEvents() {
+        if (this.instance) {
+            const componentKeys = Object.keys(this.instance);
+            for (const key of componentKeys) {
+                const value = this.instance[key];
+                if (value instanceof EventEmitter)
+                    this.instance[key].unsubscribe();
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, 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: "  <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: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "parent"], outputs: ["listenEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [ForAngularModule, NgComponentOutlet, ComponentRendererComponent], selector: 'ngx-decaf-model-renderer', template: "  <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" }]
+        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { model: [{
+                type: Input,
+                args: [{ required: true }]
+            }], globals: [{
+                type: Input
+            }], inner: [{
+                type: ViewChild,
+                args: ['inner', { read: TemplateRef, static: true }]
+            }], rendererId: [{
+                type: Input
+            }], vcr: [{
+                type: ViewChild,
+                args: ['componentOuter', { static: true, read: ViewContainerRef }]
+            }], listenEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * @class NgxCrudFormField
+ * @implements {FieldProperties}
+ * @implements {ControlValueAccessor}
+ * @summary Abstract class representing a CRUD form field for Angular applications
+ * @description This class provides the base implementation for CRUD form fields in Angular,
+ * implementing both CrudFormField and ControlValueAccessor interfaces.
+ */
+class NgxCrudFormField {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        /**
+         * @summary String formatting function
+         * @description Provides access to the sf function for error message formatting
+         * @prop {function(string, ...string): string} sf - String formatting function
+         */
+        this.sf = sf;
+        /**
+         * @summary Change callback function
+         * @description Function called when the field value changes
+         * @property {function(): unknown} onChange - onChange event handler
+         */
+        this.onChange = () => {
+        };
+        /**
+         * @summary Touch callback function
+         * @description Function called when the field is touched
+         * @property {function(): unknown} onTouch - onTouch event handler
+         */
+        this.onTouch = () => {
+        };
+    }
+    /**
+     * @summary Write value to the field
+     * @description Sets the value of the field
+     * @param {string} obj - The value to be set
+     */
+    writeValue(obj) {
+        this.value = obj;
+    }
+    /**
+     * @summary Register change callback
+     * @description Registers a function to be called when the field value changes
+     * @param {function(): unknown} fn - The function to be called on change
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * @summary Register touch callback
+     * @description Registers a function to be called when the field is touched
+     * @param {function(): unknown} fn - The function to be called on touch
+     */
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    /**
+     * @summary Set disabled state
+     * @description Sets the disabled state of the field
+     * @param {boolean} isDisabled - Whether the field should be disabled
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * @summary After view initialization logic
+     * @description Performs necessary setup after the view has been initialized
+     * @returns {HTMLElement} The parent element of the field
+     */
+    afterViewInit() {
+        let parent;
+        switch (this.operation) {
+            case OperationKeys.READ:
+            case OperationKeys.DELETE:
+                return this.component.nativeElement.parentElement;
+            case OperationKeys.CREATE:
+            case OperationKeys.UPDATE:
+                try {
+                    parent = NgxFormService.getParentEl(this.component.nativeElement, 'div');
+                }
+                catch (e) {
+                    throw new RenderingError(`Unable to retrieve parent form element for the ${this.operation}: ${e instanceof Error ? e.message : e}`);
+                }
+                // NgxFormService.register(parent.id, this.formGroup, this as AngularFieldDefinition);
+                return parent;
+            default:
+                throw new InternalError(`Invalid operation: ${this.operation}`);
+        }
+    }
+    /**
+     * @summary Cleanup on component destruction
+     * @description Unregisters the field when the component is destroyed
+     */
+    onDestroy() {
+        if (this.formGroup)
+            NgxFormService.unregister(this.formGroup);
+    }
+    /**
+     * @summary Get field errors
+     * @description Retrieves all errors associated with the field
+     * @returns {Array<{key: string, message: string}>} An array of error objects
+     */
+    getErrors(parent) {
+        const collapsableContainer = parent.closest('ion-accordion-group');
+        if (collapsableContainer)
+            collapsableContainer.setAttribute('value', 'open');
+        return Object.keys(this.formControl.errors ?? {}).map(key => ({
+            key: key,
+            message: key,
+        }));
+    }
+}
+
+/**
+ * @description A dynamic form field component for CRUD operations.
+ * @summary The CrudFieldComponent is a versatile form field component that adapts to different
+ * input types and CRUD operations. It extends NgxCrudFormField to inherit form handling capabilities
+ * and implements lifecycle hooks to properly initialize, render, and clean up. This component
+ * supports various input types (text, number, date, select, etc.), validation rules, and styling
+ * options, making it suitable for building dynamic forms for create, read, update, and delete
+ * operations.
+ *
+ * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
+ * @param {string} name - The field name, used as form control identifier
+ * @param {PossibleInputTypes} type - The input type (text, number, date, select, etc.)
+ * @param {string|number|Date} value - The initial value of the field
+ * @param {boolean} disabled - Whether the field is disabled
+ * @param {string} label - The display label for the field
+ * @param {string} placeholder - Placeholder text when field is empty
+ * @param {string} format - Format pattern for the field value
+ * @param {boolean} hidden - Whether the field should be hidden
+ * @param {number|Date} max - Maximum allowed value
+ * @param {number} maxlength - Maximum allowed length
+ * @param {number|Date} min - Minimum allowed value
+ * @param {number} minlength - Minimum allowed length
+ * @param {string} pattern - Validation pattern
+ * @param {boolean} readonly - Whether the field is read-only
+ * @param {boolean} required - Whether the field is required
+ * @param {number} step - Step value for number inputs
+ * @param {FormGroup} formGroup - The parent form group
+ * @param {StringOrBoolean} translatable - Whether field labels should be translated
+ *
+ * @component CrudFieldComponent
+ * @example
+ * <ngx-decaf-crud-field
+ *   operation="create"
+ *   name="firstName"
+ *   type="text"
+ *   label="<NAME>"
+ *   placeholder="<NAME>"
+ *   [value]="model.firstName"
+ *   [disabled]="model.readOnly">
+ *
+ *
+ * @memberOf module:for-angular
+ */
+let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
+    constructor(elementRef) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        /**
+         * @description The parent field path, if this field is nested.
+         * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
+         *
+         * @type {string}
+         * @memberOf CrudFieldComponent
+         */
+        this.childOf = '';
+        /**
+         * @description The initial value of the field.
+         * @summary Sets the initial value of the form field. This can be a string, number, or Date
+         * depending on the field type. For select fields, this should match one of the option values.
+         *
+         * @type {string | number | Date}
+         * @default ''
+         * @memberOf CrudFieldComponent
+         */
+        this.value = '';
+        /**
+         * @description Spellcheck attribute for text inputs.
+         * @summary Enables or disables spellchecking for text inputs.
+         * When true, the browser will check the spelling of the input text.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf CrudFieldComponent
+         */
+        this.spellcheck = false;
+        /**
+         * @description Input mode for text inputs.
+         * @summary Hints at the type of data that might be entered by the user while editing the element.
+         * This can affect the virtual keyboard layout on mobile devices.
+         *
+         * @type {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
+         * @default 'none'
+         * @memberOf CrudFieldComponent
+         */
+        this.inputmode = 'none';
+        /**
+         * @description Autocomplete behavior for the field.
+         * @summary Specifies whether and how the browser should automatically complete the input.
+         * This can improve user experience by suggesting previously entered values.
+         *
+         * @type {AutocompleteTypes}
+         * @default 'off'
+         * @memberOf CrudFieldComponent
+         */
+        this.autocomplete = 'off';
+        /**
+         * @description Fill style for the field.
+         * @summary Determines the fill style of the field, such as 'outline' or 'solid'.
+         * This affects the border and background of the field.
+         *
+         * @type {'outline' | 'solid'}
+         * @default 'outline'
+         * @memberOf CrudFieldComponent
+         */
+        this.fill = 'outline';
+        /**
+         * @description Placement of the label relative to the field.
+         * @summary Specifies where the label should be placed relative to the field.
+         * Options include 'start', 'end', 'floating', 'stacked', and 'fixed'.
+         *
+         * @type {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
+         * @default 'floating'
+         * @memberOf CrudFieldComponent
+         */
+        this.labelPlacement = 'floating';
+        /**
+         * @description Update mode for the field.
+         * @summary Determines when the field value should be updated in the form model.
+         * Options include 'change', 'blur', and 'submit'.
+         *
+         * @type {FieldUpdateMode}
+         * @default 'change'
+         * @memberOf CrudFieldComponent
+         */
+        this.updateOn = 'change';
+        /**
+         * @description Translatability of field labels.
+         * @summary Indicates whether the field labels should be translated based on the current language settings.
+         * This is useful for applications supporting multiple languages.
+         *
+         * @type {StringOrBoolean}
+         * @default true
+         * @memberOf CrudFieldComponent
+         */
+        this.translatable = true;
+    }
+    ngOnInit() {
+        // super.onInit(this.updateOn);
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
+            this.formGroup = undefined;
+        }
+        else {
+            if (this.type === HTML5InputTypes.RADIO && !this.value)
+                this.formGroup?.get(this.name)?.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
+        }
+    }
+    ngAfterViewInit() {
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
+            super.afterViewInit();
+    }
+    ngOnDestroy() {
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
+            this.onDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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", translatable: "translatable", uid: "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 class=\"dcf-display-block\" [innerHTML]=\"value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\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            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\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            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [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                  [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-item>\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate : label) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\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            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n        @if((!formControl.pristine || formControl.touched) && !formControl.valid) {\n          <div class=\"error dcf-error dcf-flex dcf-flex-top\">\n            @for(error of getErrors(container); track error.key) {\n              * {{ sf((\"errors.\" + error.message) | translate, this[error.key]) }}\n            }\n          </div>\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}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15}.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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}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(--ion-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(--ion-color-gray-8)!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)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.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: 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(),
+    __metadata("design:paramtypes", [ElementRef])
+], CrudFieldComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        ForAngularModule,
+                        IonInput,
+                        IonItem,
+                        IonCheckbox,
+                        IonRadioGroup,
+                        IonRadio,
+                        IonSelect,
+                        IonSelectOption,
+                        IonLabel,
+                        IonText,
+                        IonTextarea,
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], 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 class=\"dcf-display-block\" [innerHTML]=\"value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\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            [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\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            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [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                  [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-item>\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate : label) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n          </ion-item>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\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            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n        @if((!formControl.pristine || formControl.touched) && !formControl.valid) {\n          <div class=\"error dcf-error dcf-flex dcf-flex-top\">\n            @for(error of getErrors(container); track error.key) {\n              * {{ sf((\"errors.\" + error.message) | translate, this[error.key]) }}\n            }\n          </div>\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}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15}.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(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}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(--ion-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(--ion-color-gray-8)!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)}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { operation: [{
+                type: Input,
+                args: [{ required: true }]
+            }], name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], path: [{
+                type: Input,
+                args: [{ required: true }]
+            }], childOf: [{
+                type: Input
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], placeholder: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], equals: [{
+                type: Input
+            }], different: [{
+                type: Input
+            }], lessThan: [{
+                type: Input
+            }], lessThanOrEqual: [{
+                type: Input
+            }], greaterThan: [{
+                type: Input
+            }], greaterThanOrEqual: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], interface: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], spellcheck: [{
+                type: Input
+            }], inputmode: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], updateOn: [{
+                type: Input
+            }], component: [{
+                type: ViewChild,
+                args: ['component', { read: ElementRef }]
+            }], formGroup: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }], translatable: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }] } });
+
+const CssClasses = {
+    BUTTONS_CONTAINER: 'buttons-container',
+};
+const DefaultFormReactiveOptions = {
+    buttons: {
+        submit: {
+            text: 'Submit',
+        },
+        clear: {
+            text: 'Clear',
+        },
+    },
+};
+
+/**
+ * @component CrudFormComponent
+ * @example <ngx-decaf-crud-form
+ *   action="create"
+ *   operation="create"
+ *   formGroup="formGroup"
+ *   rendererId="rendererId"
+ *   submitEvent="submitEvent"
+ *   target="_self"
+ *   method="event">
+ * </ngx-decaf-crud-form>
+ *
+ * @param {string} action - The action to be performed (create, read, update, delete)
+ * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
+ * @param {FormGroup} formGroup - The form group
+ * @param {string} rendererId - The renderer id
+ * @param {SubmitEvent} submitEvent - The submit event
+ * @param {string} target - The target
+ * @param {string} method - The method
+ */
+let CrudFormComponent = class CrudFormComponent {
+    constructor() {
+        this.updateOn = 'change';
+        this.target = '_self';
+        this.method = 'event';
+        this.submitEvent = new EventEmitter();
+        /**
+         * @description Angular Location service.
+         * @summary Injected service that provides access to the browser's URL and history.
+         * This service is used for interacting with the browser's history API, allowing
+         * for back navigation and URL manipulation outside of Angular's router.
+         *
+         * @private
+         * @type {Location}
+         * @memberOf CrudFormComponent
+         */
+        this.location = inject(Location);
+        this.OperationKeys = OperationKeys;
+    }
+    // ngAfterViewInit() {
+    // if (![OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
+    //   NgxFormService.formAfterViewInit(this, this.rendererId);
+    // }
+    async ngOnInit() {
+        if (!this.logger)
+            this.logger = getLogger(this);
+        if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
+            this.formGroup = undefined;
+        this.options = Object.assign({}, DefaultFormReactiveOptions, this.options || {});
+    }
+    ngOnDestroy() {
+        if (this.formGroup)
+            NgxFormService.unregister(this.formGroup);
+    }
+    /**
+     * @param  {SubmitEvent} event
+     */
+    async submit(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        if (!NgxFormService.validateFields(this.formGroup))
+            return false;
+        const data = NgxFormService.getFormData(this.formGroup);
+        console.log('Submit=', data);
+        this.submitEvent.emit({
+            data,
+            component: 'FormReactiveComponent',
+            name: this.action || EventConstants.SUBMIT_EVENT,
+            handlers: this.handlers,
+        });
+    }
+    handleReset() {
+        this.location.back();
+        // if(OperationKeys.DELETE !== this.operation)
+        //   NgxFormService.reset(this.formGroup);
+        // else
+        //   this.location.back();
+    }
+    handleDelete() {
+        this.submitEvent.emit({
+            data: this.uid,
+            component: 'FormReactiveComponent',
+            name: EventConstants.SUBMIT_EVENT,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid" }, outputs: { submitEvent: "submitEvent" }, 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-flex dcf-flex-right\">\n      <div>\n        @if(options.buttons.clear) {\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            {{operation === 'update' ? 'Back' : options.buttons.clear?.text}}\n          </ion-button>\n        }\n\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    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-flex dcf-flex-right ' + operation\" id=\"dcf-buttons-container\">\n    <div>\n      @if(options.buttons.clear) {\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          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      }\n      @if(operation === 'delete' && uid) {\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      }\n      @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\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      }\n\n    </div>\n  </div>\n}\n\n", styles: ["#dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.13", ngImport: i0, type: CrudFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ForAngularModule, IonIcon], 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-flex dcf-flex-right\">\n      <div>\n        @if(options.buttons.clear) {\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            {{operation === 'update' ? 'Back' : options.buttons.clear?.text}}\n          </ion-button>\n        }\n\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    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-flex dcf-flex-right ' + operation\" id=\"dcf-buttons-container\">\n    <div>\n      @if(options.buttons.clear) {\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          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      }\n      @if(operation === 'delete' && uid) {\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      }\n      @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\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      }\n\n    </div>\n  </div>\n}\n\n", styles: ["#dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], updateOn: [{
+                type: Input
+            }], component: [{
+                type: ViewChild,
+                args: ['reactiveForm', { static: false, read: ElementRef }]
+            }], target: [{
+                type: Input
+            }], method: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], operation: [{
+                type: Input,
+                args: [{ required: true }]
+            }], handlers: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], childOf: [{
+                type: Input
+            }], rendererId: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output
+            }] } });
+
+/**
+ * @description Angular integration for the Decaf framework
+ * @summary This module provides Angular components and services for integrating with the Decaf framework.
+ * It includes components for rendering models, CRUD operations, and form handling, as well as
+ * rendering engines and utility functions to facilitate Angular application development with Decaf.
+ * @module for-angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularEngineKeys, BaseComponentProps, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, Dynamic, DynamicModule, EventConstants, FormConstants, LoggerLevels, ModelRendererComponent, NgxRenderingEngine, NgxRenderingEngine2, RouteDirections };
+//# sourceMappingURL=decaf-ts-for-angular.mjs.map