@decaf-ts/for-angular 0.0.37 → 0.0.38

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ElementRef, Type, Injector, EnvironmentInjector, ComponentMirror, ViewContainerRef, ComponentRef, TemplateRef, OnChanges, ChangeDetectorRef, Renderer2, EventEmitter, SimpleChanges, AfterViewInit, OnInit, OnDestroy, InjectionToken, Provider, ModuleWithProviders } from '@angular/core';
+import { ElementRef, Type, Injector, EnvironmentInjector, ComponentMirror, ViewContainerRef, ComponentRef, TemplateRef, OnChanges, ChangeDetectorRef, Renderer2, EventEmitter, SimpleChanges, AfterViewInit, OnInit, OnDestroy, NgZone, InjectionToken, Provider, ModuleWithProviders } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormGroup, FormArray, FormControl, ControlValueAccessor, AbstractControl } from '@angular/forms';
 import { Repository, Adapter, OrderDirection, EventIds, Paginator, Condition } from '@decaf-ts/core';
@@ -17,7 +17,7 @@ import * as i3 from '@ngx-translate/core';
 import { TranslateService, TranslateLoader, TranslationObject, TranslateParser, RootTranslateServiceConfig } from '@ngx-translate/core';
 import { Title, SafeHtml } from '@angular/platform-browser';
 import { IonAccordionGroup, ItemReorderEventDetail } from '@ionic/angular/standalone';
