@decaf-ts/for-angular 0.0.45 → 0.0.47

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

@@ -1,16 +1,17 @@
-import { UIKeys, HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
+import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, UIKeys, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
 import * as i1$1 from '@angular/common';
 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, NotFoundError } from '@decaf-ts/db-decorators';
+import { OperationKeys, InternalError } 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';
 import { TranslateModule, TranslatePipe, TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService } from '@ngx-translate/core';
 import { Logging, LoggedClass } from '@decaf-ts/logging';
-import { uses, Repository, OrderDirection, Condition } from '@decaf-ts/core';
+import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
+import { uses, Metadata, apply, metadata } from '@decaf-ts/decoration';
 import { faker } from '@faker-js/faker';
 import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { forkJoin, Subject, BehaviorSubject, fromEvent, merge, of, Observable, timer, firstValueFrom, debounceTime } from 'rxjs';
@@ -21,7 +22,6 @@ import { IonModal, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, Ion
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, addOutline, alertCircleOutline, arrowUpOutline, arrowDownOutline, searchOutline, closeOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
-import { apply, metadata } from '@decaf-ts/reflection';
 import { DomSanitizer, Title } from '@angular/platform-browser';
 import { MenuController } from '@ionic/angular';
 
@@ -50,7 +50,7 @@ import { MenuController } from '@ionic/angular';
  * @memberOf module:lib/engine/constants
  */
 const AngularEngineKeys = {
-    REFLECT: `${UIKeys.REFLECT}.angular.`,
+    REFLECT: `angular`,
     DYNAMIC: 'dynamic-component',
     ANNOTATIONS: '__annotations__',
     ECMP: 'ecmp',
@@ -63,9 +63,9 @@ const AngularEngineKeys = {
     RENDERED_ID: 'rendered-as-{0}',
     PARENT: '_parent',
     VALIDATION_PARENT_KEY: VALIDATION_PARENT_KEY,
-    FLAVOUR: "angular",
+    FLAVOUR: 'angular',
     LOADED: 'engineLoaded',
-    DARK_PALETTE_CLASS: 'dcf-palette-dark'
+    DARK_PALETTE_CLASS: 'dcf-palette-dark',
 };
 /**
  * @description Form validation state constants.
@@ -138,7 +138,6 @@ var LoggerLevels;
     LoggerLevels[LoggerLevels["ERROR"] = 4] = "ERROR";
     LoggerLevels[LoggerLevels["CRITICAL"] = 5] = "CRITICAL";
 })(LoggerLevels || (LoggerLevels = {}));
-;
 /**
  * @description Route direction constants.
  * @summary Defines the possible navigation directions in the application.
@@ -294,10 +293,10 @@ const DefaultListEmptyOptions = {
     showButton: false,
     icon: 'folder-open-outline',
     buttonText: 'locale.empty.button',
-    link: ''
+    link: '',
 };
 const DefaultModalOptions = {
-    component: "",
+    component: '',
     showBackdrop: true,
     backdropDismiss: false,
     animated: true,
@@ -310,12 +309,12 @@ const ActionRoles = {
     confirm: 'confirm',
     submit: 'submit',
     clear: 'clear',
-    back: 'back'
+    back: 'back',
 };
 const WindowColorSchemes = {
     light: 'light',
     dark: 'dark',
-    undefined: 'undefined'
+    undefined: 'undefined',
 };
 const ElementSizes = {
     xsmall: 'xsmall',
@@ -341,7 +340,7 @@ const LayoutGridGaps = {
     medium: 'medium',
     large: 'large',
     collapse: 'collapse',
-    none: ''
+    none: '',
 };
 const ListItemPositions = {
     uid: 'uid',
@@ -511,7 +510,10 @@ const LOCALE_ROOT_TOKEN = new InjectionToken('LOCALE_ROOT_TOKEN');
  * // Inject any arbitrary value
  * { provide: CPTKN, useValue: { key: 'value', data: [1, 2, 3] } }
  */
-const CPTKN = new InjectionToken('CPTKN', { providedIn: 'root', factory: () => '' });
+const CPTKN = new InjectionToken('CPTKN', {
+    providedIn: 'root',
+    factory: () => '',
+});
 /**
  * @description Injection token for i18n resource configuration.
  * @summary Used to provide configuration for internationalization resources, including
@@ -549,29 +551,34 @@ function provideDynamicComponents(...components) {
  * @memberOf module:lib/for-angular-common.module
  * @example
  * // Get repository by model class
- * const userRepo = getModelRepository(User);
+ * const userRepo = getModelAndRepository(User);
  *
  * // Get repository by model name
- * const productRepo = getModelRepository('Product');
+ * const productRepo = getModelAndRepository('Product');
  *
  * // Use repository for queries
  * const users = await userRepo.findAll();
  */
-function getModelRepository(model) {
+function getModelAndRepository(model) {
     try {
-        const modelName = (typeof model === Primitives.STRING ? model : model.constructor.name);
-        const constructor = Model.get(modelName.charAt(0).toUpperCase() + modelName.slice(1));
+        const modelName = (typeof model === Primitives.STRING
+            ? model
+            : model.constructor.name);
+        const constructor = Model.get((modelName.charAt(0).toUpperCase() + modelName.slice(1)));
         if (!constructor)
-            throw new InternalError(`Cannot find model for ${modelName}. was it registered with @model?`);
+            return undefined;
         const dbAdapterFlavour = getOnWindow(DB_ADAPTER_PROVIDER) || undefined;
         if (dbAdapterFlavour)
             uses(dbAdapterFlavour)(constructor);
-        const repo = Repository.forModel(constructor);
+        const repository = Repository.forModel(constructor);
         model = new constructor();
-        return repo;
+        if (!repository.pk)
+            return undefined;
+        return { repository, model };
     }
     catch (error) {
-        throw new InternalError(error?.message || error);
+        getLogger(getModelAndRepository).warn(error?.message || error);
+        return undefined;
     }
 }
 /**
@@ -614,7 +621,7 @@ function provideDbAdapter(adapterClass, options = {}, flavour) {
  * @description Base logger instance for the for-angular module.
  * @memberOf module:lib/for-angular-common.module
  */
-const log = Logging.for("for-angular");
+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.
@@ -640,7 +647,7 @@ const CommonModules = [
     FormsModule,
     ReactiveFormsModule,
     TranslateModule,
-    TranslatePipe
+    TranslatePipe,
 ];
 /**
  * @description Main Angular module for the Decaf framework.
@@ -2169,7 +2176,9 @@ class DecafFakerRepository {
     }
     get repository() {
         if (!this._repository) {
-            const modelName = typeof this.model === 'string' ? this.model : this.model.constructor.name;
+            const modelName = typeof this.model === 'string'
+                ? this.model
+                : this.model.constructor.name;
             const constructor = Model.get(modelName);
             if (!constructor)
                 throw new InternalError(`Cannot find model ${modelName}. was it registered with @model?`);
@@ -2191,11 +2200,13 @@ class DecafFakerRepository {
             this._repository = this.repository;
     }
     async generateData(pkValues, pk, pkType) {
-        const limit = pkValues ? Object.values(pkValues || {}).length - 1 : this.limit;
+        const limit = pkValues
+            ? Object.values(pkValues || {}).length - 1
+            : this.limit;
         if (!pk)
             pk = this._repository?.pk;
         if (!pkType)
-            pkType = Reflect.getMetadata("design:type", this.model, pk).name.toLowerCase();
+            pkType = Metadata.type(this.repository.class, pk).name.toLowerCase();
         const props = Object.keys(this.model).filter((k) => {
             if (pkType === Primitives.STRING)
                 return !['updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
@@ -2203,8 +2214,8 @@ class DecafFakerRepository {
         });
         const dataProps = {};
         for (const prop of props) {
-            const type = Reflect.getMetadata("design:type", this.model, prop);
-            switch ((type?.name || "").toLowerCase()) {
+            const type = Metadata.type(this.repository.class, prop).name.toLowerCase();
+            switch ((type?.name || '').toLowerCase()) {
                 case 'string':
                     dataProps[prop] = () => `${faker.lorem.word()} ${pk === prop ? ' - ' + faker.number.int({ min: 1, max: 200 }) : ''}`;
                     break;
@@ -2240,8 +2251,13 @@ class DecafFakerRepository {
             if (values.length > 0) {
                 const randomIndex = Math.floor(Math.random() * values.length);
                 const selected = values.splice(randomIndex, 1)[0];
-                const value = pkType === Primitives.STRING ? selected : pkType === Primitives.NUMBER ?
-                    parseToNumber(selected) : pkType === Array.name ? [selected] : selected;
+                const value = pkType === Primitives.STRING
+                    ? selected
+                    : pkType === Primitives.NUMBER
+                        ? parseToNumber(selected)
+                        : pkType === Array.name
+                            ? [selected]
+                            : selected;
                 item[pk] = value;
             }
             if (!iterated.includes(item[pk])) {
@@ -2258,7 +2274,8 @@ class DecafFakerRepository {
                 return false;
             uids.add(item[pk]);
             return true;
-        }).filter(Boolean);
+        })
+            .filter(Boolean);
     }
 }
 function getFakerData(limit = 100, data, model) {
@@ -2267,7 +2284,7 @@ function getFakerData(limit = 100, data, model) {
         const item = {};
         for (const [key, value] of Object.entries(data)) {
             const val = value();
-            item[key] = val.constructor === Date ? formatDate(val) : val;
+            item[key] = val?.constructor === Date ? formatDate(val) : val;
         }
         // if ((item as any)?.['code'])
         //   (item as any).code = `${index}`;
@@ -2408,7 +2425,8 @@ class NgxRenderingEngine extends RenderingEngine {
      * @memberOf module:lib/engine/NgxRenderingEngine
      */
     fromFieldDefinition(fieldDef, vcr, injector, tpl, registryFormId = Date.now().toString(36).toUpperCase(), createComponent = true, formGroup) {
-        const cmp = fieldDef?.['component'] || NgxRenderingEngine.components(fieldDef.tag);
+        const cmp = fieldDef?.['component'] ||
+            NgxRenderingEngine.components(fieldDef.tag);
         const component = cmp.constructor;
         const componentMetadata = reflectComponentType(component);
         if (!componentMetadata) {
@@ -2416,7 +2434,7 @@ class NgxRenderingEngine extends RenderingEngine {
         }
         const { inputs: possibleInputs } = componentMetadata;
         const inputs = { ...fieldDef.props };
-        const unmappedKeys = Object.keys(inputs).filter(input => {
+        const unmappedKeys = Object.keys(inputs).filter((input) => {
             const isMapped = possibleInputs.find(({ propName }) => propName === input);
             if (!isMapped)
                 delete inputs[input];
@@ -2432,13 +2450,17 @@ class NgxRenderingEngine extends RenderingEngine {
         // const hasFormRoot = Object.values(possibleInputs).some(({propName}) => propName ===  AngularEngineKeys.PARENT_FORM);
         // if (hasFormRoot && !inputs?.[AngularEngineKeys.PARENT_FORM] && formGroup)
         //   inputs[AngularEngineKeys.PARENT_FORM] = formGroup;
+        if (operation !== OperationKeys.CREATE && hiddenOn.includes(OperationKeys.CREATE)) {
+            fieldDef.props = { ...fieldDef.props, ...{ readonly: true, type: HTML5InputTypes.TEXT } };
+        }
         const result = {
             component,
             inputs,
             injector,
         };
         if (fieldDef.rendererId)
-            result.inputs['rendererId'] = fieldDef.rendererId;
+            result.inputs['rendererId'] =
+                fieldDef.rendererId;
         // process children
         // generating DOM
         // const projectable = NgxRenderingEngine._projectable;
@@ -2446,11 +2468,12 @@ class NgxRenderingEngine extends RenderingEngine {
         // const template = [];
         const hasChildren = Object.values(possibleInputs).some(({ propName }) => propName === AngularEngineKeys.CHILDREN);
         const hasModel = Object.values(possibleInputs).some(({ propName }) => propName === ModelKeys.MODEL);
-        const componentInputs = Object.assign(inputs, (hasModel ? { model: this._model } : {}), (hasChildren ? { children: fieldDef?.['children'] || [] } : {}));
+        const componentInputs = Object.assign(inputs, hasModel ? { model: this._model } : {}, hasChildren ? { children: fieldDef?.['children'] || [] } : {});
         if (createComponent) {
             vcr.clear();
             const componentInstance = NgxRenderingEngine.createComponent(component, componentInputs, injector, componentMetadata, vcr, []);
-            result.component = NgxRenderingEngine._instance = componentInstance;
+            result.component = NgxRenderingEngine._instance =
+                componentInstance;
         }
         if (fieldDef.children?.length) {
             if (!NgxRenderingEngine._parentProps && inputs?.['pages']) {
@@ -2458,8 +2481,9 @@ class NgxRenderingEngine extends RenderingEngine {
                 //  NgxRenderingEngine._projectable = false;
             }
             result.children = fieldDef.children.map((child) => {
-                // const hiddenOn = (child?.props?.hidden || []) as CrudOperations[];
-                // moved to ui decorators
+                const readonly = operation === OperationKeys.UPDATE && (child?.props?.hidden || []).includes(OperationKeys.CREATE);
+                // const hiddenOn = (child?.props?.hidden || []) as string[];
+                // // moved to ui decorators
                 // if (child?.children?.length) {
                 //   child.children = child.children.filter(c => {
                 //     const hiddenOn = c?.props?.hidden || [];
@@ -2468,7 +2492,15 @@ class NgxRenderingEngine extends RenderingEngine {
                 //   })
                 // }
                 // if (!hiddenOn?.length || !(hiddenOn as CrudOperations[]).includes(operation as CrudOperations))
-                NgxFormService.addControlFromProps(registryFormId, child.props, { ...inputs, ...NgxRenderingEngine._parentProps || {} });
+                if (!readonly) {
+                    NgxFormService.addControlFromProps(registryFormId, child.props, {
+                        ...inputs,
+                        ...(NgxRenderingEngine._parentProps || {}),
+                    });
+                }
+                else {
+                    child.props = { ...child.props, ...{ readonly: true } };
+                }
                 return this.fromFieldDefinition(child, vcr, injector, tpl, registryFormId, false, formGroup);
             });
         }
@@ -2504,24 +2536,29 @@ class NgxRenderingEngine extends RenderingEngine {
     }
     static createHostComponent(component, props = {}, injector) {
         if (!injector)
-            injector = NgxRenderingEngine._injector || Injector.create({ providers: [], parent: Injector.NULL });
+            injector =
+                NgxRenderingEngine._injector ||
+                    Injector.create({ providers: [], parent: Injector.NULL });
         const envInjector = createEnvironmentInjector([], injector);
         let cmp = {};
         runInInjectionContext(envInjector, () => {
             const host = document.createElement('div');
-            component = typeof component === Primitives.STRING ? NgxRenderingEngine.components(component) : component;
+            component =
+                typeof component === Primitives.STRING
+                    ? NgxRenderingEngine.components(component)
+                    : component;
             if (!host)
                 throw new Error('Cant create host element for component');
             cmp = createComponent(component, {
                 environmentInjector: envInjector,
-                hostElement: host
+                hostElement: host,
             });
             const metadata = reflectComponentType(component);
             if (!metadata)
                 throw new InternalError(`Metadata for component ${component} not found.`);
             const { inputs: possibleInputs } = metadata;
             const inputs = { ...props };
-            const unmappedKeys = Object.keys(inputs).filter(input => {
+            const unmappedKeys = Object.keys(inputs).filter((input) => {
                 const isMapped = possibleInputs.find(({ propName }) => propName === input);
                 if (!isMapped)
                     delete inputs[input];
@@ -2607,7 +2644,8 @@ class NgxRenderingEngine extends RenderingEngine {
             const props = fieldDef.props;
             if (!NgxRenderingEngine._operation)
                 NgxRenderingEngine._operation = props?.operation || undefined;
-            const isArray = (props?.pages && props?.pages >= 1 || props?.multiple === true);
+            const isArray = (props?.pages && props?.pages >= 1) ||
+                props?.multiple === true;
             const formGroup = NgxFormService.createForm(formId, isArray);
             result = this.fromFieldDefinition(fieldDef, vcr, injector, tpl, formId, true, formGroup);
             if (result.component)
@@ -2671,20 +2709,6 @@ class NgxRenderingEngine extends RenderingEngine {
             throw new InternalError(`No Component registered under ${selector}`);
         return this._components[selector];
     }
-    /**
-     * @description Generates a key for reflection metadata storage.
-     * @summary This static method generates a key for reflection metadata by prefixing the input key
-     * with the Angular engine's reflection prefix. This is used for storing and retrieving
-     * metadata in a namespaced way to avoid conflicts with other metadata.
-     * @param {string} key - The base key to prefix
-     * @return {string} The prefixed key for reflection metadata
-     * @static
-     * @override
-     * @memberOf module:lib/engine/NgxRenderingEngine
-     */
-    static key(key) {
-        return `${AngularEngineKeys.REFLECT}${key}`;
-    }
     /**
      * @description Sets input properties on a component instance.
      * @summary This static utility method sets input properties on a component instance
@@ -2720,7 +2744,7 @@ class NgxRenderingEngine extends RenderingEngine {
      */
     static setInputs(component, inputs, metadata) {
         function parseInputValue(component, input) {
-            Object.keys(input).forEach(key => {
+            Object.keys(input).forEach((key) => {
                 const value = input[key];
                 if (typeof value === 'object' && !!value)
                     return parseInputValue(component, value);
@@ -3463,7 +3487,7 @@ catch (e) {
  * @implements {OnChanges}
  * @memberOf module:lib/engine/NgxComponentDirective
  */
-class NgxComponentDirective extends LoggedClass {
+class NgxComponentDirective extends DecafComponent {
     /**
      * @description Constructor for NgxComponentDirective.
      * @summary Initializes the directive by setting up the component name, locale root,
@@ -3506,7 +3530,7 @@ class NgxComponentDirective extends LoggedClass {
          * @summary Defines how fields from the data model should be mapped to properties used by the component.
          * This allows for flexible data binding between the model and the component's display logic. Can be
          * provided as a static object mapping or as a function for dynamic mapping transformations.
-         * @type {Record<string, string> | FunctionLike}
+         * @type {Record<string, string> | FunctionLike | Record<string, FunctionLike>}
          * @default {}
          * @memberOf module:lib/engine/NgxComponentDirective
          */
@@ -3587,7 +3611,7 @@ class NgxComponentDirective extends LoggedClass {
          * @type {NgxMediaService}
          * @memberOf module:lib/engine/NgxComponentDirective
          */
-        this.mediaService = new NgxMediaService();
+        this.mediaService = inject(NgxMediaService);
         /**
          * @description Angular Renderer2 service for platform-agnostic DOM manipulation.
          * @summary Injected service that provides a safe, platform-agnostic way to manipulate DOM elements.
@@ -3635,7 +3659,7 @@ class NgxComponentDirective extends LoggedClass {
          * and other properties needed to render list items correctly. The tag property
          * identifies which component should be used to render each item in a list.
          * Additional properties can be included to customize the rendering behavior.
-         * @type {Record<string, unknown>}
+         * @type {Record<string, FieldDefinition>}
          * @default {tag: ""}
          * @memberOf module:lib/engine/NgxComponentDirective
          */
@@ -3662,16 +3686,6 @@ class NgxComponentDirective extends LoggedClass {
          * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.route = "";
-        /**
-         * @description Initialization status flag for the component.
-         * @summary Tracks whether the component has completed its initialization process.
-         * This flag is used to prevent duplicate initialization and to determine if
-         * certain operations that require initialization can be performed.
-         * @type {boolean}
-         * @default false
-         * @memberOf module:lib/engine/NgxComponentDirective
-         */
-        this.initialized = false;
         /**
          * @description Controls whether borders are displayed around the component.
          * @summary Boolean flag that determines if the component should be visually outlined with borders.
@@ -3681,22 +3695,14 @@ class NgxComponentDirective extends LoggedClass {
          * @default false
          */
         this.borders = false;
-        /**
-         * @description Reference to CRUD operation constants for template usage.
-         * @summary Exposes the OperationKeys enum to the component template, enabling
-         * conditional rendering and behavior based on operation types. This protected
-         * readonly property ensures that template logic can access operation constants
-         * while maintaining encapsulation and preventing accidental modification.
-         * @protected
-         * @readonly
-         * @memberOf module:lib/engine/NgxComponentDirective
-         */
-        this.OperationKeys = OperationKeys;
         /**
          * @description Angular Location service.
-         * @summary Injected service that provides access to the browser's URL and history.
-         * This service is used for interacting with the browser's history API, allowing
-         * for back navigation and URL manipulation outside of Angular's router.
+         * @summary Injected service that provides direct access to the browser's URL and history.
+         * Unlike the Router, Location allows for low-level manipulation of the browser's history stack
+         * and URL path, such as programmatically navigating back or forward, or updating the URL without
+         * triggering a route change. This is useful for scenarios where you need to interact with the
+         * browser history or URL outside of Angular's routing system, such as closing modals, handling
+         * popstate events, or supporting custom navigation logic.
          *
          * @private
          * @type {Location}
@@ -3715,13 +3721,14 @@ class NgxComponentDirective extends LoggedClass {
          * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.isModalChild = false;
+        this.handlers = {};
+        this.events = {};
         this.componentName = componentName || "NgxComponentDirective";
         this.localeRoot = localeRoot;
         if (!this.localeRoot && this.componentName)
             this.localeRoot = this.componentName;
         if (this.localeRoot)
             this.getLocale(this.localeRoot);
-        this.logger = this.log;
         this.uid = `${this.componentName}-${generateRandomValue(8)}`;
     }
     /**
@@ -3758,7 +3765,7 @@ class NgxComponentDirective extends LoggedClass {
     get repository() {
         try {
             if (!this._repository) {
-                this._repository = getModelRepository(this.model);
+                this._repository = getModelAndRepository(this.model)?.repository;
                 if (this.model && !this.pk)
                     this.pk =
                         this._repository.pk || 'id';
@@ -3779,7 +3786,7 @@ class NgxComponentDirective extends LoggedClass {
      * @return {void}
      * @memberOf module:lib/engine/NgxComponentDirective
      */
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         if (changes[BaseComponentProps.MODEL]) {
             const { currentValue } = changes[BaseComponentProps.MODEL];
             if (currentValue)
@@ -3788,6 +3795,26 @@ class NgxComponentDirective extends LoggedClass {
             if (!this.initialized)
                 this.initialized = true;
         }
+        if (changes[UIKeys.EVENTS]) {
+            const { currentValue, previousValue } = changes[UIKeys.EVENTS];
+            if (currentValue && typeof currentValue !== previousValue) {
+                if (!this._repository)
+                    this._repository = this.repository;
+                for (const key in currentValue) {
+                    const event = currentValue[key]();
+                    if (event && typeof event === 'function') {
+                        const clazz = new event();
+                        this.events[key] = clazz[key].bind(this);
+                        if (event[key] instanceof Promise) {
+                            await clazz[key].bind(this)();
+                        }
+                        else {
+                            clazz[key].bind(this)();
+                        }
+                    }
+                }
+            }
+        }
         if (changes[BaseComponentProps.LOCALE_ROOT] || changes[BaseComponentProps.COMPONENT_NAME])
             this.locale = this.localeContext;
         if (this.enableDarkMode)
@@ -3811,21 +3838,6 @@ class NgxComponentDirective extends LoggedClass {
         return await firstValueFrom(this.translateService.get(phrase, (params || {})));
         ;
     }
-    /**
-     * @description Initializes the component asynchronously with custom logic.
-     * @summary Abstract initialization method that can be overridden by child components to perform
-     * custom initialization logic. By default, it simply sets the initialized flag to true.
-     * Child components can extend this method to load data, configure settings, or perform
-     * other setup operations required before the component is fully functional.
-     * @protected
-     * @param {...unknown[]} args - Variable number of arguments that can be used by child implementations
-     * @return {Promise<void>} A promise that resolves when initialization is complete
-     * @memberOf module:lib/engine/NgxComponentDirective
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    async initialize(...args) {
-        this.initialized = true;
-    }
     checkDarkMode() {
         this.mediaService.isDarkMode().subscribe(isDark => {
             this.isDarkMode = isDark;
@@ -4093,7 +4105,7 @@ class NgxComponentDirective extends LoggedClass {
         return this.router.navigateByUrl(page);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", 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.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", 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", borders: "borders", isModalChild: "isModalChild" }, 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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", 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", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events" }, 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.9", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
@@ -4149,6 +4161,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], isModalChild: [{
                 type: Input
+            }], handlers: [{
+                type: Input
+            }], events: [{
+                type: Input
             }] } });
 
 class NgxRenderableComponentDirective extends NgxComponentDirective {
@@ -4687,9 +4703,9 @@ class NgxFormFieldDirective extends NgxComponentDirective {
      * @return {void}
      * @public
      */
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         if (!this.initialized)
-            super.ngOnChanges(changes);
+            await super.ngOnChanges(changes);
         if (changes['activeFormGroupIndex'] && this.multiple &&
             !changes['activeFormGroupIndex'].isFirstChange() && changes['activeFormGroupIndex'].currentValue !== this.activeFormGroupIndex) {
             this.activeFormGroupIndex = changes['activeFormGroupIndex'].currentValue;
@@ -4811,8 +4827,39 @@ function Dynamic() {
         if (!metadata)
             throw new InternalError(`Could not find Component metadata. @Dynamic decorator must come above @Component`);
         NgxRenderingEngine.registerComponent(metadata.selector, original);
-    }, metadata(NgxRenderingEngine.key(AngularEngineKeys.DYNAMIC), true));
+    }, metadata(Metadata.key(AngularEngineKeys.REFLECT, AngularEngineKeys.DYNAMIC), true));
 }
+//  export interface UICustomEvents {
+//   render: () => HandlerLike;
+//   init: () => FunctionLike;
+//  }
+// export function uion(event: string, handler: FunctionLike) {
+//   return (target: any, propertyKey?: any) => {
+//     const metadata = {
+//       [event]: handler,
+//     };
+//     propMetadata(getUIAttributeKey(propertyKey, 'handlers'), metadata)(
+//       target,
+//       propertyKey
+//     );
+//   };
+//   // return (model: unknown, property: unknown) => {
+//   //   const meta: UIHandlerMetadata = {
+//   //     [event]: handler,
+//   //   };
+//   //   return metadata(
+//   //     getUIAttributeKey(property as string, 'on'),
+//   //     meta
+//   //   )(model, property);
+//   // };
+// }
+// export function uionrender(handler: FunctionLike) {
+//   return uion("render", handler);
+// }
+// @uion(op, handler)
+// @uionrender(handler){
+// return uion("redenr", handler)
+// }
 
 /**
  * @module module:lib/components/model-renderer/model-renderer.component
@@ -4881,7 +4928,7 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
      * @description Lifecycle hook that is called when data-bound properties of a directive change
      * @param {SimpleChanges} changes - Object containing changes
      */
-    ngOnChanges(changes) {
+    async ngOnChanges(changes) {
         if (changes[BaseComponentProps.MODEL]) {
             const { currentValue } = changes[BaseComponentProps.MODEL];
             this.refresh(currentValue);
@@ -4920,12 +4967,12 @@ class NgxParentComponentDirective extends NgxComponentDirective {
     constructor() {
         super(...arguments);
         /**
-       * @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}
-       */
+         * @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.page = 1;
         /**
          * @description Unique identifier for the current record.
@@ -5404,6 +5451,15 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
          * @memberOf CrudFieldComponent
          */
         this.hidden = false;
+        /**
+         * @description Whether the field is read-only.
+         * @summary When true, the field will be rendered in a read-only state. Unlike disabled fields,
+         * read-only fields are still focusable but cannot be modified by the user.
+         *
+         * @type {boolean}
+         * @memberOf CrudFieldComponent
+         */
+        this.readonly = false;
         /**
          * @description Interface style for select inputs.
          * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
@@ -5561,8 +5617,11 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
                     this.options = this.options();
                 }
                 else {
-                    const repo = getModelRepository(this.options?.['name']);
-                    this.options = await repo?.select().execute();
+                    const repo = getModelAndRepository(this.options?.['name']);
+                    if (repo) {
+                        const { repository } = repo;
+                        this.options = await repository.select().execute();
+                    }
                 }
             }
         }
@@ -5607,11 +5666,10 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
      * This ensures proper initialization of read-only fields that don't require
      * form functionality but still need view setup.
      *
-     * @returns {void}
+     * @returns {Promise<void>}
      * @memberOf CrudFieldComponent
      */
-    ngAfterViewInit() {
-        super.afterViewInit();
+    async ngAfterViewInit() {
         if (this.type === HTML5InputTypes.RADIO && !this.value)
             this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
     }
@@ -5665,7 +5723,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         this.value = this.formControl.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" 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\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\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                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\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                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\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                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\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            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\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: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!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::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}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:500!important;line-height:1.1rem;z-index:9999}.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;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" 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          [class.dcf-field-required]=\"required\"\n           [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\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                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\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                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\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                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\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            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\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: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!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::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}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:500!important;line-height:1.1rem;z-index:9999}.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;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::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()
@@ -5685,7 +5743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         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>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" 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\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\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                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\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                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\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                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\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            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\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: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!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::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}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:500!important;line-height:1.1rem;z-index:9999}.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;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], 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>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" 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          [class.dcf-field-required]=\"required\"\n           [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\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                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\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                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\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                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\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            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\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: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!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::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}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:500!important;line-height:1.1rem;z-index:9999}.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;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5934,7 +5992,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
             this.formGroup = undefined;
         this.initialized = true;
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         if (this.isModalChild)
             this.changeDetectorRef.detectChanges();
     }
@@ -6108,10 +6166,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * @param {string} title - Primary title text displayed in the card header.
  * @param {('small'|'default'|'blank')} body - Body size preset controlling padding/typography; defaults to 'default'.
  * @param {string} subtitle - Optional subtitle rendered under the title.
- * @param {import('@ionic/core').Color} color - Ionic color token applied to the card header/title.
+ * @param {Color} color - Ionic color token applied to the card header/title.
  * @param {boolean} separator - When true, renders a divider between header and body.
  * @param {boolean} borders - Controls whether borders are rendered; defaults to true.
- * @param {string|import('@angular/platform-browser').SafeHtml} inlineContent - Inline HTML/SafeHtml to render inside the body.
+ * @param {string|SafeHtml} inlineContent - Inline HTML/SafeHtml to render inside the body.
  * @param {('top'|'bottom')} inlineContentPosition - Where to render `inlineContent` relative to the body; defaults to 'bottom'.
  * @return {void}
  * @class CardComponent
@@ -6173,7 +6231,7 @@ let CardComponent = class CardComponent extends NgxComponentDirective {
         /**
          * @description Ionic color token applied to the card.
          * @summary When provided, the color token (for example 'primary' or 'tertiary') is applied to title/header elements where supported.
-         * @type {import('@ionic/core').Color}
+         * @type {Color}
          * @default ''
          */
         this.color = '';
@@ -6215,7 +6273,6 @@ let CardComponent = class CardComponent extends NgxComponentDirective {
      * @return {void}
      */
     ngOnInit() {
-        console.log(this.componentName, this.borders);
         this.mediaService.isDarkMode().subscribe(isDark => {
             this.isDarkMode = isDark;
             this.mediaService.toggleClass([this.component], AngularEngineKeys.DARK_PALETTE_CLASS, this.isDarkMode);
@@ -6589,12 +6646,10 @@ let IconComponent = class IconComponent {
             this.type = 'image';
             this.isSvg = this.name.endsWith('.svg');
         }
-        this.initialized = true;
-    }
-    ngAfterViewInit() {
         this.mediaService.isDarkMode().subscribe(isDark => {
             this.isDarkMode = isDark;
         });
+        this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            >\n              ></span\n            >\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        } @else {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon ion-icon:not([size]){font-size:1.35rem!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
@@ -7021,7 +7076,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @memberOf FieldsetComponent
      */
     constructor() {
-        super("FieldsetComponent");
+        super('FieldsetComponent');
         /**
          * @description The parent component identifier for hierarchical fieldset relationships.
          * @summary Specifies the parent component name that this fieldset belongs to in a hierarchical
@@ -7196,8 +7251,10 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                 }
                 if (!this.formGroup && this.parentForm instanceof FormArray)
                     this.formGroup = this.parentForm;
-                if (!this.formGroup && this.children[0]?.['formGroup'] instanceof FormGroup)
-                    this.formGroup = this.children[0]?.['formGroup'].parent;
+                if (!this.formGroup &&
+                    this.children[0]?.['formGroup'] instanceof FormGroup)
+                    this.formGroup = this.children[0]?.['formGroup']
+                        .parent;
                 if (this.formGroup && !(this.formGroup instanceof FormArray))
                     this.formGroup = this.formGroup?.parent;
             }
@@ -7216,36 +7273,36 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         this.initialized = true;
     }
     /**
-    * @description Initializes the component state after view and child components are rendered.
-    * @summary This lifecycle hook implements intelligent auto-state management based on the current
-    * CRUD operation. For READ and DELETE operations, the fieldset automatically opens to provide
-    * immediate access to information, while CREATE and UPDATE operations keep it closed to maintain
-    * a clean initial interface. The method directly manipulates the DOM to ensure proper accordion
-    * synchronization and triggers change detection to reflect the programmatic state changes.
-    *
-    * @mermaid
-    * sequenceDiagram
-    *   participant A as Angular Lifecycle
-    *   participant F as FieldsetComponent
-    *   participant D as DOM
-    *   participant C as ChangeDetector
-    *
-    *   A->>F: ngAfterViewInit()
-    *   alt operation is READ or DELETE
-    *     F->>F: Set isOpen = true
-    *     F->>D: Query ion-accordion-group element
-    *     alt accordion element exists
-    *       F->>D: Set value attribute to 'open'
-    *     end
-    *   end
-    *   F->>C: detectChanges()
-    *   C->>F: Update view with new state
-    *
-    * @returns {void}
-    * @memberOf FieldsetComponent
-    */
-    ngAfterViewInit() {
-        super.ngAfterViewInit();
+     * @description Initializes the component state after view and child components are rendered.
+     * @summary This lifecycle hook implements intelligent auto-state management based on the current
+     * CRUD operation. For READ and DELETE operations, the fieldset automatically opens to provide
+     * immediate access to information, while CREATE and UPDATE operations keep it closed to maintain
+     * a clean initial interface. The method directly manipulates the DOM to ensure proper accordion
+     * synchronization and triggers change detection to reflect the programmatic state changes.
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant F as FieldsetComponent
+     *   participant D as DOM
+     *   participant C as ChangeDetector
+     *
+     *   A->>F: ngAfterViewInit()
+     *   alt operation is READ or DELETE
+     *     F->>F: Set isOpen = true
+     *     F->>D: Query ion-accordion-group element
+     *     alt accordion element exists
+     *       F->>D: Set value attribute to 'open'
+     *     end
+     *   end
+     *   F->>C: detectChanges()
+     *   C->>F: Update view with new state
+     *
+     * @returns {Promise<void>}
+     * @memberOf FieldsetComponent
+     */
+    async ngAfterViewInit() {
+        await super.ngAfterViewInit();
         // if (!this.collapsable)
         //   this.isOpen = true;
         // if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE) {
@@ -7326,7 +7383,9 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         const value = formGroup.value;
         const hasSomeValue = this.hasValue(value);
         if (hasSomeValue) {
-            const action = this.updatingItem ? OperationKeys.UPDATE : OperationKeys.CREATE;
+            const action = this.updatingItem
+                ? OperationKeys.UPDATE
+                : OperationKeys.CREATE;
             const isValid = NgxFormService.validateFields(formGroup);
             // must pass correct pk here
             const isUnique = NgxFormService.isUniqueOnGroup(formGroup, action, action === OperationKeys.UPDATE ? this.updatingItem?.index : undefined);
@@ -7336,12 +7395,15 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                     this.isUniqueError = this.updatingItem = undefined;
                     this.setValue();
                     NgxFormService.addGroupToParent(formGroup.parent);
-                    this.activeFormGroupIndex = formGroup.parent.length - 1;
+                    this.activeFormGroupIndex =
+                        formGroup.parent.length - 1;
                     this.activePage = this.getActivePage();
                 }
                 else {
-                    this.isUniqueError = typeof value === ReservedModels.OBJECT ?
-                        value?.[this.pk] || undefined : value;
+                    this.isUniqueError =
+                        typeof value === ReservedModels.OBJECT.name.toLowerCase()
+                            ? value?.[this.pk] || undefined
+                            : value;
                 }
             }
         }
@@ -7387,7 +7449,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         const formArray = this.formGroup;
         if (formArray.length === 1) {
             const currentGroup = formArray.at(0);
-            Object.keys(currentGroup?.controls).forEach(controlName => {
+            Object.keys(currentGroup?.controls).forEach((controlName) => {
                 currentGroup.get(controlName)?.setValue(null);
             });
         }
@@ -7430,7 +7492,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             // reorder visual data
             const itemToMove = items.splice(fromIndex, 1)[0];
             items.splice(toIndex, 0, itemToMove);
-            items.forEach((item, index) => item['index'] = index + 1);
+            items.forEach((item, index) => (item['index'] = index + 1));
             // reorder FormArray controls
             const controlToMove = formArray.at(fromIndex);
             formArray.removeAt(fromIndex);
@@ -7514,10 +7576,13 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         this.accordionComponent.value = 'open';
         this.changeDetectorRef.detectChanges();
         this.timerSubscription = timer(10).subscribe(() => {
-            this.children = this.children.map(child => {
+            this.children = this.children.map((child) => {
                 if (!child.props)
                     child.props = {};
-                child.props = Object.assign(child.props, { activeFormGroup: this.activeFormGroupIndex, multiple: this.multiple });
+                child.props = Object.assign(child.props, {
+                    activeFormGroup: this.activeFormGroupIndex,
+                    multiple: this.multiple,
+                });
                 return child;
             });
         });
@@ -7538,11 +7603,11 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
     setValue() {
         this.value = this.formGroup.controls.map(({ value }) => value);
         this.items = this.value
-            .filter(v => (v[this.pk] || "").trim().length)
+            .filter((v) => (v[this.pk] || '').trim().length)
             .map((v, index) => {
             return {
                 ...itemMapper(Object.assign({}, v), this.mapper),
-                index: index + 1
+                index: index + 1,
             };
         });
         this.updatingItem = undefined;
@@ -7563,9 +7628,10 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             this.pk = Object.keys(value)[0];
         if (!Object.keys(this.mapper).length)
             this.mapper['title'] = this.pk;
-        this.mapper['index'] = "index";
+        this.mapper['index'] = 'index';
         for (const key in value) {
-            if (Object.keys(this.mapper).length >= 2 || Object.keys(this.mapper).length === Object.keys(value).length)
+            if (Object.keys(this.mapper).length >= 2 ||
+                Object.keys(this.mapper).length === Object.keys(value).length)
                 break;
             if (!this.mapper['title']) {
                 this.mapper['title'] = key;
@@ -7598,7 +7664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonReorderGroup,
                         IonButton,
                         IonIcon,
-                        LayoutComponent
+                        LayoutComponent,
                     ], template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.dcf-not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable || required) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion\n        value=\"open\"\n        [class.dcf-disabled]=\"!activePage\"\n        [class.dcf-empty]=\"!items?.length\"\n      >\n        @if (collapsable && !required) {\n          <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                    <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n         @if (activePage) {\n            <div>\n              <ngx-decaf-layout\n                [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                [flexMode]=\"props.flexMode ?? false\"\n                [match]=\"false\"\n                [gap]=\"'small'\"\n                [children]=\"activePage || []\"\n                [parentForm]=\"formGroup || parentForm\"\n                [rows]=\"rows\"\n                [cols]=\"cols\"\n                [borders]=\"activePage?.borders  ?? false\"\n                [breakpoint]=\"breakpoint ?? 'large'\"\n                [hidden]=\"items.length === max && !updatingItem\"\n              />\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n\n      @if (multiple && items.length) {\n      <ion-list class=\"dcf-fields-list\">\n        <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n          @for(item of items; track item.index) {\n            <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n              @if(ordenable) {\n                @if (items?.length > 1 && !updatingItem) {\n                  <ion-reorder slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                  </ion-reorder>\n                } @else {\n                  <div slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                  </div>\n                }\n              }\n\n              <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                @if (item.description?.length > 0) {\n                  <br />\n                  <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                }\n              </ion-label>\n\n              @if(editable) {\n                @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                    <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                  </ion-button>\n                }\n              }\n\n\n              @if (!updatingItem) {\n                <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                  <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                </ion-button>\n              }\n            </ion-item>\n          }\n        </ion-reorder-group>\n      </ion-list>\n    }\n\n    @if (multiple && ['create', 'update'].includes(operation)) {\n      @if (isUniqueError) {\n        <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n          <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n            <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n              <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n            </div>\n            <div class=\"dcf-width-expand\">\n              <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n            </div>\n          </div>\n        </div>\n      }\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion:not(.dcf-empty){background:var(--dcf-card-background)!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
@@ -9936,7 +10002,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             // (self.data as ListItem[]) = [];
             if (!this.searchValue?.length && !this.searchValue) {
                 if (!this.source && !this.data?.length) {
-                    this.logger.info('No data and source passed to infinite list');
+                    this.log.info('No data and source passed to infinite list');
                     return [];
                 }
                 if (this.source instanceof Function) {
@@ -10017,7 +10083,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
             }
             catch (error) {
-                this.logger.error(error?.message || `Unable to find ${this.model} on registry. Return empty array from component`);
+                this.log.error(error?.message || `Unable to find ${this.model} on registry. Return empty array from component`);
             }
         }
         if (data?.length) {
@@ -10127,11 +10193,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!Array.isArray(result) && ('page' in result && 'total' in result)) {
             const paginator = result;
             try {
-                result = paginator.page.length > 0 ? await paginator.page(this.page) : [];
+                result = await paginator.page(this.page);
                 this.getMoreData(paginator.total);
             }
             catch (error) {
-                this.logger.info(error?.message || 'Unable to get page from paginator. Return empty array from component');
+                this.log.info(error?.message || 'Unable to get page from paginator. Return empty array from component');
                 result = [];
             }
         }
@@ -10491,7 +10557,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
             this.className += ` action`;
         this.windowWidth = getWindowWidth();
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         this.checkDarkMode();
     }
     /**
@@ -11391,7 +11457,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
                     return xmlDoc.documentElement.innerHTML;
                 }
                 catch (error) {
-                    this.logger.error(error?.message);
+                    this.log.error(error?.message);
                     return undefined;
                 }
             };
@@ -11956,14 +12022,21 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @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();
+        try {
+            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();
+            }
+        }
+        catch (error) {
+            this.log.warn(`Error getting repository for model: ${this.modelName}. ${error.message}`);
+            this._repository = undefined;
+            // throw new InternalError((error as Error)?.message || (error as string));
         }
         return this._repository;
     }
@@ -11993,21 +12066,13 @@ class NgxModelPageDirective extends NgxPageDirective {
     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;
-            }
-        }
-        catch (error) {
-            if (error instanceof NotFoundError) {
-                this.errorMessage = error.message;
-            }
-            this.logger.error(error);
+        this._repository = this.repository;
+        switch (this.operation) {
+            case OperationKeys.READ:
+            case OperationKeys.UPDATE:
+            case OperationKeys.DELETE:
+                this.model = await this.handleGet(uid || this.modelId, this._repository, this.modelName);
+                break;
         }
     }
     /**
@@ -12062,7 +12127,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             };
         }
         catch (error) {
-            this.logger.error(error);
+            this.log.error(error);
             return {
                 ...event,
                 success: false,
@@ -12080,17 +12145,49 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @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 handleGet(uid) {
+    async handleGet(uid, repository, modelName) {
         if (!uid) {
-            this.logger.info('No key passed to model page read operation, backing to last page');
+            this.log.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;
-        if (!this.pk)
-            this.pk = this.repository.pk;
-        const result = await this._repository.read(([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase()) ? Number(uid) : uid));
-        return result ?? undefined;
+        const getRepository = async (modelName, parent, model) => {
+            if (this._repository)
+                return this._repository;
+            const constructor = Model.get(modelName);
+            if (constructor) {
+                const properties = Metadata.properties(constructor);
+                if (!model)
+                    model = {};
+                for (const prop of properties) {
+                    const type = Metadata.type(constructor, prop).name;
+                    const context = getModelAndRepository(type);
+                    if (!context)
+                        return getRepository(type, prop, model);
+                    const { repository } = context;
+                    if (modelName === this.modelName) {
+                        const data = await this.handleGet(uid, repository, modelName);
+                        this.model = Model.build({ [prop]: data }, modelName);
+                    }
+                    else {
+                        model[prop] = Model.build({}, type);
+                    }
+                }
+                this.model[parent] = Model.build(model, modelName);
+            }
+        };
+        repository = (repository || await getRepository(modelName));
+        if (!repository)
+            return this.model;
+        const type = Metadata.type(repository.class, repository.pk).name;
+        try {
+            const result = await repository.read(([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase()) ? Number(uid) : uid));
+            return result;
+        }
+        catch (error) {
+            this.log.for(this.handleGet).info(`Error getting model instance with id ${uid}: ${error.message}`);
+            return undefined;
+        }
     }
     /**
      * @description Parses and transforms form data for repository operations.
@@ -12156,5 +12253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxLightBoxModal, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelAndRepository, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxLightBoxModal, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map