@decaf-ts/for-angular 0.0.46 → 0.0.48

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, DecafEventHandler } 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, NotFoundError } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule, FormArray, AbstractControl, Validators } from '@angular/forms';
 import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
 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 { Logging } from '@decaf-ts/logging';
+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,35 @@ 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;
+        const pk = Model.pk(repository.class);
+        if (!pk)
+            return undefined;
+        return { repository, model, pk };
     }
     catch (error) {
-        throw new InternalError(error?.message || error);
+        getLogger(getModelAndRepository).warn(error?.message || error);
+        return undefined;
     }
 }
 /**
@@ -596,13 +604,12 @@ function getModelRepository(model) {
  *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
  * ]
  */
-function provideDbAdapter(adapterClass, options = {}, flavour) {
-    const adapter = new adapterClass(options);
+function provideDbAdapter(clazz, options = {}, flavour) {
+    const adapter = new clazz(options);
     if (flavour)
         flavour = adapter.flavour;
-    // Log and expose adapter flavour globally
     getLogger(provideDbAdapter).info(`Using ${adapter.constructor.name} ${flavour} as Db Provider`);
-    getWindow()[DB_ADAPTER_PROVIDER] = flavour;
+    setOnWindow(DB_ADAPTER_PROVIDER, flavour);
     return {
         provide: DB_ADAPTER_PROVIDER_TOKEN,
         useValue: adapter,
@@ -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.
@@ -1416,6 +1423,7 @@ class NgxFormService {
                 partFormGroup[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] = {
                     childOf: childOf || '',
                     isMultiple: isMultiple,
+                    required: parentProps?.required ?? false,
                     name: part,
                     pk,
                     [ModelKeys.MODEL]: {},
@@ -1963,13 +1971,27 @@ class NgxFormService {
         if (control instanceof FormArray) {
             const totalGroups = control.length;
             const hasValid = control.controls.some(control => control.valid);
-            if (totalGroups > 1 && hasValid) {
+            const parentProps = control[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] || {};
+            const childControl = control.at(0);
+            if (totalGroups === 1) {
+                const parent = childControl.parent;
+                if (!parentProps.required) {
+                    parent.setErrors(null);
+                    parent.updateValueAndValidity({ emitEvent: true });
+                    childControl.disable();
+                }
+                else {
+                    this.validateFields(childControl);
+                }
+            }
+            else if (totalGroups > 1 && hasValid) {
                 for (let i = control.length - 1; i >= 0; i--) {
                     const childControl = control.at(i);
                     // disable no valid groups on array
                     if (!childControl.valid) {
-                        childControl.parent.setErrors(null);
-                        childControl.parent.updateValueAndValidity({ emitEvent: true });
+                        const parent = childControl.parent;
+                        parent.setErrors(null);
+                        parent.updateValueAndValidity({ emitEvent: true });
                         childControl.disable();
                     }
                     else {
@@ -2169,7 +2191,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?`);
@@ -2190,23 +2214,23 @@ class DecafFakerRepository {
         if (!this._repository)
             this._repository = this.repository;
     }
-    async generateData(pkValues, pk, pkType) {
-        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();
+    async generateData(values, key, keyType) {
+        const limit = values ? Object.values(values || {}).length : this.limit;
+        if (!key)
+            key = Model.pk(this.repository.class);
+        if (!keyType)
+            keyType = Metadata.type(this.repository.class, key).name.toLowerCase();
         const props = Object.keys(this.model).filter((k) => {
-            if (pkType === Primitives.STRING)
+            if (keyType === Primitives.STRING)
                 return !['updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
-            return ![pk, 'updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
+            return ![key, 'updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
         });
         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);
+            switch (type.name.toLowerCase()) {
                 case 'string':
-                    dataProps[prop] = () => `${faker.lorem.word()} ${pk === prop ? ' - ' + faker.number.int({ min: 1, max: 200 }) : ''}`;
+                    dataProps[prop] = () => `${faker.lorem.word()} ${key === prop ? ' - ' + faker.number.int({ min: 1, max: 200 }) : ''}`;
                     break;
                 case 'step':
                     dataProps[prop] = () => faker.lorem.word();
@@ -2232,20 +2256,25 @@ class DecafFakerRepository {
             }
         }
         const data = getFakerData(limit, dataProps, typeof this.model === 'string' ? this.model : this.model?.constructor.name);
-        if (!pkValues)
+        if (!values)
             return data;
-        const values = Object.values(pkValues);
+        const _values = Object.values(values);
         const iterated = [];
         function getPkValue(item) {
-            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;
-                item[pk] = value;
+            if (_values.length > 0) {
+                const randomIndex = Math.floor(Math.random() * _values.length);
+                const selected = _values.splice(randomIndex, 1)[0];
+                const value = keyType === Primitives.STRING
+                    ? selected
+                    : keyType === Primitives.NUMBER
+                        ? parseToNumber(selected)
+                        : keyType === Array.name
+                            ? [selected]
+                            : selected;
+                item[key] = value;
             }
-            if (!iterated.includes(item[pk])) {
-                iterated.push(item[pk]);
+            if (!iterated.includes(item[key])) {
+                iterated.push(item[key]);
                 return item;
             }
             return undefined;
@@ -2254,11 +2283,12 @@ class DecafFakerRepository {
         return data
             .map((d) => getPkValue(d))
             .filter((item) => {
-            if (!item || uids.has(item[pk]) || !item[pk] || item[pk] === undefined)
+            if (!item || uids.has(item[key]) || !item[key] || item[key] === undefined)
                 return false;
-            uids.add(item[pk]);
+            uids.add(item[key]);
             return true;
-        }).filter(Boolean);
+        })
+            .filter(Boolean);
     }
 }
 function getFakerData(limit = 100, data, model) {
@@ -2267,12 +2297,14 @@ 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}`;
         // item.id = index;
         // item.createdAt = faker.date.past({ refDate: '2025-01-01' });
+        if (item['productCode'])
+            item['productCode'] = `${index}`;
         index = index + 1;
         return (!model ? item : Model.build(item, model));
     });
@@ -2408,7 +2440,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 +2449,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 +2465,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 +2483,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 +2496,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 +2507,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 +2551,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 +2659,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 +2724,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 +2759,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);
@@ -2786,6 +2825,10 @@ var operations = {
 	"delete": {
 		success: "Successfully deleted item with {0} {1}.",
 		error: "Error deleting item with {0} {1}."
+	},
+	multiple: {
+		success: "Successfully processed all operations.",
+		error: "Error processing operations."
 	}
 };
 var component = {
@@ -2795,7 +2838,8 @@ var component = {
 		cancel: "Cancel",
 		not_unique: "The value entered already exists. Value {0}",
 		max_items: "You can create up to {0} items.",
-		max_items_reached: "Maximum of {0} items reached."
+		max_items_reached: "Maximum of {0} items reached.",
+		empty: "No items found."
 	},
 	list: {
 		pagination: "Showing page <span class=\"text-bold\">{0} of {1}</span>",
@@ -3463,7 +3507,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 +3550,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
          */
@@ -3528,9 +3572,9 @@ class NgxComponentDirective extends LoggedClass {
          * The operation affects form validation, field availability, and the specific repository
          * method called during data submission.
          *
-         * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+         * @type {OperationKeys}
          * @default OperationKeys.READ
-         *  @memberOf ModelPage
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.operation = OperationKeys.READ;
         /**
@@ -3587,7 +3631,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.
@@ -3618,6 +3662,16 @@ class NgxComponentDirective extends LoggedClass {
          * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.listenEvent = new EventEmitter();
+        /**
+         * @description Event emitter for custom component events.
+         * @summary Emits custom events that occur within child components or the component itself.
+         * This allows parent components to listen for and respond to user interactions or
+         * state changes. Events are passed up the component hierarchy to enable coordinated
+         * behavior across the application.
+         * @type {EventEmitter<IBaseCustomEvent>}
+         * @memberOf module:lib/engine/NgxComponentDirective
+         */
+        this.refreshEvent = new EventEmitter();
         /**
          * @description Angular Router instance for programmatic navigation.
          * @summary Injected Router service used for programmatic navigation between routes
@@ -3635,7 +3689,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 +3716,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 +3725,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 +3751,24 @@ class NgxComponentDirective extends LoggedClass {
          * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.isModalChild = false;
-        this.componentName = componentName || "NgxComponentDirective";
+        this.handlers = {};
+        this.events = {};
+        /**
+         * @description Indicates whether a refresh operation is in progress.
+         * @summary When true, the component is currently fetching new data. This is used
+         * to control loading indicators and prevent duplicate refresh operations from
+         * being triggered simultaneously.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.refreshing = false;
+        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)}`;
     }
     /**
@@ -3735,6 +3782,11 @@ class NgxComponentDirective extends LoggedClass {
     ngOnDestroy() {
         this.mediaService.destroy();
     }
+    //TODO: Pass to ui decoretators
+    async refresh(...args) {
+        this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
+        this.refreshEvent.emit(true);
+    }
     /**
      * @description Getter for the current locale context identifier.
      * @summary Returns the current locale identifier by calling the getLocale method.
@@ -3758,10 +3810,9 @@ 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';
+                    this.pk = Model.pk(this._repository?.class);
             }
         }
         catch (error) {
@@ -3769,6 +3820,9 @@ class NgxComponentDirective extends LoggedClass {
         }
         return this._repository;
     }
+    set repository(repository) {
+        this._repository = repository;
+    }
     /**
      * @description Angular lifecycle hook for handling input property changes.
      * @summary Responds to changes in component input properties, specifically monitoring changes
@@ -3779,7 +3833,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 +3842,44 @@ class NgxComponentDirective extends LoggedClass {
             if (!this.initialized)
                 this.initialized = true;
         }
+        // if (changes[UIKeys.HANDLERS]) {
+        //   const { currentValue, previousValue } = changes[UIKeys.HANDLERS];
+        //   if (currentValue && typeof currentValue !== previousValue) {
+        //     for(const key in currentValue) {
+        //       const event = currentValue[key]();
+        //       if (event && typeof event === 'function') {
+        //         const clazz = new event();
+        //         this.handlers[key] = clazz[key].bind(this);
+        //         console.log(this.handlers);
+        //       }
+        //     }
+        //   }
+        // }
+        if (changes[UIKeys.EVENTS]) {
+            const { currentValue, previousValue } = changes[UIKeys.EVENTS];
+            if (currentValue && currentValue !== previousValue) {
+                if (!this._repository)
+                    this._repository = this.repository;
+                for (const key in currentValue) {
+                    const event = currentValue[key]();
+                    if (event && typeof event === 'function') {
+                        try {
+                            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)();
+                            }
+                        }
+                        catch (error) {
+                            this.log.for(this.ngOnChanges).warn(`Error occurred while processing event "${key}": ${error?.message || error}`);
+                        }
+                    }
+                }
+            }
+        }
         if (changes[BaseComponentProps.LOCALE_ROOT] || changes[BaseComponentProps.COMPONENT_NAME])
             this.locale = this.localeContext;
         if (this.enableDarkMode)
@@ -3811,23 +3903,8 @@ 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.mediaService.isDarkMode().subscribe((isDark) => {
             this.isDarkMode = isDark;
             this.mediaService.toggleClass([this.component], AngularEngineKeys.DARK_PALETTE_CLASS, this.isDarkMode);
         });
@@ -4004,7 +4081,7 @@ class NgxComponentDirective extends LoggedClass {
      *   end
      * @memberOf module:lib/engine/NgxComponentDirective
      */
-    async handleEvent(event) {
+    async handleEvent(event, repository) {
         let name = "";
         const log = this.log.for(this.handleEvent);
         if (event instanceof CustomEvent) {
@@ -4019,8 +4096,11 @@ class NgxComponentDirective extends LoggedClass {
             if (!handlers[name])
                 return log.debug(`No handler found for event ${name}`);
             try {
-                const clazz = new handlers[name](this.router);
-                const result = clazz.handle(event);
+                const clazz = new handlers[name]();
+                const handler = clazz.handle.bind(this);
+                //const clazz = new event();
+                // this.events[key] = clazz[key].bind(this);
+                const result = handler(event);
                 return (result instanceof Promise) ?
                     await result : result;
             }
@@ -4030,6 +4110,10 @@ class NgxComponentDirective extends LoggedClass {
         }
         this.listenEvent.emit(event);
     }
+    // passed for ui decorators
+    // async submit(...args: unknown[]): Promise<any> {
+    //   this.log.for(this.submit).info(`submit for ${this.componentName} with ${JSON.stringify(args)}`);
+    // }
     /**
      * @description Determines if a specific operation is allowed in the current context.
      * @summary This method checks if an operation is included in the list of available
@@ -4056,7 +4140,9 @@ class NgxComponentDirective extends LoggedClass {
     isAllowed(operation) {
         if (!this.operations)
             return false;
-        return this.operations.includes(operation) && (this.operation !== OperationKeys.CREATE && ((this.operation || "").toLowerCase() !== operation || !this.operation));
+        return (this.operations.includes(operation) &&
+            this.operation !== OperationKeys.CREATE &&
+            ((this.operation || '').toLowerCase() !== operation || !this.operation));
     }
     /**
      * @description Navigates to a different operation for the current model.
@@ -4093,7 +4179,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", value: "value", 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", refreshEvent: "refreshEvent" }, 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,
@@ -4121,6 +4207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], modelId: [{
                 type: Input
+            }], value: [{
+                type: Input
             }], pk: [{
                 type: Input
             }], mapper: [{
@@ -4137,6 +4225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], listenEvent: [{
                 type: Output
+            }], refreshEvent: [{
+                type: Output
             }], locale: [{
                 type: Input
             }], item: [{
@@ -4149,6 +4239,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 +4781,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 +4905,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
@@ -4866,7 +4991,7 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
      * @description Refreshes the rendered model
      * @param {string | M} model - The model to be rendered
      */
-    refresh(model) {
+    async refresh(model) {
         model =
             typeof model === 'string'
                 ? Model.build({}, model)
@@ -4881,7 +5006,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 +5045,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.
@@ -5047,7 +5172,7 @@ class NgxParentComponentDirective extends NgxComponentDirective {
         const content = this.children[page];
         this.activePage = undefined;
         this.preloadCards = [...new Array(1)];
-        this.timerSubscription = timer(1).subscribe(() => this.activePage = { ...this.children[page] });
+        this.timerSubscription = timer(25).subscribe(() => this.activePage = { ...this.children[page] });
         this.activeIndex = page;
         if (content)
             return content;
@@ -5404,6 +5529,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 +5695,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 +5744,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 +5801,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 +5821,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 +6070,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
             this.formGroup = undefined;
         this.initialized = true;
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         if (this.isModalChild)
             this.changeDetectorRef.detectChanges();
     }
@@ -6002,7 +6138,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
             return NgxFormService.reset(this.formGroup);
         this.location.back();
     }
-    async handleSubmit(event, eventName, componentName) {
+    async submit(event, eventName, componentName) {
         if (event) {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -6108,10 +6244,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 +6309,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 +6351,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);
@@ -6473,7 +6608,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -6481,7 +6616,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], grid: [{
@@ -6530,7 +6665,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { 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"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { 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"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -6538,7 +6673,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxSvgDirective {
@@ -6589,12 +6724,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 +7154,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
@@ -7175,6 +7308,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @memberOf FieldsetComponent
      */
     async ngOnInit() {
+        console.log(this.title);
         await super.ngOnInit(this.model);
         if (this.max && this.max === 1)
             this.multiple = false;
@@ -7196,8 +7330,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 +7352,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) {
@@ -7266,6 +7402,29 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         //   this.formGroup = (this.formGroup as FormGroup)
         // this.changeDetectorRef.detectChanges();
     }
+    async refresh() {
+        this.refreshing = true;
+        this.changeDetectorRef.detectChanges();
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
+            // if(!this.multiple) {
+            //   this.required = this.collapsable = false;
+            // }
+            this.items = [...this.value.map((v) => {
+                    return this.children.map((child) => {
+                        const { props, tag } = child;
+                        return {
+                            tag,
+                            props: {
+                                ...props,
+                                value: v[props.name] || ""
+                            }
+                        };
+                    });
+                })];
+        }
+        this.refreshing = false;
+        this.changeDetectorRef.detectChanges();
+    }
     /**
      * @description Handles removal of the fieldset with slide animation.
      * @summary Initiates the removal process for the fieldset with a smooth slide-up animation.
@@ -7326,7 +7485,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 +7497,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 +7551,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 +7594,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,14 +7678,17 @@ 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;
             });
         });
-        if (this.multiple)
+        if (this.multiple && [OperationKeys.CREATE, OperationKeys.UPDATE].includes(this.operation))
             this.getFormArrayIndex(this.activeFormGroupIndex);
         return this.children;
     }
@@ -7538,11 +7705,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 +7730,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;
@@ -7577,7 +7745,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { 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"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, 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 (['create', 'update'].includes(operation) || !multiple) {\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            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\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 (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\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            @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\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}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 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;background:transparent!important;--background: transparent !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"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { 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"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -7598,8 +7766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonReorderGroup,
                         IonButton,
                         IonIcon,
-                        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"] }]
+                        LayoutComponent,
+                        IonSpinner
+                    ], 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 (['create', 'update'].includes(operation) || !multiple) {\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            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\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 (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\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            @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\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}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 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;background:transparent!important;--background: transparent !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,
                 args: ['accordionComponent', { static: false }]
@@ -8172,7 +8341,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     constructor() {
-        super("FilterComponent");
+        super('FilterComponent');
         /**
          * @description Available field indexes for filtering operations.
          * @summary Defines the list of field names that users can filter by. These represent
@@ -8195,7 +8364,14 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
          * @default []
          * @memberOf FilterComponent
          */
-        this.conditions = ['Equal', 'Contains', 'Not Contains', 'Greater Than', 'Less Than', 'Not Equal'];
+        this.conditions = [
+            'Equal',
+            'Contains',
+            'Not Contains',
+            'Greater Than',
+            'Less Than',
+            'Not Equal',
+        ];
         /**
          * @description Available sorting options for the filtered data.
          * @summary Defines the list of field names that can be used for sorting the filtered results.
@@ -8328,7 +8504,15 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
          * @memberOf FilterComponent
          */
         this.searchEvent = new EventEmitter();
-        addIcons({ chevronDownOutline, trashOutline, closeOutline, searchOutline, arrowDownOutline, arrowUpOutline, chevronUpOutline });
+        addIcons({
+            chevronDownOutline,
+            trashOutline,
+            closeOutline,
+            searchOutline,
+            arrowDownOutline,
+            arrowUpOutline,
+            chevronUpOutline,
+        });
     }
     /**
      * @description Initializes the component after Angular first displays the data-bound properties.
@@ -8377,11 +8561,13 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      */
     getIndexes() {
         if (this.model)
-            this.indexes = Object.keys(Repository.indexes(this.model) || {});
+            this.indexes = Object.keys(Model.indexes(this.model) || {});
         if (!this.disableSort) {
             this.sortBy = [...this.sortBy, ...this.indexes];
-            if (this.repository)
-                this.sortValue = this.repository.pk || this.sortValue;
+            if (this.repository) {
+                const pk = Model.pk(this.repository.class);
+                this.sortValue = pk || this.sortValue;
+            }
         }
     }
     /**
@@ -8513,13 +8699,13 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      *
      * @memberOf FilterComponent
      */
-    addFilter(value, event) {
+    async addFilter(value, event) {
         value = value.trim();
         if (event instanceof KeyboardEvent && !value) {
             this.submit();
         }
         else {
-            if ((value && (!(event instanceof KeyboardEvent)) || this.step === 3)) {
+            if ((value && !(event instanceof KeyboardEvent)) || this.step === 3) {
                 const filter = this.lastFilter;
                 switch (this.step) {
                     case 1:
@@ -8547,7 +8733,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
                     this.filterValue[this.filterValue.length - 1] = filter;
                     this.lastFilter = {};
                     if (!this.multiple)
-                        return this.submit();
+                        return await this.submit();
                 }
                 this.step++;
                 this.value = '';
@@ -8581,7 +8767,8 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     allowClear(option) {
-        return this.indexes.indexOf(option) === -1 && this.conditions.indexOf(option) === -1;
+        return (this.indexes.indexOf(option) === -1 &&
+            this.conditions.indexOf(option) === -1);
     }
     /**
      * @description Removes a complete filter from the collection based on filter value.
@@ -8610,11 +8797,11 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         function cleanString(filter) {
             return filter
                 .toLowerCase() // convert all characters to lowercase
-                .normalize("NFD") // separate accent marks from characters
-                .replace(/[\u0300-\u036f]/g, "") // remove accent marks
-                .replace(/\s+/g, ""); // remove all whitespace
+                .normalize('NFD') // separate accent marks from characters
+                .replace(/[\u0300-\u036f]/g, '') // remove accent marks
+                .replace(/\s+/g, ''); // remove all whitespace
         }
-        this.value = "";
+        this.value = '';
         this.filterValue = this.filterValue.filter((item) => item?.['value'] && cleanString(item?.['value']) !== cleanString(filter));
         if (this.filterValue.length === 0) {
             this.step = 1;
@@ -8659,16 +8846,16 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @summary Emits the current filter array to parent components when filters are ready
      * to be applied. Only emits if there are active filters. Clears options after submission.
      *
-     * @returns {void}
+     * @returns {Promise<void>}
      * @memberOf FilterComponent
      */
-    submit() {
+    async submit() {
         this.filterEvent.emit({
             query: this.filterValue.length > 0 ? this.filterValue : undefined,
             sort: {
                 value: this.sortValue,
-                direction: this.sortDirection
-            }
+                direction: this.sortDirection,
+            },
         });
         if (this.filterValue.length === 0)
             this.options = [];
@@ -8683,7 +8870,9 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     handleSortDirectionChange() {
-        const direction = this.sortDirection === OrderDirection.ASC ? OrderDirection.DSC : OrderDirection.ASC;
+        const direction = this.sortDirection === OrderDirection.ASC
+            ? OrderDirection.DSC
+            : OrderDirection.ASC;
         if (direction !== this.sortDirection) {
             this.sortDirection = direction;
             this.submit();
@@ -8745,7 +8934,9 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         }
         const options = optionsElement.querySelectorAll('.dcf-item');
         for (const option of options) {
-            const isActive = option.textContent?.toLowerCase().includes(value.toLowerCase());
+            const isActive = option.textContent
+                ?.toLowerCase()
+                .includes(value.toLowerCase());
             if (isActive) {
                 option.classList.add('dcf-filtering-item');
                 break;
@@ -8784,7 +8975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonSelect,
                         IonSelectOption,
                         IonIcon,
-                        SearchbarComponent
+                        SearchbarComponent,
                     ], standalone: true, host: { '[attr.id]': 'uid' }, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon tabindex=\"0\" name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon aria-hidden=\"true\" name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon aria-hidden=\"true\" name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [":host{position:relative;z-index:1000!important}:host *{z-index:1000!important}.dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
@@ -9203,7 +9394,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     constructor() {
-        super("ListComponent");
+        super('ListComponent');
         /**
          * @description The display mode for the list component.
          * @summary Determines how the list data is loaded and displayed. Options include:
@@ -9279,7 +9470,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "full"
          * @memberOf ListComponent
          */
-        this.lines = "full";
+        this.lines = 'full';
         /**
          * @description Controls whether the list has inset styling.
          * @summary When set to true, the list will have inset styling with rounded corners
@@ -9300,7 +9491,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "15%"
          * @memberOf ListComponent
          */
-        this.scrollThreshold = "15%";
+        this.scrollThreshold = '15%';
         /**
          * @description The position where new items are added during infinite scrolling.
          * @summary Determines whether new items are added to the top or bottom of the list
@@ -9310,7 +9501,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "bottom"
          * @memberOf ListComponent
          */
-        this.scrollPosition = "bottom";
+        this.scrollPosition = 'bottom';
         /**
          * @description Controls the visibility of the pull-to-refresh feature.
          * @summary When set to true, enables the pull-to-refresh functionality that allows
@@ -9339,7 +9530,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "circular"
          * @memberOf ListComponent
          */
-        this.loadingSpinner = "circular";
+        this.loadingSpinner = 'circular';
         // /**
         //  * @description Query parameters for data fetching.
         //  * @summary Specifies additional query parameters to use when fetching data from
@@ -9408,17 +9599,6 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.page = 1;
-        /**
-         * @description Indicates whether a refresh operation is in progress.
-         * @summary When true, the component is currently fetching new data. This is used
-         * to control loading indicators and prevent duplicate refresh operations from
-         * being triggered simultaneously.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberOf ListComponent
-         */
-        this.refreshing = false;
         /**
          * @description Array used for rendering skeleton loading placeholders.
          * @summary Contains placeholder items that are displayed during data loading.
@@ -9440,15 +9620,6 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.lastPage = 1;
-        /**
-         * @description Event emitter for refresh operations.
-         * @summary Emits an event when the list data is refreshed, either through pull-to-refresh
-         * or programmatic refresh. The event includes the refreshed data and component information.
-         *
-         * @type {EventEmitter<IBaseCustomEvent>}
-         * @memberOf ListComponent
-         */
-        this.refreshEvent = new EventEmitter();
         /**
          * @description Event emitter for item click interactions.
          * @summary Emits an event when a list item is clicked. The event includes the data
@@ -9509,9 +9680,15 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async ngOnInit() {
-        this.observer = { refresh: async (...args) => this.observeRepository(...args) };
-        this.clickItemSubject.pipe(debounceTime(100)).subscribe(event => this.clickEventEmit(event));
-        this.observerSubjet.pipe(debounceTime(100)).subscribe(args => this.handleObserveEvent(args[0], args[1], args[2]));
+        this.observer = {
+            refresh: async (...args) => this.observeRepository(...args),
+        };
+        this.clickItemSubject
+            .pipe(debounceTime(100))
+            .subscribe((event) => this.clickEventEmit(event));
+        this.observerSubjet
+            .pipe(debounceTime(100))
+            .subscribe((args) => this.handleObserveEvent(args[0], args[1], args[2]));
         this.limit = Number(this.limit);
         this.start = Number(this.start);
         this.enableFilter = stringToBoolean(this.enableFilter);
@@ -9619,7 +9796,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     async handleCreate(uid) {
         const result = await this._repository?.read(uid);
         const item = this.mapResults([result])[0];
-        this.items = this.data = [item, ...this.items || []];
+        this.items = this.data = [item, ...(this.items || [])];
     }
     /**
      * @description Handles the update event from the repository.
@@ -9631,7 +9808,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async handleUpdate(uid) {
-        const item = this.itemMapper(await this._repository?.read(uid) || {}, this.mapper);
+        const item = this.itemMapper((await this._repository?.read(uid)) || {}, this.mapper);
         this.data = [];
         for (const key in this.items) {
             const child = this.items[key];
@@ -9658,7 +9835,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     handleDelete(uid, pk) {
         if (!pk)
             pk = this.pk;
-        this.items = this.data?.filter((item) => item['uid'] !== uid) || [];
+        this.items =
+            this.data?.filter((item) => item['uid'] !== uid) || [];
     }
     /**
      * @description Handles click events from list items.
@@ -9762,7 +9940,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         this.refreshEvent.emit({
             name: ComponentEventNames.REFRESH,
             data: data || [],
-            component: this.componentName
+            component: this.componentName,
         });
     }
     /**
@@ -9838,10 +10016,10 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         //  }
         this.refreshing = true;
         const start = this.page > 1 ? (this.page - 1) * this.limit : this.start;
-        const limit = (this.page * (this.limit > 12 ? 12 : this.limit));
-        this.data = !this.model ?
-            await this.getFromRequest(!!event, start, limit)
-            : await this.getFromModel(!!event);
+        const limit = this.page * (this.limit > 12 ? 12 : this.limit);
+        this.data = !this.model
+            ? await this.getFromRequest(!!event, start, limit)
+            : (await this.getFromModel(!!event));
         if (this.type === ListComponentsTypes.INFINITE) {
             if (this.page === this.pages) {
                 if (event?.target)
@@ -9852,7 +10030,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this.page += 1;
                 this.refreshing = false;
                 setTimeout(() => {
-                    if (event?.target && event?.type !== ComponentEventNames.BACK_BUTTON_NAVIGATION)
+                    if (event?.target &&
+                        event?.type !==
+                            ComponentEventNames.BACK_BUTTON_NAVIGATION)
                         event.target.complete();
                 }, 200);
             }
@@ -9864,16 +10044,16 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         }
     }
     /**
-   * @description Handles pagination events from the pagination component.
-   * @summary Processes pagination events by updating the current page number and
-   * refreshing the list data to display the selected page. This method is called
-   * when a user interacts with the pagination controls to navigate between pages.
-   *
-   * @param {IPaginationCustomEvent} event - The pagination event containing page information
-   * @returns {void}
-   *
-   * @memberOf ListComponent
-   */
+     * @description Handles pagination events from the pagination component.
+     * @summary Processes pagination events by updating the current page number and
+     * refreshing the list data to display the selected page. This method is called
+     * when a user interacts with the pagination controls to navigate between pages.
+     *
+     * @param {IPaginationCustomEvent} event - The pagination event containing page information
+     * @returns {void}
+     *
+     * @memberOf ListComponent
+     */
     handlePaginate(event) {
         const { page } = event.data;
         this.page = page;
@@ -9911,8 +10091,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     parseSearchResults(results, search) {
-        const filtered = results.filter((item) => Object.values(item).some(v => {
-            if (v.toString().toLowerCase().includes(search?.toLowerCase()))
+        const filtered = results.filter((item) => Object.values(item).some((v) => {
+            if (v
+                .toString()
+                .toLowerCase()
+                .includes(search?.toLowerCase()))
                 return v;
         }));
         return filtered;
@@ -9931,25 +10114,31 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async getFromRequest(force = false, start, limit) {
-        let data = [...this.data || []];
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+        let data = [...(this.data || [])];
+        if (!this.data?.length ||
+            force ||
+            this.searchValue?.length ||
+            !!this.searchValue) {
             // (self.data as ListItem[]) = [];
-            if (!this.searchValue?.length && !this.searchValue) {
+            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) {
-                    data = await this.source();
+                    data = (await this.source());
                     if (!Array.isArray(data))
                         data = data?.['response']?.['data'] || data?.['results'] || [];
                 }
                 if (!data?.length && this.data?.length)
                     data = this.data;
-                this.data = [...await this.parseResult(data)];
+                this.data = [...(await this.parseResult(data))];
                 if (this.data?.length)
-                    this.items = this.type === ListComponentsTypes.INFINITE ?
-                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...data.slice(start, limit)];
+                    this.items =
+                        this.type === ListComponentsTypes.INFINITE
+                            ? (this.items || []).concat([...this.data.slice(start, limit)])
+                            : [...data.slice(start, limit)];
             }
             else {
                 const data = await this.parseResult(this.parseSearchResults(this.data, this.searchValue));
@@ -9959,8 +10148,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
         }
         else {
-            const data = [...await this.parseResult(this.data)];
-            this.items = this.type === ListComponentsTypes.INFINITE ? [...(this.items || []), ...(data || [])] : [...(data || [])];
+            const data = [...(await this.parseResult(this.data))];
+            this.items =
+                this.type === ListComponentsTypes.INFINITE
+                    ? [...(this.items || []), ...(data || [])]
+                    : [...(data || [])];
             if (this.isModalChild)
                 this.changeDetectorRef.detectChanges();
         }
@@ -9982,7 +10174,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async getFromModel(force = false) {
-        let data = [...this.data || []];
+        let data = [...(this.data || [])];
         let request = [];
         // getting model repository
         if (!this._repository) {
@@ -9991,9 +10183,13 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this._repository.observe(this.observer);
         }
         const repo = this._repository;
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+        if (!this.data?.length ||
+            force ||
+            this.searchValue?.length ||
+            !!this.searchValue) {
             try {
-                if (!this.searchValue?.length && !this.searchValue) {
+                if (!this.searchValue?.length &&
+                    !this.searchValue) {
                     this.data = [];
                     // const rawQuery = this.parseQuery(self.model as Repository<Model>, start, limit);
                     // request = this.parseResult(await (this.model as any)?.paginate(start, limit));
@@ -10007,17 +10203,21 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 }
                 else {
                     if (!this.indexes)
-                        this.indexes = (Object.values(this.mapper) || [this.pk]);
+                        this.indexes = Object.values(this.mapper) || [this.pk];
                     const condition = this.parseConditions(this.searchValue);
                     this.changeDetectorRef.detectChanges();
                     request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
                     data = [];
                     this.changeDetectorRef.detectChanges();
                 }
-                data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
+                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) {
@@ -10057,7 +10257,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     parseConditions(value) {
         let _condition;
-        if (typeof value === Primitives.STRING || typeof value === Primitives.NUMBER) {
+        if (typeof value === Primitives.STRING ||
+            typeof value === Primitives.NUMBER) {
             _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
             for (const index of this.indexes) {
                 if (index === this.pk)
@@ -10084,27 +10285,28 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                     val = Number(val);
                 let orCondition;
                 switch (condition) {
-                    case "Equal":
+                    case 'Equal':
                         orCondition = Condition.attribute(index).eq(val);
                         break;
-                    case "Not Equal":
+                    case 'Not Equal':
                         orCondition = Condition.attribute(index).dif(val);
                         break;
-                    case "Not Contains":
+                    case 'Not Contains':
                         orCondition = !Condition.attribute(index).regexp(new RegExp(`^(?!.*${val}).*$`));
                         break;
-                    case "Contains":
+                    case 'Contains':
                         orCondition = Condition.attribute(index).regexp(val);
                         break;
-                    case "Greater Than":
+                    case 'Greater Than':
                         orCondition = Condition.attribute(index).gte(val);
                         break;
-                    case "Less Than":
+                    case 'Less Than':
                         orCondition = Condition.attribute(index).lte(val);
                         break;
                 }
-                _condition = (!_condition ?
-                    orCondition : _condition.and(orCondition));
+                _condition = (!_condition
+                    ? orCondition
+                    : _condition.and(orCondition));
             });
             this.sortBy = sort?.value || this.pk;
             this.sortDirection = sort?.direction || this.sortDirection;
@@ -10124,22 +10326,24 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async parseResult(result) {
-        if (!Array.isArray(result) && ('page' in result && 'total' in result)) {
+        if (!Array.isArray(result) && 'page' in result && 'total' in result) {
             const paginator = result;
             try {
                 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 = [];
             }
         }
         else {
             this.getMoreData(result?.length || 0);
         }
-        return (Object.keys(this.mapper || {}).length) ?
-            this.mapResults(result) : result;
+        return Object.keys(this.mapper || {}).length
+            ? this.mapResults(result)
+            : result;
     }
     /**
      * @description Updates pagination state based on data length.
@@ -10161,7 +10365,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
             else {
                 this.pages = Math.floor(length / this.limit);
-                if ((this.pages * this.limit) < length)
+                if (this.pages * this.limit < length)
                     this.pages += 1;
                 if (this.pages === 1)
                     this.loadMoreData = false;
@@ -10195,7 +10399,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
             else {
                 if (arrayValue.length === 1) {
-                    value = item?.[value] ? item[value] : "";
+                    value = item?.[value] ? item[value] : '';
                     // value = item?.[value] ? item[value] : value !== key ? value : "";
                     if (isValidDate(value))
                         value = `${formatDate(value)}`;
@@ -10244,18 +10448,23 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             // }, {}))
         });
         return data.reduce((accum, curr) => {
-            accum.push({ ...this.itemMapper(curr, this.mapper, props), ...{ pk: this.pk } });
+            accum.push({
+                ...this.itemMapper(curr, this.mapper, props),
+                ...{ pk: this.pk },
+            });
             return accum;
         }, []);
     }
     parseSearchValue() {
         if (typeof this.searchValue === Primitives.STRING)
-            return this.searchValue || "";
+            return this.searchValue || '';
         const searchValue = this.searchValue;
-        return (searchValue?.query).map(item => `${item.index} ${item.condition} ${item.value}`).join(", ");
+        return (searchValue?.query)
+            .map((item) => `${item.index} ${item.condition} ${item.value}`)
+            .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { 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"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { 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"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -10282,7 +10491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         SearchbarComponent,
                         EmptyStateComponent,
                         FilterComponent,
-                        ComponentRendererComponent
+                        ComponentRendererComponent,
                     ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
@@ -10324,8 +10533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], empty: [{
                 type: Input
-            }], refreshEvent: [{
-                type: Output
             }], clickEvent: [{
                 type: Output
             }], handleClick: [{
@@ -10491,7 +10698,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
             this.className += ` action`;
         this.windowWidth = getWindowWidth();
     }
-    ngAfterViewInit() {
+    async ngAfterViewInit() {
         this.checkDarkMode();
     }
     /**
@@ -11391,7 +11598,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;
                 }
             };
@@ -11705,15 +11912,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 class DynamicModule {
 }
 
-/**
- * @module module:lib/engine/NgxEventHandler
- * @description Event handler base class used by Decaf components.
- * @summary Defines NgxEventHandler which standardizes event handling logic and provides
- * logging support for handlers that process custom events emitted by components.
- *
- * @link {@link NgxEventHandler}
- */
-class NgxEventHandler extends LoggedClass {
+class NgxEventHandler extends DecafEventHandler {
+    async refresh(args) {
+        this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
+    }
 }
 
 /**
@@ -11819,7 +12021,6 @@ class NgxPageDirective extends NgxComponentDirective {
         this.mediaService.colorSchemeObserver(this.component);
         this.currentRoute = this.router.url.replace('/', '');
         this.setPageTitle(this.currentRoute);
-        this.initialized = true;
     }
     /**
      * @description Ionic lifecycle hook called when the page is about to enter view.
@@ -11909,17 +12110,20 @@ class NgxModelPageDirective extends NgxPageDirective {
          * @default [OperationKeys.CREATE, OperationKeys.READ]
          * @memberOf ModelPage
          */
-        this.allowedOperations = [OperationKeys.CREATE, OperationKeys.READ];
-        /**
-       * @description Current model data loaded from the repository.
-       * @summary Stores the raw data object representing the current model instance retrieved
-       * from the repository. This property holds the actual data values for the model being
-       * displayed or edited, and is set to undefined when no data is available or when an
-       * error occurs during data loading.
-       * @type {KeyValue | undefined}
-       * @default undefined
-       * @memberOf NgxModelPageDirective
-       */
+        this.allowedOperations = [
+            OperationKeys.CREATE,
+            OperationKeys.READ,
+        ];
+        /**
+         * @description Current model data loaded from the repository.
+         * @summary Stores the raw data object representing the current model instance retrieved
+         * from the repository. This property holds the actual data values for the model being
+         * displayed or edited, and is set to undefined when no data is available or when an
+         * error occurs during data loading.
+         * @type {KeyValue | undefined}
+         * @default undefined
+         * @memberOf NgxModelPageDirective
+         */
         this.modelData = undefined;
         /**
          * @description Error message from failed operations.
@@ -11937,12 +12141,12 @@ class NgxModelPageDirective extends NgxPageDirective {
     // }
     get pageTitle() {
         if (!this.modelName && this.model instanceof Model)
-            this.modelName = this.model?.constructor?.name || "";
+            this.modelName = this.model?.constructor?.name || '';
         if (!this.operation)
             return this.title ? this.title : `Listing ${this.modelName}`;
-        const operation = this.operation.charAt(0).toUpperCase() + this.operation.slice(1).toLowerCase();
-        return this.modelName ?
-            `${operation} ${this.modelName}` : this.title;
+        const operation = this.operation.charAt(0).toUpperCase() +
+            this.operation.slice(1).toLowerCase();
+        return this.modelName ? `${operation} ${this.modelName}` : this.title;
     }
     /**
      * @description Lazy-initialized repository getter with model resolution.
@@ -11956,14 +12160,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 = Model.pk(constructor);
+                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;
     }
@@ -11976,7 +12187,10 @@ class NgxModelPageDirective extends NgxPageDirective {
     async ionViewWillEnter() {
         // await super.ionViewWillEnter();
         if (this.modelId)
-            this.allowedOperations = this.allowedOperations.concat([OperationKeys.UPDATE, OperationKeys.DELETE]);
+            this.allowedOperations = this.allowedOperations.concat([
+                OperationKeys.UPDATE,
+                OperationKeys.DELETE,
+            ]);
         this.getLocale(this.modelName);
         await this.refresh(this.modelId);
         this.initialized = true;
@@ -11999,7 +12213,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                 case OperationKeys.READ:
                 case OperationKeys.UPDATE:
                 case OperationKeys.DELETE:
-                    this.model = await this.handleGet(uid || this.modelId);
+                    this.model = (await this.handleGet(uid || this.modelId));
                     break;
             }
         }
@@ -12007,23 +12221,23 @@ class NgxModelPageDirective extends NgxPageDirective {
             if (error instanceof NotFoundError) {
                 this.errorMessage = error.message;
             }
-            this.logger.error(error);
+            this.log.error(error);
         }
     }
     /**
      * @description Generic event handler for component events.
      * @summary Processes incoming events from child components and routes them to appropriate
      * handlers based on the event name. Currently handles SUBMIT events by delegating to
-     * the handleSubmit method. This centralized event handling approach allows for easy
+     * the submit method. This centralized event handling approach allows for easy
      * extension and consistent event processing.
      *
      * @param {IBaseCustomEvent} event - The event object containing event data and metadata
      */
-    async handleEvent(event) {
+    async handleEvent(event, repository) {
         const { name } = event;
         switch (name) {
             case ComponentEventNames.SUBMIT:
-                await this.handleSubmit(event);
+                await this.submit(event, repository);
                 break;
         }
     }
@@ -12038,38 +12252,61 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {IBaseCustomEvent} event - The submit event containing form data
      * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
      */
-    async handleSubmit(event, redirect = false) {
+    async submit(event, repository, redirect = false) {
         try {
-            const repo = this._repository;
-            const operation = this.operation === OperationKeys.READ ? 'delete' : this.operation.toLowerCase();
-            const data = this.parseData(event.data, operation);
-            const result = this.operation === OperationKeys.CREATE ?
-                await repo.create(data) : this.operation === OperationKeys.UPDATE ?
-                await repo.update(data) : repo.delete(data);
-            const message = await this.translate(`operations.${operation}.${result ? 'success' : 'error'}`, {
-                "0": this.pk,
-                "1": this.modelId || result[this.pk],
-            });
-            if (result) {
-                repo.refresh(this.modelName, this.operation, this.modelId);
-                if (redirect)
-                    this.location.back();
+            if (!repository)
+                repository = this._repository;
+            // const pk = this.pk || Model.pk(repository.class as Constructor<Model>);
+            const operation = this.operation;
+            const { data } = event;
+            if (data) {
+                const model = this.parseData(data || {}, operation, repository);
+                let result;
+                switch (operation) {
+                    case OperationKeys.CREATE:
+                        result = await (!Array.isArray(model)
+                            ? repository.create(model)
+                            : repository.createAll(model));
+                        break;
+                    case OperationKeys.UPDATE:
+                        result = await (!Array.isArray(model)
+                            ? repository.update(model)
+                            : repository.updateAll(model));
+                        break;
+                    case OperationKeys.DELETE:
+                        result = await (!Array.isArray(model)
+                            ? repository.delete(model)
+                            : repository.deleteAll(model));
+                        break;
+                }
+                const message = await this.translate(!Array.isArray(result)
+                    ? `operations.${operation}.${result ? 'success' : 'error'}`
+                    : `operations.multiple`);
+                if (result) {
+                    // repository.refresh(this.modelName, this.operation, this.modelId as EventIds);
+                    if (redirect)
+                        this.location.back();
+                }
+                return {
+                    ...event,
+                    success: result ? true : false,
+                    message,
+                };
             }
-            return {
-                ...event,
-                success: result ? true : false,
-                message
-            };
         }
         catch (error) {
-            this.logger.error(error);
             return {
                 ...event,
                 success: false,
-                message: error instanceof Error ? error.message : error
+                message: error instanceof Error ? error.message : error,
             };
         }
     }
+    async create(data, repository) {
+        alert('create');
+        console.log(repository);
+        console.log(data);
+    }
     /**
      * @description Retrieves a model instance from the repository by unique identifier.
      * @summary Fetches a specific model instance using the repository's read method.
@@ -12080,17 +12317,58 @@ 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;
+        if (!modelName)
+            modelName = this.modelName;
+        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 = {} as KeyValue;
+                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 as string] = Model.build({}, type);
+                    // }
+                }
+                // (this.model as KeyValue)[parent as string] = Model.build(
+                //   model,
+                //   modelName
+                // );
+            }
+        };
+        repository = (repository ||
+            (await getRepository(modelName)));
+        if (!repository)
+            return this.model;
+        const type = Metadata.type(repository.class, Model.pk(repository.class)).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.
@@ -12103,13 +12381,22 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @return {Model | string | number} Processed data ready for repository operations
      * @private
      */
-    parseData(data, operation) {
-        const repo = this._repository;
+    parseData(data, operation, repository) {
+        operation = (operation === OperationKeys.READ
+            ? OperationKeys.DELETE
+            : operation.toLowerCase());
+        if (Array.isArray(data)) {
+            data = data.map((item) => this.parseData(item, operation, repository));
+            return data;
+        }
         let uid = this.modelId;
-        if (repo.pk === 'id')
-            uid = Number(uid);
+        const pk = Model.pk(repository.class);
+        const type = Metadata.type(repository.class, pk).name;
+        uid = [Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase())
+            ? Number(uid)
+            : uid;
         if (operation !== OperationKeys.DELETE)
-            return Model.build(this.modelId ? Object.assign(data, { [repo.pk]: uid }) : data, this.modelName);
+            return Model.build(this.modelId ? Object.assign(data, { [pk]: uid }) : data, repository.class.name);
         return uid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
@@ -12156,5 +12443,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