-import { Subscription, Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { InjectablesRegistry } from '@decaf-ts/injectable-decorators';
 import { HttpClient } from '@angular/common/http';
 
@@ -100,7 +100,7 @@ type FieldUpdateMode = 'change' | 'blur' | 'submit';
  * @typedef {('checkbox'|'radio'|'select'|TextFieldTypes|'textarea')} PossibleInputTypes
  * @memberOf module:engine
  */
-type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'textarea';
+type PossibleInputTypes = 'checkbox' | 'radio' | 'select' | TextFieldTypes | 'file' | 'textarea';
 /**
  * @description Field definition for Angular components
  * @summary A comprehensive type that combines properties from various Ionic components
@@ -193,6 +193,7 @@ type FormParent = FormGroup | FormArray;
  */
 type FormParentGroup = [FormParent, string];
 type I18nResourceConfigType = I18nResourceConfig | I18nResourceConfig[];
+type WindowColorScheme = 'dark' | 'light' | unknown;
 
 /**
  * @module lib/engine/interfaces
@@ -475,6 +476,10 @@ interface IBaseCustomEvent {
     data?: unknown;
     target?: HTMLElement;
 }
+interface IModelPageCustomEvent extends IBaseCustomEvent {
+    success: boolean;
+    message?: string;
+}
 /**
  * @description Configuration for internationalization (i18n) resource file paths
  * @summary Defines the structure for configuring i18n resource file paths with prefix and suffix.
@@ -600,6 +605,10 @@ interface IListEmptyOptions {
     link: string;
     icon: string;
 }
+interface IWindowResizeEvent {
+    width: number;
+    height: number;
+}
 
 /**
  * @description Angular engine key constants.
@@ -1198,12 +1207,12 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
 }
 
 /**
- * @module lib/engine/NgxDecafComponentDirective
+ * @module lib/engine/NgxComponentDirective
  * @description Base decaf component abstraction providing shared inputs and utilities.
- * @summary NgxDecafComponentDirective is the abstract foundation for Decaf components and provides common
+ * @summary NgxComponentDirective is the abstract foundation for Decaf components and provides common
  * inputs (model, mapper, pk, props), logging, repository resolution, and event dispatch helpers.
  * It centralizes shared behavior for child components and simplifies integration with the rendering engine.
- * @link {@link NgxDecafComponentDirective}
+ * @link {@link NgxComponentDirective}
  */
 
 /**
@@ -1214,12 +1223,12 @@ declare class NgxRenderingEngine extends RenderingEngine<AngularFieldDefinition,
  * internationalization support. It implements OnChanges to respond to input property changes
  * and includes utilities for navigation, localization, and dynamic property binding. All Decaf
  * components should extend this directive to inherit its foundational capabilities.
- * @class NgxDecafComponentDirective
+ * @class NgxComponentDirective
  * @extends {LoggedClass}
  * @implements {OnChanges}
- * @memberOf module:lib/engine/NgxDecafComponentDirective
+ * @memberOf module:lib/engine/NgxComponentDirective
  */
-declare abstract class NgxDecafComponentDirective extends LoggedClass implements OnChanges {
+declare abstract class NgxComponentDirective extends LoggedClass implements OnChanges {
     /**
      * @description Reference to the component's native DOM element.
      * @summary Provides direct access to the native DOM element of the component through Angular's
@@ -1227,7 +1236,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * apply custom styles, or access native element properties and methods. The element is
      * identified by the 'component' template reference variable.
      * @type {ElementRef}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     component: ElementRef;
     /**
@@ -1237,7 +1246,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * component instances within a larger application structure. It serves as a human-readable
      * identifier that helps distinguish between multiple instances of the same component type.
      * @type {string}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     name: string;
     /**
@@ -1247,7 +1256,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * proper nesting and organization of components within a layout. It can be used to track
      * component dependencies and establish component hierarchies for rendering and event propagation.
      * @type {string | undefined}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     childOf: string | undefined;
     /**
@@ -1257,7 +1266,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * By default, it generates a random 16-character value, but it can be explicitly set via input.
      * @type {string | number}
      * @default generateRandomValue(16)
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     uid: string | number;
     /**
@@ -1267,7 +1276,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * When set, this property provides the component with access to the model's schema, validation rules,
      * and metadata needed for rendering and data operations.
      * @type {Model | string | undefined}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     model: Model | string | undefined;
     /**
@@ -1277,7 +1286,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * specific records, such as read, update, and delete operations. The value corresponds to
      * the field designated as the primary key in the model definition.
      * @type {EventIds}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     modelId?: EventIds;
     /**
@@ -1287,7 +1296,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * If not explicitly set, it defaults to the repository's configured primary key or 'id'.
      * @type {string}
      * @default 'id'
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     pk: string;
     /**
@@ -1297,7 +1306,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * provided as a static object mapping or as a function for dynamic mapping transformations.
      * @type {Record<string, string> | FunctionLike}
      * @default {}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     mapper: Record<string, string> | FunctionLike;
     /**
@@ -1307,7 +1316,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * which operation buttons are displayed in the UI. By default, only READ operations are enabled.
      * @type {CrudOperations[]}
      * @default [OperationKeys.READ]
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     operations: CrudOperations[];
     /**
@@ -1329,7 +1338,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * establish the component's vertical placement within the grid structure.
      * @type {number}
      * @default 1
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     row: number;
     /**
@@ -1339,7 +1348,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * establish the component's horizontal placement within the grid structure.
      * @type {number}
      * @default 1
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     col: number;
     /**
@@ -1350,7 +1359,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * This provides a way to customize the component's appearance beyond the built-in styling options.
      * @type {string}
      * @default ""
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     className: string;
     /**
@@ -1361,7 +1370,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * data model and provides methods for querying and filtering data based on specific criteria.
      * @type {DecafRepository<Model>}
      * @private
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected _repository?: DecafRepository<Model>;
     /**
@@ -1372,7 +1381,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * and layout features that require menu interaction.
      * @protected
      * @type {MenuController}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected menuController: MenuController;
     /**
@@ -1383,7 +1392,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * view updates when modifications occur outside the normal Angular change detection flow.
      * @protected
      * @type {ChangeDetectorRef}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected changeDetectorRef: ChangeDetectorRef;
     /**
@@ -1393,7 +1402,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * including server-side rendering and web workers, without direct DOM access.
      * @protected
      * @type {Renderer2}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected renderer: Renderer2;
     /**
@@ -1403,7 +1412,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * on the current locale setting, enabling multilingual support throughout the application.
      * @protected
      * @type {TranslateService}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected translateService: TranslateService;
     /**
@@ -1414,7 +1423,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * The logger is used throughout the component to record important events, debug information,
      * and potential issues, facilitating easier debugging and maintenance.
      * @type {Logger}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     logger: Logger;
     /**
@@ -1424,7 +1433,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * state changes. Events are passed up the component hierarchy to enable coordinated
      * behavior across the application.
      * @type {EventEmitter<IBaseCustomEvent>}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     listenEvent: EventEmitter<IBaseCustomEvent>;
     /**
@@ -1434,7 +1443,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * handles route parameters, and manages the browser's navigation history.
      * @protected
      * @type {Router}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected router: Router;
     /**
@@ -1444,7 +1453,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * the default application locale for this specific component instance, enabling per-component
      * localization when needed.
      * @type {string | undefined}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     locale?: string;
     /**
@@ -1456,7 +1465,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * Additional properties can be included to customize the rendering behavior.
      * @type {Record<string, unknown>}
      * @default {tag: ""}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     item: Record<string, unknown>;
     /**
@@ -1468,7 +1477,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * enabling customizable component behavior based on external configuration.
      * @type {Record<string, unknown>}
      * @default {}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     props: Record<string, unknown>;
     /**
@@ -1478,7 +1487,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * different operations or views. The route helps establish the component's position in the
      * application's routing hierarchy.
      * @type {string}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     route: string;
     /**
@@ -1488,17 +1497,17 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * certain operations that require initialization can be performed.
      * @type {boolean}
      * @default false
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     initialized: boolean;
     /**
      * @description Component name identifier for logging and localization contexts.
      * @summary Stores the component's name which is used as a key for logging contexts
      * and as a base for locale resolution. Can be injected via the CPTKN token or defaults
-     * to "NgxDecafComponentDirective" if not provided.
+     * to "NgxComponentDirective" if not provided.
      * @protected
      * @type {string | undefined}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected componentName?: string;
     /**
@@ -1508,7 +1517,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * load appropriate translation resources and locale-specific configurations.
      * @protected
      * @type {string | undefined}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected localeRoot?: string;
     /**
@@ -1519,7 +1528,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * while maintaining encapsulation and preventing accidental modification.
      * @protected
      * @readonly
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected readonly OperationKeys: typeof OperationKeys;
     /**
@@ -1533,14 +1542,14 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      */
     protected location: Location;
     /**
-     * @description Constructor for NgxDecafComponentDirective.
+     * @description Constructor for NgxComponentDirective.
      * @summary Initializes the directive by setting up the component name, locale root,
      * and logger. Calls the parent LoggedClass constructor and configures localization
      * context. The component name and locale root can be optionally injected via the
      * CPTKN token, otherwise defaults are used.
      * @param {string} [componentName] - Optional component name for identification and logging
      * @param {string} [localeRoot] - Optional locale root key for internationalization
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     constructor(componentName?: string, localeRoot?: string);
     /**
@@ -1548,7 +1557,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @summary Returns the current locale identifier by calling the getLocale method.
      * This property provides convenient access to the component's active locale setting.
      * @returns {string} The current locale identifier
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     get localeContext(): string;
     /**
@@ -1559,7 +1568,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @protected
      * @returns {DecafRepository<Model>} The repository instance for the current model
      * @throws {InternalError} If repository initialization fails
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected get repository(): DecafRepository<Model>;
     /**
@@ -1570,7 +1579,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * it updates the component's locale setting accordingly.
      * @param {SimpleChanges} changes - Object containing the changed properties with their previous and current values
      * @return {void}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     ngOnChanges(changes: SimpleChanges): void;
     /**
@@ -1583,7 +1592,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @param {string | string[]} phrase - The translation key or array of keys to translate
      * @param {object | string} [params] - Optional parameters for interpolation in translated text
      * @return {Promise<string>} A promise that resolves to the translated text
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected translate(phrase: string | string[], params?: object | string): Promise<string>;
     /**
@@ -1595,7 +1604,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @protected
      * @param {...unknown[]} args - Variable number of arguments that can be used by child implementations
      * @return {Promise<void>} A promise that resolves when initialization is complete
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected initialize(...args: unknown[]): Promise<void>;
     /**
@@ -1606,7 +1615,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @protected
      * @param {string} [locale] - Optional locale identifier to set
      * @return {string} The current locale identifier
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected getLocale(locale?: string): string;
     /**
@@ -1616,7 +1625,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * class name using the pattern `/model/{ModelName}`. Returns an empty string if neither
      * a route nor a model is available.
      * @return {string} The route path for this component
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     getRoute(): string;
     /**
@@ -1628,7 +1637,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @template M - The model type extending from Model
      * @param {string | Model | ModelConstructor<M>} model - The model to resolve and initialize
      * @return {void}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     getModel<M extends Model>(model: string | Model | ModelConstructor<M>): void;
     /**
@@ -1640,7 +1649,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * decorator metadata with the component's runtime configuration.
      * @param {Model} model - The model instance to extract definitions from
      * @return {void}
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     setModelDefinitions(model: Model): void;
     /**
@@ -1659,7 +1668,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant P as Props Object
      *
      *   C->>D: parseProps(instance, skip)
@@ -1677,7 +1686,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      *     end
      *   end
      * @protected
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected parseProps(instance: KeyValue, skip?: string[]): void;
     /**
@@ -1691,7 +1700,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @param {number} index - The index of the item in the list
      * @param {KeyValue | string | number} item - The item data to track
      * @return {string | number} A unique identifier for the item
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     protected trackItemFn(index: number, item: KeyValue | string | number): string | number;
     /**
@@ -1706,7 +1715,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @mermaid
      * sequenceDiagram
      *   participant C as Child Component
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant H as Event Handler
      *   participant P as Parent Component
      *
@@ -1726,7 +1735,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      *   else No handlers
      *     D->>P: listenEvent.emit(event)
      *   end
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     handleEvent(event: IBaseCustomEvent | ICrudFormEvent | CustomEvent): Promise<void>;
     /**
@@ -1739,7 +1748,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @return {boolean} True if the operation is allowed, false otherwise
      * @mermaid
      * sequenceDiagram
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant U as UI
      *
      *   U->>D: isAllowed(operation)
@@ -1750,7 +1759,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      *     D->>D: Check if operation is not current operation
      *     D-->>U: Return result
      *   end
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     isAllowed(operation: string): boolean;
     /**
@@ -1766,7 +1775,7 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      * @mermaid
      * sequenceDiagram
      *   participant U as UI
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant R as Router
      *
      *   U->>D: Click operation button
@@ -1777,11 +1786,11 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
      *   R->>R: Navigate to new route
      *   R-->>D: Return navigation result
      *   D-->>U: Display new operation view
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     changeOperation(operation: string, id?: string): Promise<boolean>;
-    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; }; "operation": { "alias": "operation"; "required": false; }; "row": { "alias": "row"; "required": false; }; "col": { "alias": "col"; "required": false; }; "className": { "alias": "className"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "item": { "alias": "item"; "required": false; }; "props": { "alias": "props"; "required": false; }; "route": { "alias": "route"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxComponentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxComponentDirective, never, never, { "name": { "alias": "name"; "required": false; }; "childOf": { "alias": "childOf"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "model": { "alias": "model"; "required": false; }; "modelId": { "alias": "modelId"; "required": false; }; "pk": { "alias": "pk"; "required": false; }; "mapper": { "alias": "mapper"; "required": false; }; "operations": { "alias": "operations"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "row": { "alias": "row"; "required": false; }; "col": { "alias": "col"; "required": false; }; "className": { "alias": "className"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "item": { "alias": "item"; "required": false; }; "props": { "alias": "props"; "required": false; }; "route": { "alias": "route"; "required": false; }; }, { "listenEvent": "listenEvent"; }, never, never, true, never>;
 }
 
 /**
@@ -1792,8 +1801,8 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
  * It handles form group lifecycle, error messaging, change detection, and parent-child form relationships.
  * Extend this class to create custom form field components that seamlessly integrate with Angular's
  * reactive forms and Decaf's validation system.
- * @class NgxDecafFormFieldDirective
- * @extends {NgxDecafComponentDirective}
+ * @class NgxFormFieldDirective
+ * @extends {NgxComponentDirective}
  * @implements {ControlValueAccessor}
  * @implements {FieldProperties}
  * @example
@@ -1807,14 +1816,14 @@ declare abstract class NgxDecafComponentDirective extends LoggedClass implements
  *     multi: true
  *   }]
  * })
- * export class TextFieldComponent extends NgxDecafFormFieldDirective {
+ * export class TextFieldComponent extends NgxFormFieldDirective {
  *   constructor() {
  *     super();
  *   }
  * }
  * ```
  */
-declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirective implements ControlValueAccessor, FieldProperties {
+declare abstract class NgxFormFieldDirective extends NgxComponentDirective implements ControlValueAccessor, FieldProperties {
     /**
      * @description Index of the currently active form group in a form array.
      * @summary When working with multiple form groups (form arrays), this indicates
@@ -2013,7 +2022,7 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
      * @protected
      */
     protected parent?: HTMLElement;
-    constructor();
+    constructor(componentName?: string);
     /**
      * @description Gets the currently active form group based on context.
      * @summary Returns the appropriate FormGroup based on whether this field supports
@@ -2134,21 +2143,21 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
      * @public
      */
     getErrors(parent: HTMLElement): string | void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDecafFormFieldDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDecafFormFieldDirective, never, never, { "activeFormGroupIndex": { "alias": "activeFormGroupIndex"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "parentComponent": { "alias": "parentComponent"; "required": false; }; "optionsMapper": { "alias": "optionsMapper"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormFieldDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormFieldDirective, never, never, { "activeFormGroupIndex": { "alias": "activeFormGroupIndex"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "parentComponent": { "alias": "parentComponent"; "required": false; }; "optionsMapper": { "alias": "optionsMapper"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
- * @module lib/engine/NgxDecafFormService
+ * @module lib/engine/NgxFormService
  * @description Utilities to create and manage Angular forms in Decaf components.
- * @summary The NgxDecafFormService exposes helpers to build FormGroup/FormArray instances
+ * @summary The NgxFormService exposes helpers to build FormGroup/FormArray instances
  * from component metadata or UI model definitions, register forms in a registry,
  * validate and extract form data, and create controls with appropriate validators.
  */
 
 /**
  * @description Service for managing Angular forms and form controls.
- * @summary The NgxDecafFormService provides utility methods for creating, managing, and validating Angular forms and form controls. It includes functionality for registering forms, adding controls, validating fields, and handling form data.
+ * @summary The NgxFormService provides utility methods for creating, managing, and validating Angular forms and form controls. It includes functionality for registering forms, adding controls, validating fields, and handling form data.
  *
  * @class
  * @param {WeakMap<AbstractControl, FieldProperties>} controls - A WeakMap to store control properties.
@@ -2160,17 +2169,17 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
  *   { inputs: { name: 'username', type: 'text', required: true } },
  *   { inputs: { name: 'password', type: 'password', minLength: 8 } }
  * ];
- * const form = NgxDecafFormService.createFormFromComponents('loginForm', components, true);
+ * const form = NgxFormService.createFormFromComponents('loginForm', components, true);
  *
  * // Validating fields
- * NgxDecafFormService.validateFields(form);
+ * NgxFormService.validateFields(form);
  *
  * // Getting form data
- * const formData = NgxDecafFormService.getFormData(form);
+ * const formData = NgxFormService.getFormData(form);
  * @mermaid
  * sequenceDiagram
  *   participant C as Component
- *   participant NFS as NgxDecafFormService
+ *   participant NFS as NgxFormService
  *   participant AF as Angular Forms
  *   C->>NFS: createFormFromComponents()
  *   NFS->>AF: new FormGroup()
@@ -2183,7 +2192,7 @@ declare abstract class NgxDecafFormFieldDirective extends NgxDecafComponentDirec
  *   NFS->>AF: Get control values
  *   NFS-->>C: Return form data
  */
-declare class NgxDecafFormService {
+declare class NgxFormService {
     /**
      * @description WeakMap that stores control properties for form controls.
      * @summary A WeakMap that associates AbstractControl instances with their corresponding FieldProperties.
@@ -2215,7 +2224,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FR as Form Registry
      *   participant AF as Angular Forms
      *   C->>NFS: createForm(id, formArray, registry)
@@ -2281,7 +2290,7 @@ declare class NgxDecafFormService {
      * @private
      * @mermaid
      * sequenceDiagram
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FG as FormGroup
      *   participant FA as FormArray
      *   NFS->>NFS: Split path into parts
@@ -2395,7 +2404,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FR as Form Registry
      *   C->>NFS: getControlFromForm(formId, path?)
      *   NFS->>FR: Get form by formId
@@ -2430,7 +2439,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant AF as Angular Forms
      *   C->>NFS: createFormFromChildren(id, registry, children)
      *   NFS->>AF: new FormGroup({})
@@ -2457,7 +2466,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant AF as Angular Forms
      *   C->>NFS: createFormFromComponents(id, components, registry)
      *   NFS->>AF: new FormGroup({})
@@ -2486,7 +2495,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant F as Form
      *   C->>NFS: addControlFromProps(id, componentProps, parentProps?)
      *   NFS->>NFS: createForm(id, formArray, true)
@@ -2514,7 +2523,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FG as FormGroup
      *   participant FC as FormControl
      *   C->>NFS: getFormData(formGroup)
@@ -2556,7 +2565,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant FC as FormControl
      *   participant FG as FormGroup
      *   participant FA as FormArray
@@ -2610,7 +2619,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant VF as ValidatorFactory
      *   participant AF as Angular Forms
      *   C->>NFS: fromProps(props, updateMode?)
@@ -2652,7 +2661,7 @@ declare class NgxDecafFormService {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant NFS as NgxDecafFormService
+     *   participant NFS as NgxFormService
      *   participant DOM as DOM Tree
      *   C->>NFS: getParentEl(element, tagName)
      *   loop Traverse up DOM tree
@@ -2717,7 +2726,7 @@ declare abstract class NgxEventHandler<PAYLOAD> extends LoggedClass {
 /**
  * @module lib/engine/NgxPageDirective
  * @description Base page component for Decaf Angular applications.
- * @summary Provides a page-level base class (NgxPageDirective) that extends NgxDecafComponentDirective and
+ * @summary Provides a page-level base class (NgxPageDirective) that extends NgxComponentDirective and
  * offers page-focused utilities such as menu management, title handling and router event hooks.
  * @link {@link NgxPageDirective}
  */
@@ -2725,16 +2734,14 @@ declare abstract class NgxEventHandler<PAYLOAD> extends LoggedClass {
 /**
  * @description Base directive for page-level components in Decaf Angular applications.
  * @summary Abstract directive that provides foundational functionality for page components.
- * Extends NgxDecafComponentDirective to add page-specific features including menu management,
+ * Extends NgxComponentDirective to add page-specific features including menu management,
  * page title handling, and Ionic lifecycle hooks. This directive serves as the base class for
  * all page-level components, providing consistent behavior for navigation, routing, and UI state.
  * @class NgxPageDirective
- * @extends {NgxDecafComponentDirective}
+ * @extends {NgxComponentDirective}
  * @memberOf module:lib/engine/NgxPageDirective
  */
-declare abstract class NgxPageDirective extends NgxDecafComponentDirective implements AfterViewInit {
-    protected localeRoot?: string | undefined;
-    protected hasMenu: boolean;
+declare abstract class NgxPageDirective extends NgxComponentDirective implements AfterViewInit {
     /**
      * @description Page title text for the current view.
      * @summary Stores the title text to be displayed for this page. This can be set dynamically
@@ -2767,16 +2774,28 @@ declare abstract class NgxPageDirective extends NgxDecafComponentDirective imple
      * @memberOf module:lib/engine/NgxPageDirective
      */
     protected titleService: Title;
+    /**
+     * @description Flag indicating whether the page should display the navigation menu.
+     * @summary Controls the visibility and availability of the application menu for this page.
+     * When set to true, the menu is enabled and accessible to users. When false, the menu
+     * is disabled, which is useful for pages like login screens or standalone views that
+     * should not show navigation options.
+     * @protected
+     * @type {boolean}
+     * @default true
+     * @memberOf module:lib/engine/NgxPageDirective
+     */
+    protected hasMenu: boolean;
     /**
      * @description Constructor for NgxPageDirective.
      * @summary Initializes the page directive with optional locale root and menu visibility settings.
-     * Calls the parent NgxDecafComponentDirective constructor to set up base functionality including
+     * Calls the parent NgxComponentDirective constructor to set up base functionality including
      * logging, localization, and component identification.
      * @param {string} [localeRoot] - Optional locale root key for internationalization
      * @param {boolean} [hasMenu=true] - Whether this page should display the menu
      * @memberOf module:lib/engine/NgxPageDirective
      */
-    constructor(localeRoot?: string | undefined, hasMenu?: boolean);
+    constructor(localeRoot?: string, hasMenu?: boolean);
     /**
      * @description Ionic lifecycle hook called when the page is about to enter view.
      * @summary This lifecycle hook is triggered just before the page becomes visible to the user.
@@ -2805,208 +2824,595 @@ declare abstract class NgxPageDirective extends NgxDecafComponentDirective imple
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgxPageDirective, never, never, {}, {}, never, never, true, never>;
 }
 
-/**
- * @description Dynamic component renderer for Decaf Angular applications.
- * @summary This component provides a flexible way to dynamically render Angular components
- * at runtime based on a tag name. It handles the creation, property binding, and event
- * subscription for dynamically loaded components. This is particularly useful for
- * building configurable UIs where components need to be determined at runtime.
- *
- * @component {ComponentRendererComponent}
- * @example
- * <ngx-decaf-component-renderer
- *   [tag]="tag"
- *   [globals]="globals"
- *   (listenEvent)="listenEvent($event)">
- * </ngx-decaf-component-renderer>
- *
- * @mermaid
- * classDiagram
- *   class ComponentRendererComponent {
- *     +ViewContainerRef vcr
- *     +string tag
- *     +Record~string, unknown~ globals
- *     +EnvironmentInjector injector
- *     +ComponentRef~unknown~ component
- *     +EventEmitter~IBaseCustomEvent~ listenEvent
- *     +ngOnInit()
- *     +ngOnDestroy()
- *     +ngOnChanges(changes)
- *     -createComponent(tag, globals)
- *     -subscribeEvents()
- *     -unsubscribeEvents()
- *   }
- *   ComponentRendererComponent --|> OnInit
- *   ComponentRendererComponent --|> OnChanges
- *   ComponentRendererComponent --|> OnDestroy
- *
- * @implements {OnInit}
- * @implements {OnChanges}
- * @implements {OnDestroy}
- */
-declare class ComponentRendererComponent implements OnInit, OnDestroy {
+declare abstract class NgxModelPageDirective extends NgxPageDirective {
     /**
-     * @description Reference to the container where the dynamic component will be rendered.
-     * @summary This ViewContainerRef provides the container where the dynamically created
-     * component will be inserted into the DOM. It's marked as static to ensure it's available
-     * during the ngOnInit lifecycle hook when the component is created.
+     * @description Primary key value of the current model instance.
+     * @summary Specifies the primary key value for the current model record being displayed or
+     * manipulated by the component. This identifier is used for CRUD operations that target
+     * specific records, such as read, update, and delete operations. The value corresponds to
+     * the field designated as the primary key in the model definition.
+     * @type {EventIds}
+     * @memberOf module:lib/engine/NgxComponentDirective
+     */
+    modelId: EventIds;
+    /**
+     * @description The CRUD operation type to be performed on the model.
+     * @summary Specifies which operation (Create, Read, Update, Delete) this component instance
+     * should perform. This determines the UI behavior, form configuration, and available actions.
+     * The operation affects form validation, field availability, and the specific repository
+     * method called during data submission.
      *
-     * @type {ViewContainerRef}
-     * @memberOf ComponentRendererComponent
+     * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+     * @default OperationKeys.READ
+     *  @memberOf ModelPage
      */
-    vcr: ViewContainerRef;
+    operation: OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE;
     /**
-     * @description The tag name of the component to be dynamically rendered.
-     * @summary This input property specifies which component should be rendered by providing
-     * its registered tag name. The tag must correspond to a component that has been registered
-     * with the NgxRenderingEngine. This is a required input as it determines which component
-     * to create.
+     * @description The name of the model class to operate on.
+     * @summary Identifies which registered model class this component should work with.
+     * This name is used to resolve the model constructor from the global model registry
+     * and instantiate the appropriate repository for data operations. The model must
+     * be properly registered using the @Model decorator for resolution to work.
      *
      * @type {string}
-     * @required
-     * @memberOf ComponentRendererComponent
+     *  @memberOf ModelPage
      */
-    tag: string;
+    modelName: string;
     /**
-     * @description Global properties to pass to the rendered component.
-     * @summary This input property allows passing a set of properties to the dynamically
-     * rendered component. These properties will be mapped to the component's inputs if they
-     * match. Properties that don't match any input on the target component will be filtered out
-     * with a warning.
+     * @description Array of operations allowed for the current model instance.
+     * @summary Dynamically determined list of operations that are permitted based on
+     * the current context and model state. Initially contains CREATE and READ operations,
+     * with UPDATE and DELETE added when a modelId is present. This controls which
+     * action buttons are displayed and which operations are accessible to the user.
      *
-     * @type {Record<string, unknown>}
-     * @default {}
-     * @memberOf ComponentRendererComponent
+     * @type {OperationKeys[]}
+     * @default [OperationKeys.CREATE, OperationKeys.READ]
+     * @memberOf ModelPage
      */
-    globals: Record<string, unknown>;
+    allowedOperations: OperationKeys[];
     /**
-     * @description Injector used for dependency injection in the dynamic component.
-     * @summary This injector is used when creating the dynamic component to provide it with
-     * access to the application's dependency injection system. It ensures that the dynamically
-     * created component can access the same services and dependencies as statically created
-     * components.
-     *
-     * @type {EnvironmentInjector}
-     * @memberOf ComponentRendererComponent
+   * @description Current model data loaded from the repository.
+   * @summary Stores the raw data object representing the current model instance retrieved
+   * from the repository. This property holds the actual data values for the model being
+   * displayed or edited, and is set to undefined when no data is available or when an
+   * error occurs during data loading.
+   * @type {KeyValue | undefined}
+   * @default undefined
+   * @memberOf NgxModelPageDirective
+   */
+    modelData: KeyValue | undefined;
+    /**
+     * @description Error message from failed operations.
+     * @summary Stores error messages that occur during repository operations such as
+     * data loading, creation, update, or deletion. When set, this indicates an error
+     * state that should be displayed to the user. Cleared on successful operations.
+     * @type {string | undefined}
+     * @default undefined
+     * @memberOf NgxModelPageDirective
      */
-    injector: EnvironmentInjector;
+    errorMessage: string | undefined;
     /**
-     * @description Reference to the dynamically created component.
-     * @summary This property holds a reference to the ComponentRef of the dynamically created
-     * component. It's used to interact with the component instance, subscribe to its events,
-     * and properly destroy it when the renderer is destroyed.
+     * @description Lazy-initialized repository getter with model resolution.
+     * @summary Creates and returns a repository instance for the specified model name.
+     * Resolves the model constructor from the global registry, instantiates the repository,
+     * and creates a new model instance. Throws an InternalError if the model is not
+     * properly registered with the @Model decorator.
      *
-     * @type {ComponentRef<unknown>}
-     * @memberOf ComponentRendererComponent
+     * @return {DecafRepository<Model>} The repository instance for the current model
+     *
+     * @throws {InternalError} When the model is not found in the registry
      */
-    component: ComponentRef<unknown>;
-    children: KeyValue[];
-    projectable: boolean;
+    protected get repository(): DecafRepository<Model>;
     /**
-     * @description Event emitter for events from the rendered component.
-     * @summary This output property emits events that originate from the dynamically rendered
-     * component. It allows the parent component to listen for and respond to events from the
-     * dynamic component, creating a communication channel between the parent and the dynamically
-     * rendered child.
-     *
-     * @type {EventEmitter<IBaseCustomEvent>}
-     * @memberOf ComponentRendererComponent
+     * @description Angular lifecycle hook for component initialization.
+     * @summary Initializes the component by setting up the logger instance using the getLogger
+     * utility. This ensures that logging is available throughout the component's lifecycle
+     * for error tracking and debugging purposes.
      */
-    listenEvent: EventEmitter<IBaseCustomEvent>;
+    ionViewWillEnter(): Promise<void>;
     /**
-     * @description Logger instance for the component.
-     * @summary This property holds a Logger instance specific to this component.
-     * It's used to log information, warnings, and errors related to the component's
-     * operations, particularly useful for debugging and monitoring the dynamic
-     * component rendering process.
+     * @description Refreshes the component data by loading the specified model instance.
+     * @summary Loads model data from the repository based on the current operation type.
+     * For READ, UPDATE, and DELETE operations, fetches the existing model data using
+     * the provided unique identifier. Handles errors gracefully by logging them through
+     * the logger instance.
      *
-     * @type {Logger}
-     * @memberOf ComponentRendererComponent
+     * @param {string} [uid] - The unique identifier of the model to load; defaults to modelId
      */
-    logger: Logger;
+    refresh(uid?: EventIds): Promise<void>;
     /**
-     * @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 Generic event handler for component events.
+     * @summary Processes incoming events from child components and routes them to appropriate
+     * handlers based on the event name. Currently handles SUBMIT events by delegating to
+     * the handleSubmit method. This centralized event handling approach allows for easy
+     * extension and consistent event processing.
      *
-     * @type {Model| undefined}
+     * @param {IBaseCustomEvent} event - The event object containing event data and metadata
      */
-    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;
+    handleEvent(event: IBaseCustomEvent): Promise<void>;
     /**
-     * @description Creates an instance of ComponentRendererComponent.
-     * @summary Initializes a new ComponentRendererComponent. This component doesn't require
-     * any dependencies to be injected in its constructor as it uses the inject function to
-     * obtain the EnvironmentInjector.
+     * @description Handles form submission events for CRUD operations.
+     * @summary Processes form submission by executing the appropriate repository operation
+     * based on the current operation type. Handles CREATE, UPDATE, and DELETE operations,
+     * processes the form data, refreshes the repository cache, navigates back to the previous
+     * page, and displays success notifications. Comprehensive error handling ensures robust
+     * operation with detailed logging.
      *
-     * @memberOf ComponentRendererComponent
+     * @param {IBaseCustomEvent} event - The submit event containing form data
+     * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
      */
-    constructor();
+    handleSubmit(event: IBaseCustomEvent): Promise<IModelPageCustomEvent | void>;
     /**
-     * @description Initializes the component after Angular first displays the data-bound properties.
-     * @summary Sets up the component by creating the dynamic component specified by the tag input.
-     * This method is called once when the component is initialized and triggers the dynamic
-     * component creation process with the provided tag name and global properties.
+     * @description Retrieves a model instance from the repository by unique identifier.
+     * @summary Fetches a specific model instance using the repository's read method.
+     * Handles both string and numeric identifiers by automatically converting numeric
+     * strings to numbers. If no identifier is provided, logs an informational message
+     * and navigates back to the previous page. Returns undefined for missing instances.
      *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant C as ComponentRendererComponent
-     *   participant R as NgxRenderingEngine
-     *
-     *   A->>C: ngOnInit()
-     *   C->>C: createComponent(tag, globals)
-     *   C->>R: components(tag)
-     *   R-->>C: Return component constructor
-     *   C->>C: Process component inputs
-     *   C->>C: Create component instance
-     *   C->>C: subscribeEvents()
-     *
-     * @return {void}
-     * @memberOf ComponentRendererComponent
+     * @param {string} uid - The unique identifier of the model instance to retrieve
+     * @return {Promise<Model | undefined>} Promise resolving to the model instance or undefined
      */
-    ngOnInit(): void;
+    handleGet(uid?: EventIds): Promise<Model | undefined>;
     /**
-     * @description Cleans up resources when the component is destroyed.
-     * @summary Performs cleanup operations when the component is being destroyed by Angular.
-     * This includes unsubscribing from all event emitters of the dynamic component and
-     * destroying the rendering engine instance to prevent memory leaks.
+     * @description Parses and transforms form data for repository operations.
+     * @summary Converts raw form data into the appropriate format for repository operations.
+     * For DELETE operations, returns the primary key value (string or number). For CREATE
+     * and UPDATE operations, builds a complete model instance using the Model.build method
+     * with proper primary key assignment for updates.
      *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant C as ComponentRendererComponent
-     *   participant R as NgxRenderingEngine
+     * @param {Partial<Model>} data - The raw form data to be processed
+     * @return {Model | string | number} Processed data ready for repository operations
+     * @private
+     */
+    private parseData;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxModelPageDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxModelPageDirective, never, never, { "modelId": { "alias": "modelId"; "required": false; }; "operation": { "alias": "operation"; "required": false; }; "modelName": { "alias": "modelName"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * @module module:lib/engine/NgxParentComponentDirective
+ * @description Directive base for parent container components used by the rendering system.
+ * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
+ * column/row configuration and parent component wiring used by layout and container components.
+ *
+ * @link {@link NgxParentComponentDirective}
+ */
+
+/**
+ * @description Layout component for creating responsive grid layouts in Angular applications.
+ * @summary This component provides a flexible grid system that can be configured with dynamic
+ * rows and columns. It supports responsive breakpoints and can render child components within
+ * the grid structure. The component extends NgxComponentDirective to inherit common functionality
+ * and integrates with the model and component renderer systems.
+ *
+ * @class NgxParentComponentDirective
+ * @extends {NgxParentComponentDirective}
+ * @implements {OnInit}
+ */
+declare class NgxParentComponentDirective extends NgxComponentDirective implements OnInit {
+    /**
+     * @description The display name or title of the fieldset section.
+     * @summary Sets the legend or header text that appears in the accordion header. This text
+     * provides a clear label for the collapsible section, helping users understand what content
+     * is contained within. The name is displayed prominently and serves as the clickable area
+     * for expanding/collapsing the fieldset.
      *
-     *   A->>C: ngOnDestroy()
-     *   alt component exists
-     *     C->>C: unsubscribeEvents()
-     *     C->>R: destroy()
-     *   end
+     * @type {string}
+     * @default 'Child'
+     */
+    parentComponent: FormParent;
+    /**
+     * @description Array of UI model metadata for all form fields.
+     * @summary Contains the complete collection of UI model metadata that defines
+     * the structure, validation, and presentation of form fields across all pages.
+     * Each metadata object contains information about field type, validation rules,
+     * page assignment, and display properties.
      *
-     * @return {Promise<void>} A promise that resolves when cleanup is complete
-     * @memberOf ComponentRendererComponent
+     * @type {UIModelMetadata[]}
      */
-    ngOnDestroy(): Promise<void>;
+    children: UIModelMetadata[] | KeyValue[];
     /**
-     * @description Creates and renders a dynamic component.
-     * @summary This method handles the creation of a dynamic component based on the provided tag.
-     * It retrieves the component constructor from the rendering engine, processes its inputs,
-     * filters out unmapped properties, creates the component instance, and sets up event subscriptions.
+     * @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.
      *
-     * @param {string} tag - The tag name of the component to create
-     * @param {KeyValue} globals - Global properties to pass to the component
-     * @return {void}
+     * @type {(number | string[])}
+     * @default 1
+     */
+    cols: number | string[];
+    /**
+     * @description Number of rows or array of row definitions for the grid layout.
+     * @summary Defines the row structure of the grid. When a number is provided, it creates
+     * that many equal-height rows. When an array is provided, each element can define specific
+     * row properties or sizing. This provides control over vertical spacing and content organization.
+     *
+     * @type {(number | string[])}
+     * @default 1
+     */
+    rows: number | KeyValue[] | string[];
+    ngOnInit(model?: Model | string): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxParentComponentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxParentComponentDirective, never, never, { "parentComponent": { "alias": "parentComponent"; "required": false; }; "children": { "alias": "children"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare abstract class NgxFormDirective extends NgxParentComponentDirective implements OnInit, IFormElement, OnDestroy, IRenderedModel {
+    crudFieldComponent: string;
+    /**
+     * @description Reactive form group associated with this fieldset.
+     * @summary The FormGroup instance that contains all form controls within this fieldset.
+     * Used for form validation, value management, and integration with Angular's reactive forms.
+     *
+     * @type {FormGroup}
+     */
+    parentFormId: string;
+    /**
+     * @description Reference to the reactive form DOM element.
+     * @summary ViewChild reference that provides direct access to the form's DOM element.
+     * This enables programmatic manipulation of the form element and access to native
+     * HTML form properties and methods when needed.
+     *
+     * @type {ElementRef}
+     */
+    component: ElementRef;
+    /**
+     * @description Field update trigger mode for form validation.
+     * @summary Determines when form field validation should be triggered. Options include
+     * 'change', 'blur', or 'submit'. This affects the user experience by controlling
+     * when validation feedback is shown to the user during form interaction.
+     *
+     * @type {FieldUpdateMode}
+     * @default 'change'
+     */
+    updateOn: FieldUpdateMode;
+    /**
+     * @description Form submission target specification.
+     * @summary Specifies where to display the response after form submission, similar
+     * to the HTML form target attribute. Options include '_self', '_blank', '_parent',
+     * '_top', or a named frame. Controls the browser behavior for form responses.
+     *
+     * @type {HTMLFormTarget}
+     * @default '_self'
+     */
+    target: HTMLFormTarget;
+    /**
+     * @description HTTP method or submission strategy for the form.
+     * @summary Defines how the form should be submitted. 'get' and 'post' correspond
+     * to standard HTTP methods for traditional form submission, while 'event' uses
+     * Angular event-driven submission for single-page application workflows.
+     *
+     * @type {'get' | 'post' | 'event'}
+     * @default 'event'
+     */
+    method: 'get' | 'post' | 'event';
+    /**
+     * @description Configuration options for the CRUD form behavior.
+     * @summary Contains various configuration settings that control form rendering,
+     * validation, and behavior. These options are merged with default settings
+     * during component initialization to customize the form's functionality.
+     *
+     * @type {ICrudFormOptions}
+     */
+    options: ICrudFormOptions;
+    /**
+     * @description Optional action identifier for form submission context.
+     * @summary Specifies a custom action name that will be included in the submit event.
+     * If not provided, defaults to the standard submit event constant. Used to
+     * distinguish between different types of form submissions within the same component.
+     *
+     * @type {string | undefined}
+     */
+    action?: string;
+    /**
+     * @description The current CRUD operation being performed.
+     * @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
+     * This is a required input that determines form behavior, validation rules, and available actions.
+     * The operation affects form state, button visibility, and submission logic.
+     *
+     * @type {CrudOperations}
+     * @required
+     */
+    operation: CrudOperations;
+    /**
+     * @description Custom event handlers for form actions.
+     * @summary A record of event handler functions keyed by event names that can be
+     * triggered during form operations. These handlers provide extensibility for
+     * custom business logic and can be invoked for various form events and actions.
+     *
+     * @type {HandlerLike}
+     */
+    handlers: HandlerLike;
+    /**
+     * @description Angular reactive FormGroup for form state management.
+     * @summary The FormGroup instance that manages all form controls, validation,
+     * and form state. This is the main interface for accessing form values and
+     * controlling form behavior. May be undefined for read-only operations.
+     *
+     * @type {FormGroup | undefined}
+     */
+    formGroup: FormParent | undefined;
+    /**
+     * @description Unique identifier for the form renderer.
+     * @summary A unique string identifier used to register and manage this form
+     * instance within the NgxFormService. This ID is also used as the HTML id
+     * attribute for the form element, enabling DOM queries and form management.
+     *
+     * @type {string}
+     */
+    rendererId: string;
+    /**
+   * @description Event emitter for form submission events.
+   * @summary Emits ICrudFormEvent objects when the form is submitted, providing
+   * form data, component information, and any associated handlers to parent
+   * components. This enables decoupled handling of form submission logic.
+   *
+   * @type {EventEmitter<ICrudFormEvent>}
+   */
+    submitEvent: EventEmitter<ICrudFormEvent>;
+    /**
+     * @description Unique identifier for the current record instance.
+     * @summary This property holds a unique string value that identifies the specific record being managed by the form.
+     * It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
+     * The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
+     * in conjunction with the primary key for CRUD operations.
+     *
+     * @type {string}
+     * @default Randomly generated 12-character string
+     */
+    allowClear: boolean;
+    protected activeFormGroupIndex: number;
+    get activeFormGroup(): FormParent;
+    /**
+    * @description Component initialization lifecycle method.
+    * @summary Initializes the component by setting up the logger, configuring form state
+    * based on the operation type, and merging configuration options. For READ and DELETE
+    * operations, the formGroup is set to undefined since these operations don't require
+    * form input. Configuration options are merged with default settings.
+    *
+    * @returns {Promise<void>}
+    */
+    ngOnInit(model?: Model | string): Promise<void>;
+    /**
+     * @description Component cleanup lifecycle method.
+     * @summary Performs cleanup operations when the component is destroyed.
+     * Unregisters the FormGroup from the NgxFormService to prevent memory leaks
+     * and ensure proper resource cleanup.
+     *
+     * @returns {void}
+     */
+    ngOnDestroy(): void;
+    getFormArrayIndex(index: number): FormParent | undefined;
+    /**
+     * @description Handles form reset or navigation back functionality.
+     * @summary Provides different reset behavior based on the current operation.
+     * For CREATE and UPDATE operations, resets the form to its initial state.
+     * For READ and DELETE operations, navigates back in the browser history
+     * since these operations don't have modifiable form data to reset.
+     *
+     * @returns {void}
+     */
+    handleReset(): void;
+    handleSubmit(event?: SubmitEvent, eventName?: string, componentName?: string): Promise<boolean | void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormDirective, never, never, { "parentFormId": { "alias": "parentFormId"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "method": { "alias": "method"; "required": false; }; "options": { "alias": "options"; "required": false; }; "action": { "alias": "action"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "handlers": { "alias": "handlers"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+}
+
+declare abstract class NgxMediaDirective extends NgxComponentDirective implements OnDestroy {
+    private destroy$;
+    private resizeSubject;
+    resize$: Observable<IWindowResizeEvent>;
+    colorScheme$: Observable<WindowColorScheme>;
+    protected zone: NgZone;
+    constructor(localeRoot?: string);
+    isDarkMode(): Promise<boolean>;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxMediaDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxMediaDirective, never, never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @description Dynamic component renderer for Decaf Angular applications.
+ * @summary This component provides a flexible way to dynamically render Angular components
+ * at runtime based on a tag name. It handles the creation, property binding, and event
+ * subscription for dynamically loaded components. This is particularly useful for
+ * building configurable UIs where components need to be determined at runtime.
+ *
+ * @component {ComponentRendererComponent}
+ * @example
+ * <ngx-decaf-component-renderer
+ *   [tag]="tag"
+ *   [globals]="globals"
+ *   (listenEvent)="listenEvent($event)">
+ * </ngx-decaf-component-renderer>
+ *
+ * @mermaid
+ * classDiagram
+ *   class ComponentRendererComponent {
+ *     +ViewContainerRef vcr
+ *     +string tag
+ *     +Record~string, unknown~ globals
+ *     +EnvironmentInjector injector
+ *     +ComponentRef~unknown~ component
+ *     +EventEmitter~IBaseCustomEvent~ listenEvent
+ *     +ngOnInit()
+ *     +ngOnDestroy()
+ *     +ngOnChanges(changes)
+ *     -createComponent(tag, globals)
+ *     -subscribeEvents()
+ *     -unsubscribeEvents()
+ *   }
+ *   ComponentRendererComponent --|> OnInit
+ *   ComponentRendererComponent --|> OnChanges
+ *   ComponentRendererComponent --|> OnDestroy
+ *
+ * @implements {OnInit}
+ * @implements {OnChanges}
+ * @implements {OnDestroy}
+ */
+declare class ComponentRendererComponent implements OnInit, OnDestroy {
+    /**
+     * @description Reference to the container where the dynamic component will be rendered.
+     * @summary This ViewContainerRef provides the container where the dynamically created
+     * component will be inserted into the DOM. It's marked as static to ensure it's available
+     * during the ngOnInit lifecycle hook when the component is created.
+     *
+     * @type {ViewContainerRef}
+     * @memberOf ComponentRendererComponent
+     */
+    vcr: ViewContainerRef;
+    /**
+     * @description The tag name of the component to be dynamically rendered.
+     * @summary This input property specifies which component should be rendered by providing
+     * its registered tag name. The tag must correspond to a component that has been registered
+     * with the NgxRenderingEngine. This is a required input as it determines which component
+     * to create.
+     *
+     * @type {string}
+     * @required
+     * @memberOf ComponentRendererComponent
+     */
+    tag: string;
+    /**
+     * @description Global properties to pass to the rendered component.
+     * @summary This input property allows passing a set of properties to the dynamically
+     * rendered component. These properties will be mapped to the component's inputs if they
+     * match. Properties that don't match any input on the target component will be filtered out
+     * with a warning.
+     *
+     * @type {Record<string, unknown>}
+     * @default {}
+     * @memberOf ComponentRendererComponent
+     */
+    globals: Record<string, unknown>;
+    /**
+     * @description Injector used for dependency injection in the dynamic component.
+     * @summary This injector is used when creating the dynamic component to provide it with
+     * access to the application's dependency injection system. It ensures that the dynamically
+     * created component can access the same services and dependencies as statically created
+     * components.
+     *
+     * @type {EnvironmentInjector}
+     * @memberOf ComponentRendererComponent
+     */
+    injector: EnvironmentInjector;
+    /**
+     * @description Reference to the dynamically created component.
+     * @summary This property holds a reference to the ComponentRef of the dynamically created
+     * component. It's used to interact with the component instance, subscribe to its events,
+     * and properly destroy it when the renderer is destroyed.
+     *
+     * @type {ComponentRef<unknown>}
+     * @memberOf ComponentRendererComponent
+     */
+    component: ComponentRef<unknown>;
+    children: KeyValue[];
+    projectable: boolean;
+    /**
+     * @description Event emitter for events from the rendered component.
+     * @summary This output property emits events that originate from the dynamically rendered
+     * component. It allows the parent component to listen for and respond to events from the
+     * dynamic component, creating a communication channel between the parent and the dynamically
+     * rendered child.
+     *
+     * @type {EventEmitter<IBaseCustomEvent>}
+     * @memberOf ComponentRendererComponent
+     */
+    listenEvent: EventEmitter<IBaseCustomEvent>;
+    /**
+     * @description Logger instance for the component.
+     * @summary This property holds a Logger instance specific to this component.
+     * It's used to log information, warnings, and errors related to the component's
+     * operations, particularly useful for debugging and monitoring the dynamic
+     * component rendering process.
+     *
+     * @type {Logger}
+     * @memberOf ComponentRendererComponent
+     */
+    logger: Logger;
+    /**
+     * @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}
+     */
+    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;
+    /**
+     * @description Creates an instance of ComponentRendererComponent.
+     * @summary Initializes a new ComponentRendererComponent. This component doesn't require
+     * any dependencies to be injected in its constructor as it uses the inject function to
+     * obtain the EnvironmentInjector.
+     *
+     * @memberOf ComponentRendererComponent
+     */
+    constructor();
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the component by creating the dynamic component specified by the tag input.
+     * This method is called once when the component is initialized and triggers the dynamic
+     * component creation process with the provided tag name and global properties.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine
+     *
+     *   A->>C: ngOnInit()
+     *   C->>C: createComponent(tag, globals)
+     *   C->>R: components(tag)
+     *   R-->>C: Return component constructor
+     *   C->>C: Process component inputs
+     *   C->>C: Create component instance
+     *   C->>C: subscribeEvents()
+     *
+     * @return {void}
+     * @memberOf ComponentRendererComponent
+     */
+    ngOnInit(): void;
+    /**
+     * @description Cleans up resources when the component is destroyed.
+     * @summary Performs cleanup operations when the component is being destroyed by Angular.
+     * This includes unsubscribing from all event emitters of the dynamic component and
+     * destroying the rendering engine instance to prevent memory leaks.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine
+     *
+     *   A->>C: ngOnDestroy()
+     *   alt component exists
+     *     C->>C: unsubscribeEvents()
+     *     C->>R: destroy()
+     *   end
+     *
+     * @return {Promise<void>} A promise that resolves when cleanup is complete
+     * @memberOf ComponentRendererComponent
+     */
+    ngOnDestroy(): Promise<void>;
+    /**
+     * @description Creates and renders a dynamic component.
+     * @summary This method handles the creation of a dynamic component based on the provided tag.
+     * It retrieves the component constructor from the rendering engine, processes its inputs,
+     * filters out unmapped properties, creates the component instance, and sets up event subscriptions.
+     *
+     * @param {string} tag - The tag name of the component to create
+     * @param {KeyValue} globals - Global properties to pass to the component
+     * @return {void}
      *
      * @mermaid
      * sequenceDiagram
@@ -3092,7 +3498,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
  * @module module:lib/components/crud-field/crud-field.component
  * @description CRUD field component module.
  * @summary Exposes `CrudFieldComponent`, a dynamic form field used in CRUD forms supporting
- * many input types, validation and integration with `NgxDecafFormFieldDirective` utilities.
+ * many input types, validation and integration with `NgxFormFieldDirective` utilities.
  *
  * @link {@link CrudFieldComponent}
  */
@@ -3100,7 +3506,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
 /**
  * @description A dynamic form field component for CRUD operations.
  * @summary The CrudFieldComponent is a versatile form field component that adapts to different
- * input types and CRUD operations. It extends NgxDecafFormFieldDirective to inherit form handling capabilities
+ * input types and CRUD operations. It extends NgxFormFieldDirective to inherit form handling capabilities
  * and implements lifecycle hooks to properly initialize, render, and clean up. This component
  * supports various input types (text, number, date, select, etc.), validation rules, and styling
  * options, making it suitable for building dynamic forms for create, read, update, and delete
@@ -3140,7 +3546,7 @@ declare class ComponentRendererComponent implements OnInit, OnDestroy {
  *
  * @memberOf module:for-angular
  */
-declare class CrudFieldComponent extends NgxDecafFormFieldDirective implements OnInit, OnDestroy, AfterViewInit {
+declare class CrudFieldComponent extends NgxFormFieldDirective implements OnInit, OnDestroy, AfterViewInit {
     /**
      * @description The CRUD operation being performed.
      * @summary Specifies which CRUD operation (Create, Read, Update, Delete) the field is being used for.
@@ -3461,394 +3867,165 @@ declare class CrudFieldComponent extends NgxDecafFormFieldDirective implements O
     /**
      * @description Input mode for text inputs.
      * @summary Hints at the type of data that might be entered by the user while editing the element.
-     * This can affect the virtual keyboard layout on mobile devices.
-     *
-     * @type {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
-     * @default 'none'
-     * @memberOf CrudFieldComponent
-     */
-    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-    /**
-     * @description Autocomplete behavior for the field.
-     * @summary Specifies whether and how the browser should automatically complete the input.
-     * This can improve user experience by suggesting previously entered values.
-     *
-     * @type {AutocompleteTypes}
-     * @default 'off'
-     * @memberOf CrudFieldComponent
-     */
-    autocomplete: AutocompleteTypes;
-    /**
-     * @description Fill style for the field.
-     * @summary Determines the fill style of the field, such as 'outline' or 'solid'.
-     * This affects the border and background of the field.
-     *
-     * @type {'outline' | 'solid'}
-     * @default 'outline'
-     * @memberOf CrudFieldComponent
-     */
-    fill: 'outline' | 'solid';
-    /**
-     * @description Placement of the label relative to the field.
-     * @summary Specifies where the label should be placed relative to the field.
-     * Options include 'start', 'end', 'floating', 'stacked', and 'fixed'.
-     *
-     * @type {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
-     * @default 'floating'
-     * @memberOf CrudFieldComponent
-     */
-    labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-    /**
-     * @description Update mode for the field.
-     * @summary Determines when the field value should be updated in the form model.
-     * Options include 'change', 'blur', and 'submit'.
-     *
-     * @type {FieldUpdateMode}
-     * @default 'change'
-     * @memberOf CrudFieldComponent
-     */
-    updateOn: FieldUpdateMode;
-    /**
-     * @description Reference to the field component.
-     * @summary Provides a reference to the field component element, allowing direct access to its properties and methods.
-     *
-     * @type {ElementRef}
-     * @memberOf CrudFieldComponent
-     */
-    component: ElementRef;
-    /**
-     * @description Parent form group.
-     * @summary References the parent form group to which this field belongs.
-     * This is necessary for integrating the field with Angular's reactive forms.
-     *
-     * @type {FormGroup}
-     * @memberOf CrudFieldComponent
-     */
-    formGroup: FormGroup | undefined;
-    /**
-     * @description Angular FormControl instance for this field.
-     * @summary The specific FormControl instance that manages this field's state, validation,
-     * and value. This provides direct access to Angular's reactive forms functionality
-     * for this individual field within the broader form structure.
-     *
-     * @type {FormControl}
-     * @memberOf CrudFieldComponent
-     */
-    formControl: FormControl;
-    /**
-     * @description Indicates if this field supports multiple values.
-     * @summary When true, this field can handle multiple values, typically used in
-     * multi-select scenarios or when the field is part of a form array structure
-     * that allows multiple entries of the same field type.
-     *
-     * @type {boolean}
-     * @default false
-     * @memberOf CrudFieldComponent
-     */
-    multiple: boolean;
-    /**
-     * @description Unique identifier for the current record.
-     * @summary A unique identifier for the current record being displayed or manipulated.
-     * This is typically used in conjunction with the primary key for operations on specific records.
-     *
-     * @type {string | number}
-     */
-    uid: string;
-    page: number;
-    /**
-     * @description Translatability of field labels.
-     * @summary Indicates whether the field labels should be translated based on the current language settings.
-     * This is useful for applications supporting multiple languages.
-     *
-     * @type {StringOrBoolean}
-     * @default true
-     * @memberOf CrudFieldComponent
-     */
-    translatable: StringOrBoolean;
-    /**
-     * @description Component initialization lifecycle method.
-     * @summary Initializes the field component based on the operation type and field configuration.
-     * For READ and DELETE operations, removes the form group to make fields read-only.
-     * For other operations, sets up icons, configures multi-value support if needed,
-     * and sets default values for radio buttons if no value is provided.
-     *
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    ngOnInit(): Promise<void>;
-    /**
-    * Returns a list of options for select or radio inputs, with their `text` property
-    * localized if it does not already include the word 'options'. The localization key
-    * is generated from the component's label, replacing 'label' with 'options'.
-    *
-    * @returns {CrudFieldOption[]} The array of parsed and localized options.
-    * @memberOf CrudFieldComponent
-    */
-    getOptions(): Promise<CrudFieldOption[]>;
-    /**
-     * @description Component after view initialization lifecycle method.
-     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
-     * This ensures proper initialization of read-only fields that don't require
-     * form functionality but still need view setup.
-     *
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    ngAfterViewInit(): void;
-    /**
-     * @description Component cleanup lifecycle method.
-     * @summary Performs cleanup operations for READ and DELETE operations by calling
-     * the parent onDestroy method. This ensures proper resource cleanup for
-     * read-only field components.
-     *
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    ngOnDestroy(): void;
-    toggleOptionSelection(val: string, event: CheckboxCustomEvent): void;
-    isOptionChecked(value: string): boolean;
-    /**
-     * @description Handles fieldset group update events from parent fieldsets.
-     * @summary Processes events triggered when an existing group needs to be updated.
-     * Updates the active form group index and refreshes the form group and form control
-     * references to point to the group being edited.
-     *
-     * @param {CustomEvent} event - The fieldset update group event containing update details
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    handleFieldsetUpdateGroupEvent(event: CustomEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CrudFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "className": { "alias": "className"; "required": false; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "page": { "alias": "page"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * @module module:lib/engine/NgxParentComponentDirective
- * @description Directive base for parent container components used by the rendering system.
- * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
- * column/row configuration and parent component wiring used by layout and container components.
- *
- * @link {@link NgxParentComponentDirective}
- */
-
-/**
- * @description Layout component for creating responsive grid layouts in Angular applications.
- * @summary This component provides a flexible grid system that can be configured with dynamic
- * rows and columns. It supports responsive breakpoints and can render child components within
- * the grid structure. The component extends NgxDecafComponentDirective to inherit common functionality
- * and integrates with the model and component renderer systems.
- *
- * @class NgxParentComponentDirective
- * @extends {NgxParentComponentDirective}
- * @implements {OnInit}
- */
-declare class NgxParentComponentDirective extends NgxDecafComponentDirective implements OnInit {
-    /**
-     * @description The display name or title of the fieldset section.
-     * @summary Sets the legend or header text that appears in the accordion header. This text
-     * provides a clear label for the collapsible section, helping users understand what content
-     * is contained within. The name is displayed prominently and serves as the clickable area
-     * for expanding/collapsing the fieldset.
-     *
-     * @type {string}
-     * @default 'Child'
-     */
-    parentComponent: FormParent;
-    /**
-     * @description Array of UI model metadata for all form fields.
-     * @summary Contains the complete collection of UI model metadata that defines
-     * the structure, validation, and presentation of form fields across all pages.
-     * Each metadata object contains information about field type, validation rules,
-     * page assignment, and display properties.
-     *
-     * @type {UIModelMetadata[]}
-     */
-    children: UIModelMetadata[] | KeyValue[];
-    /**
-     * @description Number of columns or array of column definitions for the grid layout.
-     * @summary Defines the column structure of the grid. When a number is provided, it creates
-     * that many equal-width columns. When an array is provided, each element can define specific
-     * column properties or sizing. This allows for flexible grid layouts that can adapt to
-     * different content requirements.
-     *
-     * @type {(number | string[])}
-     * @default 1
-     */
-    cols: number | string[];
-    /**
-     * @description Number of rows or array of row definitions for the grid layout.
-     * @summary Defines the row structure of the grid. When a number is provided, it creates
-     * that many equal-height rows. When an array is provided, each element can define specific
-     * row properties or sizing. This provides control over vertical spacing and content organization.
-     *
-     * @type {(number | string[])}
-     * @default 1
-     */
-    rows: number | KeyValue[] | string[];
-    ngOnInit(model?: Model | string): Promise<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxParentComponentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxParentComponentDirective, never, never, { "parentComponent": { "alias": "parentComponent"; "required": false; }; "children": { "alias": "children"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-declare abstract class NgxFormDirective extends NgxParentComponentDirective implements OnInit, IFormElement, OnDestroy, IRenderedModel {
-    crudFieldComponent: string;
-    /**
-     * @description Reactive form group associated with this fieldset.
-     * @summary The FormGroup instance that contains all form controls within this fieldset.
-     * Used for form validation, value management, and integration with Angular's reactive forms.
+     * This can affect the virtual keyboard layout on mobile devices.
      *
-     * @type {FormGroup}
+     * @type {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
+     * @default 'none'
+     * @memberOf CrudFieldComponent
      */
-    parentFormId: string;
+    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
     /**
-     * @description Reference to the reactive form DOM element.
-     * @summary ViewChild reference that provides direct access to the form's DOM element.
-     * This enables programmatic manipulation of the form element and access to native
-     * HTML form properties and methods when needed.
+     * @description Autocomplete behavior for the field.
+     * @summary Specifies whether and how the browser should automatically complete the input.
+     * This can improve user experience by suggesting previously entered values.
      *
-     * @type {ElementRef}
+     * @type {AutocompleteTypes}
+     * @default 'off'
+     * @memberOf CrudFieldComponent
      */
-    component: ElementRef;
+    autocomplete: AutocompleteTypes;
     /**
-     * @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 Fill style for the field.
+     * @summary Determines the fill style of the field, such as 'outline' or 'solid'.
+     * This affects the border and background of the field.
      *
-     * @type {FieldUpdateMode}
-     * @default 'change'
+     * @type {'outline' | 'solid'}
+     * @default 'outline'
+     * @memberOf CrudFieldComponent
      */
-    updateOn: FieldUpdateMode;
+    fill: 'outline' | 'solid';
     /**
-     * @description Form submission target specification.
-     * @summary Specifies where to display the response after form submission, similar
-     * to the HTML form target attribute. Options include '_self', '_blank', '_parent',
-     * '_top', or a named frame. Controls the browser behavior for form responses.
+     * @description Placement of the label relative to the field.
+     * @summary Specifies where the label should be placed relative to the field.
+     * Options include 'start', 'end', 'floating', 'stacked', and 'fixed'.
      *
-     * @type {HTMLFormTarget}
-     * @default '_self'
+     * @type {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
+     * @default 'floating'
+     * @memberOf CrudFieldComponent
      */
-    target: HTMLFormTarget;
+    labelPlacement: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
     /**
-     * @description HTTP method or submission strategy for the form.
-     * @summary Defines how the form should be submitted. 'get' and 'post' correspond
-     * to standard HTTP methods for traditional form submission, while 'event' uses
-     * Angular event-driven submission for single-page application workflows.
+     * @description Update mode for the field.
+     * @summary Determines when the field value should be updated in the form model.
+     * Options include 'change', 'blur', and 'submit'.
      *
-     * @type {'get' | 'post' | 'event'}
-     * @default 'event'
+     * @type {FieldUpdateMode}
+     * @default 'change'
+     * @memberOf CrudFieldComponent
      */
-    method: 'get' | 'post' | 'event';
+    updateOn: FieldUpdateMode;
     /**
-     * @description Configuration options for the CRUD form behavior.
-     * @summary Contains various configuration settings that control form rendering,
-     * validation, and behavior. These options are merged with default settings
-     * during component initialization to customize the form's functionality.
+     * @description Reference to the field component.
+     * @summary Provides a reference to the field component element, allowing direct access to its properties and methods.
      *
-     * @type {ICrudFormOptions}
+     * @type {ElementRef}
+     * @memberOf CrudFieldComponent
      */
-    options: ICrudFormOptions;
+    component: ElementRef;
     /**
-     * @description Optional action identifier for form submission context.
-     * @summary Specifies a custom action name that will be included in the submit event.
-     * If not provided, defaults to the standard submit event constant. Used to
-     * distinguish between different types of form submissions within the same component.
+     * @description Parent form group.
+     * @summary References the parent form group to which this field belongs.
+     * This is necessary for integrating the field with Angular's reactive forms.
      *
-     * @type {string | undefined}
+     * @type {FormGroup}
+     * @memberOf CrudFieldComponent
      */
-    action?: string;
+    formGroup: FormGroup | undefined;
     /**
-     * @description The current CRUD operation being performed.
-     * @summary Specifies the type of operation this form is handling (CREATE, READ, UPDATE, DELETE).
-     * This is a required input that determines form behavior, validation rules, and available actions.
-     * The operation affects form state, button visibility, and submission logic.
+     * @description Angular FormControl instance for this field.
+     * @summary The specific FormControl instance that manages this field's state, validation,
+     * and value. This provides direct access to Angular's reactive forms functionality
+     * for this individual field within the broader form structure.
      *
-     * @type {CrudOperations}
-     * @required
+     * @type {FormControl}
+     * @memberOf CrudFieldComponent
      */
-    operation: CrudOperations;
+    formControl: FormControl;
     /**
-     * @description Custom event handlers for form actions.
-     * @summary A record of event handler functions keyed by event names that can be
-     * triggered during form operations. These handlers provide extensibility for
-     * custom business logic and can be invoked for various form events and actions.
+     * @description Indicates if this field supports multiple values.
+     * @summary When true, this field can handle multiple values, typically used in
+     * multi-select scenarios or when the field is part of a form array structure
+     * that allows multiple entries of the same field type.
      *
-     * @type {HandlerLike}
+     * @type {boolean}
+     * @default false
+     * @memberOf CrudFieldComponent
      */
-    handlers: HandlerLike;
+    multiple: boolean;
     /**
-     * @description Angular reactive FormGroup for form state management.
-     * @summary The FormGroup instance that manages all form controls, validation,
-     * and form state. This is the main interface for accessing form values and
-     * controlling form behavior. May be undefined for read-only operations.
+     * @description 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 {FormGroup | undefined}
+     * @type {string | number}
      */
-    formGroup: FormParent | undefined;
+    uid: string;
+    page: number;
     /**
-     * @description Unique identifier for the form renderer.
-     * @summary A unique string identifier used to register and manage this form
-     * instance within the NgxDecafFormService. This ID is also used as the HTML id
-     * attribute for the form element, enabling DOM queries and form management.
+     * @description Translatability of field labels.
+     * @summary Indicates whether the field labels should be translated based on the current language settings.
+     * This is useful for applications supporting multiple languages.
      *
-     * @type {string}
+     * @type {StringOrBoolean}
+     * @default true
+     * @memberOf CrudFieldComponent
      */
-    rendererId: string;
-    /**
-   * @description Event emitter for form submission events.
-   * @summary Emits ICrudFormEvent objects when the form is submitted, providing
-   * form data, component information, and any associated handlers to parent
-   * components. This enables decoupled handling of form submission logic.
-   *
-   * @type {EventEmitter<ICrudFormEvent>}
-   */
-    submitEvent: EventEmitter<ICrudFormEvent>;
+    translatable: StringOrBoolean;
     /**
-     * @description Unique identifier for the current record instance.
-     * @summary This property holds a unique string value that identifies the specific record being managed by the form.
-     * It is automatically generated if not provided, ensuring each form instance has a distinct identifier.
-     * The uid is used for tracking, referencing, and emitting events related to the current record, and may be used
-     * in conjunction with the primary key for CRUD operations.
+     * @description Component initialization lifecycle method.
+     * @summary Initializes the field component based on the operation type and field configuration.
+     * For READ and DELETE operations, removes the form group to make fields read-only.
+     * For other operations, sets up icons, configures multi-value support if needed,
+     * and sets default values for radio buttons if no value is provided.
      *
-     * @type {string}
-     * @default Randomly generated 12-character string
+     * @returns {void}
+     * @memberOf CrudFieldComponent
      */
-    allowClear: boolean;
-    protected activeFormGroupIndex: number;
-    get activeFormGroup(): FormParent;
+    ngOnInit(): Promise<void>;
     /**
-    * @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 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 {Promise<void>}
+    * @returns {CrudFieldOption[]} The array of parsed and localized options.
+    * @memberOf CrudFieldComponent
     */
-    ngOnInit(model?: Model | string): Promise<void>;
+    getOptions(): Promise<CrudFieldOption[]>;
+    /**
+     * @description Component after view initialization lifecycle method.
+     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
+     * This ensures proper initialization of read-only fields that don't require
+     * form functionality but still need view setup.
+     *
+     * @returns {void}
+     * @memberOf CrudFieldComponent
+     */
+    ngAfterViewInit(): void;
     /**
      * @description Component cleanup lifecycle method.
-     * @summary Performs cleanup operations when the component is destroyed.
-     * Unregisters the FormGroup from the NgxDecafFormService to prevent memory leaks
-     * and ensure proper resource cleanup.
+     * @summary Performs cleanup operations for READ and DELETE operations by calling
+     * the parent onDestroy method. This ensures proper resource cleanup for
+     * read-only field components.
      *
      * @returns {void}
+     * @memberOf CrudFieldComponent
      */
     ngOnDestroy(): void;
-    getFormArrayIndex(index: number): FormParent | undefined;
+    toggleOptionSelection(val: string, event: CheckboxCustomEvent): void;
+    isOptionChecked(value: string): boolean;
     /**
-     * @description Handles form reset or navigation back functionality.
-     * @summary Provides different reset behavior based on the current operation.
-     * For CREATE and UPDATE operations, resets the form to its initial state.
-     * For READ and DELETE operations, navigates back in the browser history
-     * since these operations don't have modifiable form data to reset.
+     * @description Handles fieldset group update events from parent fieldsets.
+     * @summary Processes events triggered when an existing group needs to be updated.
+     * Updates the active form group index and refreshes the form group and form control
+     * references to point to the group being edited.
      *
+     * @param {CustomEvent} event - The fieldset update group event containing update details
      * @returns {void}
+     * @memberOf CrudFieldComponent
      */
-    handleReset(): void;
-    handleSubmit(event?: SubmitEvent, eventName?: string, componentName?: string): Promise<boolean | void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFormDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxFormDirective, never, never, { "parentFormId": { "alias": "parentFormId"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "target": { "alias": "target"; "required": false; }; "method": { "alias": "method"; "required": false; }; "options": { "alias": "options"; "required": false; }; "action": { "alias": "action"; "required": false; }; "operation": { "alias": "operation"; "required": true; }; "handlers": { "alias": "handlers"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "rendererId": { "alias": "rendererId"; "required": false; }; "allowClear": { "alias": "allowClear"; "required": false; }; }, { "submitEvent": "submitEvent"; }, never, never, true, never>;
+    handleFieldsetUpdateGroupEvent(event: CustomEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CrudFieldComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CrudFieldComponent, "ngx-decaf-crud-field", never, { "operation": { "alias": "operation"; "required": true; }; "name": { "alias": "name"; "required": true; }; "className": { "alias": "className"; "required": false; }; "path": { "alias": "path"; "required": true; }; "childOf": { "alias": "childOf"; "required": false; }; "type": { "alias": "type"; "required": true; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": true; }; "placeholder": { "alias": "placeholder"; "required": false; }; "format": { "alias": "format"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "max": { "alias": "max"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "min": { "alias": "min"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "step": { "alias": "step"; "required": false; }; "equals": { "alias": "equals"; "required": false; }; "different": { "alias": "different"; "required": false; }; "lessThan": { "alias": "lessThan"; "required": false; }; "lessThanOrEqual": { "alias": "lessThanOrEqual"; "required": false; }; "greaterThan": { "alias": "greaterThan"; "required": false; }; "greaterThanOrEqual": { "alias": "greaterThanOrEqual"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "cancelText": { "alias": "cancelText"; "required": false; }; "interface": { "alias": "interface"; "required": false; }; "options": { "alias": "options"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fill": { "alias": "fill"; "required": false; }; "labelPlacement": { "alias": "labelPlacement"; "required": false; }; "updateOn": { "alias": "updateOn"; "required": false; }; "formGroup": { "alias": "formGroup"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "uid": { "alias": "uid"; "required": false; }; "page": { "alias": "page"; "required": false; }; "translatable": { "alias": "translatable"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class CrudFormComponent extends NgxFormDirective {
@@ -3867,7 +4044,7 @@ declare class CrudFormComponent extends NgxFormDirective {
     /**
      * @description Handles form submission with validation and event emission.
      * @summary Processes form submission by first preventing default browser behavior,
-     * then validating all form fields using NgxDecafFormService. If validation passes,
+     * then validating all form fields using NgxFormService. If validation passes,
      * extracts form data and emits a submitEvent with the data, component information,
      * and any associated handlers. Returns false if validation fails.
      *
@@ -3936,7 +4113,7 @@ declare class CrudFormComponent extends NgxFormDirective {
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class EmptyStateComponent extends NgxDecafComponentDirective implements OnInit {
+declare class EmptyStateComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The main title displayed in the empty state.
      * @summary Specifies the primary message to show in the empty state component.
@@ -4694,7 +4871,7 @@ declare class FieldsetComponent extends NgxFormDirective implements OnInit, Afte
  *
  * @memberOf ForAngularCommonModule
  */
-declare class FilterComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
+declare class FilterComponent extends NgxComponentDirective implements OnInit, OnDestroy {
     /**
      * @description Reference to the dropdown options container element.
      * @summary ViewChild reference used to access and manipulate the dropdown options element
@@ -5360,7 +5537,7 @@ declare class LayoutComponent extends NgxParentComponentDirective implements OnI
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class ListComponent extends NgxDecafComponentDirective implements OnInit, OnDestroy {
+declare class ListComponent extends NgxComponentDirective implements OnInit, OnDestroy {
     /**
      * @description The display mode for the list component.
      * @summary Determines how the list data is loaded and displayed. Options include:
@@ -6160,7 +6337,7 @@ declare class ListComponent extends NgxDecafComponentDirective implements OnInit
  *   C->>C: Process action
  *   C->>V: Update view or navigate
  */
-declare class ListItemComponent extends NgxDecafComponentDirective implements OnInit {
+declare class ListItemComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description Reference to the action menu popover component.
      * @summary ViewChild reference that provides access to the HTMLIonPopoverElement
@@ -6306,17 +6483,6 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      * @memberOf ListItemComponent
      */
     actionMenuOpen: boolean;
-    /**
-     * @description Angular NavController service for handling navigation.
-     * @summary Injected service that provides methods for programmatic navigation
-     * within the Ionic application. Used for navigating to different routes when
-     * list item actions are performed or when the item itself is clicked.
-     *
-     * @private
-     * @type {NavController}
-     * @memberOf ListItemComponent
-     */
-    private navController;
     /**
      * @description Creates an instance of ListItemComponent.
      * @summary Initializes a new ListItemComponent by calling the parent class constructor
@@ -6371,7 +6537,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      *   participant U as User
      *   participant L as ListItemComponent
      *   participant P as Parent Component
-     *   participant N as NavController
+     *   participant N as Router
      *   participant E as Event System
      *
      *   U->>L: Perform action (click/swipe)
@@ -6451,7 +6617,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
     /**
      * @description Navigates to a new route based on the specified action and item ID.
      * @summary This method constructs a navigation URL using the component's route configuration,
-     * the specified action, and an item identifier. It uses Ionic's NavController to perform
+     * the specified action, and an item identifier. It uses Ionic's Router to perform
      * forward navigation with appropriate animations. This method is typically used for
      * CRUD operations where each action (create, read, update, delete) has its own route.
      *
@@ -6462,7 +6628,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
      * @mermaid
      * sequenceDiagram
      *   participant L as ListItemComponent
-     *   participant N as NavController
+     *   participant N as Router
      *   participant R as Router
      *
      *   L->>L: redirect(action, id)
@@ -6545,7 +6711,7 @@ declare class ListItemComponent extends NgxDecafComponentDirective implements On
  *   ModelRenderer->>ModelRenderer: Subscribe to events
  *   ModelRenderer-->>App: Emit events
  */
-declare class ModelRendererComponent<M extends Model> extends NgxDecafComponentDirective implements OnChanges, OnDestroy, IRenderedModel {
+declare class ModelRendererComponent<M extends Model> extends NgxComponentDirective implements OnChanges, OnDestroy, IRenderedModel {
     /**
      * @description Global variables to be passed to the rendered component
      */
@@ -6652,7 +6818,7 @@ declare class ModelRendererComponent<M extends Model> extends NgxDecafComponentD
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-declare class PaginationComponent extends NgxDecafComponentDirective implements OnInit {
+declare class PaginationComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The total number of pages to display in the pagination component.
      * @summary Specifies the total number of pages available for navigation. This is a required
@@ -6884,7 +7050,7 @@ declare class PaginationComponent extends NgxDecafComponentDirective implements
  * @implements {OnInit}
  * @memberOf SearchbarComponent
  */
-declare class SearchbarComponent extends NgxDecafComponentDirective implements OnInit {
+declare class SearchbarComponent extends NgxComponentDirective implements OnInit {
     /**
      * @description The mode of the searchbar.
      * @summary Determines the visual style of the searchbar, either iOS or Material Design.
@@ -7965,39 +8131,152 @@ declare function provideI18n(config?: RootTranslateServiceConfig, resources?: I1
 } | i0.EnvironmentProviders | i0.Provider[])[];
 
 /**
- * @module module:lib/for-angular-common.module
+ * @module lib/for-angular-common.module
  * @description Core Angular module and providers for Decaf's for-angular package.
  * @summary Provides the shared Angular module, injection tokens and helper functions used
  * by the for-angular integration. This module wires up common imports (forms, translation)
  * and exposes helper providers such as DB adapter registration and logger utilities.
- *
  * @link {@link ForAngularCommonModule}
  */
 
-/** */
 declare const DB_ADAPTER_PROVIDER = "DB_ADAPTER_PROVIDER";
+/**
+ * @description Injection token for registering the database adapter provider.
+ * @summary Used to inject the database adapter instance that implements DecafRepositoryAdapter.
+ * This token allows the framework to locate and use the application's specific database implementation.
+ * @const {InjectionToken<DecafRepositoryAdapter>}
+ * @memberOf module:lib/for-angular-common.module
+ */
 declare const DB_ADAPTER_PROVIDER_TOKEN: InjectionToken<DecafRepositoryAdapter>;
+/**
+ * @description Injection token for the root path of locale translation files.
+ * @summary Used to configure the base path where i18n translation files are located.
+ * This allows the translation loader to locate JSON files for different languages.
+ * @const {InjectionToken<string>}
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Typical usage when providing the token
+ * { provide: LOCALE_ROOT_TOKEN, useValue: './assets/i18n/' }
+ */
 declare const LOCALE_ROOT_TOKEN: InjectionToken<string>;
+/**
+ * @description Generic injection token for providing arbitrary values to constructors.
+ * @summary Used to inject classes, strings, or any other value into component or service constructors.
+ * This is a flexible token that can be used to provide any type of dependency when more specific
+ * tokens are not appropriate. The actual type and purpose of the injected value is determined by
+ * the provider configuration.
+ * @const {InjectionToken<unknown>}
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Inject a string value
+ * { provide: CPTKN, useValue: 'some-config-value' }
+ *
+ * // Inject a class
+ * { provide: CPTKN, useClass: MyService }
+ *
+ * // Inject any arbitrary value
+ * { provide: CPTKN, useValue: { key: 'value', data: [1, 2, 3] } }
+ */
 declare const CPTKN: InjectionToken<unknown>;
+/**
+ * @description Injection token for i18n resource configuration.
+ * @summary Used to provide configuration for internationalization resources, including
+ * translation file locations and supported languages. This token configures how the
+ * application loads and manages translation resources.
+ * @const {InjectionToken<{resources: I18nResourceConfig[]; versionedSuffix: boolean}>}
+ * @memberOf module:lib/for-angular-common.module
+ */
 declare const I18N_CONFIG_TOKEN: InjectionToken<{
     resources: I18nResourceConfig[];
     versionedSuffix: boolean;
 }>;
+/**
+ * @description Provides an array of component types for dynamic rendering.
+ * @summary Helper function to package component constructors for registration with the
+ * rendering engine. This function accepts component classes and returns them as an array
+ * suitable for use with the CPTKN injection token.
+ * @param {...Constructor<unknown>[]} components - Component constructor classes to register
+ * @return {Constructor<unknown>[]} Array of component constructors
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register multiple custom components
+ * providers: [
+ *   { provide: CPTKN, useValue: provideDynamicComponents(MyComponent, AnotherComponent) }
+ * ]
+ */
+declare function provideDynamicComponents(...components: Constructor<unknown>[]): Constructor<unknown>[];
+/**
+ * @description Retrieves the repository instance for a given model.
+ * @summary Creates or retrieves a DecafRepository instance for the specified model. This function
+ * resolves the model by name or class, locates the registered database adapter, and returns
+ * a fully initialized repository instance for performing CRUD operations.
+ * @param {Model | string} model - The model class or model name string
+ * @return {DecafRepository<Model>} Repository instance for the model
+ * @throws {InternalError} If model is not found or not registered with @model decorator
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get repository by model class
+ * const userRepo = getModelRepository(User);
+ *
+ * // Get repository by model name
+ * const productRepo = getModelRepository('Product');
+ *
+ * // Use repository for queries
+ * const users = await userRepo.findAll();
+ */
 declare function getModelRepository(model: Model | string): DecafRepository<Model>;
+/**
+ * @description Provides a database adapter for dependency injection.
+ * @summary Creates an Angular provider that registers a database adapter instance. This function
+ * instantiates the adapter class, registers its flavour globally, and returns a provider object
+ * for use in Angular's dependency injection system.
+ * @template DbAdapter - The database adapter class type extending {flavour: string}
+ * @param {Constructor<DbAdapter>} adapterClass - Database adapter constructor class
+ * @param {KeyValue} [options={}] - Configuration options passed to adapter constructor
+ * @param {string} [flavour] - Optional flavour override; uses adapter.flavour if not provided
+ * @return {Provider} Angular provider object for DB_ADAPTER_PROVIDER_TOKEN
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Register a SQLite adapter
+ * providers: [
+ *   provideDbAdapter(SqliteAdapter, { database: 'myapp.db' }, 'sqlite')
+ * ]
+ *
+ * // Register with default flavour from adapter
+ * providers: [
+ *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
+ * ]
+ */
 declare function provideDbAdapter<DbAdapter extends {
     flavour: string;
 }>(adapterClass: Constructor<DbAdapter>, options?: KeyValue, flavour?: string): Provider;
+/**
+ * @description Retrieves a logger instance for the given context.
+ * @summary Creates or retrieves a namespaced logger instance using the Decaf logging system.
+ * The logger is automatically namespaced under "for-angular" and can be further scoped
+ * to a specific instance, function, or string identifier.
+ * @param {string | FunctionLike | unknown} instance - The instance, function, or string to scope the logger to
+ * @return {Logger} Logger instance for the specified context
+ * @memberOf module:lib/for-angular-common.module
+ * @example
+ * // Get logger for a class
+ * const logger = getLogger(MyComponent);
+ * logger.info('Component initialized');
+ *
+ * // Get logger with string identifier
+ * const serviceLogger = getLogger('UserService');
+ * serviceLogger.error('Operation failed', error);
+ */
 declare function getLogger(instance: string | FunctionLike | unknown): Logger;
 /**
- * @description Main Angular module for the Decaf framework
+ * @description Main Angular module for the Decaf framework.
  * @summary The ForAngularCommonModule provides the core functionality for integrating Decaf with Angular applications.
  * It imports and exports common Angular and Ionic components and modules needed for Decaf applications,
  * including form handling, translation support, and Ionic UI components. This module can be imported
  * directly or via the forRoot() method for proper initialization in the application's root module.
- *
  * @class ForAngularCommonModule
+ * @memberOf module:lib/for-angular-common.module
  * @example
- * ```typescript
  * // In your app module:
  * @NgModule({
  *   imports: [
@@ -8007,17 +8286,24 @@ declare function getLogger(instance: string | FunctionLike | unknown): Logger;
  *   // ...
  * })
  * export class AppModule {}
- * ```
  */
 declare class ForAngularCommonModule {
     /**
-     * @description Creates a module with providers for root module import
+     * @description Creates a module with providers for root module import.
      * @summary This static method provides the proper way to import the ForAngularCommonModule in the application's
      * root module. It returns a ModuleWithProviders object that includes the ForAngularCommonModule itself.
      * Using forRoot() ensures that the module and its providers are properly initialized and only
      * instantiated once in the application.
-     *
      * @return {ModuleWithProviders<ForAngularCommonModule>} The module with its providers
+     * @memberOf ForAngularCommonModule
+     * @static
+     * @example
+     * // Import in root module
+     * @NgModule({
+     *   imports: [ForAngularCommonModule.forRoot()],
+     *   // ...
+     * })
+     * export class AppModule {}
      */
     static forRoot(): ModuleWithProviders<ForAngularCommonModule>;
     static ɵfac: i0.ɵɵFactoryDeclaration<ForAngularCommonModule, never>;
@@ -8025,5 +8311,5 @@ declare class ForAngularCommonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<ForAngularCommonModule>;
 }
 
-export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, DefaultListEmptyOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, 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, IListEmptyOptions, IMenuItem, IPaginationCustomEvent, IRenderedModel, ISortObject, InputOption, KeyValue, ListItemCustomEvent, PossibleInputTypes, RadioOption, RawQuery, SelectOption, StringOrBoolean };
+export { AngularEngineKeys, BaseComponentProps, CPTKN, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, DefaultListEmptyOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaDirective, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export type { AngularDynamicOutput, AngularFieldDefinition, CheckboxOption, ComponentMetadata, CrudFieldOption, DecafRepository, DecafRepositoryAdapter, ElementPositions, ElementSizes, FieldUpdateMode, FlexPositions, FormParent, FormParentGroup, FormServiceControl, FormServiceControls, FunctionLike, HTMLFormTarget, HandlerLike, I18nResourceConfig, I18nResourceConfigType, IBaseCustomEvent, IComponentConfig, IComponentHolder, IComponentInput, ICrudFormEvent, ICrudFormOptions, IFieldSetItem, IFieldSetValidationEvent, IFilterQuery, IFilterQueryItem, IFormElement, IFormReactiveSubmitEvent, IListComponentRefreshEvent, IListEmptyOptions, IMenuItem, IModelPageCustomEvent, IPaginationCustomEvent, IRenderedModel, ISortObject, IWindowResizeEvent, InputOption, KeyValue, ListItemCustomEvent, PossibleInputTypes, RadioOption, RawQuery, SelectOption, StringOrBoolean, WindowColorScheme };