@decaf-ts/for-angular 0.0.36 → 0.0.38

package/index.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Type, Injector, EnvironmentInjector, ComponentMirror, ViewContainerRef, ComponentRef, TemplateRef, OnChanges, ChangeDetectorRef, Renderer2, EventEmitter, SimpleChanges, OnInit, OnDestroy, AfterViewInit, InjectionToken, Provider, ModuleWithProviders } from '@angular/core';
+import { ElementRef, Type, Injector, EnvironmentInjector, ComponentMirror, ViewContainerRef, ComponentRef, TemplateRef, OnChanges, ChangeDetectorRef, Renderer2, EventEmitter, SimpleChanges, AfterViewInit, OnInit, OnDestroy, NgZone, InjectionToken, Provider, ModuleWithProviders } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormArray, FormControl, ControlValueAccessor, AbstractControl } from '@angular/forms';
-import { Repository, Adapter, OrderDirection, Paginator, Condition } from '@decaf-ts/core';
+import { Repository, Adapter, OrderDirection, EventIds, Paginator, Condition } from '@decaf-ts/core';
 import { IonInput, IonSelect, IonTextarea, IonCheckbox, MenuController, SpinnerTypes, InfiniteScrollCustomEvent, RefresherCustomEvent } from '@ionic/angular';
 import { TextFieldTypes, SelectInterface, AutocompleteTypes, CheckboxCustomEvent, PredefinedColors } from '@ionic/core';
 import { RepositoryFlags, Context, CrudOperations, OperationKeys } from '@decaf-ts/db-decorators';
@@ -11,14 +11,15 @@ import { Model, Constructor, ModelConstructor } from '@decaf-ts/decorator-valida
 import { FieldProperties, CrudOperationKeys, RenderingEngine, FieldDefinition, UIModelMetadata, UIMediaBreakPointsType } from '@decaf-ts/ui-decorators';
 import { LoggedClass, Logger } from '@decaf-ts/logging';
 import { Router } from '@angular/router';
+import * as i1 from '@angular/common';
+import { Location } from '@angular/common';
 import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateLoader, TranslationObject, TranslateParser, RootTranslateServiceConfig } from '@ngx-translate/core';
 import { Title, SafeHtml } from '@angular/platform-browser';
 import { IonAccordionGroup, ItemReorderEventDetail } from '@ionic/angular/standalone';
