@decaf-ts/for-angular 0.0.8 → 0.0.10

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

@@ -1,2153 +0,0 @@
-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, Injector, 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 } from 'tslib';
-import * as i3 from '@ngx-translate/core';
-import { TranslateService } from '@ngx-translate/core';
-import * as i1$1 from '@ionic/angular/standalone';
-import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonTextarea, IonText, IonIcon } from '@ionic/angular/standalone';
-
-/**
- * @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<unknown>} 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 {Node[]} [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.
-     *
-     * @return {Promise<void>} A promise that resolves when initialization is complete
-     */
-    async initialize() {
-        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.
-     * @return {Promise<void>} A promise that resolves when initialization is complete
-     */
-    async initialize() {
-        if (this.initialized)
-            return;
-        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~RendererCustomEvent~ 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<RendererCustomEvent>}
-         * @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);
-        }
-        else {
-            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'] || globals?.['props'] || {};
-        if (props?.['tag'])
-            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);
-            }
-        }
-        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", model: "model", 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", "model", "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
-            }], model: [{
-                type: Input
-            }], 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() {
-        /**
-         * @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.injector = inject(Injector);
-        this.JSON = JSON;
-    }
-    // constructor() {}
-    /**
-     * @description Refreshes the rendered model
-     * @param {string | M} model - The model to be rendered
-     */
-    refresh(model) {
-        model =
-            typeof model === 'string'
-                ? Model.build({}, 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 } = 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: [], 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", "model", "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" }]
-        }], 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() {
-        this.translateService = inject(TranslateService);
-        // protected constructor() {}
-        /**
-         * @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 {string|void} An array of error objects
-     */
-    getErrors(parent) {
-        const formControl = this.formControl;
-        if ((!formControl.pristine || formControl.touched) && !formControl.valid) {
-            const collapsableContainer = parent.closest('ion-accordion-group');
-            if (collapsableContainer)
-                collapsableContainer.setAttribute('value', 'open');
-            const errors = Object.keys(formControl.errors ?? {}).map(key => ({
-                key: key,
-                message: key,
-            }));
-            for (const error of errors)
-                return `* ${this.sf(this.translateService.instant(`errors.${error?.['message']}`), this[error?.['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() {
-        super(...arguments);
-        /**
-         * @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 Interface style for select inputs.
-         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
-         * This determines how the select options are presented to the user.
-         *
-         * @type {SelectInterface}
-         * @memberOf CrudFieldComponent
-         */
-        this.interface = 'popover';
-        /**
-         * @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;
-    }
-    // constructor() {
-    // }
-    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: null, 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  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #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            [errorText]=\"getErrors(container)\"\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              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\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                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\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        }\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            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\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.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-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()
-], 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  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #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            [errorText]=\"getErrors(container)\"\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              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\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                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\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        }\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            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\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.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-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"] }]
-        }], 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);
-        this.submitEvent.emit({
-            data,
-            component: 'CrudFormComponent',
-            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: 'CrudFormComponent',
-            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