@decaf-ts/for-angular 0.0.37 → 0.0.38

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

@@ -1,9 +1,9 @@
 import { UIKeys, HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, NgModule, isDevMode, reflectComponentType, inject, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, ViewEncapsulation, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, Injector } from '@angular/core';
+import { InjectionToken, NgModule, isDevMode, reflectComponentType, inject, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, NgZone, EnvironmentInjector, ViewContainerRef, TemplateRef, ViewEncapsulation, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, Injector } from '@angular/core';
 import { CommonModule, Location, NgComponentOutlet } from '@angular/common';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf, ReservedModels } from '@decaf-ts/decorator-validation';
-import { InternalError, OperationKeys } from '@decaf-ts/db-decorators';
+import { InternalError, OperationKeys, NotFoundError } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule, FormArray, AbstractControl, Validators } from '@angular/forms';
 import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
@@ -12,16 +12,16 @@ import { Logging, LoggedClass } from '@decaf-ts/logging';
 import { uses, Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { apply, metadata } from '@decaf-ts/reflection';
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
-import { forkJoin, firstValueFrom, fromEvent, debounceTime, Subject, timer } from 'rxjs';
+import { forkJoin, firstValueFrom, Subject, BehaviorSubject, fromEvent, Observable, debounceTime, timer } from 'rxjs';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
-import { map } from 'rxjs/operators';
-import { MenuController, NavController } from '@ionic/angular';
+import { map, takeUntil } from 'rxjs/operators';
+import { MenuController } from '@ionic/angular';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { __decorate, __metadata } from 'tslib';
 import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonButton, IonIcon, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonContent, IonPopover } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
-import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
+import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
 
 /**
  * @description Angular engine key constants.
@@ -405,21 +405,98 @@ class ValidatorFactory {
 }
 
 /**
- * @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}
  */
-/** */
 const DB_ADAPTER_PROVIDER = 'DB_ADAPTER_PROVIDER';
-const DB_ADAPTER_PROVIDER_TOKEN = new InjectionToken(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
+ */
+const DB_ADAPTER_PROVIDER_TOKEN = new InjectionToken('DB_ADAPTER_PROVIDER_TOKEN');
+/**
+ * @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/' }
+ */
 const LOCALE_ROOT_TOKEN = new InjectionToken('LOCALE_ROOT_TOKEN');
-/* Generic token for injecting on class constuctors */
+/* Generic token for injecting on class constructors */
+/**
+ * @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] } }
+ */
 const CPTKN = new InjectionToken('CPTKN', { providedIn: 'root', factory: () => '' });
+/**
+ * @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
+ */
 const I18N_CONFIG_TOKEN = new InjectionToken('I18N_CONFIG_TOKEN');
+/**
+ * @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) }
+ * ]
+ */
+function provideDynamicComponents(...components) {
+    return components;
+}
+/**
+ * @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();
+ */
 function getModelRepository(model) {
     try {
         const modelName = (typeof model === Primitives.STRING ? model : model.constructor.name);
@@ -437,8 +514,28 @@ function getModelRepository(model) {
         throw new InternalError(error?.message || error);
     }
 }
-// export function provideRenderEngine(): Provider[] {
-// }
+/**
+ * @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 })
+ * ]
+ */
 function provideDbAdapter(adapterClass, options = {}, flavour) {
     const adapter = new adapterClass(options);
     if (flavour)
@@ -451,27 +548,49 @@ function provideDbAdapter(adapterClass, options = {}, flavour) {
         useValue: adapter,
     };
 }
-const ComponentsAndModules = [
+/**
+ * @const {Logger}
+ * @private
+ * @description Base logger instance for the for-angular module.
+ * @memberOf module:lib/for-angular-common.module
+ */
+const log = Logging.for("for-angular");
+/**
+ * @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);
+ */
+function getLogger(instance) {
+    return log.for(instance);
+}
+const CommonModules = [
     CommonModule,
     FormsModule,
     ReactiveFormsModule,
     TranslateModule,
     TranslatePipe
 ];
-const log = Logging.for("for-angular");
-function getLogger(instance) {
-    return log.for(instance);
-}
 /**
- * @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: [
@@ -481,17 +600,24 @@ function getLogger(instance) {
  *   // ...
  * })
  * export class AppModule {}
- * ```
  */
 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() {
         return {
@@ -508,9 +634,7 @@ class ForAngularCommonModule {
             ReactiveFormsModule,
             TranslateModule,
             TranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForAngularCommonModule, providers: [
-            { provide: CPTKN, useValue: '' },
-        ], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -522,13 +646,11 @@ class ForAngularCommonModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ForAngularCommonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: ComponentsAndModules,
+                    imports: CommonModules,
                     declarations: [],
-                    exports: ComponentsAndModules,
+                    exports: CommonModules,
                     schemas: [],
-                    providers: [
-                        { provide: CPTKN, useValue: '' },
-                    ],
+                    providers: [],
                 }]
         }] });
 
