@decaf-ts/for-angular 0.0.31 → 0.0.33

package/index.d.ts

@@ -1,219 +1,219 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Type, Injector, EnvironmentInjector, ComponentMirror, ViewContainerRef, ComponentRef, TemplateRef, OnChanges, EventEmitter, SimpleChanges, OnInit, OnDestroy, AfterViewInit, InjectionToken, Provider, ModuleWithProviders } from '@angular/core';
-import { IonInput, IonSelect, IonTextarea, IonCheckbox, SpinnerTypes, InfiniteScrollCustomEvent, RefresherCustomEvent } from '@ionic/angular';
-import { TextFieldTypes, SelectInterface, AutocompleteTypes, PredefinedColors } from '@ionic/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 * as i2 from '@angular/forms';
-import { FormGroup, FormControl, FormArray, ControlValueAccessor, AbstractControl } from '@angular/forms';
-import { OrderDirection, Repository, Adapter, Paginator, Condition } from '@decaf-ts/core';
-import { FieldProperties, RenderingEngine, FieldDefinition, CrudOperationKeys, UIModelMetadata, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
+import { FormGroup, FormArray, FormControl, ControlValueAccessor, AbstractControl } from '@angular/forms';
+import { Repository, Adapter, OrderDirection, 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';
 import * as _decaf_ts_decorator_validation from '@decaf-ts/decorator-validation';
-import { Model, Constructor } from '@decaf-ts/decorator-validation';
-import { Logger } from '@decaf-ts/logging';
+import { Model, Constructor, ModelConstructor } from '@decaf-ts/decorator-validation';
+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 i3 from '@ngx-translate/core';
-import { TranslateService, TranslateLoader, TranslationObject } from '@ngx-translate/core';
-import { SafeHtml } from '@angular/platform-browser';
+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 { NgxParentComponentDirective as NgxParentComponentDirective$1 } from 'src/lib/engine/NgxParentComponentDirective';
 import { InjectablesRegistry } from '@decaf-ts/injectable-decorators';
 import { HttpClient } from '@angular/common/http';
 import * as i1 from '@angular/common';
 
 /**
- * @description Angular engine key constants
- * @summary Contains key strings used by the Angular rendering engine for reflection,
- * dynamic component creation, and other engine operations.
- * @typedef {Object} AngularEngineKeys
- * @property {string} REFLECT - Prefix for reflection metadata keys
- * @property {string} DYNAMIC - Key for dynamic component identification
- * @property {string} ANNOTATIONS - Key for component annotations
- * @property {string} ECMP - Key for embedded components
- * @property {string} NG_REFLECT - Prefix for Angular reflection attributes
- * @property {string} RENDERED - Prefix for rendered component markers
- * @property {string} MAPPER - Key for property mappers
- * @property {string} CHILDREN - Key for child components
- * @property {string} LISTABLE - Key for listable components
- * @property {string} RENDER - Key for renderable components
- * @property {string} RENDERED_ID - Template for rendered component IDs
- * @property {string} PARENT - Key for comparison decorators and validators
- * @const AngularEngineKeys
+ * @module module:lib/engine/types
+ * @description Shared type aliases and helper types used by the rendering engine and components.
+ * @summary Defines common TypeScript types, typedefs, and unions used across engine, components,
+ * and form helpers (e.g., KeyValue, FunctionLike, AngularFieldDefinition, FieldUpdateMode).
+ *
+ * @link {@link KeyValue}
+ */
+
+type HandlerLike = Record<string, (...args: unknown[]) => unknown | Promise<unknown>>;
+interface RawQuery<M extends Model> {
+    select: undefined | (keyof M)[];
+    from: Constructor<M>;
+    where: (el: M) => boolean;
+    sort?: (el: M, el2: M) => number;
+    limit?: number;
+    skip?: number;
+}
+type DecafRepositoryAdapter<F extends RepositoryFlags = RepositoryFlags, C extends Context<F> = Context<F>> = Adapter<any, any, RawQuery<any>, F, C>;
+type DecafRepository<M extends Model> = Repository<M, RawQuery<M>, DecafRepositoryAdapter<RepositoryFlags, Context<RepositoryFlags>>, RepositoryFlags, Context<RepositoryFlags>>;
+/**
+ * @description Generic key-value pair type
+ * @summary Represents a generic object with string keys and any type of values.
+ * This is commonly used for dynamic data structures where the properties are not known at compile time.
+ * @typedef {Record<string, any>} KeyValue
  * @memberOf module:engine
  */
-declare const AngularEngineKeys: {
-    REFLECT: string;
-    DYNAMIC: string;
-    ANNOTATIONS: string;
-    ECMP: string;
-    NG_REFLECT: string;
-    RENDERED: string;
-    MAPPER: string;
-    CHILDREN: string;
-    LISTABLE: string;
-    RENDER: string;
-    RENDERED_ID: string;
-    PARENT: string;
-    VALIDATION_PARENT_KEY: symbol;
-    FORM_GROUP_COMPONENT_PROPS: string;
-};
+type KeyValue = Record<string, any>;
 /**
- * @description Form validation state constants
- * @summary Contains constants representing the possible validation states of a form.
- * These are used to check and handle form validation throughout the application.
- * @typedef {Object} FormConstants
- * @property {string} VALID - Constant representing a valid form state
- * @property {string} INVALID - Constant representing an invalid form state
- * @const FormConstants
+ * @description Generic function type
+ * @summary Represents a function that accepts any number of arguments of any type
+ * and returns any type. This is useful for defining function parameters or variables
+ * where the exact function signature is not known at compile time.
+ * @typedef FunctionLike
  * @memberOf module:engine
  */
-declare const FormConstants: {
-    VALID: string;
-    INVALID: string;
+type FunctionLike = (...args: any[]) => any;
+/**
+ * @description Element size options for UI components
+ * @summary Defines the possible size values that can be applied to UI elements.
+ * These sizes control the dimensions and layout behavior of components.
+ * @typedef {('small'|'medium'|'large'|'xlarge'|'2xlarge'|'auto'|'expand'|'block')} ElementSizes
+ * @memberOf module:engine
+ */
+type ElementSizes = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | 'block';
+/**
+ * @description Basic position options for UI elements
+ * @summary Defines the possible position values that can be applied to UI elements.
+ * These positions control the alignment and placement of components.
+ * @typedef {('left'|'center'|'right'|'top'|'bottom')} ElementPositions
+ * @memberOf module:engine
+ */
+type ElementPositions = 'left' | 'center' | 'right' | 'top' | 'bottom';
+/**
+ * @description Extended position options for flex layouts
+ * @summary Extends the basic ElementPositions with additional flex-specific position values.
+ * These positions are used for controlling alignment and distribution in flex containers.
+ * @typedef {(ElementPositions|'stretch'|'middle'|'around'|'between')} FlexPositions
+ * @memberOf module:engine
+ */
+type FlexPositions = ElementPositions | 'stretch' | 'middle' | 'around' | 'between';
+/**
+ * @description Update mode options for form fields
+ * @summary Defines when form field values should be updated in the model.
+ * - 'change': Update on every change event
+ * - 'blur': Update when the field loses focus
+ * - 'submit': Update only when the form is submitted
+ * @typedef {('change'|'blur'|'submit')} FieldUpdateMode
+ * @memberOf module:engine
+ */
+type FieldUpdateMode = 'change' | 'blur' | 'submit';
+/**
+ * @description Possible input types for form fields
+ * @summary Defines the possible input types that can be used in form fields.
+ * Includes standard HTML input types like checkbox, radio, and select,
+ * as well as Ionic's TextFieldTypes and textarea.
+ * @typedef {('checkbox'|'radio'|'select'|TextFieldTypes|'textarea')} PossibleInputTypes
+ * @memberOf module:engine
+ */
+type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'textarea';
+/**
+ * @description Field definition for Angular components
+ * @summary A comprehensive type that combines properties from various Ionic components
+ * to define the structure of a field in an Angular form. It omits certain properties
+ * from IonInput, picks specific properties from IonSelect, IonTextarea, and IonCheckbox,
+ * and adds custom properties like type and className.
+ * @typedef {Object} AngularFieldDefinition
+ * @property {PossibleInputTypes} type - The type of input field
+ * @property {string|string[]} className - CSS class name(s) for the field
+ * @property {string} [cancelText] - Text for the cancel button (from IonSelect)
+ * @property {string} [interface] - Interface style for select (from IonSelect)
+ * @property {string} [selectedText] - Text for selected option (from IonSelect)
+ * @property {Object} [interfaceOptions] - Options for the interface (from IonSelect)
+ * @property {number} [rows] - Number of rows for textarea (from IonTextarea)
+ * @property {number} [cols] - Number of columns for textarea (from IonTextarea)
+ * @property {string} [alignment] - Alignment of checkbox (from IonCheckbox)
+ * @property {string} [justify] - Justification of checkbox (from IonCheckbox)
+ * @property {boolean} [checked] - Whether checkbox is checked (from IonCheckbox)
+ * @memberOf module:engine
+ */
+type AngularFieldDefinition = Omit<IonInput, 'ionInput' | 'ionFocus' | 'ionChange' | 'ionBlur' | 'getInputElement' | 'setFocus' | 'label' | 'el' | 'z' | 'type'> & Pick<IonSelect, 'cancelText' | 'interface' | 'selectedText' | 'interfaceOptions'> & Pick<IonTextarea, 'rows' | 'cols'> & Pick<IonCheckbox, 'alignment' | 'justify' | 'checked'> & {
+    type: PossibleInputTypes;
+    className: string | string[];
+} & Record<string, unknown>;
+/**
+ * @description String or boolean representation of a boolean value
+ * @summary Represents a value that can be either a boolean or a string representation of a boolean.
+ * This is useful for handling attribute values that can be specified as either strings or booleans.
+ * @typedef {('true'|'false'|boolean)} StringOrBoolean
+ * @memberOf module:engine
+ */
+type StringOrBoolean = 'true' | 'false' | boolean;
+/**
+ * @description Option type for CRUD field inputs
+ * @summary Represents a union type that can be either a SelectOption or RadioOption.
+ * This is used for defining options in form fields that support both select and radio input types.
+ * @typedef {(SelectOption|RadioOption)} CrudFieldOption
+ * @memberOf module:engine
+ */
+type CrudFieldOption = SelectOption | RadioOption;
+/**
+ * @description Option type for select inputs
+ * @summary Extends the InputOption interface with a selected property to indicate
+ * whether the option is selected by default.
+ * @memberOf module:engine
+ */
+type SelectOption = InputOption & {
+    selected?: boolean;
 };
 /**
- * @description Event name constants
- * @summary Enum containing constants for event names used throughout the application.
- * These are used to standardize event naming and handling.
- * @enum {string}
- * @readonly
- * @property {string} BACK_BUTTON_NAVIGATION - Event fired when back button navigation ends
- * @property {string} REFRESH_EVENT - Event fired when a refresh action occurs
- * @property {string} CLICK_EVENT - Event fired when a click action occurs
- * @property {string} SUBMIT_EVENT - Event fired when a form submission occurs
+ * @description Option type for radio inputs
+ * @summary Extends the InputOption interface with a checked property to indicate
+ * whether the option is checked by default.
  * @memberOf module:engine
  */
-declare const EventConstants: {
-    BACK_BUTTON_NAVIGATION: string;
-    REFRESH: string;
-    CLICK: string;
-    SUBMIT: string;
-    VALIDATION_ERROR: string;
-    FIELDSET_ADD_GROUP: string;
-    FIELDSET_UPDATE_GROUP: string;
-    FIELDSET_REMOVE_GROUP: string;
+type RadioOption = InputOption & {
+    checked?: boolean;
 };
 /**
- * @description Logger level constants
- * @summary Enum defining the logging levels used in the application's logging system.
- * Lower values represent more verbose logging, while higher values represent more critical logs.
- * @enum {number}
- * @readonly
- * @property {number} ALL - Log everything (most verbose)
- * @property {number} DEBUG - Log debug information
- * @property {number} INFO - Log informational messages
- * @property {number} WARN - Log warnings
- * @property {number} ERROR - Log errors
- * @property {number} CRITICAL - Log critical errors (least verbose)
+ * @description Option type for checkbox inputs
+ * @summary Alias for RadioOption, as checkbox options have the same structure as radio options.
+ * @typedef {RadioOption} CheckboxOption
  * @memberOf module:engine
  */
-declare enum LoggerLevels {
-    ALL = 0,
-    DEBUG = 1,
-    INFO = 2,
-    WARN = 3,
-    ERROR = 4,
-    CRITICAL = 5
-}
+type CheckboxOption = RadioOption;
 /**
- * @description Route direction constants
- * @summary Enum defining the possible navigation directions in the application.
- * Used for controlling navigation flow and animation directions.
- * @enum {string}
- * @readonly
- * @property {string} BACK - Navigate back to the previous page
- * @property {string} FORWARD - Navigate forward to the next page
- * @property {string} ROOT - Navigate to the root/home page
+ * @description Target options for HTML forms
+ * @summary Defines the possible target values for HTML forms, including standard targets
+ * like '_blank', '_self', '_parent', and '_top', as well as custom string values.
+ * @typedef {('_blank'|'_self'|'_parent'|'_top'|string)} HTMLFormTarget
  * @memberOf module:engine
  */
-declare enum RouteDirections {
-    BACK = "back",
-    FORWARD = "forward",
-    ROOT = "root"
-}
+type HTMLFormTarget = '_blank' | '_self' | '_parent' | '_top' | string;
 /**
- * @description Component tag name constants
- * @summary Enum defining the tag names for custom components used in the application.
- * These tag names are used for component registration and rendering.
- * @enum {string}
- * @readonly
- * @property {string} LIST_ITEM - Tag name for list item component
- * @property {string} LIST_INFINITE - Tag name for infinite scrolling list component
- * @property {string} LIST_PAGINATED - Tag name for paginated list component
+ * @description Type for form service controls
+ * @summary Defines the structure of form controls managed by the form service.
+ * It's a nested record where the outer key is the form group name, the inner key
+ * is the control name, and the value contains the form group and field properties.
+ * @typedef {Record<string, Record<string, { control: FormGroup; props: AngularFieldDefinition }>>} FormServiceControls
  * @memberOf module:engine
  */
-declare enum ComponentsTagNames {
-    LIST_ITEM = "ngx-decaf-list-item",
-    LIST_INFINITE = "ngx-decaf-list-infinite",
-    LIST_PAGINATED = "ngx-decaf-list-paginated"
-}
+type FormServiceControls = Record<string, Record<string, FormServiceControl>>;
+type FormParent = FormGroup | FormArray;
 /**
- * @description Base component property name constants
- * @summary Enum defining the standard property names used by base components in the application.
- * These property names are used for consistent property access across components.
- * @enum {string}
- * @readonly
- * @property {string} MODEL - Property name for the component's data model
- * @property {string} LOCALE - Property name for localization settings
- * @property {string} PK - Property name for primary key
- * @property {string} ITEMS - Property name for collection items
- * @property {string} ROUTE - Property name for routing information
- * @property {string} OPERATIONS - Property name for available operations
- * @property {string} UID - Property name for unique identifier
- * @property {string} TRANSLATABLE - Property name for translation flag
- * @property {string} MAPPER - Property name for property mapper
- * @property {string} INITIALIZED - Property name for initialization state
+ * @description Form parent group tuple
+ * @summary Represents a tuple containing a FormGroup and its associated string identifier.
+ * This is used for managing hierarchical form structures and parent-child relationships.
+ * @typedef {[FormParent, string]} FormParentGroup
  * @memberOf module:engine
  */
-declare enum BaseComponentProps {
-    MODEL = "model",
-    LOCALE = "locale",
-    PK = "pk",
-    ITEMS = "items",
-    ROUTE = "route",
-    OPERATIONS = "operations",
-    UID = "uid",
-    TRANSLATABLE = "translatable",
-    MAPPER = "mapper",
-    INITIALIZED = "initialized"
-}
-declare enum ListComponentsTypes {
-    INFINITE = "infinite",
-    PAGINATED = "paginated"
-}
-interface IListEmptyResult {
-    title: string;
-    subtitle: string;
-    showButton: boolean;
-    buttonText: string;
-    link: string;
-    icon: string;
-}
+type FormParentGroup = [FormParent, string];
+type I18nResourceConfigType = I18nResourceConfig | I18nResourceConfig[];
 
 /**
- * @description Marks an Angular component as dynamically loadable
- * @summary Decorator that registers an Angular component with the NgxRenderingEngine for dynamic loading.
- * This decorator must be applied before the @Component decorator to properly extract component metadata.
- * It adds metadata to the component class and registers it with the rendering engine using its selector.
- * @function Dynamic
- * @return {Function} A decorator function that can be applied to Angular component classes
- * @mermaid
- * sequenceDiagram
- *   participant C as Component Class
- *   participant D as Dynamic Decorator
- *   participant R as NgxRenderingEngine
- *   participant M as Angular Metadata
- *   C->>D: Apply decorator
- *   D->>M: reflectComponentType()
- *   M-->>D: Return component metadata
- *   alt No metadata found
- *     D->>D: Throw InternalError
- *   else Metadata found
- *     D->>R: registerComponent(selector, constructor)
- *     D->>C: Apply metadata
- *   end
- * @category Decorators
+ * @module 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}
  */
-declare function Dynamic(): (target: object, propertyKey?: string | symbol | unknown, descriptor?: PropertyDescriptor) => void;
 
+/**
+ * @description Interface for models that can be rendered
+ * @summary Defines the basic structure for models that can be rendered by the engine.
+ * Contains an optional rendererId that uniquely identifies the rendered instance.
+ * @interface IRenderedModel
+ * @property {string} [rendererId] - Optional unique ID for the rendered model instance
+ * @memberOf module:engine
+ */
+interface IRenderedModel {
+    rendererId?: string;
+}
 /**
  * @description Interface for components that hold an ElementRef
  * @summary Defines a component holder interface that provides access to the underlying DOM element through ElementRef
@@ -238,7 +238,7 @@ interface IFormElement extends IComponentHolder {
      * @description The Angular FormGroup associated with this form element
      * @property {FormGroup|undefined} formGroup - The form group instance for managing form controls and validation
      */
-    formGroup: FormGroup | undefined;
+    formGroup: FormParent | undefined;
 }
 /**
  * @description Interface for fieldset item representation in the UI.
@@ -325,6 +325,8 @@ interface IComponentInput extends FieldProperties {
     updateMode?: FieldUpdateMode;
     formGroup?: FormGroup;
     formControl?: FormControl;
+    model?: Model | string;
+    operation?: CrudOperationKeys | undefined;
 }
 /**
  * @description Component configuration structure
@@ -392,6 +394,7 @@ interface AngularDynamicOutput {
     instance?: Type<unknown>;
     formGroup?: FormGroup;
     formControl?: FormControl;
+    projectable?: boolean;
 }
 /**
  * @description Base option type for input components
@@ -439,17 +442,17 @@ interface FormServiceControl {
 /**
  * @description Interface for list item custom events
  * @summary Defines the structure of custom events triggered by list items.
- * Extends BaseCustomEvent with additional properties for the action and primary key.
+ * Extends IBaseCustomEvent with additional properties for the action and primary key.
  * @interface ListItemCustomEvent
  * @property {string} action - The action performed on the list item
  * @property {string} [pk] - Optional primary key of the affected item
- * @property {any} data - The data associated with the event (inherited from BaseCustomEvent)
- * @property {HTMLElement} [target] - The target element (inherited from BaseCustomEvent)
- * @property {string} [name] - The name of the event (inherited from BaseCustomEvent)
- * @property {string} component - The component that triggered the event (inherited from BaseCustomEvent)
+ * @property {any} data - The data associated with the event (inherited from IBaseCustomEvent)
+ * @property {HTMLElement} [target] - The target element (inherited from IBaseCustomEvent)
+ * @property {string} [name] - The name of the event (inherited from IBaseCustomEvent)
+ * @property {string} component - The component that triggered the event (inherited from IBaseCustomEvent)
  * @memberOf module:engine
  */
-interface ListItemCustomEvent extends BaseCustomEvent {
+interface ListItemCustomEvent extends IBaseCustomEvent {
     action: string;
     pk?: string;
 }
@@ -457,14 +460,14 @@ interface ListItemCustomEvent extends BaseCustomEvent {
  * @description Base interface for custom events
  * @summary Defines the base structure for custom events in the application.
  * Contains properties for the event data, target element, name, and component.
- * @interface BaseCustomEvent
+ * @interface IBaseCustomEvent
  * @property {any} data - The data associated with the event
  * @property {HTMLElement} [target] - The target element that triggered the event
  * @property {string} [name] - The name of the event
  * @property {string} component - The component that triggered the event
  * @memberOf module:engine
  */
-interface BaseCustomEvent {
+interface IBaseCustomEvent {
     name: string;
     component?: string;
     data?: unknown;
@@ -480,200 +483,265 @@ interface I18nResourceConfig {
     prefix: string;
     suffix: string;
 }
-
-type HandlerLike = Record<string, (...args: unknown[]) => unknown | Promise<unknown>>;
-interface RawQuery<M extends Model> {
-    select: undefined | (keyof M)[];
-    from: Constructor<M>;
-    where: (el: M) => boolean;
-    sort?: (el: M, el2: M) => number;
-    limit?: number;
-    skip?: number;
-}
-type DecafRepositoryAdapter<F extends RepositoryFlags = RepositoryFlags, C extends Context<F> = Context<F>> = Adapter<any, any, RawQuery<any>, F, C>;
-type DecafRepository<M extends Model> = Repository<M, RawQuery<M>, DecafRepositoryAdapter<RepositoryFlags, Context<RepositoryFlags>>, RepositoryFlags, Context<RepositoryFlags>>;
 /**
- * @description Generic key-value pair type
- * @summary Represents a generic object with string keys and any type of values.
- * This is commonly used for dynamic data structures where the properties are not known at compile time.
- * @typedef {Record<string, any>} KeyValue
- * @memberOf module:engine
- */
-type KeyValue = Record<string, any>;
-/**
- * @description Generic function type
- * @summary Represents a function that accepts any number of arguments of any type
- * and returns any type. This is useful for defining function parameters or variables
- * where the exact function signature is not known at compile time.
- * @typedef FunctionLike
- * @memberOf module:engine
- */
-type FunctionLike = (...args: any[]) => any;
-/**
- * @description Element size options for UI components
- * @summary Defines the possible size values that can be applied to UI elements.
- * These sizes control the dimensions and layout behavior of components.
- * @typedef {('small'|'medium'|'large'|'xlarge'|'2xlarge'|'auto'|'expand'|'block')} ElementSizes
- * @memberOf module:engine
- */
-type ElementSizes = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | 'block';
-/**
- * @description Basic position options for UI elements
- * @summary Defines the possible position values that can be applied to UI elements.
- * These positions control the alignment and placement of components.
- * @typedef {('left'|'center'|'right'|'top'|'bottom')} ElementPositions
- * @memberOf module:engine
- */
-type ElementPositions = 'left' | 'center' | 'right' | 'top' | 'bottom';
-/**
- * @description Extended position options for flex layouts
- * @summary Extends the basic ElementPositions with additional flex-specific position values.
- * These positions are used for controlling alignment and distribution in flex containers.
- * @typedef {(ElementPositions|'stretch'|'middle'|'around'|'between')} FlexPositions
- * @memberOf module:engine
- */
-type FlexPositions = ElementPositions | 'stretch' | 'middle' | 'around' | 'between';
-/**
- * @description Update mode options for form fields
- * @summary Defines when form field values should be updated in the model.
- * - 'change': Update on every change event
- * - 'blur': Update when the field loses focus
- * - 'submit': Update only when the form is submitted
- * @typedef {('change'|'blur'|'submit')} FieldUpdateMode
- * @memberOf module:engine
- */
-type FieldUpdateMode = 'change' | 'blur' | 'submit';
-/**
- * @description Interface for models that can be rendered
- * @summary Defines the basic structure for models that can be rendered by the engine.
- * Contains an optional rendererId that uniquely identifies the rendered instance.
- * @interface RenderedModel
- * @property {string} [rendererId] - Optional unique ID for the rendered model instance
+ * @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
  * @memberOf module:engine
  */
-interface RenderedModel {
-    rendererId?: string;
+interface ICrudFormEvent extends IBaseCustomEvent {
+    handlers?: Record<string, unknown>;
 }
 /**
- * @description Possible input types for form fields
- * @summary Defines the possible input types that can be used in form fields.
- * Includes standard HTML input types like checkbox, radio, and select,
- * as well as Ionic's TextFieldTypes and textarea.
- * @typedef {('checkbox'|'radio'|'select'|TextFieldTypes|'textarea')} PossibleInputTypes
+ * @description Pagination custom event
+ * @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
  * @memberOf module:engine
  */
-type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'textarea';
-/**
- * @description Field definition for Angular components
- * @summary A comprehensive type that combines properties from various Ionic components
- * to define the structure of a field in an Angular form. It omits certain properties
- * from IonInput, picks specific properties from IonSelect, IonTextarea, and IonCheckbox,
- * and adds custom properties like type and className.
- * @typedef {Object} AngularFieldDefinition
- * @property {PossibleInputTypes} type - The type of input field
- * @property {string|string[]} className - CSS class name(s) for the field
- * @property {string} [cancelText] - Text for the cancel button (from IonSelect)
- * @property {string} [interface] - Interface style for select (from IonSelect)
- * @property {string} [selectedText] - Text for selected option (from IonSelect)
- * @property {Object} [interfaceOptions] - Options for the interface (from IonSelect)
- * @property {number} [rows] - Number of rows for textarea (from IonTextarea)
- * @property {number} [cols] - Number of columns for textarea (from IonTextarea)
- * @property {string} [alignment] - Alignment of checkbox (from IonCheckbox)
- * @property {string} [justify] - Justification of checkbox (from IonCheckbox)
- * @property {boolean} [checked] - Whether checkbox is checked (from IonCheckbox)
- * @memberOf module:engine
- */
-type AngularFieldDefinition = Omit<IonInput, 'ionInput' | 'ionFocus' | 'ionChange' | 'ionBlur' | 'getInputElement' | 'setFocus' | 'label' | 'el' | 'z' | 'type'> & Pick<IonSelect, 'cancelText' | 'interface' | 'selectedText' | 'interfaceOptions'> & Pick<IonTextarea, 'rows' | 'cols'> & Pick<IonCheckbox, 'alignment' | 'justify' | 'checked'> & {
-    type: PossibleInputTypes;
-    className: string | string[];
-} & Record<string, unknown>;
-/**
- * @description String or boolean representation of a boolean value
- * @summary Represents a value that can be either a boolean or a string representation of a boolean.
- * This is useful for handling attribute values that can be specified as either strings or booleans.
- * @typedef {('true'|'false'|boolean)} StringOrBoolean
- * @memberOf module:engine
- */
-type StringOrBoolean = 'true' | 'false' | boolean;
+interface IPaginationCustomEvent extends IBaseCustomEvent {
+    data: {
+        page: number;
+        direction: 'next' | 'previous';
+    };
+}
 /**
- * @description Option type for CRUD field inputs
- * @summary Represents a union type that can be either a SelectOption or RadioOption.
- * This is used for defining options in form fields that support both select and radio input types.
- * @typedef {(SelectOption|RadioOption)} CrudFieldOption
+ * @description Menu item definition
+ * @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
  * @memberOf module:engine
  */
-type CrudFieldOption = SelectOption | RadioOption;
+interface IMenuItem {
+    label: string;
+    title?: string;
+    url?: string;
+    icon?: string;
+    color?: string;
+}
+interface IFormReactiveSubmitEvent {
+    data: Record<string, unknown>;
+}
+interface ICrudFormOptions {
+    buttons: {
+        submit: {
+            icon?: string;
+            iconSlot?: 'start' | 'end';
+            text?: string;
+        };
+        clear?: {
+            icon?: string;
+            iconSlot?: 'start' | 'end';
+            text?: string;
+        };
+    };
+}
+interface IListEmptyResult {
+    title: string;
+    subtitle: string;
+    showButton: boolean;
+    buttonText: string;
+    link: string;
+    icon: string;
+}
+
 /**
- * @description Option type for select inputs
- * @summary Extends the InputOption interface with a selected property to indicate
- * whether the option is selected by default.
+ * @description Angular engine key constants
+ * @summary Contains key strings used by the Angular rendering engine for reflection,
+ * dynamic component creation, and other engine operations.
+ * @typedef {Object} AngularEngineKeys
+ * @property {string} REFLECT - Prefix for reflection metadata keys
+ * @property {string} DYNAMIC - Key for dynamic component identification
+ * @property {string} ANNOTATIONS - Key for component annotations
+ * @property {string} ECMP - Key for embedded components
+ * @property {string} NG_REFLECT - Prefix for Angular reflection attributes
+ * @property {string} RENDERED - Prefix for rendered component markers
+ * @property {string} MAPPER - Key for property mappers
+ * @property {string} CHILDREN - Key for child components
+ * @property {string} LISTABLE - Key for listable components
+ * @property {string} RENDER - Key for renderable components
+ * @property {string} RENDERED_ID - Template for rendered component IDs
+ * @property {string} PARENT - Key for comparison decorators and validators
+ * @const AngularEngineKeys
  * @memberOf module:engine
  */
-type SelectOption = InputOption & {
-    selected?: boolean;
+declare const AngularEngineKeys: {
+    REFLECT: string;
+    DYNAMIC: string;
+    ANNOTATIONS: string;
+    ECMP: string;
+    NG_REFLECT: string;
+    RENDERED: string;
+    MAPPER: string;
+    CHILDREN: string;
+    LISTABLE: string;
+    RENDER: string;
+    RENDERED_ID: string;
+    PARENT: string;
+    VALIDATION_PARENT_KEY: symbol;
 };
 /**
- * @description Option type for radio inputs
- * @summary Extends the InputOption interface with a checked property to indicate
- * whether the option is checked by default.
+ * @description Form validation state constants
+ * @summary Contains constants representing the possible validation states of a form.
+ * These are used to check and handle form validation throughout the application.
+ * @typedef {Object} FormConstants
+ * @property {string} VALID - Constant representing a valid form state
+ * @property {string} INVALID - Constant representing an invalid form state
+ * @const FormConstants
  * @memberOf module:engine
  */
-type RadioOption = InputOption & {
-    checked?: boolean;
+declare const FormConstants: {
+    readonly VALID: "VALID";
+    readonly INVALID: "INVALID";
 };
 /**
- * @description Option type for checkbox inputs
- * @summary Alias for RadioOption, as checkbox options have the same structure as radio options.
- * @typedef {RadioOption} CheckboxOption
+ * @description Event name constants
+ * @summary Enum containing constants for event names used throughout the application.
+ * These are used to standardize event naming and handling.
+ * @enum {string}
+ * @readonly
+ * @property {string} BACK_BUTTON_NAVIGATION - Event fired when back button navigation ends
+ * @property {string} REFRESH_EVENT - Event fired when a refresh action occurs
+ * @property {string} CLICK_EVENT - Event fired when a click action occurs
+ * @property {string} SUBMIT_EVENT - Event fired when a form submission occurs
  * @memberOf module:engine
  */
-type CheckboxOption = RadioOption;
+declare const EventConstants: {
+    readonly BACK_BUTTON_NAVIGATION: "backButtonNavigationEndEvent";
+    readonly REFRESH: "RefreshEvent";
+    readonly CLICK: "ClickEvent";
+    readonly SUBMIT: "SubmitEvent";
+    readonly VALIDATION_ERROR: "validationErrorEvent";
+    readonly FIELDSET_ADD_GROUP: "fieldsetAddGroupEvent";
+    readonly FIELDSET_UPDATE_GROUP: "fieldsetUpdateGroupEvent";
+    readonly FIELDSET_REMOVE_GROUP: "fieldsetRemoveGroupEvent";
+};
 /**
- * @description Target options for HTML forms
- * @summary Defines the possible target values for HTML forms, including standard targets
- * like '_blank', '_self', '_parent', and '_top', as well as custom string values.
- * @typedef {('_blank'|'_self'|'_parent'|'_top'|string)} HTMLFormTarget
+ * @description Logger level constants
+ * @summary Enum defining the logging levels used in the application's logging system.
+ * Lower values represent more verbose logging, while higher values represent more critical logs.
+ * @enum {number}
+ * @readonly
+ * @property {number} ALL - Log everything (most verbose)
+ * @property {number} DEBUG - Log debug information
+ * @property {number} INFO - Log informational messages
+ * @property {number} WARN - Log warnings
+ * @property {number} ERROR - Log errors
+ * @property {number} CRITICAL - Log critical errors (least verbose)
  * @memberOf module:engine
  */
-type HTMLFormTarget = '_blank' | '_self' | '_parent' | '_top' | string;
+declare enum LoggerLevels {
+    ALL = 0,
+    DEBUG = 1,
+    INFO = 2,
+    WARN = 3,
+    ERROR = 4,
+    CRITICAL = 5
+}
 /**
- * @description Type for form service controls
- * @summary Defines the structure of form controls managed by the form service.
- * It's a nested record where the outer key is the form group name, the inner key
- * is the control name, and the value contains the form group and field properties.
- * @typedef {Record<string, Record<string, { control: FormGroup; props: AngularFieldDefinition }>>} FormServiceControls
+ * @description Route direction constants
+ * @summary Enum defining the possible navigation directions in the application.
+ * Used for controlling navigation flow and animation directions.
+ * @enum {string}
+ * @readonly
+ * @property {string} BACK - Navigate back to the previous page
+ * @property {string} FORWARD - Navigate forward to the next page
+ * @property {string} ROOT - Navigate to the root/home page
  * @memberOf module:engine
  */
-type FormServiceControls = Record<string, Record<string, FormServiceControl>>;
+declare enum RouteDirections {
+    BACK = "back",
+    FORWARD = "forward",
+    ROOT = "root"
+}
 /**
- * @description Renderer custom event type
- * @summary Combines BaseCustomEvent with KeyValue properties to create a flexible
- * custom event type for renderer components. This allows events to carry both
- * standard event properties and additional custom data.
- * @typedef RendererCustomEvent
+ * @description Component tag name constants
+ * @summary Enum defining the tag names for custom components used in the application.
+ * These tag names are used for component registration and rendering.
+ * @enum {string}
+ * @readonly
+ * @property {string} LIST_ITEM - Tag name for list item component
+ * @property {string} LIST_INFINITE - Tag name for infinite scrolling list component
+ * @property {string} LIST_PAGINATED - Tag name for paginated list component
  * @memberOf module:engine
  */
-type RendererCustomEvent = BaseCustomEvent & KeyValue;
+declare enum ComponentsTagNames {
+    LIST_ITEM = "ngx-decaf-list-item",
+    LIST_INFINITE = "ngx-decaf-list-infinite",
+    LIST_PAGINATED = "ngx-decaf-list-paginated",
+    CRUD_FIELD = "ngx-decaf-crud-field",
+    LAYOUT_COMPONENT = "ngx-decaf-layout"
+}
 /**
- * @description CRUD form event type
- * @summary Extends BaseCustomEvent 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 CrudFormEvent
- * @property {Record<string, any>} [handlers] - Optional handlers for form operations
+ * @description Base component property name constants
+ * @summary Enum defining the standard property names used by base components in the application.
+ * These property names are used for consistent property access across components.
+ * @enum {string}
+ * @readonly
+ * @property {string} MODEL - Property name for the component's data model
+ * @property {string} LOCALE - Property name for localization settings
+ * @property {string} PK - Property name for primary key
+ * @property {string} ITEMS - Property name for collection items
+ * @property {string} ROUTE - Property name for routing information
+ * @property {string} OPERATIONS - Property name for available operations
+ * @property {string} UID - Property name for unique identifier
+ * @property {string} TRANSLATABLE - Property name for translation flag
+ * @property {string} MAPPER - Property name for property mapper
+ * @property {string} INITIALIZED - Property name for initialization state
  * @memberOf module:engine
  */
-type CrudFormEvent = BaseCustomEvent & {
-    handlers?: Record<string, any>;
+declare enum BaseComponentProps {
+    MODEL = "model",
+    LOCALE = "locale",
+    LOCALE_ROOT = "locale_root",
+    PK = "pk",
+    ITEMS = "items",
+    ROUTE = "route",
+    OPERATIONS = "operations",
+    UID = "uid",
+    TRANSLATABLE = "translatable",
+    MAPPER = "mapper",
+    INITIALIZED = "initialized",
+    COMPONENT_NAME = "componentName",
+    PARENT_COMPONENT = "parentComponent",
+    FORM_GROUP_COMPONENT_PROPS = "componentProps"
+}
+declare enum ListComponentsTypes {
+    INFINITE = "infinite",
+    PAGINATED = "paginated"
+}
+declare const CssClasses: {
+    BUTTONS_CONTAINER: string;
 };
-type FormParent = FormGroup | FormArray;
+declare const DefaultFormReactiveOptions: ICrudFormOptions;
+
 /**
- * @description Form parent group tuple
- * @summary Represents a tuple containing a FormGroup and its associated string identifier.
- * This is used for managing hierarchical form structures and parent-child relationships.
- * @typedef {[FormParent, string]} FormParentGroup
- * @memberOf module:engine
+ * @description Marks an Angular component as dynamically loadable
+ * @summary Decorator that registers an Angular component with the NgxRenderingEngine for dynamic loading.
+ * This decorator must be applied before the @Component decorator to properly extract component metadata.
+ * It adds metadata to the component class and registers it with the rendering engine using its selector.
+ * @function Dynamic
+ * @return {Function} A decorator function that can be applied to Angular component classes
+ * @mermaid
+ * sequenceDiagram
+ *   participant C as Component Class
+ *   participant D as Dynamic Decorator
+ *   participant R as NgxRenderingEngine
+ *   participant M as Angular Metadata
+ *   C->>D: Apply decorator
+ *   D->>M: reflectComponentType()
+ *   M-->>D: Return component metadata
+ *   alt No metadata found
+ *     D->>D: Throw InternalError
+ *   else Metadata found
+ *     D->>R: registerComponent(selector, constructor)
+ *     D->>C: Apply metadata
+ *   end
+ * @category Decorators
  */
-type FormParentGroup = [FormParent, string];
+declare function Dynamic(): (target: object, propertyKey?: string | symbol | unknown, descriptor?: PropertyDescriptor) => void;
 
 /**
  * @description Abstract base class for dynamic Angular modules
@@ -693,6 +761,16 @@ type FormParentGroup = [FormParent, string];
 declare abstract class DynamicModule {
 }
 
+/**
+ * @module 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
@@ -778,7 +856,6 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      * @type {Type<unknown> | undefined}
      */
     private static _instance;
-    private static _projectable;
     private static _parentProps;
     /**
      * @description Constructs a new NgxRenderingEngine instance
@@ -892,7 +969,7 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
      *   FromField-->>Render: AngularDynamicOutput
      *   Render-->>Client: return AngularDynamicOutput
      */
-    render<M extends Model>(model: M, globalProps: Record<string, unknown>, vcr: ViewContainerRef, injector: Injector, tpl: TemplateRef<unknown>, projectable?: boolean): AngularDynamicOutput;
+    render<M extends Model>(model: M, globalProps: Record<string, unknown>, vcr: ViewContainerRef, injector: Injector, tpl: TemplateRef<unknown>): AngularDynamicOutput;
     /**
      * @description Initializes the rendering engine
      * @summary This method initializes the rendering engine. It checks if the engine is already initialized
@@ -972,69 +1049,18 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
 }
 
 /**
- * @description Base component class that provides common functionality for all Decaf components.
- * @summary The NgxBaseComponent serves as the foundation for all Decaf UI components, providing
- * shared functionality for localization, element references, and styling. This abstract class
- * implements common properties and methods that are used across the component library, ensuring
- * consistent behavior and reducing code duplication. Components that extend this class inherit
- * its capabilities for handling translations, accessing DOM elements, and applying custom styling.
- *
- * @template M - The model type that this component works with
- * @param {string} instance - The component instance token used for identification
- * @param {string} locale - The locale to be used for translations
- * @param {StringOrBoolean} translatable - Whether the component should be translated
- * @param {string} className - Additional CSS classes to apply to the component
- * @param {"ios" | "md" | undefined} mode - Component platform style
- *
- * @component NgxBaseComponent
- * @example
- * ```typescript
- * @Component({
- *   selector: 'app-my-component',
- *   templateUrl: './my-component.component.html',
- *   styleUrls: ['./my-component.component.scss']
- * })
- * export class MyComponent extends NgxBaseComponent {
- *   constructor(@Inject('instanceToken') instance: string) {
- *     super(instance);
- *   }
- *
- *   ngOnInit() {
- *     this.initialize();
- *     // Component-specific initialization
- *   }
- * }
- * ```
- * @mermaid
- * sequenceDiagram
- *   participant App as Application
- *   participant Comp as Component
- *   participant Base as NgxBaseComponent
- *   participant Engine as NgxRenderingEngine
- *
- *   App->>Comp: Create component
- *   Comp->>Base: super(instance)
- *   Base->>Base: Set componentName & componentLocale
- *
- *   App->>Comp: Set @Input properties
- *   Comp->>Base: ngOnChanges(changes)
+ * @module module:lib/engine/NgxDecafComponentDirective
+ * @description Base decaf component abstraction providing shared inputs and utilities.
+ * @summary NgxDecafComponentDirective 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.
  *
- *   alt model changed
- *     Base->>Base: getModel(model)
- *     Base->>Engine: getDecorators(model, {})
- *     Engine-->>Base: Return decorator metadata
- *     Base->>Base: Configure mapper and item
- *     Base->>Base: getLocale(translatable)
- *   else locale/translatable changed
- *     Base->>Base: getLocale(translatable)
- *   end
- *
- *   App->>Comp: ngOnInit()
- *   Comp->>Base: initialize()
- *   Base->>Base: Set initialized flag
+ * @link {@link NgxDecafComponentDirective}
  */
-declare abstract class NgxBaseComponent implements OnChanges {
-    protected instance: string;
+
+declare abstract class NgxDecafComponentDirective extends LoggedClass implements OnChanges {
+    protected componentName?: string | undefined;
+    protected localeRoot?: string | undefined;
     /**
      * @description Reference to the component's element.
      * @summary Provides direct access to the native DOM element of the component through Angular's
@@ -1043,88 +1069,40 @@ declare abstract class NgxBaseComponent implements OnChanges {
      * identified by the 'component' template reference variable.
      *
      * @type {ElementRef}
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     component: ElementRef;
+    name: string;
+    childOf: string | undefined;
     /**
-     * @description The name of the component.
-     * @summary Stores the name of the component, which is typically derived from the class name.
-     * This property is used internally for various purposes such as logging, deriving the default
-     * locale, and potentially for component identification in debugging or error reporting.
-     *
-     * The `componentName` is set during the component's initialization process and should not
-     * be modified externally. It's marked as protected to allow access in derived classes while
-     * preventing direct access from outside the component hierarchy.
-     *
-     * @type {string}
-     * @protected
-     * @memberOf NgxBaseComponent
-     *
-     * @example
-     * // Inside a derived component class
-     * console.log(this.componentName); // Outputs: "MyCustomComponent"
-     */
-    componentName: string;
-    /**
-     * @description Unique identifier for the renderer.
-     * @summary A unique identifier used to reference the component's renderer instance.
-     * This can be used for targeting specific renderer instances when multiple components
-     * are present on the same page.
+     * @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 NgxBaseComponent
+     * @type {string | number}
+     * @memberOf NgxDecafComponentDirective
      */
-    rendererId: string;
+    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 NgxBaseComponent
-     */
-    model: Model | undefined;
-    /**
-     * @description The repository for interacting with the data model.
-     * @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.
-     *
-     * 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.
-     *
-     * @type {DecafRepository<Model>}
-     * @private
-     * @memberOf NgxBaseComponent
-     */
-    protected _repository?: DecafRepository<Model>;
-    /**
-     * @description Dynamic properties configuration object.
-     * @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 NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
-    props: Record<string, unknown>;
+    model: Model | string | undefined;
     /**
-     * @description Configuration for list item rendering
-     * @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.
+     * @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 {Record<string, unknown>}
-     * @default {tag: ""}
-     * @memberOf NgxBaseComponent
+     * @type {Model | undefined}
+     * @memberOf NgxDecafComponentDirective
      */
-    item: Record<string, unknown>;
+    modelId: Model | undefined;
     /**
      * @description Primary key field name for the model.
      * @summary Specifies which field in the model should be used as the primary key.
@@ -1132,69 +1110,47 @@ declare abstract class NgxBaseComponent implements OnChanges {
      *
      * @type {string}
      * @default 'id'
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     pk: string;
     /**
-     * @description Base route for navigation related to this component.
-     * @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.
+     * @description Field mapping configuration.
+     * @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 {string}
-     * @memberOf NgxBaseComponent
+     * @type {Record<string, string>}
+     * @memberOf NgxDecafComponentDirective
      */
-    route: string;
+    mapper: Record<string, string> | FunctionLike;
     /**
      * @description Available CRUD operations for this component.
      * @summary Defines which CRUD operations (Create, Read, Update, Delete) are available
      * for this component. This affects which operations can be performed on the data.
      *
      * @default [OperationKeys.READ]
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     operations: CrudOperations[];
     /**
-     * @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}
-     * @memberOf NgxBaseComponent
-     */
-    uid: string | number;
-    /**
-     * @description Field mapping configuration.
-     * @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 NgxBaseComponent
-     */
-    mapper: Record<string, string>;
-    /**
-     * @description The locale to be used for translations.
-     * @summary Specifies the locale identifier to use when translating component text.
-     * This can be set explicitly via input property to override the automatically derived
-     * locale from the component name. The locale is typically a language code (e.g., 'en', 'fr')
-     * or a language-region code (e.g., 'en-US', 'fr-CA') that determines which translation
-     * set to use for the component's text content.
+     * @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.
      *
-     * @type {string}
-     * @memberOf NgxBaseComponent
+     * @type {number}
+     * @default 1
+     * @memberOf NgxDecafComponentDirective
      */
-    locale: string;
+    row: number;
     /**
-     * @description Determines if the component should be translated.
-     * @summary Controls whether the component's text content should be processed for translation.
-     * When true, the component will attempt to translate text using the specified locale.
-     * When false, text is displayed as-is without translation. This property accepts either
-     * a boolean value or a string that can be converted to a boolean (e.g., 'true', 'false', '1', '0').
+     * @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.
      *
-     * @type {StringOrBoolean}
-     * @default false
-     * @memberOf NgxBaseComponent
+     * @type {number}
+     * @default 1
+     * @memberOf NgxDecafComponentDirective
      */
-    translatable: StringOrBoolean;
+    col: number;
     /**
      * @description Additional CSS class names to apply to the component.
      * @summary Allows custom CSS classes to be added to the component's root element.
@@ -1204,76 +1160,68 @@ declare abstract class NgxBaseComponent implements OnChanges {
      *
      * @type {string}
      * @default ""
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     className: string;
     /**
-     * @description Component platform style.
-     * @summary Controls the visual appearance of the component based on platform design guidelines.
-     * The 'ios' mode follows iOS design patterns, while 'md' (Material Design) follows Android/Google
-     * design patterns. This property affects various visual aspects such as animations, form elements,
-     * and icons. Setting this property allows components to maintain platform-specific styling
-     * for a more native look and feel.
+     * @description The repository for interacting with the data model.
+     * @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.
      *
-     * @type {("ios" | "md" | undefined)}
-     * @default "md"
-     * @memberOf NgxBaseComponent
-     */
-    mode: 'ios' | 'md' | undefined;
-    /**
-     * @description The locale derived from the component's class name.
-     * @summary Stores the automatically derived locale based on the component's class name.
-     * This is determined during component initialization and serves as a fallback when no
-     * explicit locale is provided via the locale input property. The derivation is handled
-     * by the getLocaleContext utility function, which extracts a locale identifier
-     * from the component's class name.
+     * 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.
      *
-     * @type {string}
-     * @memberOf NgxBaseComponent
+     * @type {DecafRepository<Model>}
+     * @private
+     * @memberOf NgxDecafComponentDirective
      */
-    componentLocale: string;
+    protected _repository?: DecafRepository<Model>;
     /**
-     * @description Controls whether child components should be rendered
-     * @summary Determines if child components should be rendered by the component.
-     * This can be set to a boolean value or a string that can be converted to a boolean.
-     * When true, child components defined in the model will be rendered. When false,
-     * child components will be skipped. This provides control over the rendering depth.
+     * @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.
      *
-     * @type {string | StringOrBoolean}
-     * @default true
-     * @memberOf NgxBaseComponent
+     * @private
+     * @type {MenuController}
+     * @memberOf NgxDecafComponentDirective
      */
-    renderChild: string | StringOrBoolean;
+    protected menuController: MenuController;
     /**
-     * @description Flag indicating if the component has been initialized
-     * @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
-     */
-    initialized: boolean;
+      * @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
+      */
+    protected changeDetectorRef: ChangeDetectorRef;
     /**
-     * @description Event emitter for custom renderer events.
-     * @summary Emits custom events that occur within child components or the layout 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.
+     * @description Angular Renderer2 service for safe 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.
      *
-     * @type {EventEmitter<RendererCustomEvent>}
-     * @memberOf NgxBaseComponent
+     * @protected
+     * @type {Renderer2}
+     * @memberOf CrudFormComponent
      */
-    listenEvent: EventEmitter<RendererCustomEvent>;
+    protected renderer: Renderer2;
     /**
-     * @description Reference to the rendering engine instance
-     * @summary Provides access to the NgxRenderingEngine singleton instance,
-     * which handles the rendering of components based on model definitions.
-     * This engine is used to extract decorator metadata and render child components.
+     * @description Translation service for internationalization.
+     * @summary Injected service that provides translation capabilities for UI text.
+     * Used to translate button labels and validation messages based on the current locale.
      *
-     * @type {NgxRenderingEngine}
+     * @protected
+     * @type {TranslateService}
+     * @memberOf CrudFormComponent
      */
-    renderingEngine: NgxRenderingEngine;
+    protected translateService: TranslateService;
     /**
      * @description Logger instance for the component.
      * @summary Provides logging capabilities for the component, allowing for consistent
@@ -1286,44 +1234,88 @@ declare abstract class NgxBaseComponent implements OnChanges {
      *
      * @type {Logger}
      * @private
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     logger: Logger;
     /**
-     * @description Creates an instance of NgxBaseComponent.
-     * @summary Initializes a new instance of the base component with the provided instance token.
-     * This constructor sets up the fundamental properties required by all Decaf components,
-     * including the component name, locale settings, and logging capabilities. The instance
-     * token is used for component identification and locale derivation.
+     * @description Event emitter for custom renderer events.
+     * @summary Emits custom events that occur within child components or the layout 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.
+     *
+     * @type {EventEmitter<IBaseCustomEvent>}
+     * @memberOf NgxDecafComponentDirective
+     */
+    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
+     * @type {Router}
+     * @memberOf NgxDecafComponentDirective
+     */
+    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.
      *
-     * The constructor performs the following initialization steps:
-     * 1. Sets the componentName from the provided instance token
-     * 2. Derives the componentLocale from the class name using utility functions
-     * 3. Initializes the logger instance for the component
+     * @private
+     * @type {Router}
+     * @memberOf NgxDecafComponentDirective
+     */
+    locale?: string;
+    /**
+     * @description Configuration for list item rendering
+     * @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.
      *
-     * @param {string} instance - The component instance token used for identification
+     * @type {Record<string, unknown>}
+     * @default {tag: ""}
+     * @memberOf NgxDecafComponentDirective
+     */
+    item: Record<string, unknown>;
+    /**
+     * @description Dynamic properties configuration object.
+     * @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.
      *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular
-     *   participant C as Component
-     *   participant B as NgxBaseComponent
-     *   participant U as Utils
-     *   participant L as Logger
+     * @type {Record<string, unknown>}
+     * @default {}
+     * @memberOf NgxDecafComponentDirective
+     */
+    props: Record<string, unknown>;
+    /**
+     * @description Base route for navigation related to this component.
+     * @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.
      *
-     *   A->>C: new Component(instance)
-     *   C->>B: super(instance)
-     *   B->>B: Set componentName = instance
-     *   B->>U: getLocaleContext(instance)
-     *   U-->>B: Return derived locale
-     *   B->>B: Set componentLocale
-     *   B->>L: getLogger(this)
-     *   L-->>B: Return logger instance
-     *   B->>B: Set logger
+     * @type {string}
+     * @memberOf NgxDecafComponentDirective
+     */
+    route: string;
+    /**
+     * @description Flag indicating if the component has been initialized
+     * @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.
      *
-     * @memberOf NgxBaseComponent
+     * @type {boolean}
+     * @default false
+     * @memberOf NgxDecafComponentDirective
      */
-    protected constructor(instance: string);
+    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.
@@ -1336,7 +1328,7 @@ declare abstract class NgxBaseComponent implements OnChanges {
      *
      * @returns {DecafRepository<Model>} The initialized repository instance.
      * @private
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxDecafComponentDirective
      */
     protected get repository(): DecafRepository<Model>;
     /**
@@ -1352,39 +1344,9 @@ declare abstract class NgxBaseComponent implements OnChanges {
      * @return {void}
      */
     ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * @description Gets the appropriate locale string based on the translatable flag and available locales.
-     * @summary Determines which locale string to use for translation based on the translatable flag
-     * and available locale settings. This method first converts the translatable parameter to a boolean
-     * using the stringToBoolean utility function. If translatable is false, it returns an empty string,
-     * indicating no translation should be performed. If translatable is true, it checks for an explicitly
-     * provided locale via the locale property. If no explicit locale is available, it falls back to the
-     * componentLocale derived from the component's class name.
-     *
-     * @param {StringOrBoolean} translatable - Whether the component should be translated
-     * @return {string} The locale string to use for translation, or empty string if not translatable
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as Component
-     *   participant N as NgxBaseComponent
-     *   participant S as StringUtils
-     *
-     *   C->>N: getLocale(translatable)
-     *   N->>S: stringToBoolean(translatable)
-     *   S-->>N: Return boolean value
-     *   N->>N: Store in this.translatable
-     *   alt translatable is false
-     *     N-->>C: Return empty string
-     *   else translatable is true
-     *     alt this.locale is defined
-     *       N-->>C: Return this.locale
-     *     else this.locale is not defined
-     *       N-->>C: Return this.componentLocale
-     *     end
-     *   end
-     */
-    getLocale(translatable: StringOrBoolean): string;
+    protected translate(phrase: string | string[], params?: object | string): Promise<string>;
+    protected initialize(...args: unknown[]): Promise<void>;
+    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
@@ -1405,66 +1367,19 @@ declare abstract class NgxBaseComponent implements OnChanges {
      * @param {string | Model} model - The model instance or identifier string
      * @return {void}
      */
-    getModel(model: string | Model): void;
+    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 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}
+   */
     setModelDefinitions(model: Model): void;
-    /**
-     * @description Initializes the component
-     * @summary Performs one-time initialization of the component. This method checks if
-     * the component has already been initialized to prevent duplicate initialization.
-     * When called for the first time, it sets the initialized flag to true and logs
-     * an initialization message with the component name. This method is typically called
-     * during the component's lifecycle setup.
-     */
-    initialize(parseProps?: boolean, skip?: string[]): Promise<void>;
-    /**
-     * @description Handles custom events from child components.
-     * @summary Receives events from child renderer components and forwards them to parent
-     * components through the listenEvent output. This creates an event propagation chain
-     * that allows events to bubble up through the component hierarchy, enabling coordinated
-     * responses to user interactions across the layout structure.
-     *
-     * @param {RendererCustomEvent} event - The custom event from a child component
-     * @return {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as Child Component
-     *   participant L as NgxBaseComponent
-     *   participant P as Parent Component
-     *
-     *   C->>L: Emit RendererCustomEvent
-     *   L->>L: handleEvent(event)
-     *   L->>P: listenEvent.emit(event)
-     *   Note over P: Handle event in parent
-     *
-     * @memberOf NgxBaseComponent
-     */
-    handleEvent(event: RendererCustomEvent): void;
-    /**
-     * @description Tracks items in ngFor loops for optimal change detection.
-     * @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.
-     *
-     * @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 NgxBaseComponent
-     */
-    trackItemFn(index: number, item: KeyValue | string | number): string | number;
     /**
      * @description Parses and applies properties from the props object to the component instance.
      * @summary This method iterates through the properties of the provided instance object
@@ -1483,7 +1398,7 @@ declare abstract class NgxBaseComponent implements OnChanges {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant B as NgxBaseComponent
+     *   participant B as NgxBaseComponentDirective
      *   participant P as Props Object
      *
      *   C->>B: parseProps(instance)
@@ -1498,27 +1413,67 @@ declare abstract class NgxBaseComponent implements OnChanges {
      *   end
      *
      * @protected
-     * @memberOf NgxBaseComponent
+     * @memberOf NgxBaseComponentDirective
+     */
+    protected parseProps(instance: KeyValue, skip?: string[]): void;
+    /**
+     * @description Tracks items in ngFor loops for optimal change detection.
+     * @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.
+     *
+     * @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
      */
-    protected parseProps(instance: KeyValue, skip: string[]): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxBaseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxBaseComponent, "ng-component", never, { "rendererId": { "alias": "rendererId"; "required": false; }; "model": { "alias": "model"; "required": false; }; "props": { "alias": "props"; "required": false; }; "item": { "alias": "item"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; "route": { "alias": "route"; "required": false; }; "operations": { "alias": "operations"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; "className": { "alias": "className"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "renderChild": { "alias": "renderChild"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    protected trackItemFn(index: number, item: KeyValue | string | number): string | number;
+    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>;
 }
 
 /**
- * @class NgxCrudFormField
+ * @class NgxDecafFormFieldDirective
  * @implements {FieldProperties}
  * @implements {ControlValueAccessor}
  * @summary Abstract class representing a CRUD form field for Angular applications
  * @description This class provides the base implementation for CRUD form fields in Angular,
  * implementing both CrudFormField and ControlValueAccessor interfaces.
  */
-declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldProperties {
+declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirective implements ControlValueAccessor, FieldProperties {
     /**
-     * @summary Reference to the component's element
-     * @description ElementRef representing the component's native element
+     * @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
      */
-    component: ElementRef;
+    activeFormGroupIndex: number;
+    /**
+     * @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
+     */
+    parentComponent: FormParent;
+    /**
+     * @description Field mapping configuration.
+     * @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 {KeyValue | FunctionLike}
+     * @memberOf CrudFieldComponent
+     */
+    optionsMapper: KeyValue | FunctionLike;
     /**
      * @summary Current CRUD operation
      * @description Represents the current CRUD operation being performed
@@ -1530,12 +1485,9 @@ declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldPr
      */
     formGroup: FormGroup | undefined;
     formControl: FormControl;
-    name: string;
     path: string;
-    childOf?: string;
     type: PossibleInputTypes;
     disabled?: boolean;
-    uid?: string;
     page: number;
     format?: string;
     hidden?: boolean | CrudOperationKeys[];
@@ -1553,15 +1505,25 @@ declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldPr
     lessThanOrEqual?: string;
     greaterThan?: string;
     greaterThanOrEqual?: string;
-    value: string | number | Date;
+    value: string | number | Date | string[];
     multiple: boolean;
-    protected translateService: TranslateService;
-    private validationErrorEventDispateched;
+    private validationErrorEventDispatched;
     /**
      * @summary Parent HTML element
      * @description Reference to the parent HTML element of the field
      */
     protected parent?: HTMLElement;
+    constructor();
+    /**
+     * @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
+     */
+    get activeFormGroup(): FormGroup;
     /**
      * @summary String formatting function
      * @description Provides access to the sf function for error message formatting
@@ -1610,22 +1572,27 @@ declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldPr
      * @returns {HTMLElement} The parent element of the field
      */
     afterViewInit(): HTMLElement;
-    /**
-     * @summary Cleanup on component destruction
-     * @description Unregisters the field when the component is destroyed
-     */
+    ngOnChanges(changes: SimpleChanges): void;
     onDestroy(): void;
-    /**
-     * @summary Get field errors
-     * @description Retrieves all errors associated with the field
-     * @returns {string|void} An array of error objects
-     */
+    setValue(value: unknown): void;
     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>;
 }
 
+/**
+ * @module module:lib/engine/NgxDecafFormService
+ * @description Utilities to create and manage Angular forms in Decaf components.
+ * @summary The NgxDecafFormService 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 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.
+ * @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.
  *
  * @class
  * @param {WeakMap<AbstractControl, FieldProperties>} controls - A WeakMap to store control properties.
@@ -1637,18 +1604,18 @@ declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldPr
  *   { inputs: { name: 'username', type: 'text', required: true } },
  *   { inputs: { name: 'password', type: 'password', minLength: 8 } }
  * ];
- * const form = NgxFormService.createFormFromComponents('loginForm', components, true);
+ * const form = NgxDecafFormService.createFormFromComponents('loginForm', components, true);
  *
  * // Validating fields
- * NgxFormService.validateFields(form);
+ * NgxDecafFormService.validateFields(form);
  *
  * // Getting form data
- * const formData = NgxFormService.getFormData(form);
+ * const formData = NgxDecafFormService.getFormData(form);
  *
  * @mermaid
  * sequenceDiagram
  *   participant C as Component
- *   participant NFS as NgxFormService
+ *   participant NFS as NgxDecafFormService
  *   participant AF as Angular Forms
  *   C->>NFS: createFormFromComponents()
  *   NFS->>AF: new FormGroup()
@@ -1661,7 +1628,7 @@ declare abstract class NgxCrudFormField implements ControlValueAccessor, FieldPr
  *   NFS->>AF: Get control values
  *   NFS-->>C: Return form data
  */
-declare class NgxFormService {
+declare class NgxDecafFormService {
     /**
      * @description WeakMap that stores control properties for form controls.
      * @summary A WeakMap that associates AbstractControl instances with their corresponding FieldProperties.
@@ -1670,7 +1637,7 @@ declare class NgxFormService {
      * @type {WeakMap<AbstractControl, FieldProperties>}
      * @private
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     private static controls;
     /**
@@ -1681,7 +1648,7 @@ declare class NgxFormService {
      * @type {Map<string, FormGroup>}
      * @private
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     private static formRegistry;
     /**
@@ -1698,7 +1665,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant FR as Form Registry
      *   participant AF as Angular Forms
      *
@@ -1717,9 +1684,9 @@ declare class NgxFormService {
      *   NFS-->>C: Return FormGroup | FormArray
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
-    static createForm(id: string, props?: Partial<IComponentInput>, registry?: boolean): FormGroup | FormArray;
+    static createForm(id: string, formArray?: boolean, registry?: boolean): FormGroup | FormArray;
     /**
      * @description Adds a form to the registry.
      * @summary Registers a FormGroup or FormArray with a unique identifier for global access throughout
@@ -1732,9 +1699,10 @@ declare class NgxFormService {
      * @throws {Error} If a FormGroup with the given id is already registered
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static addRegistry(formId: string, formGroup: FormParent): void;
+    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.
@@ -1745,7 +1713,7 @@ declare class NgxFormService {
      * @return {void}
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static removeRegistry(formId: string): void;
     /**
@@ -1763,7 +1731,7 @@ declare class NgxFormService {
      * @private
      * @mermaid
      * sequenceDiagram
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant FG as FormGroup
      *   participant FA as FormArray
      *
@@ -1782,7 +1750,7 @@ declare class NgxFormService {
      *   NFS-->>NFS: Return [parentGroup, controlName]
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     private static resolveParentGroup;
     /**
@@ -1796,7 +1764,7 @@ declare class NgxFormService {
      * @return {Partial<FieldProperties>} The component properties or a specific property if key is provided
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static getComponentPropsFromGroupArray(formGroup: FormGroup | FormArray, key?: string, groupArrayName?: string | undefined): Partial<FieldProperties>;
     /**
@@ -1805,15 +1773,14 @@ declare class NgxFormService {
      * 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 {FormGroup} formGroup - The root form group containing the parent FormArray
-     * @param {string} parentName - The name of the parent FormArray to add the group to
-     * @param {number} [index=1] - The index position where the new group should be added
+     * @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
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
-    static addGroupToParent(formGroup: FormGroup, parentName: string, index?: number): FormGroup;
+    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
@@ -1825,9 +1792,10 @@ declare class NgxFormService {
      * @return {FormGroup} The FormGroup at the specified index
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
-    static getGroupFromParent(formGroup: FormGroup, parentName: string, index?: number): FormGroup;
+    static getGroupFromParent(formGroup: FormParent, parentName: string, index?: number): FormGroup;
+    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
@@ -1839,9 +1807,9 @@ declare class NgxFormService {
      * @return {boolean} True if the value is unique, false otherwise
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
-    static isUniqueOnGroup(formGroup: FormGroup, index: number, operation?: OperationKeys): boolean;
+    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.
@@ -1851,7 +1819,7 @@ declare class NgxFormService {
      * @return {void}
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static enableAllGroupControls(formGroup: FormArray | FormGroup): void;
     /**
@@ -1868,7 +1836,7 @@ declare class NgxFormService {
      *
      * @private
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     private static addFormControl;
     /**
@@ -1885,7 +1853,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant FR as Form Registry
      *
      *   C->>NFS: getControlFromForm(formId, path?)
@@ -1908,7 +1876,7 @@ declare class NgxFormService {
      *   end
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static getControlFromForm(formId: string, path?: string): AbstractControl;
     /**
@@ -1925,7 +1893,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant AF as Angular Forms
      *
      *   C->>NFS: createFormFromChildren(id, registry, children)
@@ -1940,7 +1908,7 @@ declare class NgxFormService {
      *   NFS-->>C: Return FormGroup
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static createFormFromChildren(id: string, registry?: boolean, children?: UIModelMetadata[]): FormGroup;
     /**
@@ -1957,7 +1925,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant AF as Angular Forms
      *
      *   C->>NFS: createFormFromComponents(id, components, registry)
@@ -1972,7 +1940,7 @@ declare class NgxFormService {
      *   NFS-->>C: Return FormGroup
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static createFormFromComponents(id: string, components: IComponentConfig[], registry?: boolean): FormGroup;
     /**
@@ -1989,7 +1957,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant F as Form
      *
      *   C->>NFS: addControlFromProps(id, componentProps, parentProps?)
@@ -2005,9 +1973,9 @@ declare class NgxFormService {
      *   NFS-->>C: Return form/control
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
-    static addControlFromProps(id: string, componentProperties: FieldProperties, parentProps?: FieldProperties): AbstractControl;
+    static addControlFromProps(id: string, componentProperties: FieldProperties, parentProps?: FieldProperties): FormParent;
     /**
      * @description Retrieves form data from a FormGroup.
      * @summary Extracts and processes the data from a FormGroup, handling different input types and nested form groups.
@@ -2020,7 +1988,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant FG as FormGroup
      *   participant FC as FormControl
      *
@@ -2049,7 +2017,7 @@ declare class NgxFormService {
      *   NFS-->>C: Return processed data object
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static getFormData(formGroup: FormGroup): Record<string, unknown>;
     /**
@@ -2067,7 +2035,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant FC as FormControl
      *   participant FG as FormGroup
      *   participant FA as FormArray
@@ -2099,13 +2067,13 @@ declare class NgxFormService {
      *   end
      *
      * @static
-     * @memberOf NgxFormService
+     * @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 {FieldProperties} props - The component properties.
+     * @param {KeyValue} props - The component properties.
      * @return {ValidatorFn[]} An array of validator functions.
      */
     private static validatorsFromProps;
@@ -2122,7 +2090,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant VF as ValidatorFactory
      *   participant AF as Angular Forms
      *
@@ -2142,7 +2110,7 @@ declare class NgxFormService {
      *   NFS-->>C: Return configured FormControl
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static fromProps(props: FieldProperties, updateMode?: FieldUpdateMode): FormControl;
     /**
@@ -2155,7 +2123,7 @@ declare class NgxFormService {
      * @return {FieldProperties} The properties associated with the control, or empty object if not found
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static getPropsFromControl(control: FormControl | FormArray | FormGroup): FieldProperties;
     /**
@@ -2172,7 +2140,7 @@ declare class NgxFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxFormService
+     *   participant NFS as NgxDecafFormService
      *   participant DOM as DOM Tree
      *
      *   C->>NFS: getParentEl(element, tagName)
@@ -2187,7 +2155,7 @@ declare class NgxFormService {
      *   end
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static getParentEl(el: HTMLElement, tag: string): HTMLElement;
     /**
@@ -2201,7 +2169,7 @@ declare class NgxFormService {
      * @return {void}
      *
      * @static
-     * @memberOf NgxFormService
+     * @memberOf NgxDecafFormService
      */
     static register(control: AbstractControl, props: FieldProperties): void;
     /**
@@ -2219,6 +2187,32 @@ declare class NgxFormService {
     static reset(formGroup: FormGroup | FormControl): void;
 }
 
+/**
+ * @module module:lib/engine/NgxEventHandler
+ * @description Event handler base class used by Decaf components.
+ * @summary Defines NgxEventHandler which standardizes event handling logic and provides
+ * logging support for handlers that process custom events emitted by components.
+ *
+ * @link {@link NgxEventHandler}
+ */
+
+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;
+    title: string;
+    protected menu: IMenuItem[];
+    protected titleService: Title;
+    constructor(localeRoot?: string | undefined, hasMenu?: boolean);
+    ionViewWillEnter(): Promise<void>;
+    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
@@ -2242,7 +2236,7 @@ declare class NgxFormService {
  *     +Record~string, unknown~ globals
  *     +EnvironmentInjector injector
  *     +ComponentRef~unknown~ component
- *     +EventEmitter~RendererCustomEvent~ listenEvent
+ *     +EventEmitter~IBaseCustomEvent~ listenEvent
  *     +ngOnInit()
  *     +ngOnDestroy()
  *     +ngOnChanges(changes)
@@ -2315,6 +2309,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
      */
     component: ComponentRef<unknown>;
     children: KeyValue[];
+    projectable: boolean;
     /**
      * @description Event emitter for events from the rendered component.
      * @summary This output property emits events that originate from the dynamically rendered
@@ -2322,10 +2317,10 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
      * dynamic component, creating a communication channel between the parent and the dynamically
      * rendered child.
      *
-     * @type {EventEmitter<RendererCustomEvent>}
+     * @type {EventEmitter<IBaseCustomEvent>}
      * @memberOf ComponentRendererComponent
      */
-    listenEvent: EventEmitter<RendererCustomEvent>;
+    listenEvent: EventEmitter<IBaseCustomEvent>;
     /**
      * @description Logger instance for the component.
      * @summary This property holds a Logger instance specific to this component.
@@ -2345,6 +2340,14 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
      * @type {Model| undefined}
      */
     model: Model | undefined;
+    /**
+   * @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}
+   */
+    parentComponent: FormParent | ElementRef<unknown> | undefined;
     parent: undefined | KeyValue;
     inner?: TemplateRef<unknown>;
     uid: string;
@@ -2490,13 +2493,22 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
      */
     private unsubscribeEvents;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentRendererComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComponentRendererComponent, "ngx-decaf-component-renderer", never, { "tag": { "alias": "tag"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "children": { "alias": "children"; "required": false; }; "model": { "alias": "model"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComponentRendererComponent, "ngx-decaf-component-renderer", never, { "tag": { "alias": "tag"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "children": { "alias": "children"; "required": false; }; "projectable": { "alias": "projectable"; "required": false; }; "model": { "alias": "model"; "required": false; }; "parentComponent": { "alias": "parentComponent"; "required": false; }; "parent": { "alias": "parent"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }
 
+/**
+ * @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.
+ *
+ * @link {@link CrudFieldComponent}
+ */
+
 /**
  * @description A dynamic form field component for CRUD operations.
  * @summary The CrudFieldComponent is a versatile form field component that adapts to different
- * input types and CRUD operations. It extends NgxCrudFormField to inherit form handling capabilities
+ * input types and CRUD operations. It extends NgxDecafFormFieldDirective 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
@@ -2536,7 +2548,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
  *
  * @memberOf module:for-angular
  */
-declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnDestroy, AfterViewInit {
+declare class CrudFieldComponent extends NgxDecafFormFieldDirective 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.
@@ -2605,7 +2617,7 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @default ''
      * @memberOf CrudFieldComponent
      */
-    value: string | number | Date;
+    value: string | number | Date | string[];
     /**
      * @description Whether the field is disabled.
      * @summary When true, the field will be rendered in a disabled state, preventing user interaction.
@@ -2781,24 +2793,6 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @memberOf CrudFieldComponent
      */
     greaterThanOrEqual?: string;
-    /**
-     * @description Number of columns for textarea inputs.
-     * @summary For textarea inputs, this sets the visible width of the text area in average character widths.
-     * This is used alongside rows to define the dimensions of the textarea.
-     *
-     * @type {number}
-     * @memberOf CrudFieldComponent
-     */
-    cols?: number;
-    /**
-     * @description Number of rows for textarea inputs.
-     * @summary For textarea inputs, this sets the visible height of the text area in lines of text.
-     * This is used alongside cols to define the dimensions of the textarea.
-     *
-     * @type {number}
-     * @memberOf CrudFieldComponent
-     */
-    rows?: number;
     /**
      * @description Alignment of the field content.
      * @summary Controls the horizontal alignment of the field content.
@@ -2852,7 +2846,7 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @type {CrudFieldOption[]}
      * @memberOf CrudFieldComponent
      */
-    options: CrudFieldOption[];
+    options: FunctionLike | CrudFieldOption[] | KeyValue[];
     /**
      * @description Mode of the field.
      * @summary Specifies the visual mode of the field, such as 'ios' or 'md'.
@@ -2979,56 +2973,6 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @memberOf CrudFieldComponent
      */
     translatable: StringOrBoolean;
-    /**
-     * @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 CrudFieldComponent
-     */
-    activeFormGroup: number;
-    /**
-     * @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
-     */
-    formGroupArray: FormArray;
-    /**
-     * @description Primary key field name for uniqueness validation.
-     * @summary Specifies the field name that serves as the primary key for uniqueness
-     * validation within form arrays. This is used to prevent duplicate entries
-     * and ensure data integrity in multi-entry forms.
-     *
-     * @type {string}
-     * @memberOf CrudFieldComponent
-     */
-    pk: 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
-     */
-    get getActiveFormGroup(): FormGroup;
-    /**
-     * 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
-     */
-    get parsedOptions(): CrudFieldOption[];
     /**
      * @description Component initialization lifecycle method.
      * @summary Initializes the field component based on the operation type and field configuration.
@@ -3039,7 +2983,16 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @returns {void}
      * @memberOf CrudFieldComponent
      */
-    ngOnInit(): void;
+    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[]>;
     /**
      * @description Component after view initialization lifecycle method.
      * @summary Calls the parent afterViewInit method for READ and DELETE operations.
@@ -3060,6 +3013,8 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      * @memberOf CrudFieldComponent
      */
     ngOnDestroy(): void;
+    toggleOptionSelection(val: string, event: CheckboxCustomEvent): void;
+    isOptionChecked(value: string): boolean;
     /**
      * @description Handles fieldset group creation events from parent fieldsets.
      * @summary Processes events triggered when a new group needs to be added to a fieldset.
@@ -3095,76 +3050,93 @@ declare class CrudFieldComponent extends NgxCrudFormField implements OnInit, OnD
      */
     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; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "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; }; "activeFormGroup": { "alias": "activeFormGroup"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; }, {}, never, never, true, 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>;
 }
 
-interface CrudFormOptions {
-    buttons: {
-        submit: {
-            icon?: string;
-            iconSlot?: 'start' | 'end';
-            text?: string;
-        };
-        clear?: {
-            icon?: string;
-            iconSlot?: 'start' | 'end';
-            text?: string;
-        };
-    };
-}
+/**
+ * @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}
+ */
 
 /**
- * @component CrudFormComponent
- * @example <ngx-decaf-crud-form
- *   action="create"
- *   operation="create"
- *   formGroup="formGroup"
- *   rendererId="rendererId"
- *   submitEvent="submitEvent"
- *   target="_self"
- *   method="event">
- * </ngx-decaf-crud-form>
+ * @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.
  *
- * @param {string} action - The action to be performed (create, read, update, delete)
- * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
- * @param {FormGroup} formGroup - The form group
- * @param {string} rendererId - The renderer id
- * @param {SubmitEvent} submitEvent - The submit event
- * @param {string} target - The target
- * @param {string} method - The method
+ * @class NgxParentComponentDirective
+ * @extends {NgxParentComponentDirective}
+ * @implements {OnInit}
+ * @memberOf NgxParentComponentDirective
  */
-declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, RenderedModel {
+declare class NgxParentComponentDirective extends NgxDecafComponentDirective implements OnInit {
     /**
-     * @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.
+     * @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 {Model| undefined}
-     * @memberOf CrudFormComponent
+     * @type {string}
+     * @default 'Child'
+     * @memberOf FieldsetComponent
      */
-    model: Model | undefined;
+    parentComponent: FormParent;
     /**
-     * @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.
+     * @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 {Model | undefined}
-     * @memberOf CrudFormComponent
+     * @type {UIModelMetadata[]}
+     * @memberOf NgxParentComponentDirective
      */
-    modelId: Model | undefined;
+    children: UIModelMetadata[] | KeyValue[];
     /**
-     * @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 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 {FieldUpdateMode}
-     * @default 'change'
+     * @type {(number | string[])}
+     * @default 1
+     * @memberOf NgxParentComponentDirective
+     */
+    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
+     * @memberOf NgxParentComponentDirective
+     */
+    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}
      * @memberOf CrudFormComponent
      */
-    updateOn: FieldUpdateMode;
+    parentFormId: string;
     /**
      * @description Reference to the reactive form DOM element.
      * @summary ViewChild reference that provides direct access to the form's DOM element.
@@ -3175,6 +3147,28 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      * @memberOf CrudFormComponent
      */
     component: ElementRef;
+    /**
+     * @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 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'
+     * @memberOf CrudFormComponent
+     */
+    updateOn: FieldUpdateMode;
     /**
      * @description Form submission target specification.
      * @summary Specifies where to display the response after form submission, similar
@@ -3203,10 +3197,10 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      * validation, and behavior. These options are merged with default settings
      * during component initialization to customize the form's functionality.
      *
-     * @type {CrudFormOptions}
+     * @type {ICrudFormOptions}
      * @memberOf CrudFormComponent
      */
-    options: CrudFormOptions;
+    options: ICrudFormOptions;
     /**
      * @description Optional action identifier for form submission context.
      * @summary Specifies a custom action name that will be included in the submit event.
@@ -3247,19 +3241,11 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      * @type {FormGroup | undefined}
      * @memberOf CrudFormComponent
      */
-    formGroup: FormGroup | undefined;
-    /**
-     * @description Path to the parent FormGroup, if nested.
-     * @summary Full dot-delimited path of the parent FormGroup. Set only when is part of a nested structure.
-     *
-     * @type {string}
-     * @memberOf CrudFormComponent
-     */
-    childOf?: string;
+    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
+     * instance within the NgxDecafFormService. This ID is also used as the HTML id
      * attribute for the form element, enabling DOM queries and form management.
      *
      * @type {string}
@@ -3267,14 +3253,15 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      */
     rendererId: string;
     /**
-     * @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}
-     * @memberOf CrudFormComponent
-     */
-    uid: 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>}
+   * @memberOf CrudFormComponent
+   */
+    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.
@@ -3288,53 +3275,59 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      */
     allowClear: boolean;
     /**
-     * @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 CrudFormComponent
-     */
+    * @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 CrudFormComponent
+    */
     protected readonly OperationKeys: typeof OperationKeys;
+    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>}
+    * @memberOf CrudFormComponent
+    */
+    ngOnInit(model?: Model | string): Promise<void>;
     /**
-     * @description Event emitter for form submission events.
-     * @summary Emits CrudFormEvent 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<CrudFormEvent>}
-     * @memberOf CrudFormComponent
-     */
-    submitEvent: EventEmitter<CrudFormEvent>;
-    /**
-     * @description Logger instance for the component.
-     * @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.
-     *
-     * 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.
+     * @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.
      *
-     * @type {Logger}
-     * @private
+     * @returns {void}
      * @memberOf CrudFormComponent
      */
-    private logger;
+    ngOnDestroy(): void;
+    getFormArrayIndex(index: number): FormParent | undefined;
     /**
-     * @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 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.
      *
-     * @private
-     * @type {Location}
+     * @returns {void}
      * @memberOf CrudFormComponent
      */
-    private location;
+    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 class CrudFormComponent extends NgxFormDirective {
+    constructor();
     /**
      * @description Component initialization lifecycle method.
      * @summary Initializes the component by setting up the logger, configuring form state
@@ -3346,20 +3339,10 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      * @memberOf CrudFormComponent
      */
     ngOnInit(): 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}
-     * @memberOf CrudFormComponent
-     */
-    ngOnDestroy(): void;
     /**
      * @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 NgxFormService. If validation passes,
+     * then validating all form fields using NgxDecafFormService. If validation passes,
      * extracts form data and emits a submitEvent with the data, component information,
      * and any associated handlers. Returns false if validation fails.
      *
@@ -3368,17 +3351,6 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      * @memberOf CrudFormComponent
      */
     submit(event: SubmitEvent): Promise<boolean | void>;
-    /**
-     * @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}
-     * @memberOf CrudFormComponent
-     */
-    handleReset(): void;
     /**
      * @description Handles delete operations by emitting delete events.
      * @summary Processes delete requests by emitting a submit event with the
@@ -3391,9 +3363,19 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
      */
     handleDelete(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CrudFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFormComponent, "ngx-decaf-crud-form", never, { "model": { "alias": "model"; "required": false; }; "modelId": { "alias": "modelId"; "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; }; "childOf": { "alias": "childOf"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFormComponent, "ngx-decaf-crud-form", never, {}, {}, never, ["*", "*"], true, never>;
 }
 
+/**
+ * @module module:lib/components/empty-state/empty-state.component
+ * @description Empty state component module.
+ * @summary Exposes `EmptyStateComponent` which displays a standardized empty
+ * state UI with optional icon, title, subtitle and action button. Supports
+ * localization and sanitized HTML for dynamic subtitles.
+ *
+ * @link {@link EmptyStateComponent}
+ */
+
 /**
  * @description Component for displaying empty state messages with optional actions.
  * @summary This component provides a standardized way to display empty state messages
@@ -3423,13 +3405,13 @@ declare class CrudFormComponent implements OnInit, IFormElement, OnDestroy, Rend
  *     +ngOnInit()
  *     +handleClick()
  *   }
- *   EmptyStateComponent --|> NgxBaseComponent
+ *   EmptyStateComponent --|> NgxBaseComponentDirective
  *   EmptyStateComponent --|> OnInit
  *
- * @extends {NgxBaseComponent}
+ * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class EmptyStateComponent extends NgxBaseComponent implements OnInit {
+declare class EmptyStateComponent extends NgxDecafComponentDirective implements OnInit {
     /**
      * @description The main title displayed in the empty state.
      * @summary Specifies the primary message to show in the empty state component.
@@ -3572,22 +3554,11 @@ declare class EmptyStateComponent extends NgxBaseComponent implements OnInit {
      * this property can hold the search term that was used. This can be displayed
      * in the empty state message to provide context to the user.
      *
-     * @type {string}
-     * @memberOf EmptyStateComponent
-     */
-    searchValue: string;
-    /**
-     * @description Service for handling navigation operations.
-     * @summary Injected service that provides methods for navigating between routes.
-     * This service is used when the buttonLink is a string URL to navigate to that location.
-     *
-     * @private
-     * @type {Router}
+     * @type {string}
      * @memberOf EmptyStateComponent
      */
-    private router;
+    searchValue: string;
     private sanitizer;
-    private translate;
     searchSubtitle: SafeHtml;
     /**
      * @description Creates an instance of EmptyStateComponent.
@@ -3689,6 +3660,16 @@ declare class EmptyStateComponent extends NgxBaseComponent implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "ngx-decaf-empty-state", never, { "title": { "alias": "title"; "required": false; }; "titleColor": { "alias": "titleColor"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "subtitleColor": { "alias": "subtitleColor"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "buttonLink": { "alias": "buttonLink"; "required": false; }; "buttonText": { "alias": "buttonText"; "required": false; }; "buttonFill": { "alias": "buttonFill"; "required": false; }; "buttonColor": { "alias": "buttonColor"; "required": false; }; "buttonSize": { "alias": "buttonSize"; "required": false; }; "searchValue": { "alias": "searchValue"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * @module module:lib/components/fieldset/fieldset.component
+ * @description Fieldset component module.
+ * @summary Provides `FieldsetComponent` — a dynamic, collapsible fieldset container
+ * for grouping form controls with validation, reorder and add/remove capabilities.
+ * Ideal for complex forms that require nested groupings and dynamic items.
+ *
+ * @link {@link FieldsetComponent}
+ */
+
 /**
  * @description Dynamic fieldset component with collapsible accordion functionality.
  * @summary This component provides a sophisticated fieldset container that automatically
@@ -3739,7 +3720,7 @@ declare class EmptyStateComponent extends NgxBaseComponent implements OnInit {
  *
  * @memberOf FieldsetComponent
  */
-declare class FieldsetComponent extends NgxBaseComponent implements OnInit, AfterViewInit {
+declare class FieldsetComponent extends NgxFormDirective implements OnInit, AfterViewInit {
     /**
      * @description Reference to the ion-accordion-group component for programmatic control.
      * @summary ViewChild reference that provides direct access to the Ionic accordion group component.
@@ -3762,18 +3743,7 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @default 'Child'
      * @memberOf FieldsetComponent
      */
-    name: string;
-    /**
-     * @description The parent component identifier for hierarchical fieldset relationships.
-     * @summary Specifies the parent component name that this fieldset belongs to in a hierarchical
-     * form structure. This property is used for event bubbling and establishing parent-child
-     * relationships between fieldsets in complex forms with nested structures.
-     *
-     * @type {string}
-     * @default 'Child'
-     * @memberOf FieldsetComponent
-     */
-    childOf: string;
+    formControl: FormControl;
     /**
      * @description The parent component identifier for hierarchical fieldset relationships.
      * @summary Specifies the parent component name that this fieldset belongs to in a hierarchical
@@ -3794,17 +3764,6 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @memberOf FieldsetComponent
      */
     page: number;
-    /**
-     * @description The parent component identifier for hierarchical fieldset relationships.
-     * @summary Specifies the parent component name that this fieldset belongs to in a hierarchical
-     * form structure. This property is used for event bubbling and establishing parent-child
-     * relationships between fieldsets in complex forms with nested structures.
-     *
-     * @type {string}
-     * @default 'Child'
-     * @memberOf FieldsetComponent
-     */
-    uid: string;
     /**
      * @description Custom type definitions for specialized fieldset behavior.
      * @summary Defines custom data types or validation rules that should be applied to this fieldset.
@@ -3815,38 +3774,6 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @memberOf FieldsetComponent
      */
     customTypes: string | string[];
-    /**
-     * @description The current CRUD operation context.
-     * @summary Determines the component's initial behavior and state based on the current operation.
-     * This input is crucial for auto-state management: READ and DELETE operations automatically
-     * open the fieldset to show content, while CREATE and UPDATE operations keep it closed
-     * initially. This provides an intuitive user experience aligned with operation semantics.
-     *
-     * @type {OperationKeys}
-     * @default OperationKeys.READ
-     * @memberOf FieldsetComponent
-     */
-    /**
-     * @description The CRUD operation type for the current fieldset context.
-     * @summary Determines the component's initial behavior and state based on the current operation.
-     * This input is crucial for auto-state management: READ and DELETE operations automatically
-     * open the fieldset to show content, while CREATE and UPDATE operations keep it closed
-     * initially. This provides an intuitive user experience aligned with operation semantics.
-     *
-     * @type {OperationKeys}
-     * @default OperationKeys.READ
-     * @memberOf FieldsetComponent
-     */
-    operation: OperationKeys;
-    /**
-     * @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}
-     * @memberOf FieldsetComponent
-     */
-    formGroup: FormArray;
     /**
      * @description Primary title text for the fieldset content.
      * @summary Display title used for fieldset identification and content organization.
@@ -3865,18 +3792,6 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @memberOf FieldsetComponent
      */
     description: string;
-    /**
-     * @description Form target attribute for nested form submissions.
-     * @summary Specifies where to display the response after submitting forms contained within
-     * the fieldset. This attribute mirrors the HTML form target behavior, allowing control over
-     * whether form submissions open in the same window, new window, or specific frame. Useful
-     * for complex form workflows and multi-step processes.
-     *
-     * @type {HTMLFormTarget}
-     * @default '_self'
-     * @memberOf FieldsetComponent
-     */
-    target: HTMLFormTarget;
     /**
      * @description Enables multiple item management within the fieldset.
      * @summary Boolean flag that determines if the fieldset supports adding multiple values.
@@ -3898,15 +3813,15 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      */
     value: KeyValue[];
     /**
-     * @description Event handler functions for custom fieldset actions.
-     * @summary A record of event handler functions keyed by event names that can be triggered
-     * within the fieldset. These handlers provide extensibility for custom business logic
-     * and can be invoked for various fieldset operations and user interactions.
+     * @description Controls whether borders are displayed around the fieldset.
+     * @summary Boolean flag that determines if the fieldset should be visually outlined with borders.
+     * When true, borders are shown to visually separate the fieldset from surrounding content.
      *
-     * @type {HandlerLike}
+     * @type {boolean}
+     * @default true
      * @memberOf FieldsetComponent
      */
-    handlers: HandlerLike;
+    borders: boolean;
     /**
      * @description Array of formatted items for UI display.
      * @summary Contains the processed items ready for display in the component template.
@@ -3973,51 +3888,6 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @memberOf FieldsetComponent
      */
     isUniqueError: string | undefined;
-    /**
-     * @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 of the enum values.
-     *
-     * @type {CrudOperations}
-     * @default OperationKeys.CREATE
-     * @memberOf FieldsetComponent
-     */
-    protected readonly OperationKeys: CrudOperations;
-    /**
-     * @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.
-     *
-     * @private
-     * @type {ChangeDetectorRef}
-     * @memberOf FieldsetComponent
-     */
-    private changeDetectorRef;
-    /**
-     * @description Angular Renderer2 service for safe 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.
-     *
-     * @private
-     * @type {Renderer2}
-     * @memberOf FieldsetComponent
-     */
-    private renderer;
-    /**
-     * @description Translation service for internationalization.
-     * @summary Injected service that provides translation capabilities for UI text.
-     * Used to translate button labels and validation messages based on the current locale.
-     *
-     * @private
-     * @type {TranslateService}
-     * @memberOf FieldsetComponent
-     */
-    private translateService;
     /**
      * @description Localized label text for action buttons.
      * @summary Dynamic button label that changes based on the current operation mode.
@@ -4036,9 +3906,19 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @memberOf FieldsetComponent
      */
     buttonCancelLabel: string;
+    /**
+     * @description Maximum allowed items in the fieldset.
+     * @summary Numeric limit that controls how many items can be added when `multiple` is true.
+     * When set to Infinity there is no limit.
+     *
+     * @type {number}
+     * @default Infinity
+     * @memberOf FieldsetComponent
+     */
+    max: number | undefined;
     /**
      * @description Component constructor that initializes the fieldset with icons and component name.
-     * @summary Calls the parent NgxBaseComponent constructor with the component name and
+     * @summary Calls the parent NgxFormDirective constructor with the component name and
      * required Ionic icons (alertCircleOutline for validation errors and createOutline for add actions).
      * Sets up the foundational component structure and icon registry.
      *
@@ -4054,7 +3934,7 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @returns {void}
      * @memberOf FieldsetComponent
      */
-    ngOnInit(): void;
+    ngOnInit(): Promise<void>;
     /**
     * @description Initializes the component state after view and child components are rendered.
     * @summary This lifecycle hook implements intelligent auto-state management based on the current
@@ -4118,18 +3998,7 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * ```
      */
     handleCreateItem(event?: CustomEvent<IFieldSetValidationEvent>): Promise<void>;
-    /**
-     * @description Handles item update operations with form state management.
-     * @summary Locates an item in the form array for editing and prepares the component
-     * for update mode. Updates the button label to reflect the edit state and stores
-     * the item being updated. Triggers a window event to notify parent components.
-     *
-     * @param {string | number} value - The identifier value of the item to update
-     * @param {number} index - The array index position of the item
-     * @returns {void}
-     * @memberOf FieldsetComponent
-     */
-    handleUpdateItem(value: string | number, index: number): void;
+    handleUpdateItem(index: number, save?: boolean): 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,
@@ -4151,7 +4020,7 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      * @returns {void}
      * @memberOf FieldsetComponent
      */
-    handleRemoveItem(value: string | undefined, event?: CustomEvent): void;
+    handleRemoveItem(index: number): void;
     /**
      * @description Handles reordering of items within the fieldset list.
      * @summary Processes drag-and-drop reorder events from the ion-reorder-group component.
@@ -4245,9 +4114,19 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
      */
     private getMapper;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldsetComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldsetComponent, "ngx-decaf-fieldset", never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; "page": { "alias": "page"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "customTypes": { "alias": "customTypes"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "target": { "alias": "target"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "value": { "alias": "value"; "required": false; }; "handlers": { "alias": "handlers"; "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, ["[slot=content]"], true, never>;
 }
 
+/**
+ * @module module:lib/components/filter/filter.component
+ * @description Filter component module.
+ * @summary Provides `FilterComponent` which builds advanced, multi-step filter
+ * queries (index → condition → value) and emits filter events for data querying.
+ * It supports responsive behavior, suggestions and integration with `SearchbarComponent`.
+ *
+ * @link {@link FilterComponent}
+ */
+
 /**
  * @description Advanced filter component for creating dynamic search filters with step-by-step construction.
  * @summary This component provides a comprehensive filtering interface that allows users to build
@@ -4289,7 +4168,7 @@ declare class FieldsetComponent extends NgxBaseComponent implements OnInit, Afte
  *
  * @memberOf ForAngularCommonModule
  */
-declare class FilterComponent extends NgxBaseComponent implements OnInit, OnDestroy {
+declare class FilterComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
     /**
      * @description Reference to the dropdown options container element.
      * @summary ViewChild reference used to access and manipulate the dropdown options element
@@ -4757,42 +4636,30 @@ declare class FilterComponent extends NgxBaseComponent implements OnInit, OnDest
     static ɵcmp: i0.ɵɵComponentDeclaration<FilterComponent, "ngx-decaf-filter", never, { "indexes": { "alias": "indexes"; "required": false; }; "conditions": { "alias": "conditions"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "disableSort": { "alias": "disableSort"; "required": false; }; }, { "filterEvent": "filterEvent"; "searchEvent": "searchEvent"; }, never, never, true, never>;
 }
 
+/**
+ * @module module:lib/components/layout/layout.component
+ * @description Layout component module.
+ * @summary Provides `LayoutComponent` which offers a responsive grid layout
+ * for arranging child components using configurable rows, columns and breakpoints.
+ * Useful for building responsive UIs that render model and component renderers.
+ *
+ * @link {@link LayoutComponent}
+ */
+
 /**
  * @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 NgxBaseComponent to inherit common functionality
+ * the grid structure. The component extends NgxParentComponentDirective to inherit common functionality
  * and integrates with the model and component renderer systems.
  *
  * @class LayoutComponent
- * @extends {NgxBaseComponent}
+ * @extends {NgxParentComponentDirective}
  * @implements {OnInit}
  * @memberOf LayoutComponent
  */
-declare class LayoutComponent extends NgxBaseComponent implements OnInit {
-    /**
-     * @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
-     * @memberOf LayoutComponent
-     */
-    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
-     * @memberOf LayoutComponent
-     */
-    rows: number | KeyValue[] | string[];
+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.
@@ -4800,27 +4667,28 @@ declare class LayoutComponent extends NgxBaseComponent implements OnInit {
      * mobile-first or desktop-first responsive design patterns. The breakpoint
      * is automatically processed to ensure compatibility with the UI framework.
      *
-     * @type {UIMediaBreakPoints}
+     * @type {UIMediaBreakPointsType}
      * @default 'medium'
      * @memberOf LayoutComponent
      */
-    breakpoint: UIMediaBreakPoints;
+    gap: 'small' | 'medium' | 'large' | 'collapse';
+    match: boolean;
     /**
-     * @description Array of child components or data to render within the grid.
-     * @summary Contains the child elements that will be distributed across the grid layout.
-     * Each item in the array represents content that will be rendered using the appropriate
-     * renderer component (ModelRenderer or ComponentRenderer). This allows for mixed content
-     * types within a single layout structure.
+     * @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 {KeyValue[]}
-     * @default []
+     * @type {UIMediaBreakPointsType}
+     * @default 'medium'
      * @memberOf LayoutComponent
      */
-    children: KeyValue[];
+    breakpoint: UIMediaBreakPointsType | string;
     /**
      * @description Creates an instance of LayoutComponent.
      * @summary Initializes a new LayoutComponent with the component name "LayoutComponent".
-     * This constructor calls the parent NgxBaseComponent constructor to set up base
+     * This constructor calls the parent NgxParentComponentDirective constructor to set up base
      * functionality and component identification.
      *
      * @memberOf LayoutComponent
@@ -4860,15 +4728,19 @@ declare class LayoutComponent extends NgxBaseComponent implements OnInit {
      */
     ngOnInit(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutComponent, "ngx-decaf-layout", never, { "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "children": { "alias": "children"; "required": false; }; }, {}, never, never, true, 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>;
 }
 
-type PaginationCustomEvent = BaseCustomEvent & {
-    data: {
-        page: number;
-        direction: 'next' | 'previous';
-    };
-};
+/**
+ * @module module:lib/components/list/list.component
+ * @description List component module.
+ * @summary Provides the `ListComponent` which renders collections of data with
+ * support for infinite scroll, pagination, searching, filtering, custom item
+ * rendering and refresh events. Use this module's `ListComponent` to display
+ * lists sourced from models, functions or direct data arrays.
+ *
+ * @link {@link ListComponent}
+ */
 
 /**
  * @description A versatile list component that supports various data display modes.
@@ -4937,10 +4809,10 @@ type PaginationCustomEvent = BaseCustomEvent & {
  *   (refreshEvent)="handleRefresh($event)">
  * </ngx-decaf-list>
  *
- * @extends {NgxBaseComponent}
+ * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestroy {
+declare class ListComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
     /**
      * @description The display mode for the list component.
      * @summary Determines how the list data is loaded and displayed. Options include:
@@ -4952,16 +4824,6 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      * @memberOf ListComponent
      */
     type: ListComponentsTypes;
-    /**
-     * @description Controls whether the component uses translation services.
-     * @summary When set to true, the component will attempt to use translation services
-     * for any text content. This allows for internationalization of the list component.
-     *
-     * @type {StringOrBoolean}
-     * @default true
-     * @memberOf ListComponent
-     */
-    translatable: StringOrBoolean;
     /**
      * @description Controls the visibility of the search bar.
      * @summary When set to true, displays a search bar at the top of the list that allows
@@ -5254,10 +5116,10 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      * @summary Emits an event when the list data is refreshed, either through pull-to-refresh
      * or programmatic refresh. The event includes the refreshed data and component information.
      *
-     * @type {EventEmitter<BaseCustomEvent>}
+     * @type {EventEmitter<IBaseCustomEvent>}
      * @memberOf ListComponent
      */
-    refreshEvent: EventEmitter<BaseCustomEvent>;
+    refreshEvent: EventEmitter<IBaseCustomEvent>;
     /**
      * @description Event emitter for item click interactions.
      * @summary Emits an event when a list item is clicked. The event includes the data
@@ -5266,14 +5128,14 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      * @type {EventEmitter<KeyValue>}
      * @memberOf ListComponent
      */
-    clickEvent: EventEmitter<ListItemCustomEvent | RendererCustomEvent>;
+    clickEvent: EventEmitter<ListItemCustomEvent | IBaseCustomEvent>;
     /**
      * @description Subject for debouncing click events.
      * @summary Uses RxJS Subject to collect click events and emit them after a debounce
      * period. This prevents multiple rapid clicks from triggering multiple events.
      *
      * @private
-     * @type {Subject<CustomEvent | ListItemCustomEvent | RendererCustomEvent>}
+     * @type {Subject<CustomEvent | ListItemCustomEvent | IBaseCustomEvent>}
      * @memberOf ListComponent
      */
     private clickItemSubject;
@@ -5440,12 +5302,12 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      * debounced click subject. This allows the component to respond to clicks on
      * list items regardless of where they originate from.
      *
-     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
+     * @param {ListItemCustomEvent | IBaseCustomEvent} event - The click event
      * @returns {void}
      *
      * @memberOf ListComponent
      */
-    handleClick(event: ListItemCustomEvent | RendererCustomEvent): void;
+    handleClick(event: ListItemCustomEvent | IBaseCustomEvent): void;
     /**
      * @description Handles search events from the search bar.
      * @summary Processes search queries from the search bar component, updating the
@@ -5508,7 +5370,7 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      * This extracts the relevant data from the event and passes it to parent components.
      *
      * @private
-     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
+     * @param {ListItemCustomEvent | IBaseCustomEvent} event - The click event
      * @returns {void}
      *
      * @memberOf ListComponent
@@ -5572,12 +5434,12 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
    * refreshing the list data to display the selected page. This method is called
    * when a user interacts with the pagination controls to navigate between pages.
    *
-   * @param {PaginationCustomEvent} event - The pagination event containing page information
+   * @param {IPaginationCustomEvent} event - The pagination event containing page information
    * @returns {void}
    *
    * @memberOf ListComponent
    */
-    handlePaginate(event: PaginationCustomEvent): void;
+    handlePaginate(event: IPaginationCustomEvent): void;
     /**
      * @description Handles pull-to-refresh events from the refresher component.
      * @summary Processes refresh events triggered by the user pulling down on the list
@@ -5706,15 +5568,26 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
      */
     mapResults(data: KeyValue[]): KeyValue[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "ngx-decaf-list", never, { "type": { "alias": "type"; "required": false; }; "translatable": { "alias": "translatable"; "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; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; }; "empty": { "alias": "empty"; "required": false; }; }, { "refreshEvent": "refreshEvent"; "clickEvent": "clickEvent"; }, never, ["*"], true, never>;
 }
 
+/**
+ * @module module:lib/components/list-item/list-item.component
+ * @description List item component module.
+ * @summary Exposes `ListItemComponent` which renders a single list item with
+ * configurable icon, title, description, actions and navigation. The component
+ * supports slide actions, popover menus and emits click events for parent
+ * components to handle.
+ *
+ * @link {@link ListItemComponent}
+ */
+
 /**
  * @description A component for displaying a list item with various customization options.
- * @summary The ListItemComponent is an Angular component that extends NgxBaseComponent. It provides a flexible and customizable list item interface with support for icons, buttons, and various text elements. The component also handles actions and navigation based on user interactions.
+ * @summary The ListItemComponent is an Angular component that extends NgxBaseComponentDirective. It provides a flexible and customizable list item interface with support for icons, buttons, and various text elements. The component also handles actions and navigation based on user interactions.
  *
  * @class
- * @extends NgxBaseComponent
+ * @extends NgxBaseComponentDirective
  *
  * @param {string} [lines='none'] - Determines the line style of the item. Can be 'inset', 'inseet', or 'none'.
  * @param {Record<string, any>} item - The data item to be displayed in the list item.
@@ -5747,7 +5620,7 @@ declare class ListComponent extends NgxBaseComponent implements OnInit, OnDestro
  *   C->>C: Process action
  *   C->>V: Update view or navigate
  */
-declare class ListItemComponent extends NgxBaseComponent implements OnInit {
+declare class ListItemComponent extends NgxDecafComponentDirective implements OnInit {
     /**
      * @description Reference to the action menu popover component.
      * @summary ViewChild reference that provides access to the HTMLIonPopoverElement
@@ -6094,6 +5967,16 @@ declare class ListItemComponent extends NgxBaseComponent implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<ListItemComponent, "ngx-decaf-list-item", never, { "lines": { "alias": "lines"; "required": false; }; "item": { "alias": "item"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSlot": { "alias": "iconSlot"; "required": false; }; "button": { "alias": "button"; "required": false; }; "title": { "alias": "title"; "required": false; }; "description": { "alias": "description"; "required": false; }; "info": { "alias": "info"; "required": false; }; "subinfo": { "alias": "subinfo"; "required": false; }; }, { "clickEvent": "clickEvent"; }, never, ["[slot='end']"], true, never>;
 }
 
+/**
+ * @module module:lib/components/model-renderer/model-renderer.component
+ * @description Model renderer component module.
+ * @summary Exposes `ModelRendererComponent` which dynamically renders UI components
+ * from model definitions using the `NgxRenderingEngine`. It handles model changes,
+ * event subscription and lifecycle for the rendered output.
+ *
+ * @link {@link ModelRendererComponent}
+ */
+
 /**
  * @description Component for rendering dynamic models
  * @summary This component is responsible for dynamically rendering models,
@@ -6122,12 +6005,7 @@ declare class ListItemComponent extends NgxBaseComponent implements OnInit {
  *   ModelRenderer->>ModelRenderer: Subscribe to events
  *   ModelRenderer-->>App: Emit events
  */
-declare class ModelRendererComponent<M extends Model> implements OnChanges, OnDestroy, RenderedModel {
-    /**
-     * @description Input model to be rendered
-     * @summary Can be a Model instance or a JSON string representation of a model
-     */
-    model: M | string | undefined;
+declare class ModelRendererComponent<M extends Model> extends NgxDecafComponentDirective implements OnChanges, OnDestroy, IRenderedModel {
     /**
      * @description Global variables to be passed to the rendered component
      */
@@ -6153,10 +6031,6 @@ declare class ModelRendererComponent<M extends Model> implements OnChanges, OnDe
      * @description View container reference for dynamic component rendering
      */
     vcr: ViewContainerRef;
-    /**
-     * @description Event emitter for custom events from the rendered component
-     */
-    listenEvent: EventEmitter<RendererCustomEvent>;
     /**
      * @description Instance of the rendered component
      */
@@ -6184,9 +6058,19 @@ declare class ModelRendererComponent<M extends Model> implements OnChanges, OnDe
     private unsubscribeEvents;
     protected readonly JSON: JSON;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelRendererComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModelRendererComponent<any>, "ngx-decaf-model-renderer", never, { "model": { "alias": "model"; "required": true; }; "globals": { "alias": "globals"; "required": false; }; "projectable": { "alias": "projectable"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModelRendererComponent<any>, "ngx-decaf-model-renderer", never, { "globals": { "alias": "globals"; "required": false; }; "projectable": { "alias": "projectable"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * @module module:lib/components/pagination/pagination.component
+ * @description Pagination component module.
+ * @summary Provides `PaginationComponent` for displaying page navigation controls
+ * and emitting pagination events. Use this component to navigate paginated data
+ * in lists and other collections.
+ *
+ * @link {@link PaginationComponent}
+ */
+
 /**
  * @description A pagination component for navigating through multiple pages of content.
  * @summary This component provides a user interface for paginated content navigation,
@@ -6206,17 +6090,17 @@ declare class ModelRendererComponent<M extends Model> implements OnChanges, OnDe
  *   U->>P: Click page number
  *   P->>P: navigate(page)
  *   P->>P: handleClick(direction, page)
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   P->>E: Emit clickEvent with IPaginationCustomEvent
  *
  *   U->>P: Click next button
  *   P->>P: next()
  *   P->>P: handleClick('next')
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   P->>E: Emit clickEvent with IPaginationCustomEvent
  *
  *   U->>P: Click previous button
  *   P->>P: previous()
  *   P->>P: handleClick('previous')
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   P->>E: Emit clickEvent with IPaginationCustomEvent
  *
  * @example
  * <ngx-decaf-pagination
@@ -6225,20 +6109,10 @@ declare class ModelRendererComponent<M extends Model> implements OnChanges, OnDe
  *   (clickEvent)="handlePageChange($event)">
  * </ngx-decaf-pagination>
  *
- * @extends {NgxBaseComponent}
+ * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class PaginationComponent extends NgxBaseComponent implements OnInit {
-    /**
-     * @description Controls whether the component uses translation services.
-     * @summary When set to true, the component will attempt to use translation services
-     * for any text content. This allows for internationalization of the pagination component.
-     *
-     * @type {StringOrBoolean}
-     * @default true
-     * @memberOf PaginationComponent
-     */
-    translatable: StringOrBoolean;
+declare class PaginationComponent extends NgxDecafComponentDirective 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
@@ -6282,10 +6156,10 @@ declare class PaginationComponent extends NgxBaseComponent implements OnInit {
      * on page numbers or using the next/previous buttons. The event contains information
      * about the navigation direction and the target page number.
      *
-     * @type {EventEmitter<PaginationCustomEvent>}
+     * @type {EventEmitter<IPaginationCustomEvent>}
      * @memberOf PaginationComponent
      */
-    clickEvent: EventEmitter<PaginationCustomEvent>;
+    clickEvent: EventEmitter<IPaginationCustomEvent>;
     /**
      * @constructor
      * @description Initializes a new instance of the PaginationComponent.
@@ -6447,20 +6321,30 @@ declare class PaginationComponent extends NgxBaseComponent implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "ngx-decaf-pagination", never, { "totalPages": { "alias": "totalPages"; "required": true; }; "current": { "alias": "current"; "required": false; }; }, { "clickEvent": "clickEvent"; }, never, never, true, never>;
 }
 
+/**
+ * @module module:lib/components/searchbar/searchbar.component
+ * @description Searchbar component module.
+ * @summary Exposes `SearchbarComponent` providing a configurable search input with
+ * debouncing, clear/cancel handling and optional global window events. Use this
+ * component to add search UI across lists and pages.
+ *
+ * @link {@link SearchbarComponent}
+ */
+
 /**
  * @description Searchbar component for Angular applications.
  * @summary The SearchbarComponent provides a highly customizable search input field with comprehensive
- * options for appearance, behavior, and interaction patterns. It extends NgxBaseComponent to inherit
+ * options for appearance, behavior, and interaction patterns. It extends NgxBaseComponentDirective to inherit
  * common functionality and implements OnInit for proper lifecycle management. This component features
  * debounced input handling, window event integration, visibility controls, and extensive styling options.
  * It's designed to be flexible and adaptable to different search requirements within modern web applications.
  *
  * @class SearchbarComponent
- * @extends {NgxBaseComponent}
+ * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  * @memberOf SearchbarComponent
  */
-declare class SearchbarComponent extends NgxBaseComponent implements OnInit {
+declare class SearchbarComponent extends NgxDecafComponentDirective implements OnInit {
     /**
      * @description The mode of the searchbar.
      * @summary Determines the visual style of the searchbar, either iOS or Material Design.
@@ -6850,24 +6734,32 @@ declare class SearchbarComponent extends NgxBaseComponent implements OnInit {
     static ɵcmp: i0.ɵɵComponentDeclaration<SearchbarComponent, "ngx-decaf-searchbar", never, { "autocomplete": { "alias": "autocomplete"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "animated": { "alias": "animated"; "required": false; }; "buttonCancelText": { "alias": "buttonCancelText"; "required": false; }; "clearIcon": { "alias": "clearIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; "debounce": { "alias": "debounce"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "enterkeyhint": { "alias": "enterkeyhint"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "searchIcon": { "alias": "searchIcon"; "required": false; }; "showCancelButton": { "alias": "showCancelButton"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "queryKeys": { "alias": "queryKeys"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "wrapper": { "alias": "wrapper"; "required": false; }; "wrapperColor": { "alias": "wrapperColor"; "required": false; }; "emitEventToWindow": { "alias": "emitEventToWindow"; "required": false; }; }, { "searchEvent": "searchEvent"; }, never, never, true, never>;
 }
 
-declare const CssClasses: {
-    BUTTONS_CONTAINER: string;
-};
-declare const DefaultFormReactiveOptions: CrudFormOptions;
+/**
+ * @module module:lib/components/stepped-form/stepped-form.component
+ * @description Stepped form component module.
+ * @summary Provides `SteppedFormComponent` which implements a multi-page form
+ * UI with navigation, validation and submission support. Useful for forms that
+ * need to be split into logical steps/pages.
+ *
+ * @link {@link SteppedFormComponent}
+ */
 
-declare class SteppedFormComponent implements OnInit, OnDestroy {
+declare class SteppedFormComponent extends NgxParentComponentDirective$1 implements OnInit, OnDestroy {
     /**
-     * @description The locale to be used for translations.
-     * @summary Specifies the locale identifier to use when translating component text.
-     * This can be set explicitly via input property to override the automatically derived
-     * locale from the component name. The locale is typically a language code (e.g., 'en', 'fr')
-     * or a language-region code (e.g., 'en-US', 'fr-CA') that determines which translation
-     * set to use for the component's text content.
+     * @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 {string}
+     * @type {UIModelMetadata[]}
      * @memberOf SteppedFormComponent
      */
-    locale: string;
+    children: UIModelMetadata[] | {
+        title: string;
+        description: string;
+        items?: UIModelMetadata[];
+    }[];
     /**
      * @description The locale to be used for translations.
      * @summary Specifies the locale identifier to use when translating component text.
@@ -6927,21 +6819,6 @@ declare class SteppedFormComponent implements OnInit, OnDestroy {
      * @memberOf SteppedFormComponent
      */
     startPage: number;
-    /**
-     * @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[]}
-     * @memberOf SteppedFormComponent
-     */
-    children: UIModelMetadata[] | {
-        title: string;
-        description: string;
-        items?: UIModelMetadata[];
-    }[];
     /**
      * @description Angular reactive FormGroup or FormArray for form state management.
      * @summary The form instance that manages all form controls, validation, and form state.
@@ -7003,16 +6880,27 @@ declare class SteppedFormComponent implements OnInit, OnDestroy {
      * @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
      * when all validation passes. The emitted event contains the form data and
      * event type information for parent components to handle.
      *
-     * @type {EventEmitter<BaseCustomEvent>}
+     * @type {EventEmitter<IBaseCustomEvent>}
      * @memberOf SteppedFormComponent
      */
-    submitEvent: EventEmitter<BaseCustomEvent>;
+    submitEvent: EventEmitter<IBaseCustomEvent>;
     /**
      * @description Creates an instance of SteppedFormComponent.
      * @summary Initializes a new SteppedFormComponent instance and registers the required
@@ -7043,7 +6931,7 @@ declare class SteppedFormComponent implements OnInit, OnDestroy {
      *
      * @memberOf SteppedFormComponent
      */
-    ngOnInit(): void;
+    ngOnInit(): Promise<void>;
     /**
      * @description Cleanup method called when the component is destroyed.
      * @summary Unsubscribes from any active timer subscriptions to prevent memory leaks.
@@ -7131,9 +7019,18 @@ declare class SteppedFormComponent implements OnInit, OnDestroy {
      */
     private getCurrentFormGroup;
     static ɵfac: i0.ɵɵFactoryDeclaration<SteppedFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SteppedFormComponent, "ngx-decaf-stepped-form", never, { "locale": { "alias": "locale"; "required": false; }; "paginated": { "alias": "paginated"; "required": false; }; "pages": { "alias": "pages"; "required": false; }; "pageTitles": { "alias": "pageTitles"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "startPage": { "alias": "startPage"; "required": false; }; "children": { "alias": "children"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SteppedFormComponent, "ngx-decaf-stepped-form", never, { "children": { "alias": "children"; "required": false; }; "paginated": { "alias": "paginated"; "required": false; }; "pages": { "alias": "pages"; "required": false; }; "pageTitles": { "alias": "pageTitles"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "startPage": { "alias": "startPage"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
 }
 
+/**
+ * @module module:lib/directives/collapsable
+ * @description Directive to auto-open accordions when required fields are present.
+ * @summary CollapsableDirective inspects a DOM subtree for required inputs and, when found,
+ * opens the closest ion-accordion-group to surface validation to the user.
+ *
+ * @link {@link CollapsableDirective}
+ */
+
 declare class CollapsableDirective implements OnInit {
     private element;
     private injector;
@@ -7148,6 +7045,18 @@ declare class ForAngularComponentsModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularComponentsModule>;
 }
 
+/**
+ * @module module:lib/helpers/utils
+ * @description General helper utilities used across the library.
+ * @summary Exposes small, reusable utility functions for window/document access, date handling,
+ * string manipulation, simple mapping helpers and environment helpers used by UI components
+ * and services. This module's functions include `getWindow`, `getWindowDocument`, `formatDate`,
+ * `isValidDate`, `itemMapper`, `dataMapper`, and event helpers like `windowEventEmitter`.
+ *
+ * Do not document individual exports here — functions are documented inline.
+ * @link {@link getWindow}
+ */
+
 /**
  * @description Retrieves the singleton instance of the injectables registry
  * @summary This function implements the singleton pattern for the InjectablesRegistry.
@@ -7442,7 +7351,7 @@ declare function getLocaleContext(clazz: FunctionLike | object | string, suffix?
  */
 declare function getLocaleContextByKey(locale: string, phrase: string | undefined): string;
 declare function I18nLoaderFactory(http: HttpClient): TranslateLoader;
-declare function provideI18nLoader(resources?: I18nResourceConfig | I18nResourceConfig[], versionedSuffix?: boolean): {
+declare function provideI18nLoader(resources?: I18nResourceConfigType, versionedSuffix?: boolean): {
     provide: i0.InjectionToken<{
         resources: I18nResourceConfig[];
         versionedSuffix: boolean;
@@ -7460,16 +7369,43 @@ declare class I18nLoader implements TranslateLoader {
     private getSuffix;
     getTranslation(lang: string): Observable<TranslationObject>;
 }
+declare class I18nParser extends TranslateParser {
+    interpolate(value: string, params?: object | string): string;
+}
+declare function provideI18n(config?: RootTranslateServiceConfig, resources?: I18nResourceConfigType, versionedSuffix?: boolean): ({
+    provide: i0.InjectionToken<{
+        resources: I18nResourceConfig[];
+        versionedSuffix: boolean;
+    }>;
+    useValue: {
+        resources: I18nResourceConfig[];
+        versionedSuffix: boolean;
+    };
+} | i0.EnvironmentProviders | i0.Provider[])[];
+
+/**
+ * @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";
 declare const DB_ADAPTER_PROVIDER_TOKEN: InjectionToken<DecafRepositoryAdapter>;
+declare const LOCALE_ROOT_TOKEN: InjectionToken<string>;
+declare const CPTKN: InjectionToken<unknown>;
 declare const I18N_CONFIG_TOKEN: InjectionToken<{
     resources: I18nResourceConfig[];
     versionedSuffix: boolean;
 }>;
+declare function getModelRepository(model: Model | string): DecafRepository<Model>;
 declare function provideDbAdapter<DbAdapter extends {
     flavour: string;
-}>(adapterClass: Constructor<DbAdapter>, options?: KeyValue): Provider;
+}>(adapterClass: Constructor<DbAdapter>, options?: KeyValue, flavour?: string): Provider;
 declare function getLogger(instance: string | FunctionLike | unknown): Logger;
 /**
  * @description Main Angular module for the Decaf framework
@@ -7508,5 +7444,5 @@ declare class ForAngularCommonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularCommonModule>;
 }
 
-export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
-export type { AngularDynamicOutput, AngularFieldDefinition, BaseCustomEvent, CheckboxOption, ComponentMetadata, CrudFieldOption, CrudFormEvent, DecafRepository, DecafRepositoryAdapter, ElementPositions, ElementSizes, FieldUpdateMode, FlexPositions, FormParent, FormParentGroup, FormServiceControl, FormServiceControls, FunctionLike, HTMLFormTarget, HandlerLike, I18nResourceConfig, IComponentConfig, IComponentHolder, IComponentInput, IFieldSetItem, IFieldSetValidationEvent, IFilterQuery, IFilterQueryItem, IFormElement, IListComponentRefreshEvent, IListEmptyResult, ISortObject, InputOption, KeyValue, ListItemCustomEvent, PaginationCustomEvent, PossibleInputTypes, RadioOption, RawQuery, RenderedModel, RendererCustomEvent, SelectOption, StringOrBoolean };
+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 };