-import { Subscription, Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { InjectablesRegistry } from '@decaf-ts/injectable-decorators';
 import { HttpClient } from '@angular/common/http';
-import * as i1 from '@angular/common';
 
 /**
  * @module module:lib/engine/types
@@ -99,7 +100,7 @@ type FieldUpdateMode = 'change' | 'blur' | 'submit';
  * @typedef {('checkbox'|'radio'|'select'|TextFieldTypes|'textarea')} PossibleInputTypes
  * @memberOf module:engine
  */
-type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'textarea';
+type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'file' | 'textarea';
 /**
  * @description Field definition for Angular components
  * @summary A comprehensive type that combines properties from various Ionic components
@@ -192,14 +193,13 @@ type FormParent = FormGroup | FormArray;
  */
 type FormParentGroup = [FormParent, string];
 type I18nResourceConfigType = I18nResourceConfig | I18nResourceConfig[];
+type WindowColorScheme = 'dark' | 'light' | unknown;
 
 /**
- * @module module:lib/engine/interfaces
+ * @module lib/engine/interfaces
  * @description Type and interface definitions used by the Angular rendering engine.
  * @summary Exposes interfaces for component input metadata, rendering outputs, form events,
  * and supporting types used across the engine and components.
- *
- * @link {@link AngularDynamicOutput}
  */
 
 /**
@@ -326,6 +326,9 @@ interface IComponentInput extends FieldProperties {
     formControl?: FormControl;
     model?: Model | string;
     operation?: CrudOperationKeys | undefined;
+    pages?: number;
+    cols?: number;
+    rows?: number;
 }
 /**
  * @description Component configuration structure
@@ -392,6 +395,7 @@ interface AngularDynamicOutput {
     children?: AngularDynamicOutput[];
     instance?: Type<unknown>;
     formGroup?: FormGroup;
+    page?: number;
     formControl?: FormControl;
     projectable?: boolean;
 }
@@ -472,11 +476,18 @@ interface IBaseCustomEvent {
     data?: unknown;
     target?: HTMLElement;
 }
+interface IModelPageCustomEvent extends IBaseCustomEvent {
+    success: boolean;
+    message?: string;
+}
 /**
- * Configuration for internationalization (i18n) resource file paths.
- *
- * @property prefix - The prefix to be used for the resource file path.
- * @property suffix - The suffix to be appended to the resource file path.
+ * @description Configuration for internationalization (i18n) resource file paths
+ * @summary Defines the structure for configuring i18n resource file paths with prefix and suffix.
+ * Used by the translation system to locate and load language resource files.
+ * @interface I18nResourceConfig
+ * @property {string} prefix - The prefix to be used for the resource file path
+ * @property {string} suffix - The suffix to be appended to the resource file path
+ * @memberOf module:engine
  */
 interface I18nResourceConfig {
     prefix: string;
@@ -486,8 +497,12 @@ interface I18nResourceConfig {
  * @description CRUD form event type
  * @summary Extends IBaseCustomEvent to include optional handlers for CRUD form operations.
  * This event type is used for form-related actions like create, read, update, and delete operations.
- * @typedef ICrudFormEvent
- * @property {Record<string, any>} [handlers] - Optional handlers for form operations
+ * @interface ICrudFormEvent
+ * @property {Record<string, unknown>} [handlers] - Optional handlers for form operations
+ * @property {string} name - The name of the event (inherited from IBaseCustomEvent)
+ * @property {string} [component] - The component that triggered the event (inherited from IBaseCustomEvent)
+ * @property {unknown} [data] - The data associated with the event (inherited from IBaseCustomEvent)
+ * @property {HTMLElement} [target] - The target element (inherited from IBaseCustomEvent)
  * @memberOf module:engine
  */
 interface ICrudFormEvent extends IBaseCustomEvent {
@@ -498,6 +513,9 @@ interface ICrudFormEvent extends IBaseCustomEvent {
  * @summary Event emitted by pagination components to signal page navigation.
  * Extends IBaseCustomEvent and carries a payload with the target page number and navigation direction.
  * @interface IPaginationCustomEvent
+ * @property {Object} data - The pagination data payload
+ * @property {number} data.page - The target page number
+ * @property {'next' | 'previous'} data.direction - The navigation direction
  * @memberOf module:engine
  */
 interface IPaginationCustomEvent extends IBaseCustomEvent {
@@ -511,6 +529,11 @@ interface IPaginationCustomEvent extends IBaseCustomEvent {
  * @summary Represents a single item in a navigation or contextual menu.
  * Includes the visible label and optional metadata such as accessibility title, target URL, icon, and color.
  * @interface IMenuItem
+ * @property {string} label - The visible text label for the menu item
+ * @property {string} [title] - Optional accessibility title or tooltip text
+ * @property {string} [url] - Optional target URL for navigation
+ * @property {string} [icon] - Optional icon identifier to display with the menu item
+ * @property {string} [color] - Optional color theme for the menu item
  * @memberOf module:engine
  */
 interface IMenuItem {
@@ -520,9 +543,33 @@ interface IMenuItem {
     icon?: string;
     color?: string;
 }
+/**
+ * @description Form reactive submit event data
+ * @summary Defines the structure of data emitted when a reactive form is submitted.
+ * Contains the processed form data as key-value pairs.
+ * @interface IFormReactiveSubmitEvent
+ * @property {Record<string, unknown>} data - The form data as key-value pairs
+ * @memberOf module:engine
+ */
 interface IFormReactiveSubmitEvent {
     data: Record<string, unknown>;
 }
+/**
+ * @description CRUD form options configuration
+ * @summary Defines the configuration options for CRUD form buttons including submit and clear buttons.
+ * Each button can be customized with text, icon, and icon position.
+ * @interface ICrudFormOptions
+ * @property {Object} buttons - Configuration for form action buttons
+ * @property {Object} buttons.submit - Submit button configuration
+ * @property {string} [buttons.submit.icon] - Optional icon for the submit button
+ * @property {'start' | 'end'} [buttons.submit.iconSlot] - Position of the icon relative to text
+ * @property {string} [buttons.submit.text] - Text label for the submit button
+ * @property {Object} [buttons.clear] - Optional clear button configuration
+ * @property {string} [buttons.clear.icon] - Optional icon for the clear button
+ * @property {'start' | 'end'} [buttons.clear.iconSlot] - Position of the icon relative to text
+ * @property {string} [buttons.clear.text] - Text label for the clear button
+ * @memberOf module:engine
+ */
 interface ICrudFormOptions {
     buttons: {
         submit: {
@@ -537,7 +584,20 @@ interface ICrudFormOptions {
         };
     };
 }
-interface IListEmptyResult {
+/**
+ * @description Empty list display options
+ * @summary Defines the configuration for displaying an empty state in list components
+ * when no data is available. Includes text, button, icon, and link settings.
+ * @interface IListEmptyOptions
+ * @property {string} title - Title text or translation key for empty state
+ * @property {string} subtitle - Subtitle text or translation key for empty state
+ * @property {boolean} showButton - Whether to show an action button in empty state
+ * @property {string} buttonText - Button text or translation key
+ * @property {string} link - Navigation link for the button
+ * @property {string} icon - Icon identifier for the empty state
+ * @memberOf module:engine
+ */
+interface IListEmptyOptions {
     title: string;
     subtitle: string;
     showButton: boolean;
@@ -545,11 +605,17 @@ interface IListEmptyResult {
     link: string;
     icon: string;
 }
+interface IWindowResizeEvent {
+    width: number;
+    height: number;
+}
 
 /**
- * @description Angular engine key constants
+ * @description Angular engine key constants.
  * @summary Contains key strings used by the Angular rendering engine for reflection,
- * dynamic component creation, and other engine operations.
+ * dynamic component creation, and other engine operations. These constants provide
+ * consistent naming for metadata keys, DOM attributes, and component identification
+ * throughout the rendering system.
  * @typedef {Object} AngularEngineKeys
  * @property {string} REFLECT - Prefix for reflection metadata keys
  * @property {string} DYNAMIC - Key for dynamic component identification
@@ -563,8 +629,10 @@ interface IListEmptyResult {
  * @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
+ * @property {string} VALIDATION_PARENT_KEY - Key for validation parent reference
+ * @property {string} FLAVOUR - Identifier for the Angular engine flavor
  * @const AngularEngineKeys
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 declare const AngularEngineKeys: {
     REFLECT: string;
@@ -580,32 +648,40 @@ declare const AngularEngineKeys: {
     RENDERED_ID: string;
     PARENT: string;
     VALIDATION_PARENT_KEY: symbol;
+    FLAVOUR: string;
 };
 /**
- * @description Form validation state constants
+ * @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.
+ * The VALID state indicates all form controls pass validation, while INVALID
+ * indicates one or more validation errors exist.
  * @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
+ * @memberOf module:lib/engine/constants
  */
 declare const FormConstants: {
     readonly VALID: "VALID";
     readonly 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
+ * @description Event name constants.
+ * @summary Contains constants for standardized event names used throughout the application.
+ * These constants ensure consistent event naming across components and make it easier to
+ * track and handle events. Each constant represents a specific application event type.
+ * @typedef {Object} EventConstants
  * @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
+ * @property {string} REFRESH - Event fired when a refresh action occurs
+ * @property {string} CLICK - Event fired when a click action occurs
+ * @property {string} SUBMIT - Event fired when a form submission occurs
+ * @property {string} VALIDATION_ERROR - Event fired when a validation error occurs
+ * @property {string} FIELDSET_ADD_GROUP - Event fired when adding a group to a fieldset
+ * @property {string} FIELDSET_UPDATE_GROUP - Event fired when updating a fieldset group
+ * @property {string} FIELDSET_REMOVE_GROUP - Event fired when removing a fieldset group
+ * @const EventConstants
+ * @memberOf module:lib/engine/constants
  */
 declare const EventConstants: {
     readonly BACK_BUTTON_NAVIGATION: "backButtonNavigationEndEvent";
@@ -618,9 +694,11 @@ declare const EventConstants: {
     readonly FIELDSET_REMOVE_GROUP: "fieldsetRemoveGroupEvent";
 };
 /**
- * @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.
+ * @description Logger level constants.
+ * @summary Defines the logging levels used in the application's logging system.
+ * Lower numeric values represent more verbose logging, while higher values represent
+ * more critical logs. These levels control which log messages are output based on
+ * the configured logging threshold.
  * @enum {number}
  * @readonly
  * @property {number} ALL - Log everything (most verbose)
@@ -629,7 +707,7 @@ declare const EventConstants: {
  * @property {number} WARN - Log warnings
  * @property {number} ERROR - Log errors
  * @property {number} CRITICAL - Log critical errors (least verbose)
- * @memberOf module:engine
+ * @memberOf module:lib/engine/constants
  */
 declare enum LoggerLevels {
     ALL = 0,
@@ -640,15 +718,16 @@ declare enum LoggerLevels {
     CRITICAL = 5
 }
 /**
- * @description Route direction constants
- * @summary Enum defining the possible navigation directions in the application.
- * Used for controlling navigation flow and animation directions.
+ * @description Route direction constants.
+ * @summary Defines the possible navigation directions in the application.
+ * Used for controlling navigation flow and animation directions during route transitions.
+ * These constants help maintain consistent navigation behavior throughout the app.
  * @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
+ * @memberOf module:lib/engine/constants
  */
 declare enum RouteDirections {
     BACK = "back",
@@ -656,15 +735,18 @@ declare enum RouteDirections {
     ROOT = "root"
 }
 /**
- * @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.
+ * @description Component tag name constants.
+ * @summary Defines the custom HTML tag names for specialized components used in the application.
+ * These tag names are registered with Angular and used for component rendering and identification.
+ * Each constant represents the selector for a specific custom component type.
  * @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
+ * @property {string} CRUD_FIELD - Tag name for CRUD form field component
+ * @property {string} LAYOUT_COMPONENT - Tag name for layout container component
+ * @memberOf module:lib/engine/constants
  */
 declare enum ComponentsTagNames {
     LIST_ITEM = "ngx-decaf-list-item",
@@ -674,13 +756,16 @@ declare enum ComponentsTagNames {
     LAYOUT_COMPONENT = "ngx-decaf-layout"
 }
 /**
- * @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.
+ * @description Base component property name constants.
+ * @summary Defines the standard property names used by base components throughout the application.
+ * These constants ensure consistent property naming across components and facilitate
+ * property access, validation, and data binding. Used primarily for component input
+ * properties and change detection.
  * @enum {string}
  * @readonly
  * @property {string} MODEL - Property name for the component's data model
  * @property {string} LOCALE - Property name for localization settings
+ * @property {string} LOCALE_ROOT - Property name for the locale root identifier
  * @property {string} PK - Property name for primary key
  * @property {string} ITEMS - Property name for collection items
  * @property {string} ROUTE - Property name for routing information
@@ -689,7 +774,10 @@ declare enum ComponentsTagNames {
  * @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
+ * @property {string} COMPONENT_NAME - Property name for component identifier
+ * @property {string} PARENT_COMPONENT - Property name for parent component reference
+ * @property {string} FORM_GROUP_COMPONENT_PROPS - Property name for form group component properties
+ * @memberOf module:lib/engine/constants
  */
 declare enum BaseComponentProps {
     MODEL = "model",
@@ -707,14 +795,65 @@ declare enum BaseComponentProps {
     PARENT_COMPONENT = "parentComponent",
     FORM_GROUP_COMPONENT_PROPS = "componentProps"
 }
+/**
+ * @description List component type constants.
+ * @summary Defines the available types for list components, determining their
+ * pagination and scrolling behavior. Used to configure list rendering strategies.
+ * @enum {string}
+ * @readonly
+ * @property {string} INFINITE - Infinite scroll list type
+ * @property {string} PAGINATED - Paginated list type with page navigation
+ * @memberOf module:lib/engine/constants
+ */
 declare enum ListComponentsTypes {
     INFINITE = "infinite",
     PAGINATED = "paginated"
 }
+/**
+ * @description CSS class name constants.
+ * @summary Contains predefined CSS class names used for consistent styling
+ * across components. These constants help maintain a unified visual language
+ * and make it easier to apply standard styles.
+ * @typedef {Object} CssClasses
+ * @property {string} BUTTONS_CONTAINER - CSS class for button container elements
+ * @const CssClasses
+ * @memberOf module:lib/engine/constants
+ */
 declare const CssClasses: {
     BUTTONS_CONTAINER: string;
 };
+/**
+ * @description Default options for reactive CRUD forms.
+ * @summary Provides default configuration for form buttons in CRUD operations.
+ * Includes default text labels for submit and clear buttons, which can be
+ * overridden by individual form implementations.
+ * @type {ICrudFormOptions}
+ * @property {Object} buttons - Configuration for form action buttons
+ * @property {Object} buttons.submit - Submit button configuration
+ * @property {string} buttons.submit.text - Default text for submit button
+ * @property {Object} buttons.clear - Clear button configuration
+ * @property {string} buttons.clear.text - Default text for clear button
+ * @const DefaultFormReactiveOptions
+ * @memberOf module:lib/engine/constants
+ */
 declare const DefaultFormReactiveOptions: ICrudFormOptions;
+/**
+ * @description Default options for empty list state display.
+ * @summary Provides default configuration for displaying empty state in list components
+ * when no data is available. Includes default text for title and subtitle, icon name,
+ * button text and visibility settings. These defaults can be overridden by individual
+ * list component implementations to customize the empty state presentation.
+ * @type {IListEmptyOptions}
+ * @property {string} title - Default translation key for empty list title
+ * @property {string} subtitle - Default translation key for empty list subtitle
+ * @property {boolean} showButton - Whether to show action button in empty state
+ * @property {string} icon - Default Ionic icon name for empty state
+ * @property {string} buttonText - Default translation key for button text
+ * @property {string} link - Default navigation link (empty string)
+ * @const DefaultListEmptyOptions
+ * @memberOf module:lib/engine/constants
+ */
+declare const DefaultListEmptyOptions: IListEmptyOptions;
 
 /**
  * @description Marks an Angular component as dynamically loadable
@@ -761,33 +900,30 @@ declare abstract class DynamicModule {
 }
 
 /**
- * @module module:lib/engine/NgxRenderingEngine
+ * @module lib/engine/NgxRenderingEngine
  * @description Angular rendering engine for Decaf model-driven UIs.
  * @summary Implements NgxRenderingEngine which converts model decorator metadata
  * into Angular components, manages component registration, and orchestrates
  * dynamic component creation and input mapping.
- *
  * @link {@link NgxRenderingEngine}
  */
 
 /**
- * @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.
- *
+ * @description Angular implementation of the RenderingEngine for Decaf components.
+ * @summary This class extends the base RenderingEngine to provide Angular-specific rendering capabilities.
+ * It handles the conversion of field definitions to Angular components, manages component registration,
+ * and provides utilities for component creation and input handling. The engine converts model decorator
+ * metadata into dynamically created Angular components with proper input binding and lifecycle management.
  * @template AngularFieldDefinition - Type for Angular-specific field definitions
  * @template AngularDynamicOutput - Type for Angular-specific component output
- *
  * @class NgxRenderingEngine
+ * @extends {RenderingEngine<AngularFieldDefinition, AngularDynamicOutput>}
  * @example
  * ```typescript
  * const engine = NgxRenderingEngine.get();
  * engine.initialize();
  * const output = engine.render(myModel, {}, viewContainerRef, injector, templateRef);
  * ```
- *
  * @mermaid
  * sequenceDiagram
  *   participant Client
@@ -803,83 +939,95 @@ declare abstract class DynamicModule {
  *   Components-->>Engine: component constructor
  *   Engine->>Engine: createComponent(component, inputs, metadata, vcr, injector, template)
  *   Engine-->>Client: return AngularDynamicOutput
+ * @memberOf module:lib/engine/NgxRenderingEngine
  */
 declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition, AngularDynamicOutput> {
     /**
-     * @description Registry of components available for rendering
+     * @description Registry of components available for dynamic rendering.
      * @summary Static registry that stores all registered components indexed by their selector name.
      * Each component entry contains a constructor reference that can be used to instantiate
      * the component during the rendering process. This registry is shared across all instances
      * of the rendering engine and is populated through the registerComponent method.
-     *
      * @private
      * @static
      * @type {Record<string, { constructor: Constructor<unknown> }>}
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     private static _components;
     /**
-     * @description Currently active model being rendered
+     * @description Currently active model being rendered by the engine.
      * @summary Stores a reference to the model instance that is currently being processed
      * by the rendering engine. This property is set during the render method execution
      * and is used throughout the rendering lifecycle to access model data and metadata.
      * The definite assignment assertion (!) is used because this property is always
      * initialized before use within the render method.
-     *
      * @private
      * @type {Model}
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     private _model;
     /**
-     * @description Current operation context for component visibility control
+     * @description Current operation context for component visibility control.
      * @summary Static property that stores the current operation being performed,
      * which is used to determine component visibility through the 'hidden' property.
      * Components can specify operations where they should be hidden, and this property
      * provides the context for those visibility checks. The value is typically extracted
      * from the global properties during the rendering process.
-     *
      * @private
      * @static
      * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     private static _operation;
     /**
-     * @description Reference to the currently active component instance
+     * @description Reference to the currently active component instance.
      * @summary Static property that maintains a reference to the most recently created
      * component instance. This is used internally for component lifecycle management
      * and can be cleared through the destroy method. The reference allows access to
      * the active component instance for operations that need to interact with the
      * currently rendered component.
-     *
      * @private
      * @static
      * @type {Type<unknown> | undefined}
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     private static _instance;
+    /**
+     * @description Parent component properties for child component inheritance.
+     * @summary Static property that stores parent component properties that should be
+     * inherited by child components. This is particularly used for passing page configuration
+     * down to child components in multi-page forms. The property is cleared after rendering
+     * to prevent property leakage between unrelated component trees.
+     * @private
+     * @static
+     * @type {KeyValue | undefined}
+     * @memberOf module:lib/engine/NgxRenderingEngine
+     */
     private static _parentProps;
     /**
-     * @description Constructs a new NgxRenderingEngine instance
+     * @description Constructs a new NgxRenderingEngine instance.
      * @summary Initializes a new instance of the Angular rendering engine by calling the parent
      * constructor with the 'angular' engine type identifier. This constructor sets up the base
      * rendering engine functionality with Angular-specific configurations and prepares the
      * instance for component registration and rendering operations.
-     *
      * @constructor
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     constructor();
     /**
-     * @description Converts a field definition to an Angular component output
+     * @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
+     * It handles component instantiation, input property mapping, child component rendering, and visibility
+     * control. 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
+     * @param {boolean} createComponent - Whether to create the component instance
+     * @param {FormParent} [formGroup] - Optional form group for form components
      * @return {AngularDynamicOutput} The Angular component output with component reference and inputs
-     *
      * @mermaid
      * sequenceDiagram
      *   participant Method as fromFieldDefinition
@@ -900,14 +1048,15 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      *     Method->>Method: Create component instance
      *   end
      *   Method-->>Caller: return AngularDynamicOutput
+     * @private
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     private fromFieldDefinition;
     /**
-     * @description Creates an Angular component instance
+     * @description Creates an Angular component instance with inputs and template projection.
      * @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
@@ -915,36 +1064,40 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      * @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
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static createComponent(component: Type<unknown>, inputs: KeyValue | undefined, metadata: ComponentMirror<unknown>, vcr: ViewContainerRef, injector: Injector, template?: Node[]): ComponentRef<unknown>;
     /**
-     * @description Extracts decorator metadata from a model
+     * @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
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     getDecorators(model: Model, globalProps: Record<string, unknown>): FieldDefinition<AngularFieldDefinition>;
     /**
-     * @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.
-     *
+     * @description Destroys the current engine instance and cleans up resources.
+     * @summary This static method clears the current instance reference and parent props,
+     * effectively destroying the singleton instance of the rendering engine. Optionally
+     * removes the form registry for the specified form ID. This can be used to reset the
+     * engine state or to prepare for a new instance creation.
+     * @param {string} [formId] - Optional form ID to remove from registry
      * @return {Promise<void>} A promise that resolves when the instance is destroyed
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static destroy(formId?: string): Promise<void>;
     /**
-     * @description Renders a model into an Angular component output
+     * @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
@@ -952,7 +1105,6 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      * @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
@@ -967,63 +1119,68 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      *   Render->>FromField: fromFieldDefinition(fieldDef, vcr, injector, tpl)
      *   FromField-->>Render: AngularDynamicOutput
      *   Render-->>Client: return AngularDynamicOutput
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     render<M extends Model>(model: M, globalProps: Record<string, unknown>, vcr: ViewContainerRef, injector: Injector, tpl: TemplateRef<unknown>): AngularDynamicOutput;
     /**
-     * @description Initializes the rendering engine
+     * @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
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     initialize(): Promise<void>;
     /**
-     * @description Registers a component with the rendering engine
+     * @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
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static registerComponent(name: string, constructor: Constructor<unknown>): void;
     /**
-     * @description Retrieves registered components from the rendering engine
+     * @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
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static components(selector?: string): object | string[];
     /**
-     * @description Generates a key for reflection metadata
+     * @description Generates a key for reflection metadata storage.
      * @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
+     * @override
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static key(key: string): string;
     /**
-     * @description Sets input properties on a component instance
+     * @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
@@ -1043,341 +1200,457 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      *       SetInputs->>Component: setInput(key, value)
      *     end
      *   end
+     * @static
+     * @memberOf module:lib/engine/NgxRenderingEngine
      */
     static setInputs(component: ComponentRef<unknown>, inputs: KeyValue, metadata: ComponentMirror<unknown>): void;
 }
 
 /**
- * @module module:lib/engine/NgxDecafComponentDirective
+ * @module lib/engine/NgxComponentDirective
  * @description Base decaf component abstraction providing shared inputs and utilities.
- * @summary NgxDecafComponentDirective is the abstract foundation for Decaf components and provides common
+ * @summary NgxComponentDirective is the abstract foundation for Decaf components and provides common
  * inputs (model, mapper, pk, props), logging, repository resolution, and event dispatch helpers.
  * It centralizes shared behavior for child components and simplifies integration with the rendering engine.
- *
- * @link {@link NgxDecafComponentDirective}
+ * @link {@link NgxComponentDirective}
  */
 
-declare abstract class NgxDecafComponentDirective extends LoggedClass implements OnChanges {
-    protected componentName?: string | undefined;
-    protected localeRoot?: string | undefined;
+/**
+ * @description Base directive for Decaf components in Angular applications.
+ * @summary Abstract base class that provides common functionality for all Decaf components.
+ * This directive establishes a foundation for component development by offering shared inputs
+ * (model, mapper, pk, props), logging infrastructure, repository access, event handling, and
+ * internationalization support. It implements OnChanges to respond to input property changes
+ * and includes utilities for navigation, localization, and dynamic property binding. All Decaf
+ * components should extend this directive to inherit its foundational capabilities.
+ * @class NgxComponentDirective
+ * @extends {LoggedClass}
+ * @implements {OnChanges}
+ * @memberOf module:lib/engine/NgxComponentDirective
+ */
+declare abstract class NgxComponentDirective extends LoggedClass implements OnChanges {
     /**
-     * @description Reference to the component's element.
+     * @description Reference to the component's native DOM element.
      * @summary Provides direct access to the native DOM element of the component through Angular's
      * ViewChild decorator. This reference can be used to manipulate the DOM element directly,
      * apply custom styles, or access native element properties and methods. The element is
      * identified by the 'component' template reference variable.
-     *
      * @type {ElementRef}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     component: ElementRef;
+    /**
+     * @description Name identifier for the component instance.
+     * @summary Provides a string identifier that can be used to name or label the component
+     * instance. This name can be used for debugging purposes, logging, or to identify specific
+     * component instances within a larger application structure. It serves as a human-readable
+     * identifier that helps distinguish between multiple instances of the same component type.
+     * @type {string}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     name: string;
+    /**
+     * @description Parent component identifier for hierarchical component relationships.
+     * @summary Specifies the identifier of the parent component in a hierarchical component structure.
+     * This property establishes a parent-child relationship between components, allowing for
+     * proper nesting and organization of components within a layout. It can be used to track
+     * component dependencies and establish component hierarchies for rendering and event propagation.
+     * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     childOf: string | undefined;
     /**
-     * @description Unique identifier for the current record.
-     * @summary A unique identifier for the current record being displayed or manipulated.
-     * This is typically used in conjunction with the primary key for operations on specific records.
-     *
+     * @description Unique identifier for the component instance.
+     * @summary A unique identifier automatically generated for each component instance.
+     * This UID is used for DOM element identification, component tracking, and debugging purposes.
+     * By default, it generates a random 16-character value, but it can be explicitly set via input.
      * @type {string | number}
-     * @memberOf NgxDecafComponentDirective
+     * @default generateRandomValue(16)
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     uid: string | number;
     /**
-     * @description Repository model for data operations.
-     * @summary The data model repository that this component will use for CRUD operations.
-     * This provides a connection to the data layer for retrieving and manipulating data.
-     *
-     * @type {Model| undefined}
-     * @memberOf NgxDecafComponentDirective
+     * @description Data model or model name for component operations.
+     * @summary The data model that this component will use for CRUD operations. This can be provided
+     * as a Model instance, a model constructor, or a string representing the model's registered name.
+     * When set, this property provides the component with access to the model's schema, validation rules,
+     * and metadata needed for rendering and data operations.
+     * @type {Model | string | undefined}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     model: Model | string | undefined;
     /**
-     * @description The primary data model used for CRUD operations.
-     * @summary This input provides the main Model instance that the form interacts with for
-     * creating, reading, updating, or deleting records. It serves as the source of schema
-     * and validation rules for the form fields, and is required for most operations except
-     * for certain read or delete scenarios.
-     *
-     * @type {string | number | undefined}
-     * @memberOf NgxDecafComponentDirective
+     * @description Primary key value of the current model instance.
+     * @summary Specifies the primary key value for the current model record being displayed or
+     * manipulated by the component. This identifier is used for CRUD operations that target
+     * specific records, such as read, update, and delete operations. The value corresponds to
+     * the field designated as the primary key in the model definition.
+     * @type {EventIds}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
-    modelId?: string | number;
+    modelId?: EventIds;
     /**
-     * @description Primary key field name for the model.
+     * @description Primary key field name for the data model.
      * @summary Specifies which field in the model should be used as the primary key.
      * This is typically used for identifying unique records in operations like update and delete.
-     *
+     * If not explicitly set, it defaults to the repository's configured primary key or 'id'.
      * @type {string}
      * @default 'id'
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     pk: string;
     /**
-     * @description Field mapping configuration.
+     * @description Field mapping configuration object or function.
      * @summary Defines how fields from the data model should be mapped to properties used by the component.
-     * This allows for flexible data binding between the model and the component's display logic.
-     *
-     * @type {Record<string, string>}
-     * @memberOf NgxDecafComponentDirective
+     * This allows for flexible data binding between the model and the component's display logic. Can be
+     * provided as a static object mapping or as a function for dynamic mapping transformations.
+     * @type {Record<string, string> | FunctionLike}
+     * @default {}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     mapper: Record<string, string> | FunctionLike;
     /**
-     * @description Available CRUD operations for this component.
+     * @description Available CRUD operations for this component instance.
      * @summary Defines which CRUD operations (Create, Read, Update, Delete) are available
-     * for this component. This affects which operations can be performed on the data.
-     *
+     * for this component. This affects which operations can be performed on the data and
+     * which operation buttons are displayed in the UI. By default, only READ operations are enabled.
+     * @type {CrudOperations[]}
      * @default [OperationKeys.READ]
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     operations: CrudOperations[];
     /**
-     * @description Primary key field name for the model.
-     * @summary Specifies which field in the model should be used as the primary key.
-     * This is typically used for identifying unique records in operations like update and delete.
+     * @description The CRUD operation type to be performed on the model.
+     * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
+     * should perform. This determines the UI behavior, form configuration, and available actions.
+     * The operation affects form validation, field availability, and the specific repository
+     * method called during data submission.
      *
+     * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+     * @default OperationKeys.READ
+     *  @memberOf ModelPage
+     */
+    operation: OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE;
+    /**
+     * @description Row position in a grid-based layout system.
+     * @summary Specifies the row position of this component when rendered within a grid-based layout.
+     * This property is used for positioning components in multi-row, multi-column layouts and helps
+     * establish the component's vertical placement within the grid structure.
      * @type {number}
      * @default 1
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     row: number;
     /**
-     * @description Primary key field name for the model.
-     * @summary Specifies which field in the model should be used as the primary key.
-     * This is typically used for identifying unique records in operations like update and delete.
-     *
+     * @description Column position in a grid-based layout system.
+     * @summary Specifies the column position of this component when rendered within a grid-based layout.
+     * This property is used for positioning components in multi-row, multi-column layouts and helps
+     * establish the component's horizontal placement within the grid structure.
      * @type {number}
      * @default 1
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     col: number;
     /**
-     * @description Additional CSS class names to apply to the component.
+     * @description Additional CSS class names for component styling.
      * @summary Allows custom CSS classes to be added to the component's root element.
      * These classes are appended to any automatically generated classes based on other
      * component properties. Multiple classes can be provided as a space-separated string.
      * This provides a way to customize the component's appearance beyond the built-in styling options.
-     *
      * @type {string}
      * @default ""
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     className: string;
     /**
-     * @description The repository for interacting with the data model.
+     * @description Repository instance for data layer operations.
      * @summary Provides a connection to the data layer for retrieving and manipulating data.
-     * This is an instance of the `DecafRepository` class from the `@decaf-ts/core` package,
-     * which is initialized in the `repository` getter method.
-     *
+     * This is an instance of the DecafRepository class, initialized lazily in the repository getter.
      * The repository is used to perform CRUD (Create, Read, Update, Delete) operations on the
-     * data model, such as fetching data, creating new items, updating existing items, and deleting
-     * items. It also provides methods for querying and filtering data based on specific criteria.
-     *
+     * data model and provides methods for querying and filtering data based on specific criteria.
      * @type {DecafRepository<Model>}
      * @private
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected _repository?: DecafRepository<Model>;
     /**
-     * @description Root component of the Decaf-ts for Angular application
-     * @summary This component serves as the main entry point for the application.
-     * It sets up the navigation menu, handles routing events, and initializes
-     * the application state. It also manages the application title and menu visibility.
-     *
-     * @private
+     * @description Ionic menu controller service for menu management.
+     * @summary Injected service that provides programmatic control over Ionic menu components.
+     * This service allows the component to open, close, toggle, and manage menu states within
+     * the application. It provides access to menu functionality for implementing navigation
+     * and layout features that require menu interaction.
+     * @protected
      * @type {MenuController}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected menuController: MenuController;
     /**
-      * @description Angular change detection service.
-      * @summary Injected service that provides manual control over change detection cycles.
-      * This is essential for ensuring that programmatic DOM changes (like setting accordion
-      * attributes) are properly reflected in the component's state and trigger appropriate
-      * view updates when modifications occur outside the normal Angular change detection flow.
-      *
-      * @protected
-      * @type {ChangeDetectorRef}
-      * @memberOf CrudFormComponent
-      */
+     * @description Angular change detection service for manual change detection control.
+     * @summary Injected service that provides manual control over change detection cycles.
+     * This is essential for ensuring that programmatic DOM changes (like setting accordion
+     * attributes) are properly reflected in the component's state and trigger appropriate
+     * view updates when modifications occur outside the normal Angular change detection flow.
+     * @protected
+     * @type {ChangeDetectorRef}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     protected changeDetectorRef: ChangeDetectorRef;
     /**
-     * @description Angular Renderer2 service for safe DOM manipulation.
+     * @description Angular Renderer2 service for platform-agnostic DOM manipulation.
      * @summary Injected service that provides a safe, platform-agnostic way to manipulate DOM elements.
      * This service ensures proper handling of DOM operations across different platforms and environments,
-     * including server-side rendering and web workers.
-     *
+     * including server-side rendering and web workers, without direct DOM access.
      * @protected
      * @type {Renderer2}
-     * @memberOf CrudFormComponent
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected renderer: Renderer2;
     /**
-     * @description Translation service for internationalization.
+     * @description Translation service for application internationalization.
      * @summary Injected service that provides translation capabilities for UI text.
-     * Used to translate button labels and validation messages based on the current locale.
-     *
+     * Used to translate button labels, validation messages, and other text content based
+     * on the current locale setting, enabling multilingual support throughout the application.
      * @protected
      * @type {TranslateService}
-     * @memberOf CrudFormComponent
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected translateService: TranslateService;
     /**
-     * @description Logger instance for the component.
+     * @description Logger instance for structured component logging.
      * @summary Provides logging capabilities for the component, allowing for consistent
-     * and structured logging of information, warnings, and errors. This logger is initialized
-     * in the ngOnInit method using the getLogger function from the ForAngularCommonModule.
-     *
+     * and structured logging of information, warnings, and errors. This logger is inherited
+     * from the LoggedClass and provides access to structured logging functionality.
      * The logger is used throughout the component to record important events, debug information,
-     * and potential issues. It helps in monitoring the component's behavior, tracking the flow
-     * of operations, and facilitating easier debugging and maintenance.
-     *
+     * and potential issues, facilitating easier debugging and maintenance.
      * @type {Logger}
-     * @private
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     logger: Logger;
     /**
-     * @description Event emitter for custom renderer events.
-     * @summary Emits custom events that occur within child components or the layout itself.
+     * @description Event emitter for custom component events.
+     * @summary Emits custom events that occur within child components or the component itself.
      * This allows parent components to listen for and respond to user interactions or
-     * state changes within the grid layout. Events are passed up the component hierarchy
-     * to enable coordinated behavior across the application.
-     *
+     * state changes. Events are passed up the component hierarchy to enable coordinated
+     * behavior across the application.
      * @type {EventEmitter<IBaseCustomEvent>}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     listenEvent: EventEmitter<IBaseCustomEvent>;
     /**
-     * @description Angular Router instance for navigation
-     * @summary Injected Router service used for programmatic navigation
-     * to other pages after successful login or other routing operations.
-     *
-     * @private
+     * @description Angular Router instance for programmatic navigation.
+     * @summary Injected Router service used for programmatic navigation between routes
+     * in the application. This service enables navigation to different views and operations,
+     * handles route parameters, and manages the browser's navigation history.
+     * @protected
      * @type {Router}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected router: Router;
     /**
-     * @description Angular Router instance for navigation
-     * @summary Injected Router service used for programmatic navigation
-     * to other pages after successful login or other routing operations.
-     *
-     * @private
-     * @type {Router}
-     * @memberOf NgxDecafComponentDirective
+     * @description Current locale identifier for component internationalization.
+     * @summary Specifies the locale code (e.g., 'en-US', 'pt-BR') used for translating UI text
+     * and formatting data according to regional conventions. This property can be set to override
+     * the default application locale for this specific component instance, enabling per-component
+     * localization when needed.
+     * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     locale?: string;
     /**
-     * @description Configuration for list item rendering
+     * @description Configuration for list item rendering behavior.
      * @summary Defines how list items should be rendered in the component.
      * This property holds a configuration object that specifies the tag name
      * and other properties needed to render list items correctly. The tag property
      * identifies which component should be used to render each item in a list.
      * Additional properties can be included to customize the rendering behavior.
-     *
      * @type {Record<string, unknown>}
      * @default {tag: ""}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     item: Record<string, unknown>;
     /**
-     * @description Dynamic properties configuration object.
+     * @description Dynamic properties configuration for runtime customization.
      * @summary Contains key-value pairs of dynamic properties that can be applied to the component
      * at runtime. This flexible configuration object allows for dynamic property assignment without
      * requiring explicit input bindings for every possible configuration option. Properties from
      * this object are parsed and applied to the component instance through the parseProps method,
      * enabling customizable component behavior based on external configuration.
-     *
      * @type {Record<string, unknown>}
      * @default {}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     props: Record<string, unknown>;
     /**
-     * @description Base route for navigation related to this component.
+     * @description Base route path for component navigation.
      * @summary Defines the base route path used for navigation actions related to this component.
-     * This is often used as a prefix for constructing navigation URLs.
-     *
+     * This is often used as a prefix for constructing navigation URLs when transitioning between
+     * different operations or views. The route helps establish the component's position in the
+     * application's routing hierarchy.
      * @type {string}
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     route: string;
     /**
-     * @description Flag indicating if the component has been initialized
+     * @description Initialization status flag for the component.
      * @summary Tracks whether the component has completed its initialization process.
      * This flag is used to prevent duplicate initialization and to determine if
      * certain operations that require initialization can be performed.
-     *
      * @type {boolean}
      * @default false
-     * @memberOf NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     initialized: boolean;
-    constructor(componentName?: string | undefined, localeRoot?: string | undefined);
-    get localeContext(): string;
     /**
-     * @description Getter for the repository instance.
-     * @summary Provides a connection to the data layer for retrieving and manipulating data.
-     * This method initializes the `_repository` property if it is not already set, ensuring
-     * that a single instance of the repository is used throughout the component.
-     *
-     * The repository is used to perform CRUD operations on the data model, such as fetching data,
-     * creating new items, updating existing items, and deleting items. It also provides methods
-     * for querying and filtering data based on specific criteria.
+     * @description Component name identifier for logging and localization contexts.
+     * @summary Stores the component's name which is used as a key for logging contexts
+     * and as a base for locale resolution. Can be injected via the CPTKN token or defaults
+     * to "NgxComponentDirective" if not provided.
+     * @protected
+     * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    protected componentName?: string;
+    /**
+     * @description Root key for component locale context resolution.
+     * @summary Defines the base key used to resolve localization contexts for this component.
+     * If not explicitly provided, it defaults to the component's name. This key is used to
+     * load appropriate translation resources and locale-specific configurations.
+     * @protected
+     * @type {string | undefined}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    protected localeRoot?: string;
+    /**
+     * @description Reference to CRUD operation constants for template usage.
+     * @summary Exposes the OperationKeys enum to the component template, enabling
+     * conditional rendering and behavior based on operation types. This protected
+     * readonly property ensures that template logic can access operation constants
+     * while maintaining encapsulation and preventing accidental modification.
+     * @protected
+     * @readonly
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    protected readonly OperationKeys: typeof OperationKeys;
+    /**
+     * @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.
      *
-     * @returns {DecafRepository<Model>} The initialized repository instance.
      * @private
-     * @memberOf NgxDecafComponentDirective
+     * @type {Location}
+     */
+    protected location: Location;
+    /**
+     * @description Constructor for NgxComponentDirective.
+     * @summary Initializes the directive by setting up the component name, locale root,
+     * and logger. Calls the parent LoggedClass constructor and configures localization
+     * context. The component name and locale root can be optionally injected via the
+     * CPTKN token, otherwise defaults are used.
+     * @param {string} [componentName] - Optional component name for identification and logging
+     * @param {string} [localeRoot] - Optional locale root key for internationalization
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    constructor(componentName?: string, localeRoot?: string);
+    /**
+     * @description Getter for the current locale context identifier.
+     * @summary Returns the current locale identifier by calling the getLocale method.
+     * This property provides convenient access to the component's active locale setting.
+     * @returns {string} The current locale identifier
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    get localeContext(): string;
+    /**
+     * @description Getter for the data repository instance.
+     * @summary Lazily initializes and returns the DecafRepository instance for the current model.
+     * This getter ensures the repository is created only when needed and reused for subsequent
+     * access. It also automatically sets the primary key field if not explicitly configured.
+     * @protected
+     * @returns {DecafRepository<Model>} The repository instance for the current model
+     * @throws {InternalError} If repository initialization fails
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected get repository(): DecafRepository<Model>;
     /**
-     * @description Handles changes to component inputs
-     * @summary This Angular lifecycle hook is called when input properties change.
-     * It responds to changes in the model, locale, or translatable properties by
-     * updating the component's internal state accordingly. When the model changes,
-     * it calls getModel to process the new model and getLocale to update the locale.
-     * When locale or translatable properties change, it calls getLocale to update
-     * the translation settings.
-     *
-     * @param {SimpleChanges} changes - Object containing changed properties
+     * @description Angular lifecycle hook for handling input property changes.
+     * @summary Responds to changes in component input properties, specifically monitoring changes
+     * to the model, locale root, and component name properties. When the model changes, it triggers
+     * model initialization and locale context updates. When locale-related properties change,
+     * it updates the component's locale setting accordingly.
+     * @param {SimpleChanges} changes - Object containing the changed properties with their previous and current values
      * @return {void}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @description Translates text phrases using the translation service.
+     * @summary Provides a promise-based wrapper around the translation service to translate
+     * UI text based on the current locale. Supports both single phrases and arrays of phrases,
+     * and accepts optional parameters for template interpolation. When a string parameter is
+     * provided, it's automatically converted to an object format for the translation service.
+     * @protected
+     * @param {string | string[]} phrase - The translation key or array of keys to translate
+     * @param {object | string} [params] - Optional parameters for interpolation in translated text
+     * @return {Promise<string>} A promise that resolves to the translated text
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     protected translate(phrase: string | string[], params?: object | string): Promise<string>;
+    /**
+     * @description Initializes the component asynchronously with custom logic.
+     * @summary Abstract initialization method that can be overridden by child components to perform
+     * custom initialization logic. By default, it simply sets the initialized flag to true.
+     * Child components can extend this method to load data, configure settings, or perform
+     * other setup operations required before the component is fully functional.
+     * @protected
+     * @param {...unknown[]} args - Variable number of arguments that can be used by child implementations
+     * @return {Promise<void>} A promise that resolves when initialization is complete
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     protected initialize(...args: unknown[]): Promise<void>;
+    /**
+     * @description Retrieves or sets the locale context for the component.
+     * @summary Gets the locale identifier from the locale context system. If a locale parameter
+     * is provided, it updates the localeRoot property and resolves the new locale context.
+     * If no locale is currently set, it initializes it from the localeRoot.
+     * @protected
+     * @param {string} [locale] - Optional locale identifier to set
+     * @return {string} The current locale identifier
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     protected getLocale(locale?: string): string;
     /**
-     * @description Gets the route for the component
-     * @summary Retrieves the route path for the component, generating one based on the model
-     * if no route is explicitly set. This method checks if a route is already defined, and if not,
-     * it creates a default route based on the model's constructor name. The generated route follows
-     * the pattern '/model/{ModelName}'. This is useful for automatic routing in CRUD operations.
-     *
-     * @return {string} The route path for the component, or empty string if no route is available
+     * @description Retrieves or generates the route path for the component.
+     * @summary Gets the navigation route associated with this component. If no route is explicitly
+     * set and a model is available, it automatically generates a route based on the model's
+     * class name using the pattern `/model/{ModelName}`. Returns an empty string if neither
+     * a route nor a model is available.
+     * @return {string} The route path for this component
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     getRoute(): string;
     /**
-     * @description Resolves and sets the component's model
-     * @summary Processes the provided model parameter, which can be either a Model instance
-     * or a string identifier. If a string is provided, it attempts to resolve the actual model
-     * from the injectables registry. After resolving the model, it calls setModelDefinitions
-     * to configure the component based on the model's metadata.
-     *
-     * @param {string | Model} model - The model instance or identifier string
+     * @description Resolves and initializes a model from various input formats.
+     * @summary Accepts a model in multiple formats (string name, Model instance, or ModelConstructor)
+     * and resolves it to a Model instance. When a string is provided, it looks up the model
+     * by name in the Model registry. After resolution, it delegates to setModelDefinitions
+     * to complete the model initialization and configuration.
+     * @template M - The model type extending from Model
+     * @param {string | Model | ModelConstructor<M>} model - The model to resolve and initialize
      * @return {void}
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     getModel<M extends Model>(model: string | Model | ModelConstructor<M>): void;
     /**
-   * @description Configures component properties based on model metadata
-   * @summary Extracts and applies configuration from the model's decorators to set up
-   * the component. This method uses the rendering engine to retrieve decorator metadata
-   * from the model, then configures the component's mapper and item properties accordingly.
-   * It ensures the route is properly set and merges various properties from the model's
-   * metadata into the component's configuration.
-   *
-   * @param {Model} model - The model to extract configuration from
-   * @return {void}
-   */
+     * @description Configures component properties based on model decorators and metadata.
+     * @summary Extracts rendering configuration from the model's decorators using the rendering
+     * engine. This includes props, item configuration, and child component definitions. It sets
+     * up the mapper for field transformations, configures the item renderer with appropriate
+     * properties, and establishes the route for navigation. This method bridges the model's
+     * decorator metadata with the component's runtime configuration.
+     * @param {Model} model - The model instance to extract definitions from
+     * @return {void}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     setModelDefinitions(model: Model): void;
     /**
      * @description Parses and applies properties from the props object to the component instance.
@@ -1386,212 +1659,505 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * component instance. This allows for dynamic property assignment based on configuration
      * stored in the props object, enabling flexible component customization without requiring
      * explicit property binding for every possible configuration option.
-     *
      * The method performs a safe property assignment by checking if each key from the instance
      * exists in the props object before applying it. This prevents accidental property
      * overwriting and ensures only intended properties are modified.
-     *
      * @param {KeyValue} instance - The component instance object to process
+     * @param {string[]} [skip=[]] - Array of property names to skip during parsing
      * @return {void}
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant B as NgxBaseComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant P as Props Object
      *
-     *   C->>B: parseProps(instance)
-     *   B->>B: Get Object.keys(instance)
+     *   C->>D: parseProps(instance, skip)
+     *   D->>D: Get Object.keys(instance)
      *   loop For each key in instance
-     *     B->>P: Check if key exists in this.props
-     *     alt Key exists in props
-     *       B->>B: Set this[key] = this.props[key]
-     *     else Key not in props
-     *       Note over B: Skip this key
+     *     D->>D: Check if key in skip array
+     *     alt Key not in skip
+     *       D->>P: Check if key exists in this.props
+     *       alt Key exists in props
+     *         D->>D: Set this[key] = this.props[key]
+     *         D->>P: delete this.props[key]
+     *       else Key not in props
+     *         Note over D: Skip this key
+     *       end
      *     end
      *   end
-     *
      * @protected
-     * @memberOf NgxBaseComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected parseProps(instance: KeyValue, skip?: string[]): void;
     /**
-     * @description Tracks items in ngFor loops for optimal change detection.
+     * @description Tracks items in ngFor loops for optimal change detection performance.
      * @summary Provides a tracking function for Angular's *ngFor directive to optimize rendering
      * performance. This method generates unique identifiers for list items based on their index
      * and content, allowing Angular to efficiently track changes and minimize DOM manipulations
      * during list updates. The tracking function is essential for maintaining component state
      * and preventing unnecessary re-rendering of unchanged items.
-     *
+     * @protected
      * @param {number} index - The index of the item in the list
      * @param {KeyValue | string | number} item - The item data to track
-     * @returns {string | number} A unique identifier for the item
-     * @memberOf NgxDecafComponentDirective
+     * @return {string | number} A unique identifier for the item
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected trackItemFn(index: number, item: KeyValue | string | number): string | number;
+    /**
+     * @description Handles custom events from child components or DOM elements.
+     * @summary Processes custom events by extracting event handlers and delegating to appropriate
+     * handler classes. Supports both CustomEvent format with detail property and direct event
+     * objects. If specific handlers are defined in the event, it instantiates the handler class
+     * and invokes its handle method. If no handler is found or defined, the event is emitted
+     * up the component hierarchy via the listenEvent output.
+     * @param {IBaseCustomEvent | ICrudFormEvent | CustomEvent} event - The event to handle
+     * @return {Promise<void>} A promise that resolves when event handling is complete
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as Child Component
+     *   participant D as NgxComponentDirective
+     *   participant H as Event Handler
+     *   participant P as Parent Component
+     *
+     *   C->>D: handleEvent(event)
+     *   alt Event is CustomEvent
+     *     D->>D: Extract event.detail
+     *   end
+     *   D->>D: Get event name and handlers
+     *   alt Handlers defined
+     *     alt Handler exists for event
+     *       D->>H: new Handler(router)
+     *       D->>H: handle(event)
+     *       H-->>D: return result
+     *     else No handler found
+     *       D->>D: log.debug("No handler found")
+     *     end
+     *   else No handlers
+     *     D->>P: listenEvent.emit(event)
+     *   end
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
     handleEvent(event: IBaseCustomEvent | ICrudFormEvent | CustomEvent): Promise<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDecafComponentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDecafComponentDirective, never, never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "model": { "alias": "model"; "required": false; }; "modelId": { "alias": "modelId"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "operations": { "alias": "operations"; "required": false; }; "row": { "alias": "row"; "required": false; }; "col": { "alias": "col"; "required": false; }; "className": { "alias": "className"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "item": { "alias": "item"; "required": false; }; "props": { "alias": "props"; "required": false; }; "route": { "alias": "route"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    /**
+     * @description Determines if a specific operation is allowed in the current context.
+     * @summary This method checks if an operation is included in the list of available
+     * CRUD operations and if it's not the current operation (unless the current operation
+     * is CREATE). This is used to enable/disable or show/hide operation buttons in the UI.
+     * Returns false if the operations array is undefined or the operation is not in the list.
+     * @param {string} operation - The operation to check
+     * @return {boolean} True if the operation is allowed, false otherwise
+     * @mermaid
+     * sequenceDiagram
+     *   participant D as NgxComponentDirective
+     *   participant U as UI
+     *
+     *   U->>D: isAllowed(operation)
+     *   alt operations is undefined
+     *     D-->>U: Return false
+     *   else
+     *     D->>D: Check if operation is in operations
+     *     D->>D: Check if operation is not current operation
+     *     D-->>U: Return result
+     *   end
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    isAllowed(operation: string): boolean;
+    /**
+     * @description Navigates to a different operation for the current model.
+     * @summary This method constructs a navigation URL based on the component's base route,
+     * the requested operation, and optionally a model ID. It then uses the Angular router
+     * service to navigate to the constructed URL. This is typically used when switching
+     * between different CRUD operations (create, read, update, delete) on a model.
+     * The URL format is: {route}/{operation}/{id?}
+     * @param {string} operation - The operation to navigate to (e.g., 'create', 'read', 'update', 'delete')
+     * @param {string} [id] - Optional model ID to include in the navigation URL
+     * @return {Promise<boolean>} A promise that resolves to true if navigation was successful
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as UI
+     *   participant D as NgxComponentDirective
+     *   participant R as Router
+     *
+     *   U->>D: Click operation button
+     *   D->>D: changeOperation(operation, id)
+     *   D->>D: Construct navigation URL
+     *   Note over D: URL: {route}/{operation}/{id?}
+     *   D->>R: navigateByUrl(page)
+     *   R->>R: Navigate to new route
+     *   R-->>D: Return navigation result
+     *   D-->>U: Display new operation view
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    changeOperation(operation: string, id?: string): Promise<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxComponentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxComponentDirective, never, never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "model": { "alias": "model"; "required": false; }; "modelId": { "alias": "modelId"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "operations": { "alias": "operations"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "row": { "alias": "row"; "required": false; }; "col": { "alias": "col"; "required": false; }; "className": { "alias": "className"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "item": { "alias": "item"; "required": false; }; "props": { "alias": "props"; "required": false; }; "route": { "alias": "route"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }
 
 /**
- * @class NgxDecafFormFieldDirective
- * @implements {FieldProperties}
+ * @description Abstract base directive for CRUD form fields in Angular applications.
+ * @summary Provides the foundation for all form field components in Decaf applications by implementing
+ * Angular's ControlValueAccessor interface and FieldProperties for validation. This directive manages
+ * form control integration, validation state, multi-entry forms (FormArrays), and CRUD operation context.
+ * It handles form group lifecycle, error messaging, change detection, and parent-child form relationships.
+ * Extend this class to create custom form field components that seamlessly integrate with Angular's
+ * reactive forms and Decaf's validation system.
+ * @class NgxFormFieldDirective
+ * @extends {NgxComponentDirective}
  * @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.
+ * @implements {FieldProperties}
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'app-text-field',
+ *   templateUrl: './text-field.component.html',
+ *   providers: [{
+ *     provide: NG_VALUE_ACCESSOR,
+ *     useExisting: forwardRef(() => TextFieldComponent),
+ *     multi: true
+ *   }]
+ * })
+ * export class TextFieldComponent extends NgxFormFieldDirective {
+ *   constructor() {
+ *     super();
+ *   }
+ * }
+ * ```
  */
-declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirective implements ControlValueAccessor, FieldProperties {
+declare abstract class NgxFormFieldDirective extends NgxComponentDirective implements ControlValueAccessor, FieldProperties {
     /**
      * @description Index of the currently active form group in a form array.
      * @summary When working with multiple form groups (form arrays), this indicates
      * which form group is currently active or being edited. This is used to manage
      * focus and data binding in multi-entry scenarios.
-     *
      * @type {number}
      * @default 0
-     * @memberOf NgxDecafFormFieldDirective
+     * @public
      */
     activeFormGroupIndex: number;
+    operation: CrudOperations;
     /**
-     * @description FormArray containing multiple form groups for this field.
-     * @summary When this field is part of a multi-entry structure, this FormArray
-     * contains all the form groups. This enables management of multiple instances
-     * of the same field structure within a single form.
-     *
-     * @type {FormArray}
-     * @memberOf CrudFieldComponent
+     * @description Parent form container for this field.
+     * @summary Reference to the parent FormGroup or FormArray that contains this field.
+     * When this field is part of a multi-entry structure, this contains the FormArray
+     * with all form groups. This enables management of multiple instances of the same
+     * field structure within a single form.
+     * @type {FormParent}
+     * @public
      */
     parentComponent: FormParent;
     /**
-     * @description Field mapping configuration.
+     * @description Field mapping configuration for options.
      * @summary Defines how fields from the data model should be mapped to properties used by the component.
      * This allows for flexible data binding between the model and the component's display logic.
-     *
+     * Can be either a key-value mapping object or a function that performs the mapping.
      * @type {KeyValue | FunctionLike}
-     * @memberOf CrudFieldComponent
+     * @public
      */
     optionsMapper: KeyValue | FunctionLike;
     /**
-     * @summary Current CRUD operation
-     * @description Represents the current CRUD operation being performed
+     * @description Angular FormGroup instance for the field.
+     * @summary The FormGroup that contains this field's FormControl. Used for managing
+     * the field's validation state and value within the reactive forms structure.
+     * @type {FormGroup | undefined}
+     * @public
      */
-    operation: CrudOperations;
+    formGroup: FormGroup | undefined;
     /**
-     * @summary Form group for the field
-     * @description Angular FormGroup instance for the field
+     * @description Angular FormControl instance for this field.
+     * @summary The FormControl that manages this field's value, validation state, and user interactions.
+     * @type {FormControl}
+     * @public
      */
-    formGroup: FormGroup | undefined;
     formControl: FormControl;
+    /**
+     * @description Dot-separated path to this field in the form structure.
+     * @summary Used to locate this field within nested form structures.
+     * @type {string}
+     * @public
+     */
     path: string;
+    /**
+     * @description The input type of this field.
+     * @summary Determines the HTML input type or component type to render.
+     * @type {PossibleInputTypes}
+     * @public
+     */
     type: PossibleInputTypes;
+    /**
+     * @description Whether the field is disabled.
+     * @summary When true, the field cannot be edited by the user.
+     * @type {boolean}
+     * @public
+     */
     disabled?: boolean;
+    /**
+     * @description Page number for multi-page forms.
+     * @summary Indicates which page this field belongs to in a multi-page form structure.
+     * @type {number}
+     * @public
+     */
     page: number;
+    /**
+     * @description Date/time format string for parsing and display.
+     * @type {string}
+     * @public
+     */
     format?: string;
+    /**
+     * @description Controls field visibility based on CRUD operations.
+     * @summary Can be a boolean or an array of operation keys where the field should be hidden.
+     * @type {boolean | CrudOperationKeys[]}
+     * @public
+     */
     hidden?: boolean | CrudOperationKeys[];
+    /**
+     * @description Maximum value or date allowed.
+     * @type {number | Date}
+     * @public
+     */
     max?: number | Date;
+    /**
+     * @description Maximum length for text input.
+     * @type {number}
+     * @public
+     */
     maxlength?: number;
+    /**
+     * @description Minimum value or date allowed.
+     * @type {number | Date}
+     * @public
+     */
     min?: number | Date;
+    /**
+     * @description Minimum length for text input.
+     * @type {number}
+     * @public
+     */
     minlength?: number;
-    pattern?: string | undefined;
+    /**
+     * @description Regex pattern for validation.
+     * @type {string | undefined}
+     * @public
+     */
+    pattern?: string | undefined;
+    /**
+     * @description Whether the field is read-only.
+     * @type {boolean}
+     * @public
+     */
     readonly?: boolean;
+    /**
+     * @description Whether the field is required.
+     * @type {boolean}
+     * @public
+     */
     required?: boolean;
+    /**
+     * @description Step value for numeric inputs.
+     * @type {number}
+     * @public
+     */
     step?: number;
+    /**
+     * @description Field name that this field's value must equal.
+     * @type {string}
+     * @public
+     */
     equals?: string;
+    /**
+     * @description Field name that this field's value must differ from.
+     * @type {string}
+     * @public
+     */
     different?: string;
+    /**
+     * @description Field name that this field's value must be less than.
+     * @type {string}
+     * @public
+     */
     lessThan?: string;
+    /**
+     * @description Field name that this field's value must be less than or equal to.
+     * @type {string}
+     * @public
+     */
     lessThanOrEqual?: string;
+    /**
+     * @description Field name that this field's value must be greater than.
+     * @type {string}
+     * @public
+     */
     greaterThan?: string;
+    /**
+     * @description Field name that this field's value must be greater than or equal to.
+     * @type {string}
+     * @public
+     */
     greaterThanOrEqual?: string;
+    /**
+     * @description Current value of the field.
+     * @summary Can be a string, number, date, or array of strings for multi-select fields.
+     * @type {string | number | Date | string[]}
+     * @public
+     */
     value: string | number | Date | string[];
+    /**
+     * @description Whether the field supports multiple values.
+     * @summary When true, the field is rendered as part of a FormArray structure.
+     * @type {boolean}
+     * @public
+     */
     multiple: boolean;
+    /**
+     * @description Flag tracking if validation error event has been dispatched.
+     * @summary Prevents duplicate validation error events from being dispatched.
+     * @type {boolean}
+     * @private
+     */
     private validationErrorEventDispatched;
     /**
-     * @summary Parent HTML element
-     * @description Reference to the parent HTML element of the field
+     * @description Reference to the parent HTML element.
+     * @summary Used for DOM manipulation and event handling.
+     * @type {HTMLElement}
+     * @protected
      */
     protected parent?: HTMLElement;
-    constructor();
+    constructor(componentName?: string);
     /**
      * @description Gets the currently active form group based on context.
      * @summary Returns the appropriate FormGroup based on whether this field supports
      * multiple values. For single-value fields, returns the main form group.
      * For multi-value fields, returns the form group at the active index from the parent FormArray.
-     *
-     * @returns {FormGroup} The currently active FormGroup for this field
-     * @memberOf CrudFieldComponent
+     * If no formGroup is set, returns the parent of the formControl.
+     * @return {FormGroup} The currently active FormGroup for this field
+     * @public
      */
     get activeFormGroup(): FormGroup;
     /**
-     * @summary String formatting function
-     * @description Provides access to the sf function for error message formatting
-     * @prop {function(string, ...string): string} sf - String formatting function
+     * @description String formatting utility function.
+     * @summary Provides access to the sf (string format) function for formatting error messages
+     * and other string templates. Used primarily for localizing and parameterizing validation messages.
+     * @type {function(string, ...string): string}
+     * @public
      */
     sf: typeof _decaf_ts_decorator_validation.stringFormat;
     /**
-     * @summary Change callback function
-     * @description Function called when the field value changes
-     * @property {function(): unknown} onChange - onChange event handler
+     * @description Callback function invoked when the field value changes.
+     * @summary Function registered by Angular's forms system through registerOnChange.
+     * Called automatically when the field's value is updated to notify the form of the change.
+     * @type {function(): unknown}
+     * @public
      */
     onChange: () => unknown;
     /**
-     * @summary Touch callback function
-     * @description Function called when the field is touched
-     * @property {function(): unknown} onTouch - onTouch event handler
+     * @description Callback function invoked when the field is touched.
+     * @summary Function registered by Angular's forms system through registerOnTouched.
+     * Called when the field is blurred or otherwise marked as touched.
+     * @type {function(): unknown}
+     * @public
      */
     onTouch: () => unknown;
     /**
-     * @summary Write value to the field
-     * @description Sets the value of the field
+     * @description Writes a value to the form field.
+     * @summary Part of Angular's ControlValueAccessor interface. Sets the field's value
+     * when the form programmatically updates it. This is called by Angular forms when
+     * the model value changes.
      * @param {string} obj - The value to be set
+     * @return {void}
+     * @public
      */
     writeValue(obj: string): void;
     /**
-     * @summary Register change callback
-     * @description Registers a function to be called when the field value changes
+     * @description Registers the onChange callback function.
+     * @summary Part of Angular's ControlValueAccessor interface. Stores the function
+     * that Angular forms provides to be called when the field value changes.
      * @param {function(): unknown} fn - The function to be called on change
+     * @return {void}
+     * @public
      */
     registerOnChange(fn: () => unknown): void;
     /**
-     * @summary Register touch callback
-     * @description Registers a function to be called when the field is touched
+     * @description Registers the onTouched callback function.
+     * @summary Part of Angular's ControlValueAccessor interface. Stores the function
+     * that Angular forms provides to be called when the field is touched/blurred.
      * @param {function(): unknown} fn - The function to be called on touch
+     * @return {void}
+     * @public
      */
     registerOnTouched(fn: () => unknown): void;
     /**
-     * @summary Set disabled state
-     * @description Sets the disabled state of the field
+     * @description Sets the disabled state of the field.
+     * @summary Part of Angular's ControlValueAccessor interface. Called by Angular forms
+     * when the disabled state of the control changes.
      * @param {boolean} isDisabled - Whether the field should be disabled
+     * @return {void}
+     * @public
      */
     setDisabledState?(isDisabled: boolean): void;
     /**
-     * @summary After view initialization logic
-     * @description Performs necessary setup after the view has been initialized
-     * @returns {HTMLElement} The parent element of the field
+     * @description Performs setup after the view has been initialized.
+     * @summary Retrieves and returns the parent HTML element based on the current CRUD operation.
+     * For READ and DELETE operations, returns the immediate parent element. For CREATE and UPDATE
+     * operations, finds the parent div element and registers it with the form service.
+     * @return {HTMLElement} The parent element of the field
+     * @throws {RenderingError} If unable to retrieve parent form element for CREATE/UPDATE operations
+     * @throws {InternalError} If the operation is invalid
+     * @public
      */
     afterViewInit(): HTMLElement;
+    /**
+     * @description Angular lifecycle hook for detecting input property changes.
+     * @summary Overrides the parent ngOnChanges to handle changes to activeFormGroupIndex and value.
+     * When activeFormGroupIndex changes in a multiple field scenario, updates the active form group
+     * and form control. When value changes, updates the form control value. Delegates to parent
+     * implementation for initial change detection.
+     * @param {SimpleChanges} changes - Object containing the changed properties
+     * @return {void}
+     * @public
+     */
     ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @description Cleanup logic when the component is destroyed.
+     * @summary Unregisters the form group from the form service to prevent memory leaks
+     * and clean up form references.
+     * @return {void}
+     * @public
+     */
     onDestroy(): void;
+    /**
+     * @description Sets the value of the form control.
+     * @summary Updates the form control's value and triggers validation. This is used
+     * when the value needs to be programmatically updated from outside the form control.
+     * @param {unknown} value - The value to set
+     * @return {void}
+     * @public
+     */
     setValue(value: unknown): void;
+    /**
+     * @description Retrieves validation error messages for the field.
+     * @summary Checks the form control for validation errors and returns formatted error messages.
+     * If errors exist, dispatches a validation error event to parent accordion components.
+     * Error messages are translated and formatted with relevant field properties.
+     * @param {HTMLElement} parent - The parent HTML element used to find accordion components
+     * @return {string | void} Formatted error message string, or void if no errors
+     * @public
+     */
     getErrors(parent: HTMLElement): string | void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDecafFormFieldDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDecafFormFieldDirective, never, never, { "activeFormGroupIndex": { "alias": "activeFormGroupIndex"; "required": false; }; "parentComponent": { "alias": "parentComponent"; "required": false; }; "optionsMapper": { "alias": "optionsMapper"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormFieldDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormFieldDirective, never, never, { "activeFormGroupIndex": { "alias": "activeFormGroupIndex"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "parentComponent": { "alias": "parentComponent"; "required": false; }; "optionsMapper": { "alias": "optionsMapper"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
- * @module module:lib/engine/NgxDecafFormService
+ * @module lib/engine/NgxFormService
  * @description Utilities to create and manage Angular forms in Decaf components.
- * @summary The NgxDecafFormService exposes helpers to build FormGroup/FormArray instances
+ * @summary The NgxFormService exposes helpers to build FormGroup/FormArray instances
  * from component metadata or UI model definitions, register forms in a registry,
  * validate and extract form data, and create controls with appropriate validators.
- *
- * @link {@link NgxDecafFormService}
  */
 
 /**
  * @description Service for managing Angular forms and form controls.
- * @summary The NgxDecafFormService 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.
+ * @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.
@@ -1603,18 +2169,17 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
  *   { inputs: { name: 'username', type: 'text', required: true } },
  *   { inputs: { name: 'password', type: 'password', minLength: 8 } }
  * ];
- * const form = NgxDecafFormService.createFormFromComponents('loginForm', components, true);
+ * const form = NgxFormService.createFormFromComponents('loginForm', components, true);
  *
  * // Validating fields
- * NgxDecafFormService.validateFields(form);
+ * NgxFormService.validateFields(form);
  *
  * // Getting form data
- * const formData = NgxDecafFormService.getFormData(form);
- *
+ * const formData = NgxFormService.getFormData(form);
  * @mermaid
  * sequenceDiagram
  *   participant C as Component
- *   participant NFS as NgxDecafFormService
+ *   participant NFS as NgxFormService
  *   participant AF as Angular Forms
  *   C->>NFS: createFormFromComponents()
  *   NFS->>AF: new FormGroup()
@@ -1627,51 +2192,47 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
  *   NFS->>AF: Get control values
  *   NFS-->>C: Return form data
  */
-declare class NgxDecafFormService {
+declare class NgxFormService {
     /**
      * @description WeakMap that stores control properties for form controls.
      * @summary A WeakMap that associates AbstractControl instances with their corresponding FieldProperties.
      * This allows the service to track metadata for form controls without creating memory leaks.
-     *
      * @type {WeakMap<AbstractControl, FieldProperties>}
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     private static controls;
     /**
      * @description Registry of form groups indexed by their unique identifiers.
      * @summary A Map that stores FormGroup instances with their unique string identifiers.
      * This allows global access to registered forms throughout the application.
-     *
      * @type {Map<string, FormGroup>}
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     private static formRegistry;
     /**
      * @description Creates a new form group or form array with the specified identifier.
-     * @summary Generates a FormGroup or FormArray based on the provided properties. If pages are specified
-     * and greater than 1, creates a FormArray; otherwise creates a FormGroup. The form can optionally
-     * be registered in the global form registry for later access throughout the application.
-     *
+     * @summary Generates a FormGroup or FormArray based on the provided parameters. If formArray is true,
+     * creates a FormArray; otherwise creates a FormGroup. The form can optionally be registered in the
+     * global form registry for later access throughout the application. If a form with the given id
+     * already exists in the registry, it returns the existing form.
      * @param {string} id - Unique identifier for the form
-     * @param {Partial<IComponentInput>} [props={}] - Configuration properties for the form
+     * @param {boolean} [formArray=false] - Whether to create a FormArray instead of a FormGroup
      * @param {boolean} [registry=true] - Whether to register the form in the global registry
-     * @return {FormGroup | FormArray} The created form instance
-     *
+     * @return {FormGroup | FormArray} The created or existing form instance
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FR as Form Registry
      *   participant AF as Angular Forms
-     *
-     *   C->>NFS: createForm(id, props, registry)
+     *   C->>NFS: createForm(id, formArray, registry)
      *   NFS->>FR: Check if form exists
-     *   alt Form doesn't exist
-     *     alt props.pages > 1
+     *   alt Form exists
+     *     FR-->>NFS: Return existing form
+     *   else Form doesn't exist
+     *     alt formArray is true
      *       NFS->>AF: new FormArray([])
      *     else
      *       NFS->>AF: new FormGroup({})
@@ -1681,9 +2242,7 @@ declare class NgxDecafFormService {
      *     end
      *   end
      *   NFS-->>C: Return FormGroup | FormArray
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createForm(id: string, formArray?: boolean, registry?: boolean): FormGroup | FormArray;
     /**
@@ -1691,28 +2250,31 @@ declare class NgxDecafFormService {
      * @summary Registers a FormGroup or FormArray with a unique identifier for global access throughout
      * the application. This allows forms to be retrieved and managed centrally. Throws an error if
      * the identifier is already in use to prevent conflicts.
-     *
      * @param {string} formId - The unique identifier for the form
      * @param {FormParent} formGroup - The FormGroup or FormArray to be registered
      * @return {void}
      * @throws {Error} If a FormGroup with the given id is already registered
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addRegistry(formId: string, formGroup: FormParent): void;
+    /**
+     * @description Retrieves a form from the registry by its identifier.
+     * @summary Gets a FormGroup or FormArray from the registry using its unique identifier.
+     * Returns undefined if the form is not found in the registry. This method provides
+     * safe access to registered forms without throwing errors.
+     * @param {string} [id] - The unique identifier of the form to retrieve
+     * @return {FormParent | undefined} The FormGroup or FormArray if found, undefined otherwise
+     * @static
+     */
     static getOnRegistry(id?: string): FormParent | undefined;
     /**
      * @description Removes a form from the registry.
      * @summary Deletes a FormGroup or FormArray from the registry using its unique identifier.
      * This cleans up the registry and allows the identifier to be reused. The form itself
      * is not destroyed, only removed from the central registry.
-     *
      * @param {string} formId - The unique identifier of the form to be removed
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static removeRegistry(formId: string): void;
     /**
@@ -1720,20 +2282,17 @@ declare class NgxDecafFormService {
      * @summary Traverses the form group structure to find the parent group and control name for a given path.
      * Handles complex nested structures including arrays and sub-groups. Creates missing intermediate
      * groups as needed and properly configures FormArray controls for multiple value scenarios.
-     *
      * @param {FormGroup} formGroup - The root FormGroup to traverse
      * @param {string} path - The dot-separated path to the control (e.g., 'user.address.street')
      * @param {IComponentInput} componentProps - Properties defining the component configuration
      * @param {KeyValue} parentProps - Properties from the parent component for context
      * @return {FormParentGroup} A tuple containing the parent FormGroup and the control name
-     *
      * @private
      * @mermaid
      * sequenceDiagram
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FG as FormGroup
      *   participant FA as FormArray
-     *
      *   NFS->>NFS: Split path into parts
      *   loop For each path part
      *     alt Control doesn't exist
@@ -1747,95 +2306,90 @@ declare class NgxDecafFormService {
      *     NFS->>NFS: Navigate to next level
      *   end
      *   NFS-->>NFS: Return [parentGroup, controlName]
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     private static resolveParentGroup;
     /**
      * @description Retrieves component properties from a FormGroup or FormArray.
      * @summary Extracts component properties stored in the form group metadata. If a FormGroup is provided
      * and groupArrayName is specified, it will look for the FormArray within the form structure.
-     *
      * @param {FormGroup | FormArray} formGroup - The form group or form array to extract properties from
      * @param {string} [key] - Optional key to retrieve a specific property
      * @param {string} [groupArrayName] - Optional name of the group array if formGroup is not a FormArray
      * @return {Partial<FieldProperties>} The component properties or a specific property if key is provided
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getComponentPropsFromGroupArray(formGroup: FormGroup | FormArray, key?: string, groupArrayName?: string | undefined): Partial<FieldProperties>;
     /**
      * @description Adds a new group to a parent FormArray.
      * @summary Creates and adds a new FormGroup to the specified parent FormArray based on the
      * component properties stored in the parent's metadata. This is used for dynamic form arrays
-     * where new groups need to be added at runtime.
-     *
-     * @param {FormParent} parentForm - The root form group containing the parent FormArray
-     * @param {number} index - The index position where the new group should be added
-     * @return {FormGroup} The newly created and added FormGroup
-     *
+     * where new groups need to be added at runtime. Clones the control at the specified index
+     * to maintain the same structure and validators.
+     * @param {FormParent} parentForm - The FormArray or FormGroup containing the parent FormArray
+     * @param {number} [index] - The index position to clone from; defaults to last index if length > 0, otherwise 0
+     * @return {FormArray} The parent FormArray after adding the new group
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addGroupToParent(parentForm: FormParent, index?: number): FormArray;
     /**
      * @description Retrieves a FormGroup from a parent FormArray at the specified index.
      * @summary Gets a FormGroup from the specified parent FormArray. If the group doesn't exist
      * at the given index, it will create a new one using addGroupToParent.
-     *
-     * @param {FormGroup} formGroup - The root form group containing the parent FormArray
+     * @param {FormParent} formGroup - The root form group containing the parent FormArray
      * @param {string} parentName - The name of the parent FormArray to retrieve the group from
      * @param {number} [index=1] - The index of the group to retrieve
      * @return {FormGroup} The FormGroup at the specified index
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getGroupFromParent(formGroup: FormParent, parentName: string, index?: number): FormGroup;
+    /**
+     * @description Clones a form control with its validators.
+     * @summary Creates a deep copy of a FormControl, FormGroup, or FormArray, preserving
+     * validators but resetting values and state. This is useful for creating new instances
+     * of form controls with the same validation rules, particularly in dynamic FormArrays
+     * where new groups need to be added with identical structure.
+     * @param {AbstractControl} control - The control to clone (FormControl, FormGroup, or FormArray)
+     * @return {AbstractControl} A new instance of the control with the same validators
+     * @throws {Error} If the control type is not supported
+     * @static
+     */
     static cloneFormControl(control: AbstractControl): AbstractControl;
     /**
      * @description Checks if a value is unique within a FormArray group.
      * @summary Validates that the primary key value in a FormGroup is unique among all groups
      * in the parent FormArray. The uniqueness check behavior differs based on the operation type.
-     *
+     * For both CREATE and UPDATE operations, it checks that no other group in the array has the same
+     * primary key value.
      * @param {FormGroup} formGroup - The FormGroup to check for uniqueness
-     * @param {number} index - The index of the current group within the FormArray
      * @param {OperationKeys} [operation=OperationKeys.CREATE] - The type of operation being performed
+     * @param {number} [index] - The index of the current group within the FormArray
      * @return {boolean} True if the value is unique, false otherwise
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static isUniqueOnGroup(formGroup: FormGroup, operation?: OperationKeys, index?: number): boolean;
     /**
      * @description Enables all controls within a FormGroup or FormArray.
      * @summary Recursively enables all form controls within the provided FormGroup or FormArray.
      * This is useful for making all controls interactive after they have been disabled.
-     *
      * @param {FormArray | FormGroup} formGroup - The FormGroup or FormArray to enable all controls for
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static enableAllGroupControls(formGroup: FormArray | FormGroup): void;
     /**
      * @description Adds a form control to a form group based on component properties.
      * @summary Creates and configures a FormControl within the specified FormGroup using the provided
      * component properties. Handles nested paths, multiple controls (FormArrays), and control registration.
-     * This method supports complex form structures with nested groups and arrays.
-     *
-     * @param {FormGroup} formGroup - The form group to add the control to
+     * This method supports complex form structures with nested groups and arrays. It also manages
+     * page-based forms and FormArray indexing.
+     * @param {FormParent} formGroup - The form group or form array to add the control to
      * @param {IComponentInput} componentProps - The component properties defining the control configuration
-     * @param {KeyValue} [parentProps={}] - Properties from the parent component for context
+     * @param {Partial<IComponentInput>} [parentProps={}] - Properties from the parent component for context
      * @param {number} [index=0] - The index for multiple controls in FormArrays
-     * @return {void}
-     *
+     * @return {FormParent} The updated form parent (FormGroup or FormArray)
      * @private
      * @static
-     * @memberOf NgxDecafFormService
      */
     private static addFormControl;
     /**
@@ -1843,18 +2397,15 @@ declare class NgxDecafFormService {
      * @summary Finds and returns an AbstractControl from a registered form using the form id and optional path.
      * This method provides centralized access to form controls across the application by leveraging
      * the form registry system.
-     *
      * @param {string} formId - The unique identifier of the form in the registry
      * @param {string} [path] - The optional dot-separated path to a specific control within the form
      * @return {AbstractControl} The requested AbstractControl (FormGroup, FormArray, or FormControl)
      * @throws {Error} If the form is not found in the registry or the control is not found in the form
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FR as Form Registry
-     *
      *   C->>NFS: getControlFromForm(formId, path?)
      *   NFS->>FR: Get form by formId
      *   alt Form not found
@@ -1873,9 +2424,7 @@ declare class NgxDecafFormService {
      *       NFS-->>C: Return form
      *     end
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getControlFromForm(formId: string, path?: string): AbstractControl;
     /**
@@ -1883,18 +2432,15 @@ declare class NgxDecafFormService {
      * @summary Generates a FormGroup from an array of UIModelMetadata objects, extracting component
      * properties and creating appropriate form controls. This method is specifically designed to work
      * with the UI decorator system and provides automatic form generation from metadata.
-     *
      * @param {string} id - Unique identifier for the form
      * @param {boolean} [registry=false] - Whether to register the created form in the global registry
      * @param {UIModelMetadata[]} [children] - Array of UI model metadata objects to create controls from
      * @return {FormGroup} The created FormGroup with controls for each child metadata
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: createFormFromChildren(id, registry, children)
      *   NFS->>AF: new FormGroup({})
      *   loop For each child metadata
@@ -1905,9 +2451,7 @@ declare class NgxDecafFormService {
      *     NFS->>NFS: addRegistry(id, form)
      *   end
      *   NFS-->>C: Return FormGroup
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createFormFromChildren(id: string, registry?: boolean, children?: UIModelMetadata[]): FormGroup;
     /**
@@ -1915,18 +2459,15 @@ declare class NgxDecafFormService {
      * @summary Generates a FormGroup based on an array of component configurations and optionally registers it.
      * This method processes component input configurations to create appropriate form controls with
      * validation and initial values.
-     *
      * @param {string} id - The unique identifier for the form
      * @param {IComponentConfig[]} components - An array of component configurations defining the form structure
      * @param {boolean} [registry=false] - Whether to register the created form in the global registry
      * @return {FormGroup} The created FormGroup with controls for each component configuration
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: createFormFromComponents(id, components, registry)
      *   NFS->>AF: new FormGroup({})
      *   loop For each component config
@@ -1937,42 +2478,39 @@ declare class NgxDecafFormService {
      *     NFS->>NFS: addRegistry(id, form)
      *   end
      *   NFS-->>C: Return FormGroup
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static createFormFromComponents(id: string, components: IComponentConfig[], registry?: boolean): FormGroup;
     /**
      * @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.
      * Handles multi-page forms by managing FormArray structures and proper indexing. This method supports
-     * complex form scenarios including nested controls and page-based form organization.
-     *
+     * complex form scenarios including nested controls and page-based form organization. It automatically
+     * creates FormArrays for forms with multiple pages and manages page indexing.
      * @param {string} id - The unique identifier of the form
      * @param {FieldProperties} componentProperties - The properties of the component to create the control from
      * @param {FieldProperties} [parentProps] - Optional parent properties for context and configuration
-     * @return {AbstractControl} The form or created control
-     *
+     * @return {FormParent} The form or created control (FormGroup or FormArray)
+     * @throws {Error} If page property is required but not provided or is invalid
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant F as Form
-     *
      *   C->>NFS: addControlFromProps(id, componentProps, parentProps?)
-     *   NFS->>NFS: createForm(id, parentProps, true)
-     *   alt Multi-page form (parentProps.pages > 1)
+     *   NFS->>NFS: createForm(id, formArray, true)
+     *   alt Multi-page form (parentProps.pages > 0)
      *     NFS->>NFS: Calculate page index
-     *     NFS->>F: Get or create FormGroup at index
+     *     alt Group doesn't exist at index
+     *       NFS->>F: Create new FormGroup at index
+     *     end
      *     NFS->>NFS: Set form to page FormGroup
      *   end
      *   alt componentProperties has path
      *     NFS->>NFS: addFormControl(form, componentProperties, parentProps)
      *   end
      *   NFS-->>C: Return form/control
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static addControlFromProps(id: string, componentProperties: FieldProperties, parentProps?: FieldProperties): FormParent;
     /**
@@ -1980,17 +2518,14 @@ declare class NgxDecafFormService {
      * @summary Extracts and processes the data from a FormGroup, handling different input types and nested form groups.
      * Performs type conversion for various HTML5 input types, validates nested controls, and manages
      * multiple control scenarios. Automatically enables all group controls after data extraction.
-     *
      * @param {FormGroup} formGroup - The FormGroup to extract data from
      * @return {Record<string, unknown>} An object containing the processed form data with proper type conversions
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FG as FormGroup
      *   participant FC as FormControl
-     *
      *   C->>NFS: getFormData(formGroup)
      *   loop For each control in formGroup
      *     alt Control is not FormControl
@@ -2014,9 +2549,7 @@ declare class NgxDecafFormService {
      *   end
      *   NFS->>NFS: enableAllGroupControls(formGroup)
      *   NFS-->>C: Return processed data object
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getFormData(formGroup: FormGroup): Record<string, unknown>;
     /**
@@ -2024,21 +2557,18 @@ declare class NgxDecafFormService {
      * @summary Recursively validates all fields in a form control or form group, marking them as touched and dirty.
      * Performs comprehensive validation including uniqueness checks for primary keys in FormArray scenarios.
      * This method ensures all validation rules are applied and form state is properly updated.
-     *
      * @param {AbstractControl} control - The control or form group to validate
      * @param {string} [pk] - Optional primary key field name for uniqueness validation
      * @param {string} [path] - The path to the control within the form for error reporting
      * @return {boolean} True if all fields are valid, false otherwise
      * @throws {Error} If no control is found at the specified path or if the control type is unknown
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FC as FormControl
      *   participant FG as FormGroup
      *   participant FA as FormArray
-     *
      *   C->>NFS: validateFields(control, pk?, path?)
      *   alt Control is FormControl
      *     NFS->>FC: markAsTouched()
@@ -2064,16 +2594,18 @@ declare class NgxDecafFormService {
      *   else Unknown control type
      *     NFS-->>C: Throw Error
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static validateFields(control: AbstractControl, pk?: string, path?: string): boolean;
     /**
      * @description Generates validators from component properties.
      * @summary Creates an array of ValidatorFn based on the supported validation keys in the component properties.
-     * @param {KeyValue} props - The component properties.
-     * @return {ValidatorFn[]} An array of validator functions.
+     * Maps each validation property to its corresponding Angular validator function using the ValidatorFactory.
+     * Only processes properties that are recognized as validation keys by the Validation utility.
+     * @param {KeyValue} props - The component properties containing validation rules
+     * @return {ValidatorFn[]} An array of validator functions
+     * @private
+     * @static
      */
     private static validatorsFromProps;
     /**
@@ -2081,18 +2613,15 @@ declare class NgxDecafFormService {
      * @summary Generates a FormControl with validators and initial configuration based on the provided
      * component properties. Handles different input types, sets initial values, and configures
      * validation rules and update modes.
-     *
      * @param {FieldProperties} props - The component properties defining the control configuration
      * @param {FieldUpdateMode} [updateMode='change'] - The update mode for the control ('change', 'blur', 'submit')
      * @return {FormControl} The created FormControl with proper configuration and validators
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant VF as ValidatorFactory
      *   participant AF as Angular Forms
-     *
      *   C->>NFS: fromProps(props, updateMode?)
      *   NFS->>NFS: validatorsFromProps(props)
      *   NFS->>VF: Create validators from props
@@ -2107,9 +2636,7 @@ declare class NgxDecafFormService {
      *   NFS->>AF: new FormControl(config)
      *   AF-->>NFS: Return FormControl
      *   NFS-->>C: Return configured FormControl
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static fromProps(props: FieldProperties, updateMode?: FieldUpdateMode): FormControl;
     /**
@@ -2117,12 +2644,9 @@ declare class NgxDecafFormService {
      * @summary Gets the FieldProperties associated with a form control from the internal WeakMap.
      * This method provides access to the original component properties that were used to create
      * the control, enabling validation, rendering, and behavior configuration.
-     *
      * @param {FormControl | FormArray | FormGroup} control - The form control to get properties for
      * @return {FieldProperties} The properties associated with the control, or empty object if not found
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getPropsFromControl(control: FormControl | FormArray | FormGroup): FieldProperties;
     /**
@@ -2130,18 +2654,15 @@ declare class NgxDecafFormService {
      * @summary Traverses up the DOM tree to find the nearest parent element with the specified tag name.
      * This is useful for finding container elements or specific parent components in the DOM hierarchy.
      * The search is case-insensitive for tag name matching.
-     *
      * @param {HTMLElement} el - The starting element to traverse from
      * @param {string} tag - The tag name to search for (case-insensitive)
      * @return {HTMLElement} The found parent element with the specified tag
      * @throws {Error} If no parent with the specified tag is found in the DOM tree
-     *
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant DOM as DOM Tree
-     *
      *   C->>NFS: getParentEl(element, tagName)
      *   loop Traverse up DOM tree
      *     NFS->>DOM: Get parentElement
@@ -2152,9 +2673,7 @@ declare class NgxDecafFormService {
      *       NFS-->>C: Throw Error
      *     end
      *   end
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static getParentEl(el: HTMLElement, tag: string): HTMLElement;
     /**
@@ -2162,26 +2681,31 @@ declare class NgxDecafFormService {
      * @summary Associates a form control with its component properties for later retrieval.
      * This enables the service to maintain metadata about controls without creating memory leaks,
      * as WeakMap automatically cleans up references when controls are garbage collected.
-     *
      * @param {AbstractControl} control - The control to register (FormControl, FormGroup, or FormArray)
      * @param {FieldProperties} props - The properties to associate with the control
      * @return {void}
-     *
      * @static
-     * @memberOf NgxDecafFormService
      */
     static register(control: AbstractControl, props: FieldProperties): void;
     /**
-     * @description Unregisters a control.
+     * @description Unregisters a control from the internal WeakMap.
      * @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.
+     * This cleans up the metadata tracking for the control and frees up memory. Returns
+     * true if the control was found and removed, false if it was not in the registry.
+     * @param {AbstractControl} control - The control to unregister (FormControl, FormGroup, or FormArray)
+     * @return {boolean} True if the control was successfully unregistered, false otherwise
+     * @static
      */
     static unregister(control: AbstractControl): boolean;
     /**
-     * @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.
+     * @description Resets a form group or form control.
+     * @summary Recursively resets all controls in a form group or a single form control, clearing values,
+     * errors, and marking them as pristine and untouched. For FormControls, it sets the value to empty
+     * string (except for checkbox types) and clears validation errors. For FormGroups, it recursively
+     * resets all child controls.
+     * @param {FormGroup | FormControl} formGroup - The form group or form control to reset
+     * @return {void}
+     * @static
      */
     static reset(formGroup: FormGroup | FormControl): void;
 }
@@ -2199,114 +2723,589 @@ declare abstract class NgxEventHandler<PAYLOAD> extends LoggedClass {
     abstract handle(evt: IBaseCustomEvent | CustomEvent<PAYLOAD>): Promise<unknown>;
 }
 
-declare abstract class NgxPageDirective extends NgxDecafComponentDirective {
-    protected localeRoot?: string | undefined;
-    protected hasMenu: boolean;
+/**
+ * @module lib/engine/NgxPageDirective
+ * @description Base page component for Decaf Angular applications.
+ * @summary Provides a page-level base class (NgxPageDirective) that extends NgxComponentDirective and
+ * offers page-focused utilities such as menu management, title handling and router event hooks.
+ * @link {@link NgxPageDirective}
+ */
+
+/**
+ * @description Base directive for page-level components in Decaf Angular applications.
+ * @summary Abstract directive that provides foundational functionality for page components.
+ * Extends NgxComponentDirective to add page-specific features including menu management,
+ * page title handling, and Ionic lifecycle hooks. This directive serves as the base class for
+ * all page-level components, providing consistent behavior for navigation, routing, and UI state.
+ * @class NgxPageDirective
+ * @extends {NgxComponentDirective}
+ * @memberOf module:lib/engine/NgxPageDirective
+ */
+declare abstract class NgxPageDirective extends NgxComponentDirective implements AfterViewInit {
+    /**
+     * @description Page title text for the current view.
+     * @summary Stores the title text to be displayed for this page. This can be set dynamically
+     * based on the current route or menu configuration and is used to update the browser's
+     * title bar or page header.
+     * @type {string}
+     * @default ''
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
     title: string;
+    /**
+     * @description Menu items array for page navigation.
+     * @summary Contains the collection of menu items available for this page. Each menu item
+     * defines a navigation option with properties like label, URL, icon, and visibility settings.
+     * This array is used to construct the application's navigation menu and can be filtered or
+     * customized per page.
+     * @protected
+     * @type {IMenuItem[]}
+     * @default []
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
     protected menu: IMenuItem[];
+    /**
+     * @description Angular Title service for browser title management.
+     * @summary Injected service that provides control over the browser's document title.
+     * Used to dynamically set the page title based on the current route or active menu item,
+     * improving SEO and user experience.
+     * @protected
+     * @type {Title}
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
     protected titleService: Title;
-    constructor(localeRoot?: string | undefined, hasMenu?: boolean);
-    ionViewWillEnter(): Promise<void>;
-    protected setPageTitle(route: string, menu?: IMenuItem[]): void;
+    /**
+     * @description Flag indicating whether the page should display the navigation menu.
+     * @summary Controls the visibility and availability of the application menu for this page.
+     * When set to true, the menu is enabled and accessible to users. When false, the menu
+     * is disabled, which is useful for pages like login screens or standalone views that
+     * should not show navigation options.
+     * @protected
+     * @type {boolean}
+     * @default true
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    protected hasMenu: boolean;
+    /**
+     * @description Constructor for NgxPageDirective.
+     * @summary Initializes the page directive with optional locale root and menu visibility settings.
+     * Calls the parent NgxComponentDirective constructor to set up base functionality including
+     * logging, localization, and component identification.
+     * @param {string} [localeRoot] - Optional locale root key for internationalization
+     * @param {boolean} [hasMenu=true] - Whether this page should display the menu
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    constructor(localeRoot?: string, hasMenu?: boolean);
+    /**
+     * @description Ionic lifecycle hook called when the page is about to enter view.
+     * @summary This lifecycle hook is triggered just before the page becomes visible to the user.
+     * It enables or disables the application menu based on the hasMenu property, allowing pages
+     * to control whether the menu should be accessible. This is useful for pages like login screens
+     * where the menu should be hidden.
+     * @return {Promise<void>} A promise that resolves when menu state is updated
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    ngAfterViewInit(): Promise<void>;
+    /**
+     * @description Sets the browser page title based on the current route.
+     * @summary Updates the browser's document title by finding the active menu item that matches
+     * the provided route. If a matching menu item is found, it sets the title using the format
+     * "Decaf For Angular - {menu title or label}". This improves SEO and provides clear context
+     * to users about the current page. If a custom menu array is provided, it uses that instead
+     * of the component's default menu.
+     * @protected
+     * @param {string} route - The current route path to match against menu items
+     * @param {IMenuItem[]} [menu] - Optional custom menu array to search (uses this.menu if not provided)
+     * @return {void}
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    protected setPageTitle(route?: string, menu?: IMenuItem[]): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxPageDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPageDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-/**
- * @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~IBaseCustomEvent~ listenEvent
- *     +ngOnInit()
- *     +ngOnDestroy()
- *     +ngOnChanges(changes)
- *     -createComponent(tag, globals)
- *     -subscribeEvents()
- *     -unsubscribeEvents()
- *   }
- *   ComponentRendererComponent --|> OnInit
- *   ComponentRendererComponent --|> OnChanges
- *   ComponentRendererComponent --|> OnDestroy
- *
- * @implements {OnInit}
- * @implements {OnChanges}
- * @implements {OnDestroy}
- */
-declare class ComponentRendererComponent implements OnInit, OnDestroy {
+declare abstract class NgxModelPageDirective extends NgxPageDirective {
     /**
-     * @description Reference to the container where the dynamic component will be rendered.
-     * @summary This ViewContainerRef provides the container where the dynamically created
-     * component will be inserted into the DOM. It's marked as static to ensure it's available
-     * during the ngOnInit lifecycle hook when the component is created.
+     * @description Primary key value of the current model instance.
+     * @summary Specifies the primary key value for the current model record being displayed or
+     * manipulated by the component. This identifier is used for CRUD operations that target
+     * specific records, such as read, update, and delete operations. The value corresponds to
+     * the field designated as the primary key in the model definition.
+     * @type {EventIds}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    modelId: EventIds;
+    /**
+     * @description The CRUD operation type to be performed on the model.
+     * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
+     * should perform. This determines the UI behavior, form configuration, and available actions.
+     * The operation affects form validation, field availability, and the specific repository
+     * method called during data submission.
      *
-     * @type {ViewContainerRef}
-     * @memberOf ComponentRendererComponent
+     * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+     * @default OperationKeys.READ
+     *  @memberOf ModelPage
      */
-    vcr: ViewContainerRef;
+    operation: OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE;
     /**
-     * @description The tag name of the component to be dynamically rendered.
-     * @summary This input property specifies which component should be rendered by providing
-     * its registered tag name. The tag must correspond to a component that has been registered
-     * with the NgxRenderingEngine. This is a required input as it determines which component
-     * to create.
+     * @description The name of the model class to operate on.
+     * @summary Identifies which registered model class this component should work with.
+     * This name is used to resolve the model constructor from the global model registry
+     * and instantiate the appropriate repository for data operations. The model must
+     * be properly registered using the @Model decorator for resolution to work.
      *
      * @type {string}
-     * @required
-     * @memberOf ComponentRendererComponent
+     *  @memberOf ModelPage
+     */
+    modelName: string;
+    /**
+     * @description Array of operations allowed for the current model instance.
+     * @summary Dynamically determined list of operations that are permitted based on
+     * the current context and model state. Initially contains CREATE and READ operations,
+     * with UPDATE and DELETE added when a modelId is present. This controls which
+     * action buttons are displayed and which operations are accessible to the user.
+     *
+     * @type {OperationKeys[]}
+     * @default [OperationKeys.CREATE, OperationKeys.READ]
+     * @memberOf ModelPage
+     */
+    allowedOperations: OperationKeys[];
+    /**
+   * @description Current model data loaded from the repository.
+   * @summary Stores the raw data object representing the current model instance retrieved
+   * from the repository. This property holds the actual data values for the model being
+   * displayed or edited, and is set to undefined when no data is available or when an
+   * error occurs during data loading.
+   * @type {KeyValue | undefined}
+   * @default undefined
+   * @memberOf NgxModelPageDirective
+   */
+    modelData: KeyValue | undefined;
+    /**
+     * @description Error message from failed operations.
+     * @summary Stores error messages that occur during repository operations such as
+     * data loading, creation, update, or deletion. When set, this indicates an error
+     * state that should be displayed to the user. Cleared on successful operations.
+     * @type {string | undefined}
+     * @default undefined
+     * @memberOf NgxModelPageDirective
      */
-    tag: string;
+    errorMessage: string | undefined;
     /**
-     * @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.
+     * @description Lazy-initialized repository getter with model resolution.
+     * @summary Creates and returns a repository instance for the specified model name.
+     * Resolves the model constructor from the global registry, instantiates the repository,
+     * and creates a new model instance. Throws an InternalError if the model is not
+     * properly registered with the @Model decorator.
      *
-     * @type {Record<string, unknown>}
-     * @default {}
-     * @memberOf ComponentRendererComponent
+     * @return {DecafRepository<Model>} The repository instance for the current model
+     *
+     * @throws {InternalError} When the model is not found in the registry
      */
-    globals: Record<string, unknown>;
+    protected get repository(): DecafRepository<Model>;
     /**
-     * @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.
+     * @description Angular lifecycle hook for component initialization.
+     * @summary Initializes the component by setting up the logger instance using the getLogger
+     * utility. This ensures that logging is available throughout the component's lifecycle
+     * for error tracking and debugging purposes.
+     */
+    ionViewWillEnter(): Promise<void>;
+    /**
+     * @description Refreshes the component data by loading the specified model instance.
+     * @summary Loads model data from the repository based on the current operation type.
+     * For READ, UPDATE, and DELETE operations, fetches the existing model data using
+     * the provided unique identifier. Handles errors gracefully by logging them through
+     * the logger instance.
      *
-     * @type {EnvironmentInjector}
-     * @memberOf ComponentRendererComponent
+     * @param {string} [uid] - The unique identifier of the model to load; defaults to modelId
      */
-    injector: EnvironmentInjector;
+    refresh(uid?: EventIds): Promise<void>;
     /**
-     * @description Reference to the dynamically created component.
-     * @summary This property holds a reference to the ComponentRef of the dynamically created
-     * component. It's used to interact with the component instance, subscribe to its events,
-     * and properly destroy it when the renderer is destroyed.
+     * @description Generic event handler for component events.
+     * @summary Processes incoming events from child components and routes them to appropriate
+     * handlers based on the event name. Currently handles SUBMIT events by delegating to
+     * the handleSubmit method. This centralized event handling approach allows for easy
+     * extension and consistent event processing.
      *
-     * @type {ComponentRef<unknown>}
-     * @memberOf ComponentRendererComponent
+     * @param {IBaseCustomEvent} event - The event object containing event data and metadata
      */
-    component: ComponentRef<unknown>;
+    handleEvent(event: IBaseCustomEvent): Promise<void>;
+    /**
+     * @description Handles form submission events for CRUD operations.
+     * @summary Processes form submission by executing the appropriate repository operation
+     * based on the current operation type. Handles CREATE, UPDATE, and DELETE operations,
+     * processes the form data, refreshes the repository cache, navigates back to the previous
+     * page, and displays success notifications. Comprehensive error handling ensures robust
+     * operation with detailed logging.
+     *
+     * @param {IBaseCustomEvent} event - The submit event containing form data
+     * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
+     */
+    handleSubmit(event: IBaseCustomEvent): Promise<IModelPageCustomEvent | void>;
+    /**
+     * @description Retrieves a model instance from the repository by unique identifier.
+     * @summary Fetches a specific model instance using the repository's read method.
+     * Handles both string and numeric identifiers by automatically converting numeric
+     * strings to numbers. If no identifier is provided, logs an informational message
+     * and navigates back to the previous page. Returns undefined for missing instances.
+     *
+     * @param {string} uid - The unique identifier of the model instance to retrieve
+     * @return {Promise<Model | undefined>} Promise resolving to the model instance or undefined
+     */
+    handleGet(uid?: EventIds): Promise<Model | undefined>;
+    /**
+     * @description Parses and transforms form data for repository operations.
+     * @summary Converts raw form data into the appropriate format for repository operations.
+     * For DELETE operations, returns the primary key value (string or number). For CREATE
+     * and UPDATE operations, builds a complete model instance using the Model.build method
+     * with proper primary key assignment for updates.
+     *
+     * @param {Partial<Model>} data - The raw form data to be processed
+     * @return {Model | string | number} Processed data ready for repository operations
+     * @private
+     */
+    private parseData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxModelPageDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxModelPageDirective, never, never, { "modelId": { "alias": "modelId"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "modelName": { "alias": "modelName"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @module module:lib/engine/NgxParentComponentDirective
+ * @description Directive base for parent container components used by the rendering system.
+ * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
+ * column/row configuration and parent component wiring used by layout and container components.
+ *
+ * @link {@link NgxParentComponentDirective}
+ */
+
+/**
+ * @description Layout component for creating responsive grid layouts in Angular applications.
+ * @summary This component provides a flexible grid system that can be configured with dynamic
+ * rows and columns. It supports responsive breakpoints and can render child components within
+ * the grid structure. The component extends NgxComponentDirective to inherit common functionality
+ * and integrates with the model and component renderer systems.
+ *
+ * @class NgxParentComponentDirective
+ * @extends {NgxParentComponentDirective}
+ * @implements {OnInit}
+ */
+declare class NgxParentComponentDirective extends NgxComponentDirective implements OnInit {
+    /**
+     * @description The display name or title of the fieldset section.
+     * @summary Sets the legend or header text that appears in the accordion header. This text
+     * provides a clear label for the collapsible section, helping users understand what content
+     * is contained within. The name is displayed prominently and serves as the clickable area
+     * for expanding/collapsing the fieldset.
+     *
+     * @type {string}
+     * @default 'Child'
+     */
+    parentComponent: FormParent;
+    /**
+     * @description Array of UI model metadata for all form fields.
+     * @summary Contains the complete collection of UI model metadata that defines
+     * the structure, validation, and presentation of form fields across all pages.
+     * Each metadata object contains information about field type, validation rules,
+     * page assignment, and display properties.
+     *
+     * @type {UIModelMetadata[]}
+     */
+    children: UIModelMetadata[] | KeyValue[];
+    /**
+     * @description Number of columns or array of column definitions for the grid layout.
+     * @summary Defines the column structure of the grid. When a number is provided, it creates
+     * that many equal-width columns. When an array is provided, each element can define specific
+     * column properties or sizing. This allows for flexible grid layouts that can adapt to
+     * different content requirements.
+     *
+     * @type {(number | string[])}
+     * @default 1
+     */
+    cols: number | string[];
+    /**
+     * @description Number of rows or array of row definitions for the grid layout.
+     * @summary Defines the row structure of the grid. When a number is provided, it creates
+     * that many equal-height rows. When an array is provided, each element can define specific
+     * row properties or sizing. This provides control over vertical spacing and content organization.
+     *
+     * @type {(number | string[])}
+     * @default 1
+     */
+    rows: number | KeyValue[] | string[];
+    ngOnInit(model?: Model | string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxParentComponentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxParentComponentDirective, never, never, { "parentComponent": { "alias": "parentComponent"; "required": false; }; "children": { "alias": "children"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare abstract class NgxFormDirective extends NgxParentComponentDirective implements OnInit, IFormElement, OnDestroy, IRenderedModel {
+    crudFieldComponent: string;
+    /**
+     * @description Reactive form group associated with this fieldset.
+     * @summary The FormGroup instance that contains all form controls within this fieldset.
+     * Used for form validation, value management, and integration with Angular's reactive forms.
+     *
+     * @type {FormGroup}
+     */
+    parentFormId: string;
+    /**
+     * @description Reference to the reactive form DOM element.
+     * @summary ViewChild reference that provides direct access to the form's DOM element.
+     * This enables programmatic manipulation of the form element and access to native
+     * HTML form properties and methods when needed.
+     *
+     * @type {ElementRef}
+     */
+    component: ElementRef;
+    /**
+     * @description Field update trigger mode for form validation.
+     * @summary Determines when form field validation should be triggered. Options include
+     * 'change', 'blur', or 'submit'. This affects the user experience by controlling
+     * when validation feedback is shown to the user during form interaction.
+     *
+     * @type {FieldUpdateMode}
+     * @default 'change'
+     */
+    updateOn: FieldUpdateMode;
+    /**
+     * @description Form submission target specification.
+     * @summary Specifies where to display the response after form submission, similar
+     * to the HTML form target attribute. Options include '_self', '_blank', '_parent',
+     * '_top', or a named frame. Controls the browser behavior for form responses.
+     *
+     * @type {HTMLFormTarget}
+     * @default '_self'
+     */
+    target: HTMLFormTarget;
+    /**
+     * @description HTTP method or submission strategy for the form.
+     * @summary Defines how the form should be submitted. 'get' and 'post' correspond
+     * to standard HTTP methods for traditional form submission, while 'event' uses
+     * Angular event-driven submission for single-page application workflows.
+     *
+     * @type {'get' | 'post' | 'event'}
+     * @default 'event'
+     */
+    method: 'get' | 'post' | 'event';
+    /**
+     * @description Configuration options for the CRUD form behavior.
+     * @summary Contains various configuration settings that control form rendering,
+     * validation, and behavior. These options are merged with default settings
+     * during component initialization to customize the form's functionality.
+     *
+     * @type {ICrudFormOptions}
+     */
+    options: ICrudFormOptions;
+    /**
+     * @description Optional action identifier for form submission context.
+     * @summary Specifies a custom action name that will be included in the submit event.
+     * If not provided, defaults to the standard submit event constant. Used to
+     * distinguish between different types of form submissions within the same component.
+     *
+     * @type {string | undefined}
+     */
+    action?: string;
+    /**
+     * @description The current CRUD operation being performed.
+     * @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
+     * This is a required input that determines form behavior, validation rules, and available actions.
+     * The operation affects form state, button visibility, and submission logic.
+     *
+     * @type {CrudOperations}
+     * @required
+     */
+    operation: CrudOperations;
+    /**
+     * @description Custom event handlers for form actions.
+     * @summary A record of event handler functions keyed by event names that can be
+     * triggered during form operations. These handlers provide extensibility for
+     * custom business logic and can be invoked for various form events and actions.
+     *
+     * @type {HandlerLike}
+     */
+    handlers: HandlerLike;
+    /**
+     * @description Angular reactive FormGroup for form state management.
+     * @summary The FormGroup instance that manages all form controls, validation,
+     * and form state. This is the main interface for accessing form values and
+     * controlling form behavior. May be undefined for read-only operations.
+     *
+     * @type {FormGroup | undefined}
+     */
+    formGroup: FormParent | undefined;
+    /**
+     * @description Unique identifier for the form renderer.
+     * @summary A unique string identifier used to register and manage this form
+     * instance within the NgxFormService. This ID is also used as the HTML id
+     * attribute for the form element, enabling DOM queries and form management.
+     *
+     * @type {string}
+     */
+    rendererId: string;
+    /**
+   * @description Event emitter for form submission events.
+   * @summary Emits ICrudFormEvent objects when the form is submitted, providing
+   * form data, component information, and any associated handlers to parent
+   * components. This enables decoupled handling of form submission logic.
+   *
+   * @type {EventEmitter<ICrudFormEvent>}
+   */
+    submitEvent: EventEmitter<ICrudFormEvent>;
+    /**
+     * @description Unique identifier for the current record instance.
+     * @summary This property holds a unique string value that identifies the specific record being managed by the form.
+     * It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
+     * The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
+     * in conjunction with the primary key for CRUD operations.
+     *
+     * @type {string}
+     * @default Randomly generated 12-character string
+     */
+    allowClear: boolean;
+    protected activeFormGroupIndex: number;
+    get activeFormGroup(): FormParent;
+    /**
+    * @description Component initialization lifecycle method.
+    * @summary Initializes the component by setting up the logger, configuring form state
+    * based on the operation type, and merging configuration options. For READ and DELETE
+    * operations, the formGroup is set to undefined since these operations don't require
+    * form input. Configuration options are merged with default settings.
+    *
+    * @returns {Promise<void>}
+    */
+    ngOnInit(model?: Model | string): Promise<void>;
+    /**
+     * @description Component cleanup lifecycle method.
+     * @summary Performs cleanup operations when the component is destroyed.
+     * Unregisters the FormGroup from the NgxFormService to prevent memory leaks
+     * and ensure proper resource cleanup.
+     *
+     * @returns {void}
+     */
+    ngOnDestroy(): void;
+    getFormArrayIndex(index: number): FormParent | undefined;
+    /**
+     * @description Handles form reset or navigation back functionality.
+     * @summary Provides different reset behavior based on the current operation.
+     * For CREATE and UPDATE operations, resets the form to its initial state.
+     * For READ and DELETE operations, navigates back in the browser history
+     * since these operations don't have modifiable form data to reset.
+     *
+     * @returns {void}
+     */
+    handleReset(): void;
+    handleSubmit(event?: SubmitEvent, eventName?: string, componentName?: string): Promise<boolean | void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormDirective, never, never, { "parentFormId": { "alias": "parentFormId"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "method": { "alias": "method"; "required": false; }; "options": { "alias": "options"; "required": false; }; "action": { "alias": "action"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "handlers": { "alias": "handlers"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+}
+
+declare abstract class NgxMediaDirective extends NgxComponentDirective implements OnDestroy {
+    private destroy$;
+    private resizeSubject;
+    resize$: Observable<IWindowResizeEvent>;
+    colorScheme$: Observable<WindowColorScheme>;
+    protected zone: NgZone;
+    constructor(localeRoot?: string);
+    isDarkMode(): Promise<boolean>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMediaDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMediaDirective, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @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~IBaseCustomEvent~ listenEvent
+ *     +ngOnInit()
+ *     +ngOnDestroy()
+ *     +ngOnChanges(changes)
+ *     -createComponent(tag, globals)
+ *     -subscribeEvents()
+ *     -unsubscribeEvents()
+ *   }
+ *   ComponentRendererComponent --|> OnInit
+ *   ComponentRendererComponent --|> OnChanges
+ *   ComponentRendererComponent --|> OnDestroy
+ *
+ * @implements {OnInit}
+ * @implements {OnChanges}
+ * @implements {OnDestroy}
+ */
+declare class ComponentRendererComponent implements OnInit, OnDestroy {
+    /**
+     * @description Reference to the container where the dynamic component will be rendered.
+     * @summary This ViewContainerRef provides the container where the dynamically created
+     * component will be inserted into the DOM. It's marked as static to ensure it's available
+     * during the ngOnInit lifecycle hook when the component is created.
+     *
+     * @type {ViewContainerRef}
+     * @memberOf ComponentRendererComponent
+     */
+    vcr: ViewContainerRef;
+    /**
+     * @description The tag name of the component to be dynamically rendered.
+     * @summary This input property specifies which component should be rendered by providing
+     * its registered tag name. The tag must correspond to a component that has been registered
+     * with the NgxRenderingEngine. This is a required input as it determines which component
+     * to create.
+     *
+     * @type {string}
+     * @required
+     * @memberOf ComponentRendererComponent
+     */
+    tag: string;
+    /**
+     * @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
+     */
+    globals: Record<string, unknown>;
+    /**
+     * @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
+     */
+    injector: EnvironmentInjector;
+    /**
+     * @description Reference to the dynamically created component.
+     * @summary This property holds a reference to the ComponentRef of the dynamically created
+     * component. It's used to interact with the component instance, subscribe to its events,
+     * and properly destroy it when the renderer is destroyed.
+     *
+     * @type {ComponentRef<unknown>}
+     * @memberOf ComponentRendererComponent
+     */
+    component: ComponentRef<unknown>;
     children: KeyValue[];
     projectable: boolean;
     /**
@@ -2499,7 +3498,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
  * @module module:lib/components/crud-field/crud-field.component
  * @description CRUD field component module.
  * @summary Exposes `CrudFieldComponent`, a dynamic form field used in CRUD forms supporting
- * many input types, validation and integration with `NgxDecafFormFieldDirective` utilities.
+ * many input types, validation and integration with `NgxFormFieldDirective` utilities.
  *
  * @link {@link CrudFieldComponent}
  */
@@ -2507,7 +3506,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
 /**
  * @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 NgxDecafFormFieldDirective to inherit form handling capabilities
+ * input types and CRUD operations. It extends NgxFormFieldDirective 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
@@ -2547,7 +3546,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
  *
  * @memberOf module:for-angular
  */
-declare class CrudFieldComponent extends NgxDecafFormFieldDirective implements OnInit, OnDestroy, AfterViewInit {
+declare class CrudFieldComponent extends NgxFormFieldDirective implements OnInit, OnDestroy, AfterViewInit {
     /**
      * @description The CRUD operation being performed.
      * @summary Specifies which CRUD operation (Create, Read, Update, Delete) the field is being used for.
@@ -2748,581 +3747,285 @@ declare class CrudFieldComponent extends NgxDecafFormFieldDirective implements O
      * @description Field name for inequality validation comparison.
      * @summary Specifies another field name that this field's value must be different from for validation.
      * This is used to ensure that two fields do not contain the same value, which might be
-     * required for certain business rules or security constraints.
-     *
-     * @type {string | undefined}
-     * @memberOf CrudFieldComponent
-     */
-    different?: string;
-    /**
-     * @description Field name for less-than validation comparison.
-     * @summary Specifies another field name that this field's value must be less than for validation.
-     * This is commonly used for date ranges, numeric ranges, or other scenarios where
-     * one field must have a smaller value than another.
-     *
-     * @type {string | undefined}
-     * @memberOf CrudFieldComponent
-     */
-    lessThan?: string;
-    /**
-     * @description Field name for less-than-or-equal validation comparison.
-     * @summary Specifies another field name that this field's value must be less than or equal to
-     * for validation. This provides inclusive upper bound validation for numeric or date comparisons.
-     *
-     * @type {string | undefined}
-     * @memberOf CrudFieldComponent
-     */
-    lessThanOrEqual?: string;
-    /**
-     * @description Field name for greater-than validation comparison.
-     * @summary Specifies another field name that this field's value must be greater than for validation.
-     * This is commonly used for date ranges, numeric ranges, or other scenarios where
-     * one field must have a larger value than another.
-     *
-     * @type {string | undefined}
-     * @memberOf CrudFieldComponent
-     */
-    greaterThan?: string;
-    /**
-     * @description Field name for greater-than-or-equal validation comparison.
-     * @summary Specifies another field name that this field's value must be greater than or equal to
-     * for validation. This provides inclusive lower bound validation for numeric or date comparisons.
-     *
-     * @type {string | undefined}
-     * @memberOf CrudFieldComponent
-     */
-    greaterThanOrEqual?: string;
-    /**
-     * @description Alignment of the field content.
-     * @summary Controls the horizontal alignment of the field content.
-     * This affects how the content is positioned within the field container.
-     *
-     * @type {'start' | 'center'}
-     * @memberOf CrudFieldComponent
-     */
-    alignment?: 'start' | 'center';
-    /**
-     * @description Initial checked state for checkbox or toggle inputs.
-     * @summary For checkbox or toggle inputs, this sets the initial checked state.
-     * When true, the checkbox or toggle will be initially checked.
-     *
-     * @type {boolean}
-     * @memberOf CrudFieldComponent
-     */
-    checked?: boolean;
-    /**
-     * @description Justification of items within the field.
-     * @summary Controls how items are justified within the field container.
-     * This is particularly useful for fields with multiple elements, such as radio groups.
-     *
-     * @type {'start' | 'end' | 'space-between'}
-     * @memberOf CrudFieldComponent
-     */
-    justify?: 'start' | 'end' | 'space-between';
-    /**
-     * @description Text for the cancel button in select inputs.
-     * @summary For select inputs with a cancel button, this sets the text displayed on the cancel button.
-     * This is typically used in select dialogs to provide a way for users to dismiss the selection without making a change.
-     *
-     * @type {string}
-     * @memberOf CrudFieldComponent
-     */
-    cancelText?: string;
-    /**
-     * @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
-     */
-    interface: SelectInterface;
-    /**
-     * @description Options for select or radio inputs.
-     * @summary Provides the list of options for select or radio inputs. Each option can have a value and a label.
-     * This is used to populate the dropdown or radio group with choices.
-     *
-     * @type {CrudFieldOption[]}
-     * @memberOf CrudFieldComponent
-     */
-    options: FunctionLike | CrudFieldOption[] | KeyValue[];
-    /**
-     * @description Mode of the field.
-     * @summary Specifies the visual mode of the field, such as 'ios' or 'md'.
-     * This affects the styling and appearance of the field to match the platform style.
-     *
-     * @type {'ios' | 'md'}
-     * @memberOf CrudFieldComponent
-     */
-    mode?: 'ios' | 'md';
-    /**
-     * @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
-     */
-    spellcheck: boolean;
-    /**
-     * @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
-     */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-    /**
-     * @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
-     */
-    autocomplete: AutocompleteTypes;
-    /**
-     * @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
-     */
-    fill: 'outline' | 'solid';
-    /**
-     * @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
-     */
-    labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-    /**
-     * @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
-     */
-    updateOn: FieldUpdateMode;
-    /**
-     * @description Reference to the field component.
-     * @summary Provides a reference to the field component element, allowing direct access to its properties and methods.
-     *
-     * @type {ElementRef}
-     * @memberOf CrudFieldComponent
-     */
-    component: ElementRef;
-    /**
-     * @description Parent form group.
-     * @summary References the parent form group to which this field belongs.
-     * This is necessary for integrating the field with Angular's reactive forms.
-     *
-     * @type {FormGroup}
-     * @memberOf CrudFieldComponent
-     */
-    formGroup: FormGroup | undefined;
-    /**
-     * @description Angular FormControl instance for this field.
-     * @summary The specific FormControl instance that manages this field's state, validation,
-     * and value. This provides direct access to Angular's reactive forms functionality
-     * for this individual field within the broader form structure.
-     *
-     * @type {FormControl}
-     * @memberOf CrudFieldComponent
-     */
-    formControl: FormControl;
-    /**
-     * @description Indicates if this field supports multiple values.
-     * @summary When true, this field can handle multiple values, typically used in
-     * multi-select scenarios or when the field is part of a form array structure
-     * that allows multiple entries of the same field type.
-     *
-     * @type {boolean}
-     * @default false
-     * @memberOf CrudFieldComponent
-     */
-    multiple: boolean;
-    /**
-     * @description Unique identifier for the current record.
-     * @summary A unique identifier for the current record being displayed or manipulated.
-     * This is typically used in conjunction with the primary key for operations on specific records.
-     *
-     * @type {string | number}
-     */
-    uid: string;
-    page: number;
-    /**
-     * @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.
+     * required for certain business rules or security constraints.
      *
-     * @type {StringOrBoolean}
-     * @default true
+     * @type {string | undefined}
      * @memberOf CrudFieldComponent
      */
-    translatable: StringOrBoolean;
+    different?: string;
     /**
-     * @description Component initialization lifecycle method.
-     * @summary Initializes the field component based on the operation type and field configuration.
-     * For READ and DELETE operations, removes the form group to make fields read-only.
-     * For other operations, sets up icons, configures multi-value support if needed,
-     * and sets default values for radio buttons if no value is provided.
+     * @description Field name for less-than validation comparison.
+     * @summary Specifies another field name that this field's value must be less than for validation.
+     * This is commonly used for date ranges, numeric ranges, or other scenarios where
+     * one field must have a smaller value than another.
      *
-     * @returns {void}
+     * @type {string | undefined}
      * @memberOf CrudFieldComponent
      */
-    ngOnInit(): Promise<void>;
-    /**
-    * Returns a list of options for select or radio inputs, with their `text` property
-    * localized if it does not already include the word 'options'. The localization key
-    * is generated from the component's label, replacing 'label' with 'options'.
-    *
-    * @returns {CrudFieldOption[]} The array of parsed and localized options.
-    * @memberOf CrudFieldComponent
-    */
-    getOptions(): Promise<CrudFieldOption[]>;
+    lessThan?: string;
     /**
-     * @description Component after view initialization lifecycle method.
-     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
-     * This ensures proper initialization of read-only fields that don't require
-     * form functionality but still need view setup.
+     * @description Field name for less-than-or-equal validation comparison.
+     * @summary Specifies another field name that this field's value must be less than or equal to
+     * for validation. This provides inclusive upper bound validation for numeric or date comparisons.
      *
-     * @returns {void}
+     * @type {string | undefined}
      * @memberOf CrudFieldComponent
      */
-    ngAfterViewInit(): void;
+    lessThanOrEqual?: string;
     /**
-     * @description Component cleanup lifecycle method.
-     * @summary Performs cleanup operations for READ and DELETE operations by calling
-     * the parent onDestroy method. This ensures proper resource cleanup for
-     * read-only field components.
+     * @description Field name for greater-than validation comparison.
+     * @summary Specifies another field name that this field's value must be greater than for validation.
+     * This is commonly used for date ranges, numeric ranges, or other scenarios where
+     * one field must have a larger value than another.
      *
-     * @returns {void}
+     * @type {string | undefined}
      * @memberOf CrudFieldComponent
      */
-    ngOnDestroy(): void;
-    toggleOptionSelection(val: string, event: CheckboxCustomEvent): void;
-    isOptionChecked(value: string): boolean;
+    greaterThan?: string;
     /**
-     * @description Handles fieldset group creation events from parent fieldsets.
-     * @summary Processes events triggered when a new group needs to be added to a fieldset.
-     * Validates the current form group, checks for uniqueness if applicable, and either
-     * creates a new group or provides validation feedback. Updates the active form group
-     * and resets the field for new input after successful creation.
+     * @description Field name for greater-than-or-equal validation comparison.
+     * @summary Specifies another field name that this field's value must be greater than or equal to
+     * for validation. This provides inclusive lower bound validation for numeric or date comparisons.
      *
-     * @param {CustomEvent} event - The fieldset create group event containing group details
-     * @returns {void}
+     * @type {string | undefined}
      * @memberOf CrudFieldComponent
      */
-    handleFieldsetCreateGroupEvent(event: CustomEvent): void;
+    greaterThanOrEqual?: string;
     /**
-     * @description Handles fieldset group update events from parent fieldsets.
-     * @summary Processes events triggered when an existing group needs to be updated.
-     * Updates the active form group index and refreshes the form group and form control
-     * references to point to the group being edited.
+     * @description Alignment of the field content.
+     * @summary Controls the horizontal alignment of the field content.
+     * This affects how the content is positioned within the field container.
      *
-     * @param {CustomEvent} event - The fieldset update group event containing update details
-     * @returns {void}
+     * @type {'start' | 'center'}
      * @memberOf CrudFieldComponent
      */
-    handleFieldsetUpdateGroupEvent(event: CustomEvent): void;
+    alignment?: 'start' | 'center';
     /**
-     * @description Handles fieldset group removal events from parent fieldsets.
-     * @summary Processes events triggered when a group needs to be removed from a fieldset.
-     * Removes the specified group from the form array, updates the active form group index,
-     * and refreshes the form references. Dispatches a confirmation event back to the component.
+     * @description Initial checked state for checkbox or toggle inputs.
+     * @summary For checkbox or toggle inputs, this sets the initial checked state.
+     * When true, the checkbox or toggle will be initially checked.
      *
-     * @param {CustomEvent} event - The fieldset remove group event containing removal details
-     * @returns {void}
+     * @type {boolean}
      * @memberOf CrudFieldComponent
      */
-    handleFieldsetRemoveGroupEvent(event: CustomEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CrudFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "className": { "alias": "className"; "required": false; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "page": { "alias": "page"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * @module module:lib/engine/NgxParentComponentDirective
- * @description Directive base for parent container components used by the rendering system.
- * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
- * column/row configuration and parent component wiring used by layout and container components.
- *
- * @link {@link NgxParentComponentDirective}
- */
-
-/**
- * @description Layout component for creating responsive grid layouts in Angular applications.
- * @summary This component provides a flexible grid system that can be configured with dynamic
- * rows and columns. It supports responsive breakpoints and can render child components within
- * the grid structure. The component extends NgxDecafComponentDirective to inherit common functionality
- * and integrates with the model and component renderer systems.
- *
- * @class NgxParentComponentDirective
- * @extends {NgxParentComponentDirective}
- * @implements {OnInit}
- * @memberOf NgxParentComponentDirective
- */
-declare class NgxParentComponentDirective extends NgxDecafComponentDirective implements OnInit {
+    checked?: boolean;
     /**
-     * @description The display name or title of the fieldset section.
-     * @summary Sets the legend or header text that appears in the accordion header. This text
-     * provides a clear label for the collapsible section, helping users understand what content
-     * is contained within. The name is displayed prominently and serves as the clickable area
-     * for expanding/collapsing the fieldset.
+     * @description Justification of items within the field.
+     * @summary Controls how items are justified within the field container.
+     * This is particularly useful for fields with multiple elements, such as radio groups.
      *
-     * @type {string}
-     * @default 'Child'
-     * @memberOf FieldsetComponent
+     * @type {'start' | 'end' | 'space-between'}
+     * @memberOf CrudFieldComponent
      */
-    parentComponent: FormParent;
+    justify?: 'start' | 'end' | 'space-between';
     /**
-     * @description Array of UI model metadata for all form fields.
-     * @summary Contains the complete collection of UI model metadata that defines
-     * the structure, validation, and presentation of form fields across all pages.
-     * Each metadata object contains information about field type, validation rules,
-     * page assignment, and display properties.
+     * @description Text for the cancel button in select inputs.
+     * @summary For select inputs with a cancel button, this sets the text displayed on the cancel button.
+     * This is typically used in select dialogs to provide a way for users to dismiss the selection without making a change.
      *
-     * @type {UIModelMetadata[]}
-     * @memberOf NgxParentComponentDirective
+     * @type {string}
+     * @memberOf CrudFieldComponent
      */
-    children: UIModelMetadata[] | KeyValue[];
+    cancelText?: string;
     /**
-     * @description Number of columns or array of column definitions for the grid layout.
-     * @summary Defines the column structure of the grid. When a number is provided, it creates
-     * that many equal-width columns. When an array is provided, each element can define specific
-     * column properties or sizing. This allows for flexible grid layouts that can adapt to
-     * different content requirements.
+     * @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 {(number | string[])}
-     * @default 1
-     * @memberOf NgxParentComponentDirective
+     * @type {SelectInterface}
+     * @memberOf CrudFieldComponent
      */
-    cols: number | string[];
+    interface: SelectInterface;
     /**
-     * @description Number of rows or array of row definitions for the grid layout.
-     * @summary Defines the row structure of the grid. When a number is provided, it creates
-     * that many equal-height rows. When an array is provided, each element can define specific
-     * row properties or sizing. This provides control over vertical spacing and content organization.
+     * @description Options for select or radio inputs.
+     * @summary Provides the list of options for select or radio inputs. Each option can have a value and a label.
+     * This is used to populate the dropdown or radio group with choices.
      *
-     * @type {(number | string[])}
-     * @default 1
-     * @memberOf NgxParentComponentDirective
+     * @type {CrudFieldOption[]}
+     * @memberOf CrudFieldComponent
      */
-    rows: number | KeyValue[] | string[];
-    ngOnInit(model?: Model | string): Promise<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxParentComponentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxParentComponentDirective, never, never, { "parentComponent": { "alias": "parentComponent"; "required": false; }; "children": { "alias": "children"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare abstract class NgxFormDirective extends NgxParentComponentDirective implements OnInit, IFormElement, OnDestroy, IRenderedModel {
-    crudFieldComponent: string;
+    options: FunctionLike | CrudFieldOption[] | KeyValue[];
     /**
-     * @description Reactive form group associated with this fieldset.
-     * @summary The FormGroup instance that contains all form controls within this fieldset.
-     * Used for form validation, value management, and integration with Angular's reactive forms.
+     * @description Mode of the field.
+     * @summary Specifies the visual mode of the field, such as 'ios' or 'md'.
+     * This affects the styling and appearance of the field to match the platform style.
      *
-     * @type {FormGroup}
-     * @memberOf CrudFormComponent
+     * @type {'ios' | 'md'}
+     * @memberOf CrudFieldComponent
      */
-    parentFormId: string;
+    mode?: 'ios' | 'md';
     /**
-     * @description Reference to the reactive form DOM element.
-     * @summary ViewChild reference that provides direct access to the form's DOM element.
-     * This enables programmatic manipulation of the form element and access to native
-     * HTML form properties and methods when needed.
+     * @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 {ElementRef}
-     * @memberOf CrudFormComponent
+     * @type {boolean}
+     * @default false
+     * @memberOf CrudFieldComponent
      */
-    component: ElementRef;
+    spellcheck: boolean;
     /**
-     * @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.
+     * @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.
      *
-     * @private
-     * @type {Location}
-     * @memberOf CrudFormComponent
+     * @type {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
+     * @default 'none'
+     * @memberOf CrudFieldComponent
      */
-    private location;
+    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     /**
-     * @description Field update trigger mode for form validation.
-     * @summary Determines when form field validation should be triggered. Options include
-     * 'change', 'blur', or 'submit'. This affects the user experience by controlling
-     * when validation feedback is shown to the user during form interaction.
+     * @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 {FieldUpdateMode}
-     * @default 'change'
-     * @memberOf CrudFormComponent
+     * @type {AutocompleteTypes}
+     * @default 'off'
+     * @memberOf CrudFieldComponent
      */
-    updateOn: FieldUpdateMode;
+    autocomplete: AutocompleteTypes;
     /**
-     * @description Form submission target specification.
-     * @summary Specifies where to display the response after form submission, similar
-     * to the HTML form target attribute. Options include '_self', '_blank', '_parent',
-     * '_top', or a named frame. Controls the browser behavior for form responses.
+     * @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 {HTMLFormTarget}
-     * @default '_self'
-     * @memberOf CrudFormComponent
+     * @type {'outline' | 'solid'}
+     * @default 'outline'
+     * @memberOf CrudFieldComponent
      */
-    target: HTMLFormTarget;
+    fill: 'outline' | 'solid';
     /**
-     * @description HTTP method or submission strategy for the form.
-     * @summary Defines how the form should be submitted. 'get' and 'post' correspond
-     * to standard HTTP methods for traditional form submission, while 'event' uses
-     * Angular event-driven submission for single-page application workflows.
+     * @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 {'get' | 'post' | 'event'}
-     * @default 'event'
-     * @memberOf CrudFormComponent
+     * @type {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
+     * @default 'floating'
+     * @memberOf CrudFieldComponent
      */
-    method: 'get' | 'post' | 'event';
+    labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
     /**
-     * @description Configuration options for the CRUD form behavior.
-     * @summary Contains various configuration settings that control form rendering,
-     * validation, and behavior. These options are merged with default settings
-     * during component initialization to customize the form's functionality.
+     * @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 {ICrudFormOptions}
-     * @memberOf CrudFormComponent
+     * @type {FieldUpdateMode}
+     * @default 'change'
+     * @memberOf CrudFieldComponent
      */
-    options: ICrudFormOptions;
+    updateOn: FieldUpdateMode;
     /**
-     * @description Optional action identifier for form submission context.
-     * @summary Specifies a custom action name that will be included in the submit event.
-     * If not provided, defaults to the standard submit event constant. Used to
-     * distinguish between different types of form submissions within the same component.
+     * @description Reference to the field component.
+     * @summary Provides a reference to the field component element, allowing direct access to its properties and methods.
      *
-     * @type {string | undefined}
-     * @memberOf CrudFormComponent
+     * @type {ElementRef}
+     * @memberOf CrudFieldComponent
      */
-    action?: string;
+    component: ElementRef;
     /**
-     * @description The current CRUD operation being performed.
-     * @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
-     * This is a required input that determines form behavior, validation rules, and available actions.
-     * The operation affects form state, button visibility, and submission logic.
+     * @description Parent form group.
+     * @summary References the parent form group to which this field belongs.
+     * This is necessary for integrating the field with Angular's reactive forms.
      *
-     * @type {CrudOperations}
-     * @required
-     * @memberOf CrudFormComponent
+     * @type {FormGroup}
+     * @memberOf CrudFieldComponent
      */
-    operation: CrudOperations;
+    formGroup: FormGroup | undefined;
     /**
-     * @description Custom event handlers for form actions.
-     * @summary A record of event handler functions keyed by event names that can be
-     * triggered during form operations. These handlers provide extensibility for
-     * custom business logic and can be invoked for various form events and actions.
+     * @description Angular FormControl instance for this field.
+     * @summary The specific FormControl instance that manages this field's state, validation,
+     * and value. This provides direct access to Angular's reactive forms functionality
+     * for this individual field within the broader form structure.
      *
-     * @type {HandlerLike}
-     * @memberOf CrudFormComponent
+     * @type {FormControl}
+     * @memberOf CrudFieldComponent
      */
-    handlers: HandlerLike;
+    formControl: FormControl;
     /**
-     * @description Angular reactive FormGroup for form state management.
-     * @summary The FormGroup instance that manages all form controls, validation,
-     * and form state. This is the main interface for accessing form values and
-     * controlling form behavior. May be undefined for read-only operations.
+     * @description Indicates if this field supports multiple values.
+     * @summary When true, this field can handle multiple values, typically used in
+     * multi-select scenarios or when the field is part of a form array structure
+     * that allows multiple entries of the same field type.
      *
-     * @type {FormGroup | undefined}
-     * @memberOf CrudFormComponent
+     * @type {boolean}
+     * @default false
+     * @memberOf CrudFieldComponent
      */
-    formGroup: FormParent | undefined;
+    multiple: boolean;
     /**
-     * @description Unique identifier for the form renderer.
-     * @summary A unique string identifier used to register and manage this form
-     * instance within the NgxDecafFormService. This ID is also used as the HTML id
-     * attribute for the form element, enabling DOM queries and form management.
+     * @description Unique identifier for the current record.
+     * @summary A unique identifier for the current record being displayed or manipulated.
+     * This is typically used in conjunction with the primary key for operations on specific records.
      *
-     * @type {string}
-     * @memberOf CrudFormComponent
+     * @type {string | number}
      */
-    rendererId: string;
+    uid: string;
+    page: number;
     /**
-   * @description Event emitter for form submission events.
-   * @summary Emits ICrudFormEvent objects when the form is submitted, providing
-   * form data, component information, and any associated handlers to parent
-   * components. This enables decoupled handling of form submission logic.
-   *
-   * @type {EventEmitter<ICrudFormEvent>}
-   * @memberOf CrudFormComponent
-   */
-    submitEvent: EventEmitter<ICrudFormEvent>;
+     * @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
+     */
+    translatable: StringOrBoolean;
     /**
-     * @description Unique identifier for the current record instance.
-     * @summary This property holds a unique string value that identifies the specific record being managed by the form.
-     * It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
-     * The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
-     * in conjunction with the primary key for CRUD operations.
+     * @description Component initialization lifecycle method.
+     * @summary Initializes the field component based on the operation type and field configuration.
+     * For READ and DELETE operations, removes the form group to make fields read-only.
+     * For other operations, sets up icons, configures multi-value support if needed,
+     * and sets default values for radio buttons if no value is provided.
      *
-     * @type {string}
-     * @default Randomly generated 12-character string
-     * @memberOf CrudFormComponent
+     * @returns {void}
+     * @memberOf CrudFieldComponent
      */
-    allowClear: boolean;
+    ngOnInit(): Promise<void>;
     /**
-    * @description Reference to CRUD operation constants for template usage.
-    * @summary Exposes the OperationKeys enum to the component template, enabling
-    * conditional rendering and behavior based on operation types. This protected
-    * readonly property ensures that template logic can access operation constants
-    * while maintaining encapsulation and preventing accidental modification.
+    * Returns a list of options for select or radio inputs, with their `text` property
+    * localized if it does not already include the word 'options'. The localization key
+    * is generated from the component's label, replacing 'label' with 'options'.
     *
-    * @protected
-    * @readonly
-    * @memberOf CrudFormComponent
+    * @returns {CrudFieldOption[]} The array of parsed and localized options.
+    * @memberOf CrudFieldComponent
     */
-    protected readonly OperationKeys: typeof OperationKeys;
-    protected activeFormGroupIndex: number;
-    get activeFormGroup(): FormParent;
+    getOptions(): Promise<CrudFieldOption[]>;
     /**
-    * @description Component initialization lifecycle method.
-    * @summary Initializes the component by setting up the logger, configuring form state
-    * based on the operation type, and merging configuration options. For READ and DELETE
-    * operations, the formGroup is set to undefined since these operations don't require
-    * form input. Configuration options are merged with default settings.
-    *
-    * @returns {Promise<void>}
-    * @memberOf CrudFormComponent
-    */
-    ngOnInit(model?: Model | string): Promise<void>;
+     * @description Component after view initialization lifecycle method.
+     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
+     * This ensures proper initialization of read-only fields that don't require
+     * form functionality but still need view setup.
+     *
+     * @returns {void}
+     * @memberOf CrudFieldComponent
+     */
+    ngAfterViewInit(): void;
     /**
      * @description Component cleanup lifecycle method.
-     * @summary Performs cleanup operations when the component is destroyed.
-     * Unregisters the FormGroup from the NgxDecafFormService to prevent memory leaks
-     * and ensure proper resource cleanup.
+     * @summary Performs cleanup operations for READ and DELETE operations by calling
+     * the parent onDestroy method. This ensures proper resource cleanup for
+     * read-only field components.
      *
      * @returns {void}
-     * @memberOf CrudFormComponent
+     * @memberOf CrudFieldComponent
      */
     ngOnDestroy(): void;
-    getFormArrayIndex(index: number): FormParent | undefined;
+    toggleOptionSelection(val: string, event: CheckboxCustomEvent): void;
+    isOptionChecked(value: string): boolean;
     /**
-     * @description Handles form reset or navigation back functionality.
-     * @summary Provides different reset behavior based on the current operation.
-     * For CREATE and UPDATE operations, resets the form to its initial state.
-     * For READ and DELETE operations, navigates back in the browser history
-     * since these operations don't have modifiable form data to reset.
+     * @description Handles fieldset group update events from parent fieldsets.
+     * @summary Processes events triggered when an existing group needs to be updated.
+     * Updates the active form group index and refreshes the form group and form control
+     * references to point to the group being edited.
      *
+     * @param {CustomEvent} event - The fieldset update group event containing update details
      * @returns {void}
-     * @memberOf CrudFormComponent
+     * @memberOf CrudFieldComponent
      */
-    handleReset(): void;
-    handleSubmit(event?: SubmitEvent, eventName?: string, componentName?: string): Promise<boolean | void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormDirective, never, never, { "parentFormId": { "alias": "parentFormId"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "method": { "alias": "method"; "required": false; }; "options": { "alias": "options"; "required": false; }; "action": { "alias": "action"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "handlers": { "alias": "handlers"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+    handleFieldsetUpdateGroupEvent(event: CustomEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CrudFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "className": { "alias": "className"; "required": false; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "page": { "alias": "page"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class CrudFormComponent extends NgxFormDirective {
@@ -3341,7 +4044,7 @@ declare class CrudFormComponent extends NgxFormDirective {
     /**
      * @description Handles form submission with validation and event emission.
      * @summary Processes form submission by first preventing default browser behavior,
-     * then validating all form fields using NgxDecafFormService. If validation passes,
+     * then validating all form fields using NgxFormService. If validation passes,
      * extracts form data and emits a submitEvent with the data, component information,
      * and any associated handlers. Returns false if validation fails.
      *
@@ -3410,7 +4113,7 @@ declare class CrudFormComponent extends NgxFormDirective {
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class EmptyStateComponent extends NgxDecafComponentDirective implements OnInit {
+declare class EmptyStateComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The main title displayed in the empty state.
      * @summary Specifies the primary message to show in the empty state component.
@@ -3472,7 +4175,7 @@ declare class EmptyStateComponent extends NgxDecafComponentDirective implements
      * and this value should correspond to an available icon name.
      *
      * @type {string}
-     * @default "ti-info-square-rounded"
+     * @default "folder-open-outline"
      * @memberOf EmptyStateComponent
      */
     icon: string;
@@ -3559,6 +4262,7 @@ declare class EmptyStateComponent extends NgxDecafComponentDirective implements
     searchValue: string;
     private sanitizer;
     searchSubtitle: SafeHtml;
+    enableCreationByModelRoute: boolean;
     /**
      * @description Creates an instance of EmptyStateComponent.
      * @summary Initializes a new EmptyStateComponent by calling the parent class constructor
@@ -3997,7 +4701,7 @@ declare class FieldsetComponent extends NgxFormDirective implements OnInit, Afte
      * ```
      */
     handleCreateItem(event?: CustomEvent<IFieldSetValidationEvent>): Promise<void>;
-    handleUpdateItem(index: number, save?: boolean): void;
+    handleUpdateItem(index: number): void;
     /**
      * @description Cancels the update mode and resets the UI state.
      * @summary Exits the update mode by resetting the button label and clearing the updating item,
@@ -4113,7 +4817,7 @@ declare class FieldsetComponent extends NgxFormDirective implements OnInit, Afte
      */
     private getMapper;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "ngx-decaf-fieldset", never, { "formControl": { "alias": "formControl"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; "page": { "alias": "page"; "required": false; }; "customTypes": { "alias": "customTypes"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "borders": { "alias": "borders"; "required": false; }; }, {}, never, ["[slot=content]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "ngx-decaf-fieldset", never, { "formControl": { "alias": "formControl"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; "page": { "alias": "page"; "required": false; }; "customTypes": { "alias": "customTypes"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "borders": { "alias": "borders"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -4167,7 +4871,7 @@ declare class FieldsetComponent extends NgxFormDirective implements OnInit, Afte
  *
  * @memberOf ForAngularCommonModule
  */
-declare class FilterComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
+declare class FilterComponent extends NgxComponentDirective implements OnInit, OnDestroy {
     /**
      * @description Reference to the dropdown options container element.
      * @summary ViewChild reference used to access and manipulate the dropdown options element
@@ -4658,7 +5362,6 @@ declare class FilterComponent extends NgxDecafComponentDirective implements OnIn
  * @memberOf LayoutComponent
  */
 declare class LayoutComponent extends NgxParentComponentDirective implements OnInit {
-    initializeProps: boolean;
     /**
      * @description Media breakpoint for responsive behavior.
      * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -4671,7 +5374,6 @@ declare class LayoutComponent extends NgxParentComponentDirective implements OnI
      * @memberOf LayoutComponent
      */
     gap: 'small' | 'medium' | 'large' | 'collapse';
-    match: boolean;
     /**
      * @description Media breakpoint for responsive behavior.
      * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -4684,6 +5386,30 @@ declare class LayoutComponent extends NgxParentComponentDirective implements OnI
      * @memberOf LayoutComponent
      */
     breakpoint: UIMediaBreakPointsType | string;
+    /**
+     * @description Media breakpoint for responsive behavior.
+     * @summary Determines the responsive breakpoint at which the layout should adapt.
+     * This affects how the grid behaves on different screen sizes, allowing for
+     * mobile-first or desktop-first responsive design patterns. The breakpoint
+     * is automatically processed to ensure compatibility with the UI framework.
+     *
+     * @type {UIMediaBreakPointsType}
+     * @default 'medium'
+     * @memberOf LayoutComponent
+     */
+    grid: boolean;
+    /**
+     * @description Media breakpoint for responsive behavior.
+     * @summary Determines the responsive breakpoint at which the layout should adapt.
+     * This affects how the grid behaves on different screen sizes, allowing for
+     * mobile-first or desktop-first responsive design patterns. The breakpoint
+     * is automatically processed to ensure compatibility with the UI framework.
+     *
+     * @type {UIMediaBreakPointsType}
+     * @default 'medium'
+     * @memberOf LayoutComponent
+     */
+    match: boolean;
     /**
      * @description Creates an instance of LayoutComponent.
      * @summary Initializes a new LayoutComponent with the component name "LayoutComponent".
@@ -4727,7 +5453,7 @@ declare class LayoutComponent extends NgxParentComponentDirective implements OnI
      */
     ngOnInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ngx-decaf-layout", never, { "initializeProps": { "alias": "initializeProps"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "match": { "alias": "match"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ngx-decaf-layout", never, { "gap": { "alias": "gap"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "grid": { "alias": "grid"; "required": false; }; "match": { "alias": "match"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -4811,7 +5537,7 @@ declare class LayoutComponent extends NgxParentComponentDirective implements OnI
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class ListComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
+declare class ListComponent extends NgxComponentDirective implements OnInit, OnDestroy {
     /**
      * @description The display mode for the list component.
      * @summary Determines how the list data is loaded and displayed. Options include:
@@ -5001,32 +5727,22 @@ declare class ListComponent extends NgxDecafComponentDirective implements OnInit
      */
     disableSort: StringOrBoolean;
     /**
-     * @description Icon to display when the list is empty.
-     * @summary Specifies the icon shown in the empty state when no data is available.
-     * This can be any icon name supported by the application's icon system.
-     *
-     * @type {string | undefined}
-     * @default 'ti-database-exclamation'
-     * @memberOf ListComponent
-     */
-    emptyIcon?: string;
-    /**
-     * @description Configuration for the empty state display.
-     * @summary Customizes how the empty state is displayed when no data is available.
-     * This includes the title, subtitle, button text, icon, and navigation link.
-     *
-     * @type {Partial<IListEmptyResult>}
-     * @default {
-     *   title: 'empty.title',
-     *   subtitle: 'empty.subtitle',
-     *   showButton: false,
-     *   icon: 'alert-circle-outline',
-     *   buttonText: 'locale.empty.button',
-     *   link: ''
-     * }
-     * @memberOf ListComponent
-     */
-    empty: Partial<IListEmptyResult>;
+   * @description Configuration for the empty state display.
+   * @summary Customizes how the empty state is displayed when no data is available.
+   * This includes the title, subtitle, button text, icon, and navigation link.
+   *
+   * @type {Partial<IListEmptyOptions>}
+   * @default {
+   *   title: 'empty.title',
+   *   subtitle: 'empty.subtitle',
+   *   showButton: false,
+   *   icon: 'alert-circle-outline',
+   *   buttonText: 'locale.empty.button',
+   *   link: ''
+   * }
+   * @memberOf ListComponent
+   */
+    empty: Partial<IListEmptyOptions>;
     /**
      * @description The current page number in paginated mode.
      * @summary Tracks which page is currently being displayed when the component
@@ -5086,6 +5802,7 @@ declare class ListComponent extends NgxDecafComponentDirective implements OnInit
      * @memberOf ListComponent
      */
     searchValue?: string | IFilterQuery | undefined;
+    searching: boolean;
     /**
      * @description A paginator object for handling pagination operations.
      * @summary Provides a paginator object that can be used to retrieve and navigate
@@ -5566,8 +6283,9 @@ declare class ListComponent extends NgxDecafComponentDirective implements OnInit
      * @memberOf ListComponent
      */
     mapResults(data: KeyValue[]): KeyValue[];
+    parseSearchValue(): string | IFilterQuery;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "ngx-decaf-list", never, { "type": { "alias": "type"; "required": false; }; "showSearchbar": { "alias": "showSearchbar"; "required": false; }; "data": { "alias": "data"; "required": false; }; "source": { "alias": "source"; "required": false; }; "start": { "alias": "start"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "loadMoreData": { "alias": "loadMoreData"; "required": false; }; "lines": { "alias": "lines"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; }; "scrollPosition": { "alias": "scrollPosition"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "showRefresher": { "alias": "showRefresher"; "required": false; }; "loadingSpinner": { "alias": "loadingSpinner"; "required": false; }; "enableFilter": { "alias": "enableFilter"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; }, { "refreshEvent": "refreshEvent"; "clickEvent": "clickEvent"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "ngx-decaf-list", never, { "type": { "alias": "type"; "required": false; }; "showSearchbar": { "alias": "showSearchbar"; "required": false; }; "data": { "alias": "data"; "required": false; }; "source": { "alias": "source"; "required": false; }; "start": { "alias": "start"; "required": false; }; "limit": { "alias": "limit"; "required": false; }; "loadMoreData": { "alias": "loadMoreData"; "required": false; }; "lines": { "alias": "lines"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "scrollThreshold": { "alias": "scrollThreshold"; "required": false; }; "scrollPosition": { "alias": "scrollPosition"; "required": false; }; "loadingText": { "alias": "loadingText"; "required": false; }; "showRefresher": { "alias": "showRefresher"; "required": false; }; "loadingSpinner": { "alias": "loadingSpinner"; "required": false; }; "enableFilter": { "alias": "enableFilter"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; }, { "refreshEvent": "refreshEvent"; "clickEvent": "clickEvent"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -5619,7 +6337,7 @@ declare class ListComponent extends NgxDecafComponentDirective implements OnInit
  *   C->>C: Process action
  *   C->>V: Update view or navigate
  */
-declare class ListItemComponent extends NgxDecafComponentDirective implements OnInit {
+declare class ListItemComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description Reference to the action menu popover component.
      * @summary ViewChild reference that provides access to the HTMLIonPopoverElement
@@ -5765,17 +6483,6 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      * @memberOf ListItemComponent
      */
     actionMenuOpen: boolean;
-    /**
-     * @description Angular NavController service for handling navigation.
-     * @summary Injected service that provides methods for programmatic navigation
-     * within the Ionic application. Used for navigating to different routes when
-     * list item actions are performed or when the item itself is clicked.
-     *
-     * @private
-     * @type {NavController}
-     * @memberOf ListItemComponent
-     */
-    private navController;
     /**
      * @description Creates an instance of ListItemComponent.
      * @summary Initializes a new ListItemComponent by calling the parent class constructor
@@ -5830,7 +6537,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      *   participant U as User
      *   participant L as ListItemComponent
      *   participant P as Parent Component
-     *   participant N as NavController
+     *   participant N as Router
      *   participant E as Event System
      *
      *   U->>L: Perform action (click/swipe)
@@ -5910,7 +6617,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
     /**
      * @description Navigates to a new route based on the specified action and item ID.
      * @summary This method constructs a navigation URL using the component's route configuration,
-     * the specified action, and an item identifier. It uses Ionic's NavController to perform
+     * the specified action, and an item identifier. It uses Ionic's Router to perform
      * forward navigation with appropriate animations. This method is typically used for
      * CRUD operations where each action (create, read, update, delete) has its own route.
      *
@@ -5921,7 +6628,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      * @mermaid
      * sequenceDiagram
      *   participant L as ListItemComponent
-     *   participant N as NavController
+     *   participant N as Router
      *   participant R as Router
      *
      *   L->>L: redirect(action, id)
@@ -6004,7 +6711,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
  *   ModelRenderer->>ModelRenderer: Subscribe to events
  *   ModelRenderer-->>App: Emit events
  */
-declare class ModelRendererComponent<M extends Model> extends NgxDecafComponentDirective implements OnChanges, OnDestroy, IRenderedModel {
+declare class ModelRendererComponent<M extends Model> extends NgxComponentDirective implements OnChanges, OnDestroy, IRenderedModel {
     /**
      * @description Global variables to be passed to the rendered component
      */
@@ -6111,7 +6818,7 @@ declare class ModelRendererComponent<M extends Model> extends NgxDecafComponentD
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class PaginationComponent extends NgxDecafComponentDirective implements OnInit {
+declare class PaginationComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The total number of pages to display in the pagination component.
      * @summary Specifies the total number of pages available for navigation. This is a required
@@ -6343,7 +7050,7 @@ declare class PaginationComponent extends NgxDecafComponentDirective implements
  * @implements {OnInit}
  * @memberOf SearchbarComponent
  */
-declare class SearchbarComponent extends NgxDecafComponentDirective implements OnInit {
+declare class SearchbarComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The mode of the searchbar.
      * @summary Determines the visual style of the searchbar, either iOS or Material Design.
@@ -6781,7 +7488,10 @@ declare class SteppedFormComponent extends NgxParentComponentDirective implement
      * @default 1
      * @memberOf SteppedFormComponent
      */
-    pages: number;
+    pages: number | {
+        title: string;
+        description: string;
+    }[];
     /**
      * List of titles and descriptions for each page of the stepped form.
      * Each object in the array represents a page, containing a title and a description.
@@ -6879,17 +7589,6 @@ declare class SteppedFormComponent extends NgxParentComponentDirective implement
      * @memberOf SteppedFormComponent
      */
     private timerSubscription;
-    /**
-     * @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
-     */
-    private location;
     /**
      * @description Event emitter for form submission.
      * @summary Emits events when the form is submitted, typically on the last page
@@ -7236,58 +7935,107 @@ declare function getLocaleLanguage(): string;
  */
 declare function generateRandomValue(length?: number, onlyNumbers?: boolean): string;
 /**
- * Converts a string representation of a boolean or a boolean value to a boolean type.
+ * @description Converts a string representation of a boolean or a boolean value to a boolean type.
+ * @summary This utility function handles conversion of string-based boolean values ('true', 'false')
+ * to actual boolean types. It performs case-insensitive string comparison and returns the
+ * corresponding boolean value. This is particularly useful when parsing configuration values,
+ * URL parameters, or form inputs that may come as strings but need to be used as booleans.
  *
- * @export
- * @param {('true' | 'false' | boolean)} prop - The value to convert. Can be the string 'true', 'false', or a boolean.
- * @returns {boolean} The boolean representation of the input value. Returns true if the input is the string 'true' or boolean true, false otherwise.
+ * @param {'true' | 'false' | boolean} prop - The value to convert. Can be the string 'true', 'false', or a boolean
+ * @returns {boolean} The boolean representation of the input value. Returns true if the input is the string 'true' or boolean true, false otherwise
+ *
+ * @function stringToBoolean
+ * @memberOf module:lib/helpers/utils
  */
 declare function stringToBoolean(prop: 'true' | 'false' | boolean): boolean;
 /**
- * Checks if a value is a valid Date object
+ * @description Checks if a value is a valid Date object.
+ * @summary This validation function determines whether a given value represents a valid date.
+ * It handles multiple input types including Date objects, timestamp numbers, and date strings.
+ * For string inputs, it supports ISO 8601 format (YYYY-MM-DD) with or without time components.
+ * The function performs comprehensive validation including regex pattern matching and Date
+ * object creation to ensure the date is not only parseable but also represents a real date.
+ *
+ * @param {string | Date | number} date - The value to check. Can be a Date object, a timestamp number, or a date string
+ * @returns {boolean} Returns true if the value is a valid Date object (not NaN), otherwise false
  *
- * @param {(string | Date | number)} date - The value to check. Can be a Date object, a timestamp number, or a date string
- * @return {boolean} Returns true if the value is a valid Date object (not NaN), otherwise false
+ * @function isValidDate
+ * @memberOf module:lib/helpers/utils
  */
 declare function isValidDate(date: string | Date | number): boolean;
 /**
- * Formats a date into a localized string representation
+ * @description Formats a date into a localized string representation.
+ * @summary This function converts a date value into a formatted string according to a specified
+ * or system locale. It accepts multiple input formats (Date objects, timestamps, or date strings)
+ * and returns a consistently formatted date string in DD/MM/YYYY format. If the input date is
+ * invalid, the function returns the original input as a string. The function automatically
+ * uses the system locale if none is provided and handles string format conversions by replacing
+ * forward slashes with hyphens for proper Date parsing.
  *
- * @param {(string | Date | number)} date - The date to format. Can be a Date object, a timestamp number, or a date string
+ * @param {string | Date | number} date - The date to format. Can be a Date object, a timestamp number, or a date string
  * @param {string} [locale] - The locale to use for formatting. If not provided, the system's locale will be used
- * @return {(Date | string)} A formatted date string in the format DD/MM/YYYY according to the specified locale,
- *                           or the original input as a string if the date is invalid
+ * @returns {Date | string} A formatted date string in the format DD/MM/YYYY according to the specified locale,
+ *                          or the original input as a string if the date is invalid
+ *
+ * @function formatDate
+ * @memberOf module:lib/helpers/utils
  */
 declare function formatDate(date: string | Date | number, locale?: string | undefined): Date | string;
 /**
- * Attempts to parse a date string, Date object, or number into a valid Date object
+ * @description Attempts to parse a date string, Date object, or number into a valid Date object.
+ * @summary This function provides robust date parsing functionality that handles the specific
+ * format "DD/MM/YYYY HH:MM:SS:MS". It first validates the input date, and if already valid,
+ * returns it as-is. For string inputs, it parses the date and time components separately,
+ * extracts numeric values, and constructs a new Date object. The function includes validation
+ * to ensure the resulting Date object is valid and logs a warning if parsing fails.
+ * Returns null for invalid or unsupported date formats.
+ *
+ * @param {string | Date | number} date - The date to parse. Can be a Date object, a timestamp number,
+ *                                        or a date string in the format "DD/MM/YYYY HH:MM:SS:MS"
+ * @returns {Date | null} A valid Date object if parsing is successful, or null if the date is invalid
+ *                        or doesn't match the expected format
  *
- * @param {(string | Date | number)} date - The date to parse. Can be a Date object, a timestamp number,
- *                                         or a date string in the format "DD/MM/YYYY HH:MM:SS:MS"
- * @return {(Date | null)} A valid Date object if parsing is successful, or null if the date is invalid
- *                         or doesn't match the expected format
+ * @function parseToValidDate
+ * @memberOf module:lib/helpers/utils
  */
 declare function parseToValidDate(date: string | Date | number): Date | null;
 /**
- * Maps an item object using a provided mapper object and optional additional properties.
+ * @description Maps an item object using a provided mapper object and optional additional properties.
+ * @summary This function transforms a source object into a new object based on mapping rules defined
+ * in the mapper parameter. It supports dot notation for nested property access (e.g., 'user.name.first')
+ * and handles various data types including strings and complex objects. For date values, it automatically
+ * formats them using the formatDate function. The function also allows merging additional properties
+ * into the result. When a mapped value is null or undefined, it uses the original mapper value as
+ * a fallback.
  *
- * @param {KeyValue} item - The source object to be mapped.
+ * @param {KeyValue} item - The source object to be mapped
  * @param {KeyValue} mapper - An object that defines the mapping rules. Keys represent the new property names,
- *                            and values represent the path to the corresponding values in the source object.
- * @param {KeyValue} [props] - Optional additional properties to be included in the mapped object.
- * @returns {KeyValue} A new object with properties mapped according to the mapper object and including any additional properties.
+ *                            and values represent the path to the corresponding values in the source object
+ * @param {KeyValue} [props] - Optional additional properties to be included in the mapped object
+ * @returns {KeyValue} A new object with properties mapped according to the mapper object and including any additional properties
+ *
+ * @function itemMapper
+ * @memberOf module:lib/helpers/utils
  */
 declare function itemMapper(item: KeyValue, mapper: KeyValue, props?: KeyValue): KeyValue;
 /**
- * Maps an array of data objects using a provided mapper object.
+ * @description Maps an array of data objects using a provided mapper object.
+ * @summary This function transforms an array of objects by applying mapping rules to each item
+ * using the itemMapper function. It processes each element in the data array and creates
+ * new mapped objects based on the mapper configuration. The function includes validation
+ * to ensure meaningful data: if a mapped item contains only null/undefined values, it
+ * preserves the original item instead. This prevents data loss during transformation.
+ * Returns an empty array if the input data is null, undefined, or empty.
  *
- * @template T - The type of the resulting mapped items.
- * @param {any[]} data - The array of data objects to be mapped.
- * @param {KeyValue} mapper - An object that defines the mapping rules.
- * @param {KeyValue} [props] - Additional properties to be included in the mapped items.
+ * @template T - The type of the resulting mapped items
+ * @param {T[]} data - The array of data objects to be mapped
+ * @param {KeyValue} mapper - An object that defines the mapping rules
+ * @param {KeyValue} [props] - Additional properties to be included in the mapped items
+ * @returns {T[]} The array of mapped items. If an item in the original array does not have any non-null values after mapping,
+ *                the original item is returned instead
  *
- * @returns {T[]} - The array of mapped items. If an item in the original array does not have any non-null values after mapping,
- * the original item is returned instead.
+ * @function dataMapper
+ * @memberOf module:lib/helpers/utils
  */
 declare function dataMapper<T>(data: T[], mapper: KeyValue, props?: KeyValue): T[];
 /**
@@ -7383,39 +8131,152 @@ declare function provideI18n(config?: RootTranslateServiceConfig, resources?: I1
 } | i0.EnvironmentProviders | i0.Provider[])[];
 
 /**
- * @module module:lib/for-angular-common.module
+ * @module lib/for-angular-common.module
  * @description Core Angular module and providers for Decaf's for-angular package.
  * @summary Provides the shared Angular module, injection tokens and helper functions used
  * by the for-angular integration. This module wires up common imports (forms, translation)
  * and exposes helper providers such as DB adapter registration and logger utilities.
- *
  * @link {@link ForAngularCommonModule}
  */
 
-/** */
 declare const DB_ADAPTER_PROVIDER = "DB_ADAPTER_PROVIDER";
+/**
+ * @description Injection token for registering the database adapter provider.
+ * @summary Used to inject the database adapter instance that implements DecafRepositoryAdapter.
+ * This token allows the framework to locate and use the application's specific database implementation.
+ * @const {InjectionToken<DecafRepositoryAdapter>}
+ * @memberOf module:lib/for-angular-common.module
+ */
 declare const DB_ADAPTER_PROVIDER_TOKEN: InjectionToken<DecafRepositoryAdapter>;
+/**
+ * @description Injection token for the root path of locale translation files.
+ * @summary Used to configure the base path where i18n translation files are located.
+ * This allows the translation loader to locate JSON files for different languages.
+ * @const {InjectionToken<string>}
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Typical usage when providing the token
+ * { provide: LOCALE_ROOT_TOKEN, useValue: './assets/i18n/' }
+ */
 declare const LOCALE_ROOT_TOKEN: InjectionToken<string>;
+/**
+ * @description Generic injection token for providing arbitrary values to constructors.
+ * @summary Used to inject classes, strings, or any other value into component or service constructors.
+ * This is a flexible token that can be used to provide any type of dependency when more specific
+ * tokens are not appropriate. The actual type and purpose of the injected value is determined by
+ * the provider configuration.
+ * @const {InjectionToken<unknown>}
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Inject a string value
+ * { provide: CPTKN, useValue: 'some-config-value' }
+ *
+ * // Inject a class
+ * { provide: CPTKN, useClass: MyService }
+ *
+ * // Inject any arbitrary value
+ * { provide: CPTKN, useValue: { key: 'value', data: [1, 2, 3] } }
+ */
 declare const CPTKN: InjectionToken<unknown>;
+/**
+ * @description Injection token for i18n resource configuration.
+ * @summary Used to provide configuration for internationalization resources, including
+ * translation file locations and supported languages. This token configures how the
+ * application loads and manages translation resources.
+ * @const {InjectionToken<{resources: I18nResourceConfig[]; versionedSuffix: boolean}>}
+ * @memberOf module:lib/for-angular-common.module
+ */
 declare const I18N_CONFIG_TOKEN: InjectionToken<{
     resources: I18nResourceConfig[];
     versionedSuffix: boolean;
 }>;
+/**
+ * @description Provides an array of component types for dynamic rendering.
+ * @summary Helper function to package component constructors for registration with the
+ * rendering engine. This function accepts component classes and returns them as an array
+ * suitable for use with the CPTKN injection token.
+ * @param {...Constructor<unknown>[]} components - Component constructor classes to register
+ * @return {Constructor<unknown>[]} Array of component constructors
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register multiple custom components
+ * providers: [
+ *   { provide: CPTKN, useValue: provideDynamicComponents(MyComponent, AnotherComponent) }
+ * ]
+ */
+declare function provideDynamicComponents(...components: Constructor<unknown>[]): Constructor<unknown>[];
+/**
+ * @description Retrieves the repository instance for a given model.
+ * @summary Creates or retrieves a DecafRepository instance for the specified model. This function
+ * resolves the model by name or class, locates the registered database adapter, and returns
+ * a fully initialized repository instance for performing CRUD operations.
+ * @param {Model | string} model - The model class or model name string
+ * @return {DecafRepository<Model>} Repository instance for the model
+ * @throws {InternalError} If model is not found or not registered with @model decorator
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get repository by model class
+ * const userRepo = getModelRepository(User);
+ *
+ * // Get repository by model name
+ * const productRepo = getModelRepository('Product');
+ *
+ * // Use repository for queries
+ * const users = await userRepo.findAll();
+ */
 declare function getModelRepository(model: Model | string): DecafRepository<Model>;
+/**
+ * @description Provides a database adapter for dependency injection.
+ * @summary Creates an Angular provider that registers a database adapter instance. This function
+ * instantiates the adapter class, registers its flavour globally, and returns a provider object
+ * for use in Angular's dependency injection system.
+ * @template DbAdapter - The database adapter class type extending {flavour: string}
+ * @param {Constructor<DbAdapter>} adapterClass - Database adapter constructor class
+ * @param {KeyValue} [options={}] - Configuration options passed to adapter constructor
+ * @param {string} [flavour] - Optional flavour override; uses adapter.flavour if not provided
+ * @return {Provider} Angular provider object for DB_ADAPTER_PROVIDER_TOKEN
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register a SQLite adapter
+ * providers: [
+ *   provideDbAdapter(SqliteAdapter, { database: 'myapp.db' }, 'sqlite')
+ * ]
+ *
+ * // Register with default flavour from adapter
+ * providers: [
+ *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
+ * ]
+ */
 declare function provideDbAdapter<DbAdapter extends {
     flavour: string;
 }>(adapterClass: Constructor<DbAdapter>, options?: KeyValue, flavour?: string): Provider;
+/**
+ * @description Retrieves a logger instance for the given context.
+ * @summary Creates or retrieves a namespaced logger instance using the Decaf logging system.
+ * The logger is automatically namespaced under "for-angular" and can be further scoped
+ * to a specific instance, function, or string identifier.
+ * @param {string | FunctionLike | unknown} instance - The instance, function, or string to scope the logger to
+ * @return {Logger} Logger instance for the specified context
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get logger for a class
+ * const logger = getLogger(MyComponent);
+ * logger.info('Component initialized');
+ *
+ * // Get logger with string identifier
+ * const serviceLogger = getLogger('UserService');
+ * serviceLogger.error('Operation failed', error);
+ */
 declare function getLogger(instance: string | FunctionLike | unknown): Logger;
 /**
- * @description Main Angular module for the Decaf framework
+ * @description Main Angular module for the Decaf framework.
  * @summary The ForAngularCommonModule provides the core functionality for integrating Decaf with Angular applications.
  * It imports and exports common Angular and Ionic components and modules needed for Decaf applications,
  * including form handling, translation support, and Ionic UI components. This module can be imported
  * directly or via the forRoot() method for proper initialization in the application's root module.
- *
  * @class ForAngularCommonModule
+ * @memberOf module:lib/for-angular-common.module
  * @example
- * ```typescript
  * // In your app module:
  * @NgModule({
  *   imports: [
@@ -7425,17 +8286,24 @@ declare function getLogger(instance: string | FunctionLike | unknown): Logger;
  *   // ...
  * })
  * export class AppModule {}
- * ```
  */
 declare class ForAngularCommonModule {
     /**
-     * @description Creates a module with providers for root module import
+     * @description Creates a module with providers for root module import.
      * @summary This static method provides the proper way to import the ForAngularCommonModule in the application's
      * root module. It returns a ModuleWithProviders object that includes the ForAngularCommonModule itself.
      * Using forRoot() ensures that the module and its providers are properly initialized and only
      * instantiated once in the application.
-     *
      * @return {ModuleWithProviders<ForAngularCommonModule>} The module with its providers
+     * @memberOf ForAngularCommonModule
+     * @static
+     * @example
+     * // Import in root module
+     * @NgModule({
+     *   imports: [ForAngularCommonModule.forRoot()],
+     *   // ...
+     * })
+     * export class AppModule {}
      */
     static forRoot(): ModuleWithProviders<ForAngularCommonModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ForAngularCommonModule, never>;
@@ -7443,5 +8311,5 @@ declare class ForAngularCommonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularCommonModule>;
 }
 
-export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxDecafComponentDirective, NgxDecafFormFieldDirective, NgxDecafFormService, NgxEventHandler, NgxPageDirective, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
-export type { AngularDynamicOutput, AngularFieldDefinition, CheckboxOption, ComponentMetadata, CrudFieldOption, DecafRepository, DecafRepositoryAdapter, ElementPositions, ElementSizes, FieldUpdateMode, FlexPositions, FormParent, FormParentGroup, FormServiceControl, FormServiceControls, FunctionLike, HTMLFormTarget, HandlerLike, I18nResourceConfig, I18nResourceConfigType, IBaseCustomEvent, IComponentConfig, IComponentHolder, IComponentInput, ICrudFormEvent, ICrudFormOptions, IFieldSetItem, IFieldSetValidationEvent, IFilterQuery, IFilterQueryItem, IFormElement, IFormReactiveSubmitEvent, IListComponentRefreshEvent, IListEmptyResult, IMenuItem, IPaginationCustomEvent, IRenderedModel, ISortObject, InputOption, KeyValue, ListItemCustomEvent, PossibleInputTypes, RadioOption, RawQuery, SelectOption, StringOrBoolean };
+export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, DefaultListEmptyOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaDirective, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export type { AngularDynamicOutput, AngularFieldDefinition, CheckboxOption, ComponentMetadata, CrudFieldOption, DecafRepository, DecafRepositoryAdapter, ElementPositions, ElementSizes, FieldUpdateMode, FlexPositions, FormParent, FormParentGroup, FormServiceControl, FormServiceControls, FunctionLike, HTMLFormTarget, HandlerLike, I18nResourceConfig, I18nResourceConfigType, IBaseCustomEvent, IComponentConfig, IComponentHolder, IComponentInput, ICrudFormEvent, ICrudFormOptions, IFieldSetItem, IFieldSetValidationEvent, IFilterQuery, IFilterQueryItem, IFormElement, IFormReactiveSubmitEvent, IListComponentRefreshEvent, IListEmptyOptions, IMenuItem, IModelPageCustomEvent, IPaginationCustomEvent, IRenderedModel, ISortObject, IWindowResizeEvent, InputOption, KeyValue, ListItemCustomEvent, PossibleInputTypes, RadioOption, RawQuery, SelectOption, StringOrBoolean, WindowColorScheme };