@@ -1037,15 +1159,15 @@ async function isDarkMode() {
  */
 
 /**
- * @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.
@@ -1057,17 +1179,17 @@ async function isDarkMode() {
  *   { 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()
@@ -1080,7 +1202,7 @@ async function isDarkMode() {
  *   NFS->>AF: Get control values
  *   NFS-->>C: Return form data
  */
-class NgxDecafFormService {
+class NgxFormService {
     /**
      * @description WeakMap that stores control properties for form controls.
      * @summary A WeakMap that associates AbstractControl instances with their corresponding FieldProperties.
@@ -1112,7 +1234,7 @@ 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)
@@ -1191,7 +1313,7 @@ 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
@@ -1419,8 +1541,8 @@ class NgxDecafFormService {
         const fullPath = childOf ? isMultiple ? `${childOf}.${index}.${name}` : `${childOf}.${name}` : name;
         const [parentGroup, controlName] = this.resolveParentGroup(formGroup, fullPath, componentProps, parentProps);
         if (!parentGroup.get(controlName)) {
-            const control = NgxDecafFormService.fromProps(componentProps, componentProps.updateMode || 'change');
-            NgxDecafFormService.register(control, componentProps);
+            const control = NgxFormService.fromProps(componentProps, componentProps.updateMode || 'change');
+            NgxFormService.register(control, componentProps);
             if (parentGroup instanceof FormGroup) {
                 parentGroup.addControl(controlName, control);
             }
@@ -1452,7 +1574,7 @@ 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
@@ -1497,7 +1619,7 @@ 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({})
@@ -1533,7 +1655,7 @@ 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({})
@@ -1570,7 +1692,7 @@ 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)
@@ -1626,7 +1748,7 @@ 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)
@@ -1658,9 +1780,9 @@ class NgxDecafFormService {
         const data = {};
         for (const key in formGroup.controls) {
             const control = formGroup.controls[key];
-            const parentProps = NgxDecafFormService.getPropsFromControl(formGroup);
+            const parentProps = NgxFormService.getPropsFromControl(formGroup);
             if (!(control instanceof FormControl)) {
-                const value = NgxDecafFormService.getFormData(control);
+                const value = NgxFormService.getFormData(control);
                 const isValid = control.valid;
                 if (parentProps.multiple) {
                     if (isValid) {
@@ -1674,7 +1796,7 @@ class NgxDecafFormService {
                 data[key] = value;
                 continue;
             }
-            const props = NgxDecafFormService.getPropsFromControl(control);
+            const props = NgxFormService.getPropsFromControl(control);
             let value = control.value;
             if (!HTML5CheckTypes.includes(props['type'])) {
                 switch (props['type']) {
@@ -1695,7 +1817,7 @@ class NgxDecafFormService {
             }
             data[key] = value;
         }
-        NgxDecafFormService.enableAllGroupControls(formGroup);
+        NgxFormService.enableAllGroupControls(formGroup);
         return data;
     }
     /**
@@ -1711,7 +1833,7 @@ 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
@@ -1817,7 +1939,7 @@ 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?)
@@ -1877,7 +1999,7 @@ 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
@@ -1939,7 +2061,7 @@ class NgxDecafFormService {
     static reset(formGroup) {
         if (formGroup instanceof FormControl) {
             const control = formGroup;
-            const { type } = NgxDecafFormService.getPropsFromControl(control);
+            const { type } = NgxFormService.getPropsFromControl(control);
             if (!HTML5CheckTypes.includes(type))
                 control.setValue("");
             control.markAsPristine();
@@ -1950,7 +2072,7 @@ class NgxDecafFormService {
         else {
             for (const key in formGroup.controls) {
                 const control = formGroup.controls[key];
-                NgxDecafFormService.reset(control);
+                NgxFormService.reset(control);
                 continue;
             }
         }
@@ -2120,10 +2242,10 @@ class NgxRenderingEngine extends RenderingEngine {
             result.instance = NgxRenderingEngine._instance = componentInstance.instance;
         }
         if (fieldDef.children?.length) {
-            if (!NgxRenderingEngine._parentProps && inputs?.pages) {
-                NgxRenderingEngine._parentProps = { pages: inputs?.pages };
-                //  NgxRenderingEngine._projectable = false;
-            }
+            // if(!NgxRenderingEngine._parentProps && inputs?.pages) {
+            //     NgxRenderingEngine._parentProps = {pages: inputs?.pages};
+            //     //  NgxRenderingEngine._projectable = false;
+            // }
             result.children = fieldDef.children.map((child) => {
                 // const hiddenOn = (child?.props?.hidden || []) as CrudOperations[];
                 // moved to ui decorators
@@ -2135,7 +2257,7 @@ class NgxRenderingEngine extends RenderingEngine {
                 //   })
                 // }
                 // if(!hiddenOn?.length || !(hiddenOn as CrudOperations[]).includes(operation as CrudOperations))
-                NgxDecafFormService.addControlFromProps(registryFormId, child.props, { ...inputs, ...NgxRenderingEngine._parentProps || {} });
+                NgxFormService.addControlFromProps(registryFormId, child.props, { ...inputs, ...NgxRenderingEngine._parentProps || {} });
                 return this.fromFieldDefinition(child, vcr, injector, tpl, registryFormId, false, formGroup);
             });
         }
@@ -2191,7 +2313,7 @@ class NgxRenderingEngine extends RenderingEngine {
      */
     static async destroy(formId) {
         if (formId)
-            NgxDecafFormService.removeRegistry(formId);
+            NgxFormService.removeRegistry(formId);
         NgxRenderingEngine._instance = undefined;
         NgxRenderingEngine._parentProps = undefined;
     }
@@ -2235,7 +2357,7 @@ class NgxRenderingEngine extends RenderingEngine {
             if (!NgxRenderingEngine._operation)
                 NgxRenderingEngine._operation = props?.operation || undefined;
             const isArray = (props?.pages && props?.pages >= 1 || props?.multiple === true);
-            const formGroup = NgxDecafFormService.createForm(formId, isArray);
+            const formGroup = NgxFormService.createForm(formId, isArray);
             result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl, formId, true, formGroup);
             if (result.instance)
                 result.instance['formGroup'] = formGroup;
@@ -2451,6 +2573,24 @@ var errors = {
 	form_control: "Controlador do formulário não encontrado para {0}.",
 	not_found: "No records found with <span class=\"text-bold\">{0}: {1} in {2}</span>."
 };
+var operations = {
+	read: {
+		success: "Successfully read item with {0} {1}.",
+		error: "Error reading item with {0} {1}."
+	},
+	create: {
+		success: "Successfully created item with {0} {1}.",
+		error: "Error creating item with {0} {1}."
+	},
+	update: {
+		success: "Successfully updated item with {0} {1}.",
+		error: "Error updating item with {0} {1}."
+	},
+	"delete": {
+		success: "Successfully deleted item with {0} {1}.",
+		error: "Error deleting item with {0} {1}."
+	}
+};
 var component = {
 	fieldset: {
 		add: "Add another",
@@ -2512,6 +2652,7 @@ var component = {
 };
 var en = {
 	errors: errors,
+	operations: operations,
 	component: component
 };
 
@@ -2580,10 +2721,17 @@ class I18nLoader {
         const libKeys = libLanguage[lang] || libLanguage["en"] || {};
         const httpRequests$ = forkJoin(this.resources.map(config => this.http.get(`${config.prefix}${lang}${this.getSuffix(config.suffix)}`)));
         return httpRequests$.pipe(map(res => {
-            return {
-                ...libKeys,
-                ...res.reduce((acc, current) => ({ ...acc, ...current }), {})
-            };
+            const merged = res.reduce((acc, current) => {
+                for (const key in current) {
+                    acc[key] = {
+                        ...(libKeys[key] || {}),
+                        ...(acc[key] || {}),
+                        ...(current[key] || {})
+                    };
+                }
+                return acc;
+            }, {});
+            return merged;
         }));
     }
 }
@@ -2612,12 +2760,12 @@ function provideI18n(config = { fallbackLang: 'en', lang: 'en' }, resources = []
 }
 
 /**
- * @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}
  */
 try {
     new NgxRenderingEngine();
@@ -2633,21 +2781,21 @@ catch (e) {
  * 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
  */
-class NgxDecafComponentDirective extends LoggedClass {
+class NgxComponentDirective extends LoggedClass {
     /**
-     * @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
      */
     // eslint-disable-next-line @angular-eslint/prefer-inject
     constructor(componentName, localeRoot) {
@@ -2659,7 +2807,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.uid = generateRandomValue(16);
         /**
@@ -2669,7 +2817,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.mapper = {};
         /**
@@ -2679,7 +2827,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.operations = [OperationKeys.READ];
         /**
@@ -2701,7 +2849,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * establish the component's vertical placement within the grid structure.
          * @type {number}
          * @default 1
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.row = 1;
         /**
@@ -2711,7 +2859,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * establish the component's horizontal placement within the grid structure.
          * @type {number}
          * @default 1
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.col = 1;
         /**
@@ -2722,7 +2870,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.className = '';
         /**
@@ -2733,7 +2881,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * and layout features that require menu interaction.
          * @protected
          * @type {MenuController}
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.menuController = inject(MenuController);
         /**
@@ -2744,7 +2892,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.changeDetectorRef = inject(ChangeDetectorRef);
         /**
@@ -2754,7 +2902,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * including server-side rendering and web workers, without direct DOM access.
          * @protected
          * @type {Renderer2}
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.renderer = inject(Renderer2);
         /**
@@ -2764,7 +2912,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * on the current locale setting, enabling multilingual support throughout the application.
          * @protected
          * @type {TranslateService}
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.translateService = inject(TranslateService);
         /**
@@ -2774,7 +2922,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.listenEvent = new EventEmitter();
         /**
@@ -2784,7 +2932,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * handles route parameters, and manages the browser's navigation history.
          * @protected
          * @type {Router}
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.router = inject(Router);
         /**
@@ -2796,7 +2944,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * 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
          */
         this.item = { tag: '' };
         /**
@@ -2808,7 +2956,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * enabling customizable component behavior based on external configuration.
          * @type {Record<string, unknown>}
          * @default {}
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.props = {};
         /**
@@ -2818,7 +2966,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * certain operations that require initialization can be performed.
          * @type {boolean}
          * @default false
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.initialized = false;
         /**
@@ -2829,7 +2977,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * while maintaining encapsulation and preventing accidental modification.
          * @protected
          * @readonly
-         * @memberOf module:lib/engine/NgxDecafComponentDirective
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.OperationKeys = OperationKeys;
         /**
@@ -2842,7 +2990,7 @@ class NgxDecafComponentDirective extends LoggedClass {
          * @type {Location}
          */
         this.location = inject(Location);
-        this.componentName = componentName || "NgxDecafComponentDirective";
+        this.componentName = componentName || "NgxComponentDirective";
         this.localeRoot = localeRoot;
         if (!this.localeRoot && this.componentName)
             this.localeRoot = this.componentName;
@@ -2855,7 +3003,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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() {
         return this.getLocale();
@@ -2868,7 +3016,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      */
     get repository() {
         try {
@@ -2892,7 +3040,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * 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) {
         if (changes[BaseComponentProps.MODEL]) {
@@ -2914,14 +3062,13 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      */
-    translate(phrase, params) {
-        return new Promise((resolve) => {
-            if (typeof params === Primitives.STRING)
-                params = { "0": params };
-            return resolve(firstValueFrom(this.translateService.get(phrase, (params || {}))));
-        });
+    async translate(phrase, params) {
+        if (typeof params === Primitives.STRING)
+            params = { "0": params };
+        return await firstValueFrom(this.translateService.get(phrase, (params || {})));
+        ;
     }
     /**
      * @description Initializes the component asynchronously with custom logic.
@@ -2932,7 +3079,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async initialize(...args) {
@@ -2946,13 +3093,14 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      */
     getLocale(locale) {
         if (locale || !this.locale) {
             if (locale)
                 this.localeRoot = locale;
-            this.locale = getLocaleContext(this.localeRoot);
+            if (this.localeRoot)
+                this.locale = getLocaleContext(this.localeRoot);
         }
         return this.locale;
     }
@@ -2963,7 +3111,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * 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() {
         if (!this.route && this.model instanceof Model)
@@ -2979,7 +3127,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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(model) {
         if (!(model instanceof Model) && typeof model === Primitives.STRING)
@@ -2995,7 +3143,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * 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) {
         if (model instanceof Model) {
@@ -3031,7 +3179,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @mermaid
      * sequenceDiagram
      *   participant C as Component
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant P as Props Object
      *
      *   C->>D: parseProps(instance, skip)
@@ -3049,7 +3197,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      *     end
      *   end
      * @protected
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     parseProps(instance, skip = []) {
         Object.keys(instance).forEach((key) => {
@@ -3070,7 +3218,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      */
     trackItemFn(index, item) {
         return `${index}-${item}`;
@@ -3087,7 +3235,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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
      *
@@ -3107,7 +3255,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      *   else No handlers
      *     D->>P: listenEvent.emit(event)
      *   end
-     * @memberOf module:lib/engine/NgxDecafComponentDirective
+     * @memberOf module:lib/engine/NgxComponentDirective
      */
     async handleEvent(event) {
         let name = "";
@@ -3145,7 +3293,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @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)
@@ -3156,7 +3304,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      *     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) {
         if (!this.operations)
@@ -3176,7 +3324,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      * @mermaid
      * sequenceDiagram
      *   participant U as UI
-     *   participant D as NgxDecafComponentDirective
+     *   participant D as NgxComponentDirective
      *   participant R as Router
      *
      *   U->>D: Click operation button
@@ -3187,7 +3335,7 @@ class NgxDecafComponentDirective extends LoggedClass {
      *   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
      */
     async changeOperation(operation, id) {
         let page = `${this.route}/${operation}/`.replace('//', '/');
@@ -3197,10 +3345,10 @@ class NgxDecafComponentDirective extends LoggedClass {
             page = `${page}${this.modelId || id}`;
         return this.router.navigateByUrl(page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafComponentDirective, isStandalone: true, inputs: { name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxComponentDirective, isStandalone: true, inputs: { name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
             args: [{ host: { '[attr.id]': 'uid' } }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -3249,9 +3397,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
             }] } });
 
 /**
- * @module lib/engine/NgxDecafFormFieldDirective
+ * @module lib/engine/NgxFormFieldDirective
  * @description Base directive for CRUD form fields in Decaf Angular applications.
- * @summary Provides the NgxDecafFormFieldDirective abstract class that implements ControlValueAccessor
+ * @summary Provides the NgxFormFieldDirective abstract class that implements ControlValueAccessor
  * and FieldProperties to enable form field integration with Angular's reactive forms system.
  * This directive handles form control lifecycle, validation, multi-entry forms, and CRUD operations.
  */
@@ -3263,8 +3411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * 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
@@ -3278,16 +3426,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  *     multi: true
  *   }]
  * })
- * export class TextFieldComponent extends NgxDecafFormFieldDirective {
+ * export class TextFieldComponent extends NgxFormFieldDirective {
  *   constructor() {
  *     super();
  *   }
  * }
  * ```
  */
-class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
-    constructor() {
-        super("CrudFormField");
+class NgxFormFieldDirective extends NgxComponentDirective {
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(componentName = "ComponentCrudField") {
+        super(componentName);
         /**
          * @description Index of the currently active form group in a form array.
          * @summary When working with multiple form groups (form arrays), this indicates
@@ -3425,12 +3574,12 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
             case OperationKeys.CREATE:
             case OperationKeys.UPDATE:
                 try {
-                    parent = NgxDecafFormService.getParentEl(this.component.nativeElement, 'div');
+                    parent = NgxFormService.getParentEl(this.component.nativeElement, 'div');
                 }
                 catch (e) {
                     throw new RenderingError(`Unable to retrieve parent form element for the ${this.operation}: ${e instanceof Error ? e.message : e}`);
                 }
-                // NgxDecafFormService.register(parent.id, this.formGroup, this as AngularFieldDefinition);
+                // NgxFormService.register(parent.id, this.formGroup, this as AngularFieldDefinition);
                 return parent;
             default:
                 throw new InternalError(`Invalid operation: ${this.operation}`);
@@ -3468,7 +3617,7 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
      */
     onDestroy() {
         if (this.formGroup)
-            NgxDecafFormService.unregister(this.formGroup);
+            NgxFormService.unregister(this.formGroup);
     }
     /**
      * @description Sets the value of the form control.
@@ -3515,12 +3664,15 @@ class NgxDecafFormFieldDirective extends NgxDecafComponentDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafFormFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxDecafFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", operation: "operation", parentComponent: "parentComponent", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormFieldDirective, deps: [{ token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxFormFieldDirective, isStandalone: true, inputs: { activeFormGroupIndex: "activeFormGroupIndex", operation: "operation", parentComponent: "parentComponent", optionsMapper: "optionsMapper" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxDecafFormFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormFieldDirective, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { activeFormGroupIndex: [{
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CPTKN]
+                }] }], propDecorators: { activeFormGroupIndex: [{
                 type: Input
             }], operation: [{
                 type: Input,
@@ -3545,35 +3697,33 @@ class NgxEventHandler 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}
  */
 /**
  * @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
  */
-class NgxPageDirective extends NgxDecafComponentDirective {
+class NgxPageDirective extends NgxComponentDirective {
     /**
      * @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
      */
     // eslint-disable-next-line @angular-eslint/prefer-inject
-    constructor(localeRoot, hasMenu = true) {
+    constructor(localeRoot = "NgxPageDirective", hasMenu = true) {
         super(localeRoot);
-        this.localeRoot = localeRoot;
-        this.hasMenu = hasMenu;
         /**
          * @description Page title text for the current view.
          * @summary Stores the title text to be displayed for this page. This can be set dynamically
@@ -3606,6 +3756,19 @@ class NgxPageDirective extends NgxDecafComponentDirective {
          * @memberOf module:lib/engine/NgxPageDirective
          */
         this.titleService = inject(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
+         */
+        this.hasMenu = true;
+        this.hasMenu = hasMenu;
     }
     /**
      * @description Ionic lifecycle hook called when the page is about to enter view.
@@ -3663,1088 +3826,1367 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
                     args: [CPTKN]
                 }] }] });
 
-/**
- * @module engine
- * @description Angular rendering engine for Decaf applications
- * @summary The engine module provides core functionality for rendering Angular components
- * in Decaf applications. It includes constants, decorators, rendering engines, and utility types
- * that enable dynamic component creation, property mapping, and component lifecycle management.
- * Key exports include {@link NgxRenderingEngine}, {@link DynamicModule}, and various decorators
- * for component configuration.
- */
-
-/**
- * @description Dynamic component renderer for Decaf Angular applications.
- * @summary This component provides a flexible way to dynamically render Angular components
- * at runtime based on a tag name. It handles the creation, property binding, and event
- * subscription for dynamically loaded components. This is particularly useful for
- * building configurable UIs where components need to be determined at runtime.
- *
- * @component {ComponentRendererComponent}
- * @example
- * <ngx-decaf-component-renderer
- *   [tag]="tag"
- *   [globals]="globals"
- *   (listenEvent)="listenEvent($event)">
- * </ngx-decaf-component-renderer>
- *
- * @mermaid
- * classDiagram
- *   class ComponentRendererComponent {
- *     +ViewContainerRef vcr
- *     +string tag
- *     +Record~string, unknown~ globals
- *     +EnvironmentInjector injector
- *     +ComponentRef~unknown~ component
- *     +EventEmitter~IBaseCustomEvent~ listenEvent
- *     +ngOnInit()
- *     +ngOnDestroy()
- *     +ngOnChanges(changes)
- *     -createComponent(tag, globals)
- *     -subscribeEvents()
- *     -unsubscribeEvents()
- *   }
- *   ComponentRendererComponent --|> OnInit
- *   ComponentRendererComponent --|> OnChanges
- *   ComponentRendererComponent --|> OnDestroy
- *
- * @implements {OnInit}
- * @implements {OnChanges}
- * @implements {OnDestroy}
- */
-class ComponentRendererComponent {
-    /**
-     * @description Creates an instance of ComponentRendererComponent.
-     * @summary Initializes a new ComponentRendererComponent. This component doesn't require
-     * any dependencies to be injected in its constructor as it uses the inject function to
-     * obtain the EnvironmentInjector.
-     *
-     * @memberOf ComponentRendererComponent
-     */
+class NgxModelPageDirective extends NgxPageDirective {
     constructor() {
+        super(...arguments);
         /**
-         * @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 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 {Record<string, unknown>}
-         * @default {}
-         * @memberOf ComponentRendererComponent
+         * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+         * @default OperationKeys.READ
+         *  @memberOf ModelPage
          */
-        this.globals = {};
+        this.operation = OperationKeys.READ;
         /**
-         * @description Injector used for dependency injection in the dynamic component.
-         * @summary This injector is used when creating the dynamic component to provide it with
-         * access to the application's dependency injection system. It ensures that the dynamically
-         * created component can access the same services and dependencies as statically created
-         * components.
+         * @description 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 {EnvironmentInjector}
-         * @memberOf ComponentRendererComponent
-         */
-        this.injector = inject(EnvironmentInjector);
-        this.children = [];
-        this.projectable = true;
+         * @type {OperationKeys[]}
+         * @default [OperationKeys.CREATE, OperationKeys.READ]
+         * @memberOf ModelPage
+         */
+        this.allowedOperations = [OperationKeys.CREATE, OperationKeys.READ];
+        /**
+       * @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
+       */
+        this.modelData = undefined;
         /**
-         * @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 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
          */
-        this.listenEvent = new EventEmitter();
-        this.parent = undefined;
-        this.uid = generateRandomValue(12);
-        this.logger = getLogger(this);
+        this.errorMessage = undefined;
     }
+    // constructor(@Inject(CPTKN) hm: boolean = true, @Inject(CPTKN) protected toastController?: ToastController) {
+    //   super("NgxModelPageDirective");
+    // }
     /**
-     * @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 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.
      *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant C as ComponentRendererComponent
-     *   participant R as NgxRenderingEngine
+     * @return {DecafRepository<Model>} The repository instance for the current model
      *
-     *   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()
+     * @throws {InternalError} When the model is not found in the registry
+     */
+    get repository() {
+        if (!this._repository) {
+            const constructor = Model.get(this.modelName);
+            if (!constructor)
+                throw new InternalError('Cannot find model. was it registered with @model?');
+            this._repository = Repository.forModel(constructor);
+            if (!this.pk)
+                this.pk = this._repository.pk;
+            this.model = new constructor();
+        }
+        return this._repository;
+    }
+    /**
+     * @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.
+     */
+    async ionViewWillEnter() {
+        // await super.ionViewWillEnter();
+        if (this.modelId)
+            this.allowedOperations = this.allowedOperations.concat([OperationKeys.UPDATE, OperationKeys.DELETE]);
+        this.getLocale(this.modelName);
+        await this.refresh(this.modelId);
+        this.initialized = true;
+    }
+    /**
+     * @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.
      *
-     * @return {void}
-     * @memberOf ComponentRendererComponent
+     * @param {string} [uid] - The unique identifier of the model to load; defaults to modelId
      */
-    ngOnInit() {
-        if (!this.parent) {
-            this.createComponent(this.tag, this.globals);
+    async refresh(uid) {
+        if (!uid)
+            uid = this.modelId;
+        try {
+            this._repository = this.repository;
+            switch (this.operation) {
+                case OperationKeys.READ:
+                case OperationKeys.UPDATE:
+                case OperationKeys.DELETE:
+                    this.model = await this.handleGet(uid || this.modelId);
+                    break;
+            }
         }
-        else {
-            this.createParentComponent();
+        catch (error) {
+            if (error instanceof NotFoundError) {
+                this.errorMessage = error.message;
+            }
+            this.logger.error(error);
         }
     }
     /**
-     * @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 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.
      *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant C as ComponentRendererComponent
-     *   participant R as NgxRenderingEngine
+     * @param {IBaseCustomEvent} event - The event object containing event data and metadata
+     */
+    async handleEvent(event) {
+        const { name } = event;
+        switch (name) {
+            case EventConstants.SUBMIT:
+                await this.handleSubmit(event);
+                break;
+        }
+    }
+    /**
+     * @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.
      *
-     *   A->>C: ngOnDestroy()
-     *   alt component exists
-     *     C->>C: unsubscribeEvents()
-     *     C->>R: destroy()
-     *   end
+     * @param {IBaseCustomEvent} event - The submit event containing form data
+     * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
+     */
+    async handleSubmit(event) {
+        try {
+            const repo = this._repository;
+            const data = this.parseData(event.data);
+            const result = this.operation === OperationKeys.CREATE ?
+                await repo.create(data) : this.operation === OperationKeys.UPDATE ?
+                await repo.update(data) : repo.delete(data);
+            const message = await this.translate(`operations.${this.operation}.${result ? 'success' : 'error'}`, {
+                "0": this.pk,
+                "1": this.modelId || result[this.pk],
+            });
+            if (result) {
+                repo.refresh(this.modelName, this.operation, this.modelId);
+                this.location.back();
+            }
+            return {
+                ...event,
+                success: result ? true : false,
+                message
+            };
+        }
+        catch (error) {
+            this.logger.error(error);
+            return {
+                ...event,
+                success: false,
+                message: error instanceof Error ? error.message : error
+            };
+        }
+    }
+    /**
+     * @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.
      *
-     * @return {Promise<void>} A promise that resolves when cleanup is complete
-     * @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
      */
-    async ngOnDestroy() {
-        if (this.component) {
-            this.unsubscribeEvents();
-            NgxRenderingEngine.destroy();
+    async handleGet(uid) {
+        if (!uid) {
+            this.logger.info('No key passed to model page read operation, backing to last page');
+            this.location.back();
+            return undefined;
         }
+        const type = Reflect.getMetadata("design:type", this.model, this.repository.pk).name;
+        const result = await this._repository.read(([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase()) ? Number(uid) : uid));
+        return result ?? undefined;
     }
     /**
-     * @description Creates and renders a dynamic component.
-     * @summary This method handles the creation of a dynamic component based on the provided tag.
-     * It retrieves the component constructor from the rendering engine, processes its inputs,
-     * filters out unmapped properties, creates the component instance, and sets up event subscriptions.
-     *
-     * @param {string} tag - The tag name of the component to create
-     * @param {KeyValue} globals - Global properties to pass to the component
-     * @return {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as ComponentRendererComponent
-     *   participant R as NgxRenderingEngine
-     *   participant V as ViewContainerRef
-     *
-     *   C->>R: components(tag)
-     *   R-->>C: Return component constructor
-     *   C->>C: reflectComponentType(component)
-     *   C->>C: Process input properties
-     *   C->>C: Filter unmapped properties
-     *   C->>V: clear()
-     *   C->>R: createComponent(component, props, metadata, vcr, injector, [])
-     *   R-->>C: Return component reference
-     *   C->>C: subscribeEvents()
-     *
-     * @private
-     * @memberOf ComponentRendererComponent
-     */
-    createComponent(tag, globals = {}) {
-        const component = NgxRenderingEngine.components(tag)
-            ?.constructor;
-        const metadata = reflectComponentType(component);
-        const componentInputs = metadata.inputs;
-        const props = globals?.['item'] || globals?.['props'] || {};
-        if (props?.['tag'])
-            delete props['tag'];
-        if (props?.['children'] && !this.children.length)
-            this.children = props['children'];
-        props['children'] = this.children || [];
-        const inputKeys = Object.keys(props);
-        const unmappedKeys = [];
-        for (const input of inputKeys) {
-            if (!inputKeys.length)
-                break;
-            const prop = componentInputs.find((item) => item.propName === input);
-            if (!prop) {
-                delete props[input];
-                unmappedKeys.push(input);
-            }
-        }
-        const hasChildrenInput = Object.values(componentInputs).some(({ propName }) => propName === AngularEngineKeys.CHILDREN);
-        if (!this.projectable && hasChildrenInput)
-            props[AngularEngineKeys.CHILDREN] = this.children;
-        const hasRootForm = Object.values(componentInputs).some(({ propName }) => propName === BaseComponentProps.PARENT_COMPONENT);
-        if (hasRootForm && this.parentComponent)
-            props[BaseComponentProps.PARENT_COMPONENT] = this.parentComponent;
-        this.vcr.clear();
-        // const projectable = (this.children?.length && this.projectable);
-        // const template = projectable ? this.vcr.createEmbeddedView(this.inner as TemplateRef<unknown>, this.injector).rootNodes : [];
-        this.component = NgxRenderingEngine.createComponent(component, props, metadata, this.vcr, this.injector, []);
-        this.subscribeEvents();
-    }
-    createParentComponent() {
-        const { component, inputs } = this.parent;
-        const metadata = reflectComponentType(component);
-        const template = this.projectable ? this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes : [];
-        this.component = NgxRenderingEngine.createComponent(component, inputs, metadata, this.vcr, this.injector, template);
-        this.subscribeEvents();
-    }
-    /**
-     * @description Subscribes to events emitted by the dynamic component.
-     * @summary This method sets up subscriptions to all EventEmitter properties of the
-     * dynamically created component. When an event is emitted by the dynamic component,
-     * it is captured and re-emitted through the listenEvent output property with additional
-     * metadata about the event source.
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as ComponentRendererComponent
-     *   participant D as Dynamic Component
-     *   participant P as Parent Component
-     *
-     *   C->>C: subscribeEvents()
-     *   C->>D: Get instance properties
-     *   loop For each property
-     *     C->>C: Check if property is EventEmitter
-     *     alt is EventEmitter
-     *       C->>D: Subscribe to event
-     *       D-->>C: Event emitted
-     *       C->>P: Re-emit event with metadata
-     *     end
-     *   end
-     *
-     * @private
-     * @return {void}
-     * @memberOf ComponentRendererComponent
-     */
-    subscribeEvents() {
-        if (this.component) {
-            const instance = this.component?.instance;
-            const componentKeys = Object.keys(instance);
-            for (const key of componentKeys) {
-                const value = instance[key];
-                if (value instanceof EventEmitter)
-                    instance[key].subscribe((event) => {
-                        this.listenEvent.emit({
-                            name: key,
-                            ...event,
-                        });
-                    });
-            }
-        }
-    }
-    /**
-     * @description Unsubscribes from all events of the dynamic component.
-     * @summary This method cleans up event subscriptions when the component is being destroyed.
-     * It iterates through all properties of the dynamic component instance and unsubscribes
-     * from any EventEmitter properties to prevent memory leaks and unexpected behavior after
-     * the component is destroyed.
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant C as ComponentRendererComponent
-     *   participant D as Dynamic Component
-     *
-     *   C->>C: unsubscribeEvents()
-     *   C->>D: Get instance properties
-     *   loop For each property
-     *     C->>C: Check if property is EventEmitter
-     *     alt is EventEmitter
-     *       C->>D: Unsubscribe from event
-     *     end
-     *   end
+     * @description Parses and transforms form data for repository operations.
+     * @summary Converts raw form data into the appropriate format for repository operations.
+     * For DELETE operations, returns the primary key value (string or number). For CREATE
+     * and UPDATE operations, builds a complete model instance using the Model.build method
+     * with proper primary key assignment for updates.
      *
+     * @param {Partial<Model>} data - The raw form data to be processed
+     * @return {Model | string | number} Processed data ready for repository operations
      * @private
-     * @return {void}
-     * @memberOf ComponentRendererComponent
      */
-    unsubscribeEvents() {
-        if (this.component) {
-            const instance = this.component?.instance;
-            const componentKeys = Object.keys(instance);
-            for (const key of componentKeys) {
-                const value = instance[key];
-                if (value instanceof EventEmitter)
-                    instance[key].unsubscribe();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", children: "children", projectable: "projectable", model: "model", parentComponent: "parentComponent", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n<div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(projectable) {\n    @if(children?.length) {\n      @for(child of children; track child) {\n        @if(child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    parseData(data) {
+        const repo = this._repository;
+        let uid = this.modelId;
+        if (repo.pk === 'id')
+            uid = Number(uid);
+        if (this.operation !== OperationKeys.DELETE)
+            return Model.build(this.modelId ? Object.assign(data, { [repo.pk]: uid }) : data, this.modelName);
+        return uid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxModelPageDirective, isStandalone: true, inputs: { modelId: "modelId", operation: "operation", modelName: "modelName" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ComponentRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, encapsulation: ViewEncapsulation.None, host: { '[attr.id]': 'uid' }, template: "<!-- Keep to avoid id conflicts -->\n<div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(projectable) {\n    @if(children?.length) {\n      @for(child of children; track child) {\n        @if(child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { vcr: [{
-                type: ViewChild,
-                args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
-            }], tag: [{
-                type: Input,
-                args: [{ required: true }]
-            }], globals: [{
-                type: Input
-            }], children: [{
-                type: Input
-            }], projectable: [{
-                type: Input
-            }], listenEvent: [{
-                type: Output
-            }], model: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxModelPageDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { modelId: [{
                 type: Input
-            }], parentComponent: [{
+            }], operation: [{
                 type: Input
-            }], parent: [{
+            }], modelName: [{
                 type: Input
-            }], inner: [{
-                type: ViewChild,
-                args: ['inner', { read: TemplateRef, static: true }]
             }] } });
 
 /**
- * @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
- * and implements lifecycle hooks to properly initialize, render, and clean up. This component
- * supports various input types (text, number, date, select, etc.), validation rules, and styling
- * options, making it suitable for building dynamic forms for create, read, update, and delete
- * operations.
- *
- * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
- * @param {string} name - The field name, used as form control identifier
- * @param {PossibleInputTypes} type - The input type (text, number, date, select, etc.)
- * @param {string|number|Date} value - The initial value of the field
- * @param {boolean} disabled - Whether the field is disabled
- * @param {string} label - The display label for the field
- * @param {string} placeholder - Placeholder text when field is empty
- * @param {string} format - Format pattern for the field value
- * @param {boolean} hidden - Whether the field should be hidden
- * @param {number|Date} max - Maximum allowed value
- * @param {number} maxlength - Maximum allowed length
- * @param {number|Date} min - Minimum allowed value
- * @param {number} minlength - Minimum allowed length
- * @param {string} pattern - Validation pattern
- * @param {boolean} readonly - Whether the field is read-only
- * @param {boolean} required - Whether the field is required
- * @param {number} step - Step value for number inputs
- * @param {FormGroup} formGroup - The parent form group
- * @param {StringOrBoolean} translatable - Whether field labels should be translated
- *
- * @component CrudFieldComponent
- * @example
- * <ngx-decaf-crud-field
- *   operation="create"
- *   name="firstName"
- *   type="text"
- *   label="<NAME>"
- *   placeholder="<NAME>"
- *   [value]="model.firstName"
- *   [disabled]="model.readOnly">
+ * @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.
  *
- * @memberOf module:for-angular
+ * @class NgxParentComponentDirective
+ * @extends {NgxParentComponentDirective}
+ * @implements {OnInit}
  */
-let CrudFieldComponent = class CrudFieldComponent extends NgxDecafFormFieldDirective {
+class NgxParentComponentDirective extends NgxComponentDirective {
     constructor() {
         super(...arguments);
-        this.className = 'dcf-width-1-1';
         /**
-         * @description The parent field path, if this field is nested.
-         * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
+         * @description Array of UI model metadata for all form fields.
+         * @summary Contains the complete collection of UI model metadata that defines
+         * the structure, validation, and presentation of form fields across all pages.
+         * Each metadata object contains information about field type, validation rules,
+         * page assignment, and display properties.
          *
-         * @type {string}
-         * @memberOf CrudFieldComponent
+         * @type {UIModelMetadata[]}
          */
+        this.children = [];
         /**
-         * @description The parent field path for nested field structures.
-         * @summary Specifies the full dot-delimited path of the parent field when this field
-         * is part of a nested structure. This is used for hierarchical form organization
-         * and proper form control resolution in complex form structures.
+         * @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 {string}
-         * @default ''
-         * @memberOf CrudFieldComponent
+         * @type {(number | string[])}
+         * @default 1
          */
-        this.childOf = '';
+        this.cols = 1;
         /**
-         * @description The initial value of the field.
-         * @summary Sets the initial value of the form field. This can be a string, number, or Date
-         * depending on the field type. For select fields, this should match one of the option values.
-         *
-         * @type {string | number | Date}
-         * @default ''
-         * @memberOf CrudFieldComponent
-         */
-        this.value = '';
-        /**
-         * @description Whether the field should be hidden.
-         * @summary When true, the field will not be visible in the UI but will still be part of the form model.
-         * This is useful for fields that need to be included in form submission but should not be displayed to the user.
-         *
-         * @type {boolean}
-         * @memberOf CrudFieldComponent
-         */
-        this.hidden = false;
-        /**
-         * @description Interface style for select inputs.
-         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
-         * This determines how the select options are presented to the user.
-         *
-         * @type {SelectInterface}
-         * @memberOf CrudFieldComponent
-         */
-        this.interface = 'popover';
-        /**
-         * @description Spellcheck attribute for text inputs.
-         * @summary Enables or disables spellchecking for text inputs.
-         * When true, the browser will check the spelling of the input text.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberOf CrudFieldComponent
-         */
-        this.spellcheck = false;
-        /**
-         * @description Input mode for text inputs.
-         * @summary Hints at the type of data that might be entered by the user while editing the element.
-         * This can affect the virtual keyboard layout on mobile devices.
+         * @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 {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
-         * @default 'none'
-         * @memberOf CrudFieldComponent
+         * @type {(number | string[])}
+         * @default 1
          */
-        this.inputmode = 'none';
+        this.rows = 1;
+    }
+    async ngOnInit(model) {
+        if (model)
+            this.model = model;
+        if (this.model && !this.repository)
+            this._repository = this.repository;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxParentComponentDirective, isStandalone: true, inputs: { parentComponent: "parentComponent", children: "children", cols: "cols", rows: "rows" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { parentComponent: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }] } });
+
+class NgxFormDirective extends NgxParentComponentDirective {
+    constructor() {
+        super(...arguments);
+        this.crudFieldComponent = ComponentsTagNames.CRUD_FIELD;
         /**
-         * @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.
+         * @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 {AutocompleteTypes}
-         * @default 'off'
-         * @memberOf CrudFieldComponent
+         * @type {FieldUpdateMode}
+         * @default 'change'
          */
-        this.autocomplete = 'off';
+        this.updateOn = 'change';
         /**
-         * @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.
+         * @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 {'outline' | 'solid'}
-         * @default 'outline'
-         * @memberOf CrudFieldComponent
+         * @type {HTMLFormTarget}
+         * @default '_self'
          */
-        this.fill = 'outline';
+        this.target = '_self';
         /**
-         * @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'.
+         * @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 {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
-         * @default 'floating'
-         * @memberOf CrudFieldComponent
+         * @type {'get' | 'post' | 'event'}
+         * @default 'event'
          */
-        this.labelPlacement = 'floating';
+        this.method = 'event';
         /**
-         * @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'.
+         * @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 {FieldUpdateMode}
-         * @default 'change'
-         * @memberOf CrudFieldComponent
+         * @type {CrudOperations}
+         * @required
          */
-        this.updateOn = 'change';
+        this.operation = OperationKeys.CREATE;
         /**
-         * @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.
+         * @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 {boolean}
-         * @default false
-         * @memberOf CrudFieldComponent
+         * @type {FormGroup | undefined}
          */
-        this.multiple = false;
+        this.formGroup = undefined;
         /**
-         * @description Unique identifier for the current record.
-         * @summary A unique identifier for the current record being displayed or manipulated.
-         * This is typically used in conjunction with the primary key for operations on specific records.
-         *
-         * @type {string | number}
-         */
-        this.uid = generateRandomValue(12);
+       * @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>}
+       */
+        this.submitEvent = new EventEmitter();
         /**
-         * @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.
+         * @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 {StringOrBoolean}
-         * @default true
-         * @memberOf CrudFieldComponent
+         * @type {string}
+         * @default Randomly generated 12-character string
          */
-        this.translatable = true;
+        this.allowClear = true;
+        //   /**
+        //  * @description Angular change detection service.
+        //  * @summary Injected service that provides manual control over change detection cycles.
+        //  * This is essential for ensuring that programmatic DOM changes (like setting accordion
+        //  * attributes) are properly reflected in the component's state and trigger appropriate
+        //  * view updates when modifications occur outside the normal Angular change detection flow.
+        //  *
+        //  * @protected
+        //  * @type {ChangeDetectorRef}
+        //  * @memberOf CrudFormComponent
+        //  */
+        // protected changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+        // /**
+        //  * @description Angular Renderer2 service for safe DOM manipulation.
+        //  * @summary Injected service that provides a safe, platform-agnostic way to manipulate DOM elements.
+        //  * This service ensures proper handling of DOM operations across different platforms and environments,
+        //  * including server-side rendering and web workers.
+        //  *
+        //  * @protected
+        //  * @type {Renderer2}
+        //  * @memberOf CrudFormComponent
+        //  */
+        // protected renderer: Renderer2 = inject(Renderer2);
+        // /**
+        //  * @description Translation service for internationalization.
+        //  * @summary Injected service that provides translation capabilities for UI text.
+        //  * Used to translate button labels and validation messages based on the current locale.
+        //  *
+        //  * @protected
+        //  * @type {TranslateService}
+        //  * @memberOf CrudFormComponent
+        //  */
+        // protected translateService: TranslateService = inject(TranslateService);
+        this.activeFormGroupIndex = 0;
     }
-    /**
-     * @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
-     */
-    async ngOnInit() {
-        this.options = await this.getOptions();
-        addIcons({ chevronDownOutline, chevronUpOutline });
-        if (Array.isArray(this.hidden) && !this.hidden.includes(this.operation)) {
-            this.hidden = false;
-        }
-        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
-            this.formGroup = undefined;
-        }
-        else {
-            if (!this.parentComponent && this.formGroup instanceof FormGroup || this.formGroup instanceof FormArray)
-                this.parentComponent = (this.formGroup.root || this.formControl.root);
-            if (this.multiple) {
-                this.formGroup = this.activeFormGroup;
-                if (!this.parentComponent)
-                    this.parentComponent = this.formGroup.parent;
-                this.formControl = this.formGroup.get(this.name);
-            }
-            if (this.type === HTML5InputTypes.CHECKBOX && Array.isArray(this.value)) {
-                this.setValue(this.value);
-            }
-        }
+    get activeFormGroup() {
+        return this.getFormArrayIndex(this.activeFormGroupIndex);
     }
     /**
-    * 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'.
+    * @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 {CrudFieldOption[]} The array of parsed and localized options.
-    * @memberOf CrudFieldComponent
+    * @returns {Promise<void>}
     */
-    async getOptions() {
-        if (!this.options)
-            return [];
-        if (this.options instanceof Function) {
-            const repo = getModelRepository(this.options().name);
-            this.options = await repo?.select().execute();
-        }
-        if (this.optionsMapper) {
-            if (this.optionsMapper instanceof Function || typeof this.optionsMapper === 'function') {
-                const mapper = this.optionsMapper;
-                this.options = this.options.map((option) => {
-                    return mapper(option);
-                });
-            }
-            else if (Object.keys(this.optionsMapper).length > 0) {
-                this.options = dataMapper(this.options, this.optionsMapper);
-            }
-        }
-        const options = this.options.map(async (option) => {
-            const text = await this.translate((!option.text.includes('options') ?
-                getLocaleContextByKey(`${this.label.toLowerCase().replace('label', 'options')}`, option.text)
-                : option.text));
-            return {
-                value: option.value,
-                text: text
-            };
-        });
-        return Promise.all(options);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async ngOnInit(model) {
+        // dont call super.ngOnInit to model conflicts
+        if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
+            this.formGroup = undefined;
+        this.initialized = true;
     }
     /**
-     * @description Component after view initialization lifecycle method.
-     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
-     * This ensures proper initialization of read-only fields that don't require
-     * form functionality but still need view setup.
+     * @description Component cleanup lifecycle method.
+     * @summary Performs cleanup operations when the component is destroyed.
+     * Unregisters the FormGroup from the NgxFormService to prevent memory leaks
+     * and ensure proper resource cleanup.
      *
      * @returns {void}
-     * @memberOf CrudFieldComponent
      */
-    ngAfterViewInit() {
-        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
-            super.afterViewInit();
-        }
-        else {
-            if (this.type === HTML5InputTypes.RADIO && !this.value)
-                this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
+    ngOnDestroy() {
+        if (this.formGroup)
+            NgxFormService.unregister(this.formGroup);
+    }
+    getFormArrayIndex(index) {
+        if (!(this.formGroup instanceof FormArray) && this.formGroup)
+            return this.formGroup;
+        const formGroup = this.formGroup.at(index);
+        if (formGroup) {
+            if (this.children.length) {
+                const children = [...this.children];
+                this.children = [];
+                this.changeDetectorRef.detectChanges();
+                this.children = [...children.map(child => {
+                        const props = (child.props || {});
+                        const name = props.name;
+                        const control = formGroup.get(name);
+                        child.props.value = control?.value;
+                        child.props.formGroup = formGroup;
+                        child.props.activeFormGroupIndex = index;
+                        child.props.formControl = control;
+                        return child;
+                    })];
+                this.changeDetectorRef.detectChanges();
+            }
         }
+        return formGroup || undefined;
     }
     /**
-     * @description Component cleanup lifecycle method.
-     * @summary Performs cleanup operations for READ and DELETE operations by calling
-     * the parent onDestroy method. This ensures proper resource cleanup for
-     * read-only field components.
+     * @description Handles form reset or navigation back functionality.
+     * @summary Provides different reset behavior based on the current operation.
+     * For CREATE and UPDATE operations, resets the form to its initial state.
+     * For READ and DELETE operations, navigates back in the browser history
+     * since these operations don't have modifiable form data to reset.
      *
      * @returns {void}
-     * @memberOf CrudFieldComponent
      */
+    handleReset() {
+        if (![OperationKeys.DELETE, OperationKeys.READ].includes(this.operation) && this.allowClear)
+            return NgxFormService.reset(this.formGroup);
+        this.location.back();
+    }
+    async handleSubmit(event, eventName, componentName) {
+        if (event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        if (!NgxFormService.validateFields(this.formGroup))
+            return false;
+        const data = NgxFormService.getFormData(this.formGroup);
+        this.submitEvent.emit({
+            data,
+            component: componentName || this.componentName,
+            name: eventName || this.action || EventConstants.SUBMIT,
+            handlers: this.handlers,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", rendererId: "rendererId", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { parentFormId: [{
+                type: Input
+            }], component: [{
+                type: ViewChild,
+                args: ['component', { static: false, read: ElementRef }]
+            }], updateOn: [{
+                type: Input
+            }], target: [{
+                type: Input
+            }], method: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], operation: [{
+                type: Input,
+                args: [{ required: true }]
+            }], handlers: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], rendererId: [{
+                type: Input
+            }], submitEvent: [{
+                type: Output
+            }], allowClear: [{
+                type: Input
+            }] } });
+
+class NgxMediaDirective extends NgxComponentDirective {
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(localeRoot = "NgxPageDirective") {
+        super(localeRoot);
+        this.destroy$ = new Subject();
+        this.resizeSubject = new BehaviorSubject({
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
+        this.resize$ = this.resizeSubject.asObservable();
+        this.zone = inject(NgZone);
+        // listen to window resize events outside Angular zone
+        this.zone.runOutsideAngular(() => {
+            fromEvent(window, 'resize')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
+                const dimensions = {
+                    width: window.innerWidth,
+                    height: window.innerHeight
+                };
+                // update within the zone to reflect in Angular
+                this.zone.run(() => this.resizeSubject.next(dimensions));
+            });
+        });
+        // listen for color scheme changes
+        this.colorScheme$ = new Observable(observer => {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const emit = () => observer.next(mediaQuery.matches ? 'dark' : 'light');
+            emit(); // valor inicial
+            mediaQuery.addEventListener('change', emit);
+            return () => mediaQuery.removeEventListener('change', emit);
+        }).pipe(takeUntil(this.destroy$));
+    }
+    async isDarkMode() {
+        return await firstValueFrom(this.colorScheme$.pipe(map(scheme => scheme === 'dark')));
+    }
     ngOnDestroy() {
-        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
-            this.onDestroy();
+        this.destroy$.next();
+        this.destroy$.complete();
     }
-    toggleOptionSelection(val, event) {
-        const { checked } = event.detail;
-        let value = Array.isArray(this.formControl.value) ? this.formControl.value : [];
-        if (checked) {
-            if (!value.includes(val))
-                value = [...value, val];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxMediaDirective, deps: [{ token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxMediaDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxMediaDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [CPTKN]
+                }] }] });
+
+/**
+ * @module engine
+ * @description Angular rendering engine for Decaf applications
+ * @summary The engine module provides core functionality for rendering Angular components
+ * in Decaf applications. It includes constants, decorators, rendering engines, and utility types
+ * that enable dynamic component creation, property mapping, and component lifecycle management.
+ * Key exports include {@link NgxRenderingEngine}, {@link DynamicModule}, and various decorators
+ * for component configuration.
+ */
+
+/**
+ * @description Dynamic component renderer for Decaf Angular applications.
+ * @summary This component provides a flexible way to dynamically render Angular components
+ * at runtime based on a tag name. It handles the creation, property binding, and event
+ * subscription for dynamically loaded components. This is particularly useful for
+ * building configurable UIs where components need to be determined at runtime.
+ *
+ * @component {ComponentRendererComponent}
+ * @example
+ * <ngx-decaf-component-renderer
+ *   [tag]="tag"
+ *   [globals]="globals"
+ *   (listenEvent)="listenEvent($event)">
+ * </ngx-decaf-component-renderer>
+ *
+ * @mermaid
+ * classDiagram
+ *   class ComponentRendererComponent {
+ *     +ViewContainerRef vcr
+ *     +string tag
+ *     +Record~string, unknown~ globals
+ *     +EnvironmentInjector injector
+ *     +ComponentRef~unknown~ component
+ *     +EventEmitter~IBaseCustomEvent~ listenEvent
+ *     +ngOnInit()
+ *     +ngOnDestroy()
+ *     +ngOnChanges(changes)
+ *     -createComponent(tag, globals)
+ *     -subscribeEvents()
+ *     -unsubscribeEvents()
+ *   }
+ *   ComponentRendererComponent --|> OnInit
+ *   ComponentRendererComponent --|> OnChanges
+ *   ComponentRendererComponent --|> OnDestroy
+ *
+ * @implements {OnInit}
+ * @implements {OnChanges}
+ * @implements {OnDestroy}
+ */
+class ComponentRendererComponent {
+    /**
+     * @description Creates an instance of ComponentRendererComponent.
+     * @summary Initializes a new ComponentRendererComponent. This component doesn't require
+     * any dependencies to be injected in its constructor as it uses the inject function to
+     * obtain the EnvironmentInjector.
+     *
+     * @memberOf ComponentRendererComponent
+     */
+    constructor() {
+        /**
+         * @description Global properties to pass to the rendered component.
+         * @summary This input property allows passing a set of properties to the dynamically
+         * rendered component. These properties will be mapped to the component's inputs if they
+         * match. Properties that don't match any input on the target component will be filtered out
+         * with a warning.
+         *
+         * @type {Record<string, unknown>}
+         * @default {}
+         * @memberOf ComponentRendererComponent
+         */
+        this.globals = {};
+        /**
+         * @description Injector used for dependency injection in the dynamic component.
+         * @summary This injector is used when creating the dynamic component to provide it with
+         * access to the application's dependency injection system. It ensures that the dynamically
+         * created component can access the same services and dependencies as statically created
+         * components.
+         *
+         * @type {EnvironmentInjector}
+         * @memberOf ComponentRendererComponent
+         */
+        this.injector = inject(EnvironmentInjector);
+        this.children = [];
+        this.projectable = true;
+        /**
+         * @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
+         */
+        this.listenEvent = new EventEmitter();
+        this.parent = undefined;
+        this.uid = generateRandomValue(12);
+        this.logger = getLogger(this);
+    }
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the component by creating the dynamic component specified by the tag input.
+     * This method is called once when the component is initialized and triggers the dynamic
+     * component creation process with the provided tag name and global properties.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant C as ComponentRendererComponent
+     *   participant R as 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() {
+        if (!this.parent) {
+            this.createComponent(this.tag, this.globals);
         }
         else {
-            value = value.filter(v => v !== val);
+            this.createParentComponent();
         }
-        this.setValue(value);
-        this.formControl.updateValueAndValidity();
     }
-    isOptionChecked(value) {
-        if (!this.formControl.value || !Array.isArray(this.formControl.value))
-            return false;
-        return this.formControl.value.includes(value);
+    /**
+     * @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
+     */
+    async ngOnDestroy() {
+        if (this.component) {
+            this.unsubscribeEvents();
+            NgxRenderingEngine.destroy();
+        }
     }
     /**
-     * @description Handles fieldset group update events from parent fieldsets.
-     * @summary Processes events triggered when an existing group needs to be updated.
-     * Updates the active form group index and refreshes the form group and form control
-     * references to point to the group being edited.
+     * @description Creates and renders a dynamic component.
+     * @summary This method handles the creation of a dynamic component based on the provided tag.
+     * It retrieves the component constructor from the rendering engine, processes its inputs,
+     * filters out unmapped properties, creates the component instance, and sets up event subscriptions.
+     *
+     * @param {string} tag - The tag name of the component to create
+     * @param {KeyValue} globals - Global properties to pass to the component
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant R as NgxRenderingEngine
+     *   participant V as ViewContainerRef
+     *
+     *   C->>R: components(tag)
+     *   R-->>C: Return component constructor
+     *   C->>C: reflectComponentType(component)
+     *   C->>C: Process input properties
+     *   C->>C: Filter unmapped properties
+     *   C->>V: clear()
+     *   C->>R: createComponent(component, props, metadata, vcr, injector, [])
+     *   R-->>C: Return component reference
+     *   C->>C: subscribeEvents()
+     *
+     * @private
+     * @memberOf ComponentRendererComponent
+     */
+    createComponent(tag, globals = {}) {
+        const component = NgxRenderingEngine.components(tag)
+            ?.constructor;
+        const metadata = reflectComponentType(component);
+        const componentInputs = metadata.inputs;
+        const props = globals?.['item'] || globals?.['props'] || {};
+        if (props?.['tag'])
+            delete props['tag'];
+        if (props?.['children'] && !this.children.length)
+            this.children = props['children'];
+        props['children'] = this.children || [];
+        const inputKeys = Object.keys(props);
+        const unmappedKeys = [];
+        for (const input of inputKeys) {
+            if (!inputKeys.length)
+                break;
+            const prop = componentInputs.find((item) => item.propName === input);
+            if (!prop) {
+                delete props[input];
+                unmappedKeys.push(input);
+            }
+        }
+        const hasChildrenInput = Object.values(componentInputs).some(({ propName }) => propName === AngularEngineKeys.CHILDREN);
+        if (!this.projectable && hasChildrenInput)
+            props[AngularEngineKeys.CHILDREN] = this.children;
+        const hasRootForm = Object.values(componentInputs).some(({ propName }) => propName === BaseComponentProps.PARENT_COMPONENT);
+        if (hasRootForm && this.parentComponent)
+            props[BaseComponentProps.PARENT_COMPONENT] = this.parentComponent;
+        this.vcr.clear();
+        // const projectable = (this.children?.length && this.projectable);
+        // const template = projectable ? this.vcr.createEmbeddedView(this.inner as TemplateRef<unknown>, this.injector).rootNodes : [];
+        this.component = NgxRenderingEngine.createComponent(component, props, metadata, this.vcr, this.injector, []);
+        this.subscribeEvents();
+    }
+    createParentComponent() {
+        const { component, inputs } = this.parent;
+        const metadata = reflectComponentType(component);
+        const template = this.projectable ? this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes : [];
+        this.component = NgxRenderingEngine.createComponent(component, inputs, metadata, this.vcr, this.injector, template);
+        this.subscribeEvents();
+    }
+    /**
+     * @description Subscribes to events emitted by the dynamic component.
+     * @summary This method sets up subscriptions to all EventEmitter properties of the
+     * dynamically created component. When an event is emitted by the dynamic component,
+     * it is captured and re-emitted through the listenEvent output property with additional
+     * metadata about the event source.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant D as Dynamic Component
+     *   participant P as Parent Component
+     *
+     *   C->>C: subscribeEvents()
+     *   C->>D: Get instance properties
+     *   loop For each property
+     *     C->>C: Check if property is EventEmitter
+     *     alt is EventEmitter
+     *       C->>D: Subscribe to event
+     *       D-->>C: Event emitted
+     *       C->>P: Re-emit event with metadata
+     *     end
+     *   end
+     *
+     * @private
+     * @return {void}
+     * @memberOf ComponentRendererComponent
+     */
+    subscribeEvents() {
+        if (this.component) {
+            const instance = this.component?.instance;
+            const componentKeys = Object.keys(instance);
+            for (const key of componentKeys) {
+                const value = instance[key];
+                if (value instanceof EventEmitter)
+                    instance[key].subscribe((event) => {
+                        this.listenEvent.emit({
+                            name: key,
+                            ...event,
+                        });
+                    });
+            }
+        }
+    }
+    /**
+     * @description Unsubscribes from all events of the dynamic component.
+     * @summary This method cleans up event subscriptions when the component is being destroyed.
+     * It iterates through all properties of the dynamic component instance and unsubscribes
+     * from any EventEmitter properties to prevent memory leaks and unexpected behavior after
+     * the component is destroyed.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant C as ComponentRendererComponent
+     *   participant D as Dynamic Component
+     *
+     *   C->>C: unsubscribeEvents()
+     *   C->>D: Get instance properties
+     *   loop For each property
+     *     C->>C: Check if property is EventEmitter
+     *     alt is EventEmitter
+     *       C->>D: Unsubscribe from event
+     *     end
+     *   end
      *
-     * @param {CustomEvent} event - The fieldset update group event containing update details
-     * @returns {void}
-     * @memberOf CrudFieldComponent
+     * @private
+     * @return {void}
+     * @memberOf ComponentRendererComponent
      */
-    handleFieldsetUpdateGroupEvent(event) {
-        const { formGroup, index } = event.detail;
-        this.activeFormGroupIndex = index;
-        this.formGroup = formGroup;
-        this.formControl = this.formGroup.get(this.name);
-        this.value = this.formControl.value;
+    unsubscribeEvents() {
+        if (this.component) {
+            const instance = this.component?.instance;
+            const componentKeys = Object.keys(instance);
+            for (const key of componentKeys) {
+                const value = instance[key];
+                if (value instanceof EventEmitter)
+                    instance[key].unsubscribe();
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-};
-CrudFieldComponent = __decorate([
-    Dynamic()
-], CrudFieldComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFieldComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", children: "children", projectable: "projectable", model: "model", parentComponent: "parentComponent", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n<div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(projectable) {\n    @if(children?.length) {\n      @for(child of children; track child) {\n        @if(child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [
-                        ReactiveFormsModule,
-                        TranslatePipe,
-                        IonInput,
-                        IonItem,
-                        IonCheckbox,
-                        IonRadioGroup,
-                        IonRadio,
-                        IonSelect,
-                        IonSelectOption,
-                        IonLabel,
-                        IonText,
-                        IonTextarea
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
-        }], propDecorators: { operation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], name: [{
-                type: Input,
-                args: [{ required: true }]
-            }], className: [{
-                type: Input
-            }], path: [{
-                type: Input,
-                args: [{ required: true }]
-            }], childOf: [{
-                type: Input
-            }], type: [{
-                type: Input,
-                args: [{ required: true }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
+            args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, encapsulation: ViewEncapsulation.None, host: { '[attr.id]': 'uid' }, template: "<!-- Keep to avoid id conflicts -->\n<div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if(projectable) {\n    @if(children?.length) {\n      @for(child of children; track child) {\n        @if(child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { vcr: [{
+                type: ViewChild,
+                args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
+            }], tag: [{
                 type: Input,
                 args: [{ required: true }]
-            }], placeholder: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], hidden: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], minlength: [{
-                type: Input
-            }], pattern: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], equals: [{
-                type: Input
-            }], different: [{
-                type: Input
-            }], lessThan: [{
-                type: Input
-            }], lessThanOrEqual: [{
-                type: Input
-            }], greaterThan: [{
-                type: Input
-            }], greaterThanOrEqual: [{
-                type: Input
-            }], alignment: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], interface: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], spellcheck: [{
+            }], globals: [{
                 type: Input
-            }], inputmode: [{
+            }], children: [{
                 type: Input
-            }], autocomplete: [{
+            }], projectable: [{
                 type: Input
-            }], fill: [{
+            }], listenEvent: [{
+                type: Output
+            }], model: [{
                 type: Input
-            }], labelPlacement: [{
+            }], parentComponent: [{
                 type: Input
-            }], updateOn: [{
+            }], parent: [{
                 type: Input
-            }], component: [{
+            }], inner: [{
                 type: ViewChild,
-                args: ['component', { read: ElementRef }]
-            }], formGroup: [{
-                type: Input
-            }], formControl: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], handleFieldsetUpdateGroupEvent: [{
-                type: HostListener,
-                args: ['window:fieldsetUpdateGroupEvent', ['$event']]
+                args: ['inner', { read: TemplateRef, static: true }]
             }] } });
 
 /**
- * @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.
+ * @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 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
+ * operations.
  *
- * @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.
+ * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
+ * @param {string} name - The field name, used as form control identifier
+ * @param {PossibleInputTypes} type - The input type (text, number, date, select, etc.)
+ * @param {string|number|Date} value - The initial value of the field
+ * @param {boolean} disabled - Whether the field is disabled
+ * @param {string} label - The display label for the field
+ * @param {string} placeholder - Placeholder text when field is empty
+ * @param {string} format - Format pattern for the field value
+ * @param {boolean} hidden - Whether the field should be hidden
+ * @param {number|Date} max - Maximum allowed value
+ * @param {number} maxlength - Maximum allowed length
+ * @param {number|Date} min - Minimum allowed value
+ * @param {number} minlength - Minimum allowed length
+ * @param {string} pattern - Validation pattern
+ * @param {boolean} readonly - Whether the field is read-only
+ * @param {boolean} required - Whether the field is required
+ * @param {number} step - Step value for number inputs
+ * @param {FormGroup} formGroup - The parent form group
+ * @param {StringOrBoolean} translatable - Whether field labels should be translated
  *
- * @class NgxParentComponentDirective
- * @extends {NgxParentComponentDirective}
- * @implements {OnInit}
+ * @component CrudFieldComponent
+ * @example
+ * <ngx-decaf-crud-field
+ *   operation="create"
+ *   name="firstName"
+ *   type="text"
+ *   label="<NAME>"
+ *   placeholder="<NAME>"
+ *   [value]="model.firstName"
+ *   [disabled]="model.readOnly">
+ *
+ *
+ * @memberOf module:for-angular
  */
-class NgxParentComponentDirective extends NgxDecafComponentDirective {
+let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective {
     constructor() {
         super(...arguments);
+        this.className = 'dcf-width-1-1';
         /**
-         * @description Array of UI model metadata for all form fields.
-         * @summary Contains the complete collection of UI model metadata that defines
-         * the structure, validation, and presentation of form fields across all pages.
-         * Each metadata object contains information about field type, validation rules,
-         * page assignment, and display properties.
+         * @description The parent field path, if this field is nested.
+         * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
          *
-         * @type {UIModelMetadata[]}
+         * @type {string}
+         * @memberOf CrudFieldComponent
+         */
+        /**
+         * @description The parent field path for nested field structures.
+         * @summary Specifies the full dot-delimited path of the parent field when this field
+         * is part of a nested structure. This is used for hierarchical form organization
+         * and proper form control resolution in complex form structures.
+         *
+         * @type {string}
+         * @default ''
+         * @memberOf CrudFieldComponent
+         */
+        this.childOf = '';
+        /**
+         * @description The initial value of the field.
+         * @summary Sets the initial value of the form field. This can be a string, number, or Date
+         * depending on the field type. For select fields, this should match one of the option values.
+         *
+         * @type {string | number | Date}
+         * @default ''
+         * @memberOf CrudFieldComponent
+         */
+        this.value = '';
+        /**
+         * @description Whether the field should be hidden.
+         * @summary When true, the field will not be visible in the UI but will still be part of the form model.
+         * This is useful for fields that need to be included in form submission but should not be displayed to the user.
+         *
+         * @type {boolean}
+         * @memberOf CrudFieldComponent
+         */
+        this.hidden = false;
+        /**
+         * @description Interface style for select inputs.
+         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
+         * This determines how the select options are presented to the user.
+         *
+         * @type {SelectInterface}
+         * @memberOf CrudFieldComponent
          */
-        this.children = [];
+        this.interface = 'popover';
         /**
-         * @description Number of columns or array of column definitions for the grid layout.
-         * @summary Defines the column structure of the grid. When a number is provided, it creates
-         * that many equal-width columns. When an array is provided, each element can define specific
-         * column properties or sizing. This allows for flexible grid layouts that can adapt to
-         * different content requirements.
+         * @description Spellcheck attribute for text inputs.
+         * @summary Enables or disables spellchecking for text inputs.
+         * When true, the browser will check the spelling of the input text.
          *
-         * @type {(number | string[])}
-         * @default 1
+         * @type {boolean}
+         * @default false
+         * @memberOf CrudFieldComponent
          */
-        this.cols = 1;
+        this.spellcheck = false;
         /**
-         * @description Number of rows or array of row definitions for the grid layout.
-         * @summary Defines the row structure of the grid. When a number is provided, it creates
-         * that many equal-height rows. When an array is provided, each element can define specific
-         * row properties or sizing. This provides control over vertical spacing and content organization.
+         * @description 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 {(number | string[])}
-         * @default 1
+         * @type {'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'}
+         * @default 'none'
+         * @memberOf CrudFieldComponent
          */
-        this.rows = 1;
-    }
-    async ngOnInit(model) {
-        if (model)
-            this.model = model;
-        if (this.model && !this.repository)
-            this._repository = this.repository;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxParentComponentDirective, isStandalone: true, inputs: { parentComponent: "parentComponent", children: "children", cols: "cols", rows: "rows" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { parentComponent: [{
-                type: Input
-            }], children: [{
-                type: Input
-            }], cols: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }] } });
-
-class NgxFormDirective extends NgxParentComponentDirective {
-    constructor() {
-        super(...arguments);
-        this.crudFieldComponent = ComponentsTagNames.CRUD_FIELD;
+        this.inputmode = 'none';
         /**
-         * @description Field update trigger mode for form validation.
-         * @summary Determines when form field validation should be triggered. Options include
-         * 'change', 'blur', or 'submit'. This affects the user experience by controlling
-         * when validation feedback is shown to the user during form interaction.
+         * @description Autocomplete behavior for the field.
+         * @summary Specifies whether and how the browser should automatically complete the input.
+         * This can improve user experience by suggesting previously entered values.
          *
-         * @type {FieldUpdateMode}
-         * @default 'change'
+         * @type {AutocompleteTypes}
+         * @default 'off'
+         * @memberOf CrudFieldComponent
          */
-        this.updateOn = 'change';
+        this.autocomplete = 'off';
         /**
-         * @description Form submission target specification.
-         * @summary Specifies where to display the response after form submission, similar
-         * to the HTML form target attribute. Options include '_self', '_blank', '_parent',
-         * '_top', or a named frame. Controls the browser behavior for form responses.
+         * @description Fill style for the field.
+         * @summary Determines the fill style of the field, such as 'outline' or 'solid'.
+         * This affects the border and background of the field.
          *
-         * @type {HTMLFormTarget}
-         * @default '_self'
+         * @type {'outline' | 'solid'}
+         * @default 'outline'
+         * @memberOf CrudFieldComponent
          */
-        this.target = '_self';
+        this.fill = 'outline';
         /**
-         * @description HTTP method or submission strategy for the form.
-         * @summary Defines how the form should be submitted. 'get' and 'post' correspond
-         * to standard HTTP methods for traditional form submission, while 'event' uses
-         * Angular event-driven submission for single-page application workflows.
+         * @description Placement of the label relative to the field.
+         * @summary Specifies where the label should be placed relative to the field.
+         * Options include 'start', 'end', 'floating', 'stacked', and 'fixed'.
          *
-         * @type {'get' | 'post' | 'event'}
-         * @default 'event'
+         * @type {'start' | 'end' | 'floating' | 'stacked' | 'fixed'}
+         * @default 'floating'
+         * @memberOf CrudFieldComponent
          */
-        this.method = 'event';
+        this.labelPlacement = 'floating';
         /**
-         * @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 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 {CrudOperations}
-         * @required
+         * @type {FieldUpdateMode}
+         * @default 'change'
+         * @memberOf CrudFieldComponent
          */
-        this.operation = OperationKeys.CREATE;
+        this.updateOn = 'change';
         /**
-         * @description Angular reactive FormGroup for form state management.
-         * @summary The FormGroup instance that manages all form controls, validation,
-         * and form state. This is the main interface for accessing form values and
-         * controlling form behavior. May be undefined for read-only operations.
+         * @description Indicates if this field supports multiple values.
+         * @summary When true, this field can handle multiple values, typically used in
+         * multi-select scenarios or when the field is part of a form array structure
+         * that allows multiple entries of the same field type.
          *
-         * @type {FormGroup | undefined}
+         * @type {boolean}
+         * @default false
+         * @memberOf CrudFieldComponent
          */
-        this.formGroup = undefined;
+        this.multiple = false;
         /**
-       * @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>}
-       */
-        this.submitEvent = new EventEmitter();
+         * @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}
+         */
+        this.uid = generateRandomValue(12);
         /**
-         * @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 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}
-         * @default Randomly generated 12-character string
+         * @type {StringOrBoolean}
+         * @default true
+         * @memberOf CrudFieldComponent
          */
-        this.allowClear = true;
-        //   /**
-        //  * @description Angular change detection service.
-        //  * @summary Injected service that provides manual control over change detection cycles.
-        //  * This is essential for ensuring that programmatic DOM changes (like setting accordion
-        //  * attributes) are properly reflected in the component's state and trigger appropriate
-        //  * view updates when modifications occur outside the normal Angular change detection flow.
-        //  *
-        //  * @protected
-        //  * @type {ChangeDetectorRef}
-        //  * @memberOf CrudFormComponent
-        //  */
-        // protected changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
-        // /**
-        //  * @description Angular Renderer2 service for safe DOM manipulation.
-        //  * @summary Injected service that provides a safe, platform-agnostic way to manipulate DOM elements.
-        //  * This service ensures proper handling of DOM operations across different platforms and environments,
-        //  * including server-side rendering and web workers.
-        //  *
-        //  * @protected
-        //  * @type {Renderer2}
-        //  * @memberOf CrudFormComponent
-        //  */
-        // protected renderer: Renderer2 = inject(Renderer2);
-        // /**
-        //  * @description Translation service for internationalization.
-        //  * @summary Injected service that provides translation capabilities for UI text.
-        //  * Used to translate button labels and validation messages based on the current locale.
-        //  *
-        //  * @protected
-        //  * @type {TranslateService}
-        //  * @memberOf CrudFormComponent
-        //  */
-        // protected translateService: TranslateService = inject(TranslateService);
-        this.activeFormGroupIndex = 0;
+        this.translatable = true;
     }
-    get activeFormGroup() {
-        return this.getFormArrayIndex(this.activeFormGroupIndex);
+    /**
+     * @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
+     */
+    async ngOnInit() {
+        this.options = await this.getOptions();
+        addIcons({ chevronDownOutline, chevronUpOutline });
+        if (Array.isArray(this.hidden) && !this.hidden.includes(this.operation)) {
+            this.hidden = false;
+        }
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
+            this.formGroup = undefined;
+        }
+        else {
+            if (!this.parentComponent && this.formGroup instanceof FormGroup || this.formGroup instanceof FormArray)
+                this.parentComponent = (this.formGroup.root || this.formControl.root);
+            if (this.multiple) {
+                this.formGroup = this.activeFormGroup;
+                if (!this.parentComponent)
+                    this.parentComponent = this.formGroup.parent;
+                this.formControl = this.formGroup.get(this.name);
+            }
+            if (this.type === HTML5InputTypes.CHECKBOX && Array.isArray(this.value)) {
+                this.setValue(this.value);
+            }
+        }
+    }
+    /**
+    * 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
+    */
+    async getOptions() {
+        if (!this.options)
+            return [];
+        if (this.options instanceof Function) {
+            const repo = getModelRepository(this.options().name);
+            this.options = await repo?.select().execute();
+        }
+        if (this.optionsMapper) {
+            if (this.optionsMapper instanceof Function || typeof this.optionsMapper === 'function') {
+                const mapper = this.optionsMapper;
+                this.options = this.options.map((option) => {
+                    return mapper(option);
+                });
+            }
+            else if (Object.keys(this.optionsMapper).length > 0) {
+                this.options = dataMapper(this.options, this.optionsMapper);
+            }
+        }
+        const options = this.options.map(async (option) => {
+            const text = await this.translate((!option.text.includes('options') ?
+                getLocaleContextByKey(`${this.label.toLowerCase().replace('label', 'options')}`, option.text)
+                : option.text));
+            return {
+                value: option.value,
+                text: text
+            };
+        });
+        return Promise.all(options);
     }
     /**
-    * @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>}
-    */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async ngOnInit(model) {
-        // dont call super.ngOnInit to model conflicts
-        if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
-            this.formGroup = undefined;
-        this.initialized = true;
+     * @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() {
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
+            super.afterViewInit();
+        }
+        else {
+            if (this.type === HTML5InputTypes.RADIO && !this.value)
+                this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
+        }
     }
     /**
      * @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() {
-        if (this.formGroup)
-            NgxDecafFormService.unregister(this.formGroup);
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
+            this.onDestroy();
     }
-    getFormArrayIndex(index) {
-        if (!(this.formGroup instanceof FormArray) && this.formGroup)
-            return this.formGroup;
-        const formGroup = this.formGroup.at(index);
-        if (formGroup) {
-            if (this.children.length) {
-                const children = [...this.children];
-                this.children = [];
-                this.changeDetectorRef.detectChanges();
-                this.children = [...children.map(child => {
-                        const props = (child.props || {});
-                        const name = props.name;
-                        const control = formGroup.get(name);
-                        child.props.value = control?.value;
-                        child.props.formGroup = formGroup;
-                        child.props.activeFormGroupIndex = index;
-                        child.props.formControl = control;
-                        return child;
-                    })];
-                this.changeDetectorRef.detectChanges();
-            }
+    toggleOptionSelection(val, event) {
+        const { checked } = event.detail;
+        let value = Array.isArray(this.formControl.value) ? this.formControl.value : [];
+        if (checked) {
+            if (!value.includes(val))
+                value = [...value, val];
         }
-        return formGroup || undefined;
+        else {
+            value = value.filter(v => v !== val);
+        }
+        this.setValue(value);
+        this.formControl.updateValueAndValidity();
+    }
+    isOptionChecked(value) {
+        if (!this.formControl.value || !Array.isArray(this.formControl.value))
+            return false;
+        return this.formControl.value.includes(value);
     }
     /**
-     * @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() {
-        if (![OperationKeys.DELETE, OperationKeys.READ].includes(this.operation) && this.allowClear)
-            return NgxDecafFormService.reset(this.formGroup);
-        this.location.back();
-    }
-    async handleSubmit(event, eventName, componentName) {
-        if (event) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-        }
-        if (!NgxDecafFormService.validateFields(this.formGroup))
-            return false;
-        const data = NgxDecafFormService.getFormData(this.formGroup);
-        this.submitEvent.emit({
-            data,
-            component: componentName || this.componentName,
-            name: eventName || this.action || EventConstants.SUBMIT,
-            handlers: this.handlers,
-        });
+    handleFieldsetUpdateGroupEvent(event) {
+        const { formGroup, index } = event.detail;
+        this.activeFormGroupIndex = index;
+        this.formGroup = formGroup;
+        this.formControl = this.formGroup.get(this.name);
+        this.value = this.formControl.value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.7", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", rendererId: "rendererId", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: NgxFormDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { parentFormId: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+};
+CrudFieldComponent = __decorate([
+    Dynamic()
+], CrudFieldComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: CrudFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        ReactiveFormsModule,
+                        TranslatePipe,
+                        IonInput,
+                        IonItem,
+                        IonCheckbox,
+                        IonRadioGroup,
+                        IonRadio,
+                        IonSelect,
+                        IonSelectOption,
+                        IonLabel,
+                        IonText,
+                        IonTextarea
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if(['checkbox', 'radio'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" color=\"primary\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if(formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if(type === 'textarea') {\n            <ion-textarea\n              [id]=\"name\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if(type === 'checkbox') {\n            @if(!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  [id]=\"name\"\n                  [mode]=\"mode\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"left\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      [id]=\"option.text\"\n                      [mode]=\"mode\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if(type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"mode\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if(type === 'select') {\n              <ion-select\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [mode]=\"mode\"\n                [hidden]=\"hidden\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [errorText]=\"getErrors(container)\"\n                [interface]=\"interface\" #component>\n                @if(options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    aa\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n\n              </ion-select>\n          }\n          @else {\n            <ion-input\n              [class.required]=\"required\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)!important}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read,.dcf-input-item.delete{padding:0;margin:0!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item.read ion-item,.dcf-input-item.delete ion-item{--min-height: 30px;margin-bottom:0}.dcf-input-item.read ion-item ion-label,.dcf-input-item.delete ion-item ion-label{margin-top:0!important;margin-bottom:.25rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;color:var(--dcf-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+        }], propDecorators: { operation: [{
+                type: Input,
+                args: [{ required: true }]
+            }], name: [{
+                type: Input,
+                args: [{ required: true }]
+            }], className: [{
                 type: Input
-            }], component: [{
-                type: ViewChild,
-                args: ['component', { static: false, read: ElementRef }]
-            }], updateOn: [{
+            }], path: [{
+                type: Input,
+                args: [{ required: true }]
+            }], childOf: [{
                 type: Input
-            }], target: [{
+            }], type: [{
+                type: Input,
+                args: [{ required: true }]
+            }], value: [{
                 type: Input
-            }], method: [{
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: [{ required: true }]
+            }], placeholder: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], pattern: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], equals: [{
+                type: Input
+            }], different: [{
+                type: Input
+            }], lessThan: [{
+                type: Input
+            }], lessThanOrEqual: [{
+                type: Input
+            }], greaterThan: [{
+                type: Input
+            }], greaterThanOrEqual: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], checked: [{
+                type: Input
+            }], justify: [{
+                type: Input
+            }], cancelText: [{
+                type: Input
+            }], interface: [{
                 type: Input
             }], options: [{
                 type: Input
-            }], action: [{
+            }], mode: [{
                 type: Input
-            }], operation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], handlers: [{
+            }], spellcheck: [{
+                type: Input
+            }], inputmode: [{
+                type: Input
+            }], autocomplete: [{
                 type: Input
+            }], fill: [{
+                type: Input
+            }], labelPlacement: [{
+                type: Input
+            }], updateOn: [{
+                type: Input
+            }], component: [{
+                type: ViewChild,
+                args: ['component', { read: ElementRef }]
             }], formGroup: [{
                 type: Input
-            }], rendererId: [{
+            }], formControl: [{
                 type: Input
-            }], submitEvent: [{
-                type: Output
-            }], allowClear: [{
+            }], multiple: [{
+                type: Input
+            }], uid: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], translatable: [{
                 type: Input
+            }], handleFieldsetUpdateGroupEvent: [{
+                type: HostListener,
+                args: ['window:fieldsetUpdateGroupEvent', ['$event']]
             }] } });
 
 /**
@@ -4784,7 +5226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  *   ModelRenderer->>ModelRenderer: Subscribe to events
  *   ModelRenderer-->>App: Emit events
  */
-class ModelRendererComponent extends NgxDecafComponentDirective {
+class ModelRendererComponent extends NgxComponentDirective {
     constructor() {
         super(...arguments);
         // /**
@@ -5032,7 +5474,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", breakpoint: "breakpoint", grid: "grid", match: "match" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["globals", "projectable", "rendererId"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.7", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", breakpoint: "breakpoint", grid: "grid", match: "match" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"((child.col === cols.length || row.cols.length === 1)? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["globals", "projectable", "rendererId"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "projectable", "model", "parentComponent", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -5040,7 +5482,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\"\n      [class]=\" !grid ? '' : 'dcf-grid ' + 'dcf-grid-' + gap\"\n      [class.dcf-grid-match]=\"match\"\n\n      >\n      @if(row?.title?.length) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"((child.col === cols.length || row.cols.length === 1)? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  [parentComponent]=\"parentComponent || child.parentComponent || child?.formGroup\"\n                  [children]=\"child?.children || []\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], breakpoint: [{
@@ -5072,7 +5514,7 @@ let CrudFormComponent = 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.
      *
@@ -5147,7 +5589,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-let EmptyStateComponent = class EmptyStateComponent extends NgxDecafComponentDirective {
+let EmptyStateComponent = class EmptyStateComponent extends NgxComponentDirective {
     /**
      * @description Creates an instance of EmptyStateComponent.
      * @summary Initializes a new EmptyStateComponent by calling the parent class constructor
@@ -5599,7 +6041,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
          * @memberOf FieldsetComponent
          */
         this.max = undefined;
-        addIcons({ alertCircleOutline, createOutline });
+        addIcons({ alertCircleOutline, trashOutline, createOutline });
     }
     /**
      * @description Component initialization lifecycle method.
@@ -5729,16 +6171,16 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             event.stopImmediatePropagation();
         const action = this.updatingItem ? OperationKeys.UPDATE : OperationKeys.CREATE;
         const formGroup = this.activeFormGroup;
-        const isValid = NgxDecafFormService.validateFields(formGroup);
+        const isValid = NgxFormService.validateFields(formGroup);
         // must pass correct pk here
-        const isUnique = NgxDecafFormService.isUniqueOnGroup(formGroup, action, action === OperationKeys.UPDATE ? this.updatingItem?.index : undefined);
+        const isUnique = NgxFormService.isUniqueOnGroup(formGroup, action, action === OperationKeys.UPDATE ? this.updatingItem?.index : undefined);
         const value = formGroup.value;
         if (isValid) {
             this.mapper = this.getMapper(value);
             if (isUnique) {
                 this.isUniqueError = this.updatingItem = undefined;
                 this.setValue();
-                NgxDecafFormService.addGroupToParent(formGroup.parent);
+                NgxFormService.addGroupToParent(formGroup.parent);
                 this.activeFormGroupIndex = formGroup.parent.length - 1;
                 this.getFormArrayIndex(this.activeFormGroupIndex);
             }
@@ -6024,7 +6466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * @implements {OnInit}
  * @memberOf SearchbarComponent
  */
-class SearchbarComponent extends NgxDecafComponentDirective {
+class SearchbarComponent extends NgxComponentDirective {
     /**
      * @description Creates an instance of SearchbarComponent.
      * @summary Initializes the SearchbarComponent with all necessary dependencies and configurations.
@@ -6535,7 +6977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  *
  * @memberOf ForAngularCommonModule
  */
-let FilterComponent = class FilterComponent extends NgxDecafComponentDirective {
+let FilterComponent = class FilterComponent extends NgxComponentDirective {
     /**
      * @description Constructor for FilterComponent.
      * @summary Initializes a new instance of the FilterComponent.
@@ -6709,7 +7151,7 @@ let FilterComponent = class FilterComponent extends NgxDecafComponentDirective {
          * @memberOf FilterComponent
          */
         this.searchEvent = new EventEmitter();
-        addIcons({ chevronDownOutline, chevronUpOutline });
+        addIcons({ chevronDownOutline, trashOutline, chevronUpOutline });
     }
     /**
      * @description Initializes the component after Angular first displays the data-bound properties.
@@ -7229,7 +7671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-class PaginationComponent extends NgxDecafComponentDirective {
+class PaginationComponent extends NgxComponentDirective {
     /**
      * @constructor
      * @description Initializes a new instance of the PaginationComponent.
@@ -7561,7 +8003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * @extends {NgxBaseComponentDirective}
  * @implements {OnInit}
  */
-let ListComponent = class ListComponent extends NgxDecafComponentDirective {
+let ListComponent = class ListComponent extends NgxComponentDirective {
     /**
      * @description Initializes a new instance of the ListComponent.
      * @summary Creates a new ListComponent and sets up the base component with the appropriate
@@ -8719,7 +9161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  *   C->>C: Process action
  *   C->>V: Update view or navigate
  */
-let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirective {
+let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
     /**
      * @description Creates an instance of ListItemComponent.
      * @summary Initializes a new ListItemComponent by calling the parent class constructor
@@ -8795,17 +9237,6 @@ let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirecti
          * @memberOf ListItemComponent
          */
         this.actionMenuOpen = false;
-        /**
-         * @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
-         */
-        this.navController = inject(NavController);
         addIcons(allIcons);
     }
     /**
@@ -8860,7 +9291,7 @@ let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirecti
      *   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)
@@ -8961,7 +9392,7 @@ let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirecti
     /**
      * @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.
      *
@@ -8972,7 +9403,7 @@ let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirecti
      * @mermaid
      * sequenceDiagram
      *   participant L as ListItemComponent
-     *   participant N as NavController
+     *   participant N as Router
      *   participant R as Router
      *
      *   L->>L: redirect(action, id)
@@ -8985,7 +9416,7 @@ let ListItemComponent = class ListItemComponent extends NgxDecafComponentDirecti
      * @memberOf ListItemComponent
      */
     async redirect(action, id) {
-        return await this.navController.navigateForward(`/${this.route}/${action}/${id || this.uid}`);
+        return await this.router.navigateByUrl(`/${this.route}/${action}/${id || this.uid}`);
     }
     /**
      * @description Presents the actions menu popover for the list item.
@@ -9292,7 +9723,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
      * @memberOf SteppedFormComponent
      */
     handleNext(lastPage = false) {
-        const isValid = NgxDecafFormService.validateFields(this.activeFormGroup);
+        const isValid = NgxFormService.validateFields(this.activeFormGroup);
         if (!lastPage) {
             if (isValid) {
                 this.activePage = this.activePage + 1;
@@ -9301,7 +9732,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxParentComponent
         }
         else {
             if (isValid) {
-                const data = Object.assign({}, ...Object.values(NgxDecafFormService.getFormData(this.formGroup)));
+                const data = Object.assign({}, ...Object.values(NgxFormService.getFormData(this.formGroup)));
                 this.submitEvent.emit({
                     data,
                     name: EventConstants.SUBMIT,
@@ -9556,5 +9987,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 { 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 };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map