@decaf-ts/for-angular 0.0.80 → 0.0.82

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

@@ -1,25 +1,25 @@
-import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, UIKeys, RenderingError, UIMediaBreakPoints, DecafEventHandler } from '@decaf-ts/ui-decorators';
+import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, ComponentEventNames, UIKeys, RenderingError, UIMediaBreakPoints, LayoutGridGaps, ElementSizes, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, provideEnvironmentInitializer, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, Input, Directive, signal, ChangeDetectorRef, EnvironmentInjector, Renderer2, EventEmitter, ElementRef, Output, ViewChild, Inject, ViewContainerRef, TemplateRef, Component, ViewEncapsulation, HostListener, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, NgComponentOutlet, CommonModule } 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 { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf as sf$1, ReservedModels } from '@decaf-ts/decorator-validation';
 import { OperationKeys, InternalError, NotFoundError } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormArray, AbstractControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
-import { Logging, LoggedClass } from '@decaf-ts/logging';
+import { Logging, LoggedClass, sf } from '@decaf-ts/logging';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { uses, Metadata, apply, metadata } from '@decaf-ts/decoration';
 import { AnimationController, provideIonicAngular, LoadingController, IonIcon, IonButton, IonModal, IonSpinner, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonBadge, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover, NavController } from '@ionic/angular/standalone';
 import { faker } from '@faker-js/faker';
-import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, timer, firstValueFrom, takeUntil as takeUntil$1, shareReplay as shareReplay$1, debounceTime } from 'rxjs';
-import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router';
+import { forkJoin, Subject, BehaviorSubject, fromEvent, of, merge, Observable, timer, shareReplay as shareReplay$1, takeUntil as takeUntil$1, firstValueFrom, debounceTime } from 'rxjs';
+import { Title, DomSanitizer } from '@angular/platform-browser';
+import { Router, NavigationStart, NavigationEnd, ActivatedRoute } from '@angular/router';
+import { MenuController } from '@ionic/angular';
 import { TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { map, distinctUntilChanged, takeUntil, shareReplay, tap, switchMap } from 'rxjs/operators';
-import { Title, DomSanitizer } from '@angular/platform-browser';
-import { MenuController } from '@ionic/angular';
 import { __decorate, __metadata } from 'tslib';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
@@ -127,32 +127,6 @@ const WindowColorSchemes = {
     dark: 'dark',
     undefined: 'undefined',
 };
-const ElementSizes = {
-    xsmall: 'xsmall',
-    small: 'small',
-    medium: 'medium',
-    default: 'default',
-    large: 'large',
-    xLarge: 'xlarge',
-    '2xLarge': '2xlarge',
-    auto: 'auto',
-    expand: 'expand',
-    block: 'block',
-};
-const ElementPositions = {
-    left: 'left',
-    center: 'center',
-    right: 'right',
-    top: 'top',
-    bottom: 'bottom',
-};
-const LayoutGridGaps = {
-    small: 'small',
-    medium: 'medium',
-    large: 'large',
-    collapse: 'collapse',
-    none: '',
-};
 const ListItemPositions = {
     uid: 'uid',
     title: 'title',
@@ -202,84 +176,6 @@ const AngularEngineKeys = {
     LOADED: 'engineLoaded',
     DARK_PALETTE_CLASS: 'dcf-palette-dark',
 };
-/**
- * @description Form validation state constants.
- * @summary Contains constants representing the possible validation states of a form.
- * These are used to check and handle form validation throughout the application.
- * The VALID state indicates all form controls pass validation, while INVALID
- * indicates one or more validation errors exist.
- * @typedef {Object} FormConstants
- * @property {string} VALID - Constant representing a valid form state
- * @property {string} INVALID - Constant representing an invalid form state
- * @const FormConstants
- * @memberOf module:lib/engine/constants
- */
-const FormConstants = {
-    VALID: 'VALID',
-    INVALID: 'INVALID',
-};
-/**
- * @description Event name constants.
- * @summary Contains constants for standardized event names used throughout the application.
- * These constants ensure consistent event naming across components and make it easier to
- * track and handle events. Each constant represents a specific application event type.
- * @typedef {Object} ComponentEventNames
- * @property {string} BackButtonClickEvent - Event fired when back button navigation ends
- * @property {string} Render - Event after component initialize action occurs
- * @property {string} Refresh - Event fired when a refresh action occurs
- * @property {string} Click - Event fired when a click action occurs
- * @property {string} Change - Event fired when a change action occurs
- * @property {string} Submit - Event fired when a form submission occurs
- * @property {string} ValidationError - Event fired when a validation error occurs
- * @property {string} ThemeChange - Event fired when a theme change occurs
- * @property {string} FormGroupLoaded - Event fired when a reactve form group is loaded
- * @const ComponentEventNames
- * @memberOf module:lib/engine/constants
- */
-const ComponentEventNames = {
-    Render: 'render',
-    BackButtonClickEvent: 'backButtonNavigationEndEvent',
-    Refresh: 'RefreshEvent',
-    Click: 'ClickEvent',
-    Change: 'ChangeEvent',
-    Submit: 'SubmitEvent',
-    ValidationError: 'validationErrorEvent',
-    ThemeChange: 'themeChangeEvent',
-    FormGroupLoaded: 'formGroupLoadedEvent',
-};
-const TransactionHooks = {
-    BeforeCreate: 'beforeCreate',
-    AfterCreate: 'afterCreate',
-    BeforeUpdate: 'beforeUpdate',
-    AfterUpdate: 'afterUpdate',
-    BeforeDelete: 'beforeDelete',
-    AfterDelete: 'afterDelete',
-};
-/**
- * @description Logger level constants.
- * @summary Defines the logging levels used in the application's logging system.
- * Lower numeric values represent more verbose logging, while higher values represent
- * more critical logs. These levels control which log messages are output based on
- * the configured logging threshold.
- * @enum {number}
- * @readonly
- * @property {number} ALL - Log everything (most verbose)
- * @property {number} DEBUG - Log debug information
- * @property {number} INFO - Log informational messages
- * @property {number} WARN - Log warnings
- * @property {number} ERROR - Log errors
- * @property {number} CRITICAL - Log critical errors (least verbose)
- * @memberOf module:lib/engine/constants
- */
-var LoggerLevels;
-(function (LoggerLevels) {
-    LoggerLevels[LoggerLevels["ALL"] = 0] = "ALL";
-    LoggerLevels[LoggerLevels["DEBUG"] = 1] = "DEBUG";
-    LoggerLevels[LoggerLevels["INFO"] = 2] = "INFO";
-    LoggerLevels[LoggerLevels["WARN"] = 3] = "WARN";
-    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.
@@ -346,6 +242,8 @@ var ComponentsTagNames;
  */
 var BaseComponentProps;
 (function (BaseComponentProps) {
+    BaseComponentProps["MODEL_ID"] = "modelId";
+    BaseComponentProps["MODEL"] = "model";
     BaseComponentProps["HANDLERS"] = "handlers";
     BaseComponentProps["LOCALE"] = "locale";
     BaseComponentProps["LOCALE_ROOT"] = "locale_root";
@@ -550,7 +448,6 @@ class ValidatorFactory {
 function getDbAdapterFlavour() {
     return (getOnWindow(DB_ADAPTER_FLAVOUR_TOKEN) || '');
 }
-;
 /**
  * @description Provides an array of component types for dynamic rendering.
  * @summary Helper function to package component constructors for registration with the
@@ -589,9 +486,7 @@ function provideDecafDynamicComponents(...components) {
  */
 function getModelAndRepository(model, clazz) {
     try {
-        const modelName = (typeof model === Primitives.STRING
-            ? model
-            : model.constructor.name);
+        const modelName = (typeof model === Primitives.STRING ? model : model.constructor.name);
         const constructor = Model.get((modelName.charAt(0).toUpperCase() + modelName.slice(1)));
         if (!constructor)
             return undefined;
@@ -685,10 +580,9 @@ const decafPageTransition = (baseEl, opts) => {
 };
 function provideDecafPageTransition() {
     return provideIonicAngular({
-        navAnimation: decafPageTransition
+        navAnimation: decafPageTransition,
     });
 }
-;
 function provideDecafDarkMode() {
     return provideEnvironmentInitializer(() => {
         const doc = getWindowDocument();
@@ -765,13 +659,13 @@ function getInjectablesRegistry() {
  * @function isDevelopmentMode
  * @memberOf module:for-angular
  */
-function isDevelopmentMode(context = "localhost") {
+function isDevelopmentMode(context = 'localhost') {
     if (!context)
         return isDevMode();
     const win = getWindow();
     return (isDevMode() ||
-        win?.["env"]?.["CONTEXT"].toLowerCase() !== context.toLowerCase() ||
-        win?.["location"]?.hostname?.includes(context));
+        win?.['env']?.['CONTEXT'].toLowerCase() !== context.toLowerCase() ||
+        win?.['location']?.hostname?.includes(context));
 }
 /**
  * @description Dispatches a custom event to the document window
@@ -811,9 +705,7 @@ function windowEventEmitter(name, detail, props) {
  */
 function getOnWindowDocument(key) {
     const doc = getWindowDocument();
-    return doc instanceof Document
-        ? doc?.[key] || undefined
-        : undefined;
+    return doc instanceof Document ? doc?.[key] || undefined : undefined;
 }
 /**
  * @description Retrieves the document object from the window
@@ -827,7 +719,7 @@ function getOnWindowDocument(key) {
  * @memberOf module:for-angular
  */
 function getWindowDocument() {
-    return getOnWindow("document");
+    return getOnWindow('document');
 }
 /**
  * @description Retrieves a property from the window object
@@ -875,7 +767,7 @@ function setOnWindow(key, value) {
  * @memberOf module:for-angular
  */
 function getWindow() {
-    return globalThis?.["window"];
+    return globalThis?.['window'];
 }
 /**
  * @description Retrieves the width of the browser window
@@ -889,7 +781,7 @@ function getWindow() {
  * @memberOf module:for-angular
  */
 function getWindowWidth() {
-    return getOnWindow("innerWidth") || 0;
+    return getOnWindow('innerWidth') || 0;
 }
 /**
  * @description Checks if a value is  not undefined
@@ -924,25 +816,23 @@ function isNotUndefined(prop) {
  */
 function getLocaleFromClassName(instance, suffix) {
     if (typeof instance !== Primitives.STRING)
-        instance =
-            instance.name ||
-                instance?.constructor?.name;
+        instance = instance.name || instance?.constructor?.name;
     let name = instance;
     if (suffix)
         name = `${instance}${suffix.charAt(0).toUpperCase() + suffix.slice(1)}`;
     name = name
-        .replace(/_|-/g, "")
+        .replace(/_|-/g, '')
         .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
         if (index > 1)
-            word = "." + word;
+            word = '.' + word;
         return word.toLowerCase();
     })
-        .split(".");
+        .split('.');
     if (name.length < 3)
-        return name.reverse().join(".");
+        return name.reverse().join('.');
     const preffix = name[name.length - 1];
     name.pop();
-    name = name.join("_");
+    name = name.join('_');
     return `${preffix}.${name}`;
 }
 /**
@@ -958,7 +848,7 @@ function getLocaleFromClassName(instance, suffix) {
  */
 function getLocaleLanguage() {
     const win = getWindow();
-    return win.navigator.language || "en";
+    return win.navigator.language || 'en';
     // return win?.[WINDOW_KEYS.LANGUAGE_SELECTED] || (win.navigator.language || '').split('-')[0] || "en";
 }
 /**
@@ -977,9 +867,9 @@ function getLocaleLanguage() {
  */
 function generateRandomValue(length = 8, onlyNumbers = false) {
     const chars = onlyNumbers
-        ? "0123456789"
-        : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    let result = "";
+        ? '0123456789'
+        : 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = '';
     for (let i = 0; i < length; i++)
         result += chars.charAt(Math.floor(Math.random() * chars.length));
     return result;
@@ -998,8 +888,9 @@ function generateRandomValue(length = 8, onlyNumbers = false) {
  * @memberOf module:lib/helpers/utils
  */
 function stringToBoolean(prop) {
-    if (typeof prop === "string")
-        prop = prop.toLowerCase() === "true" ? true : false;
+    if (typeof prop === Primitives.STRING) {
+        prop = String(prop).toLowerCase() === 'true' ? true : false;
+    }
     return prop;
 }
 /**
@@ -1021,10 +912,9 @@ function isValidDate(date) {
         return ((date instanceof Date && !isNaN(date)) ||
             (() => {
                 const testRegex = new RegExp(/^\d{4}-\d{2}-\d{2}$/).test(date);
-                if (typeof date !== Primitives.STRING ||
-                    (!date?.includes("T") && !testRegex))
+                if (typeof date !== Primitives.STRING || (!date?.includes('T') && !testRegex))
                     return false;
-                date = date.split("T")[0];
+                date = date.split('T')[0];
                 if (!new RegExp(/^\d{4}-\d{2}-\d{2}$/).test(date))
                     return false;
                 return !!new Date(date);
@@ -1055,51 +945,18 @@ function isValidDate(date) {
 function formatDate(date, locale) {
     if (!locale)
         locale = getLocaleLanguage();
-    if (typeof date === "string" || typeof date === "number")
-        date = new Date(typeof date === "string" ? date.replace(/\//g, "-") : date);
-    if (!isValidDate(date))
-        return `${date}`;
-    const r = date.toLocaleString(locale, {
-        year: "numeric",
-        day: "2-digit",
-        month: "2-digit",
-    });
-    return r;
+    if (typeof date === Primitives.STRING || typeof date === 'number') {
+        date = new Date(typeof date === Primitives.STRING ? `${date}`.replace(/\//g, '-') : date);
+    }
+    return !isValidDate(date)
+        ? `${date}`
+        : date.toLocaleString(locale, {
+            year: 'numeric',
+            day: '2-digit',
+            month: '2-digit',
+        });
 }
 /**
- * @description Attempts to parse a date string, Date object, or number into a valid Date object.
- * @summary This function provides robust date parsing functionality that handles the specific
- * format "DD/MM/YYYY HH:MM:SS:MS". It first validates the input date, and if already valid,
- * returns it as-is. For string inputs, it parses the date and time components separately,
- * extracts numeric values, and constructs a new Date object. The function includes validation
- * to ensure the resulting Date object is valid and logs a warning if parsing fails.
- * Returns null for invalid or unsupported date formats.
- *
- * @param {string | Date | number} date - The date to parse. Can be a Date object, a timestamp number,
- *                                        or a date string in the format "DD/MM/YYYY HH:MM:SS:MS"
- * @returns {Date | null} A valid Date object if parsing is successful, or null if the date is invalid
- *                        or doesn't match the expected format
- *
- * @function parseToValidDate
- * @memberOf module:lib/helpers/utils
- */
-function parseToValidDate(date) {
-    if (isValidDate(date))
-        return date;
-    if (!`${date}`.includes("/"))
-        return null;
-    const [dateString, timeString] = date.split(" ");
-    const [day, month, year] = dateString.split("/").map(Number);
-    const [hours, minutes, seconds, milliseconds] = timeString
-        .split(":")
-        .map(Number);
-    date = new Date(year, month - 1, day, hours, minutes, seconds, milliseconds);
-    if (!isValidDate(date)) {
-        console.warn("parseToValidDate - Invalid date format", date);
-        return null;
-    }
-    return date;
-}
 /**
  * @description Maps an item object using a provided mapper object and optional additional properties.
  * @summary This function transforms a source object into a new object based on mapping rules defined
@@ -1120,8 +977,8 @@ function parseToValidDate(date) {
  */
 function itemMapper(item, mapper, props) {
     return Object.entries(mapper).reduce((accum, [key, prop]) => {
-        const arrayValue = (prop || "").split(".");
-        let value = item?.[prop] || "";
+        const arrayValue = (prop || '').split('.');
+        let value = item?.[prop] || '';
         if (!prop) {
             accum[key] = prop;
         }
@@ -1134,7 +991,7 @@ function itemMapper(item, mapper, props) {
                 for (const propValue of arrayValue)
                     value = !value
                         ? item[propValue]
-                        : (typeof value === "string" ? JSON.parse(value) : value)[propValue];
+                        : (typeof value === 'string' ? JSON.parse(value) : value)[propValue];
                 if (isValidDate(new Date(value)))
                     value = `${formatDate(value)}`;
                 accum[key] = value === null || value === undefined ? prop : value;
@@ -1167,8 +1024,7 @@ function dataMapper(data, mapper, props) {
         return [];
     return data.reduce((accum, curr) => {
         const item = itemMapper(curr, mapper, props);
-        const hasValues = [...new Set(Object.values(item))].filter((value) => value).length >
-            0;
+        const hasValues = [...new Set(Object.values(item))].filter((value) => value).length > 0;
         accum.push(hasValues ? item : curr);
         return accum;
     }, []);
@@ -1205,8 +1061,8 @@ function removeFocusTrap() {
  * @function cleanSpaces
  * @memberOf module:for-angular
  */
-function cleanSpaces(value = "", lowercase = false) {
-    value = `${value}`.trim().replace(/\s+/g, " ");
+function cleanSpaces(value = '', lowercase = false) {
+    value = `${value}`.trim().replace(/\s+/g, ' ');
     return lowercase ? value.toLowerCase() : value;
 }
 /**
@@ -1222,7 +1078,7 @@ function cleanSpaces(value = "", lowercase = false) {
  * @memberOf module:for-angular
  */
 async function isDarkMode() {
-    const { matches } = getWindow().matchMedia("(prefers-color-scheme: dark)");
+    const { matches } = getWindow().matchMedia('(prefers-color-scheme: dark)');
     return matches;
 }
 /**
@@ -1240,8 +1096,8 @@ async function isDarkMode() {
  */
 function filterString(original, value, contain = true) {
     if (typeof original === Primitives.STRING)
-        original = original.split(" ");
-    return (original.filter((str) => contain ? str.includes(value) : !str.includes(value)) || []).join(" ");
+        original = original.split(' ');
+    return (original.filter((str) => contain ? str.includes(value) : !str.includes(value)) || []).join(' ');
 }
 /**
  * @summary Retrieves the icon associated with a menu item based on its label.
@@ -1252,11 +1108,8 @@ function filterString(original, value, contain = true) {
  */
 function getMenuIcon(label, menu) {
     const item = menu.find((m) => m.label?.toLowerCase() === label.toLowerCase());
-    return item?.icon || "";
+    return item?.icon || '';
 }
-const isClassConstructor = (value) => {
-    return typeof value === "function" && /^class\s/.test(String(value));
-};
 
 /**
  * @module lib/engine/NgxFormService
@@ -1946,10 +1799,11 @@ class NgxFormService {
                     }
                     continue;
                 }
-                data[key] = value;
+                data[key] = NgxFormService.getFormData(control);
                 continue;
             }
             const props = NgxFormService.getPropsFromControl(control);
+            // const { readonly } = (props as IFormComponentProperties) || false; TODO: dont send readonly fields?
             let value = control.value;
             if (!HTML5CheckTypes.includes(props['type'])) {
                 switch (props['type']) {
@@ -1958,7 +1812,7 @@ class NgxFormService {
                         break;
                     case HTML5InputTypes.DATE:
                     case HTML5InputTypes.DATETIME_LOCAL:
-                        value = typeof value === Primitives.STRING ? new Date(value) : value;
+                        value = typeof value === Primitives.STRING ? new Date(`${value}T00:00:00`) : value;
                         break;
                     default:
                         value = escapeHtml(value)?.trim();
@@ -2268,8 +2122,10 @@ class DecafFakerRepository extends LoggedClass {
     }
     get repository() {
         if (!this._repository) {
-            const modelName = typeof this.model === 'string' ? this.model : this.model.constructor.name;
-            const constructor = Model.get(modelName);
+            const modelName = typeof this.model === Primitives.STRING
+                ? this.model
+                : this.model.constructor.name;
+            const constructor = Model.get(String(modelName));
             if (!constructor)
                 throw new InternalError(`Cannot find model ${modelName}. was it registered with @model?`);
             try {
@@ -2307,7 +2163,7 @@ class DecafFakerRepository extends LoggedClass {
             }
             dataFunctions[prop] = this.getPropValueFn(prop, key);
         }
-        const data = getFakerData(limit, dataFunctions, typeof this.model === 'string' ? this.model : this.model?.constructor.name);
+        const data = getFakerData(limit, dataFunctions, typeof this.model === Primitives.STRING ? String(this.model) : this.model?.constructor.name);
         if (!values)
             return data;
         const _values = Object.values(values);
@@ -2539,8 +2395,10 @@ class NgxRenderingEngine extends RenderingEngine {
                 delete inputs[input];
             return !isMapped;
         });
-        if (unmappedKeys.length > 0 && isDevelopmentMode())
-            getLogger(this).warn(`Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`);
+        // if (unmappedKeys.length > 0 && isDevelopmentMode())
+        //   getLogger(this).warn(
+        //     `Unmapped input properties for component ${fieldDef.tag}: ${unmappedKeys.join(', ')}`,
+        //   );
         const operation = NgxRenderingEngine._operation;
         const hiddenOn = inputs?.hidden || [];
         if (hiddenOn.includes(operation))
@@ -2750,7 +2608,7 @@ class NgxRenderingEngine extends RenderingEngine {
             NgxRenderingEngine._injector = injector;
         try {
             this._model = model;
-            const formId = Date.now().toString(36).toUpperCase();
+            const formId = `${Date.now()}`.toUpperCase();
             const fieldDef = this.toFieldDefinition(model, globalProps);
             const props = fieldDef.props;
             if (!NgxRenderingEngine._operation)
@@ -3160,7 +3018,7 @@ class I18nLoader {
      */
     getTranslation(lang) {
         const libKeys = libLanguage[lang] || libLanguage['en'] || {};
-        const httpRequests$ = forkJoin(this.resources.map(config => this.http.get(`${config.prefix}${lang}${this.getSuffix(config.suffix || '.json')}`)));
+        const httpRequests$ = forkJoin(this.resources.map((config) => this.http.get(`${config.prefix}${lang}${this.getSuffix(config.suffix || '.json')}`)));
         /**
          * @description Recursively merges two translation objects.
          * @summary Combines the properties of the source object into the target object.
@@ -3182,14 +3040,17 @@ class I18nLoader {
             }
             return target;
         }
-        return httpRequests$.pipe(map(res => {
+        return httpRequests$.pipe(map((res) => {
             const merged = {
                 ...libKeys,
                 ...res.reduce((acc, current) => {
                     for (const key in current) {
                         let value = current[key] || {};
                         if (libKeys[key]) {
-                            value = { ...libKeys[key], ...recursiveMerge(libKeys[key], current[key]) };
+                            value = {
+                                ...libKeys[key],
+                                ...recursiveMerge(libKeys[key], current[key]),
+                            };
                         }
                         acc[key] = value;
                     }
@@ -3214,10 +3075,7 @@ class I18nParser extends TranslateParser {
      * @returns {string} - The interpolated translation string.
      */
     interpolate(value, params = {}) {
-        if (typeof params === Primitives.STRING) {
-            params = { '0': params };
-        }
-        return sf(value, ...Object.values(params)).replace(/undefined/g, "");
+        return sf(value, params === Primitives.STRING ? { '0': params } : params).replace(/undefined/g, '');
     }
 }
 /**
@@ -3626,6 +3484,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class NgxRepositoryDirective extends DecafComponent {
     constructor() {
         super(...arguments);
+        /**
+         * @description Store query results for the component.
+         * @summary Holds an array of `Model` instances returned from repository queries.
+         * This is used internally to cache query results that child components may bind to.
+         * @type {M[]}
+         */
+        this._query = [];
+        /**
+         * @description Backing model data supplied to the component.
+         * @summary Holds the raw `Model` instance or a generic key-value payload that child
+         * components may bind to. When provided, it represents the contextual data the
+         * component should render or mutate.
+         * @type {M | M[] | KeyValue | KeyValue[] | undefined}
+         */
+        this._data = {};
+        /**
+         * @description Primary key value of the current model instance.
+         * @summary Specifies the primary key value for the current model record being displayed or
+         * manipulated by the component. This identifier is used for CRUD operations that target
+         * specific records, such as read, update, and delete operations. The value corresponds to
+         * the field designated as the primary key in the model definition.
+         * @type {PrimaryKeyType}
+         * @memberOf module:lib/engine/NgxRepositoryDirective
+         */
+        this.modelId = '';
         /**
          * @description The starting index for data fetching.
          * @summary Specifies the index from which to start fetching data. This is used
@@ -3664,16 +3547,19 @@ class NgxRepositoryDirective extends DecafComponent {
          */
         this.indexes = [];
         /**
-         * @description Backing model data supplied to the component.
-         * @summary Holds the raw `Model` instance or a generic key-value payload that child
-         * components may bind to. When provided, it represents the contextual data the
-         * component should render or mutate.
-         * @type {M | M[] | KeyValue | KeyValue[] | undefined}
+         * @description Subject for debouncing repository observation events.
+         * @summary RxJS Subject that collects repository change events and emits them after
+         * a debounce period. This prevents multiple rapid repository changes from triggering
+         * multiple list refresh operations, improving performance and user experience.
+         *
+         * @private
+         * @type {Subject<any>}
          */
-        this._data = {};
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.repositoryObserverSubject = new Subject();
     }
     async initialize() {
-        if (this.repository && this.modelId) {
+        if (this.repository) {
             if (this.filter) {
                 this._data = await this.query(this.filter.eq(this.modelId));
                 if (this._data) {
@@ -3681,6 +3567,7 @@ class NgxRepositoryDirective extends DecafComponent {
                 }
             }
             else {
+                // this._data = await this.read(this.modelId as PrimaryKeyType);
                 // if (String(this.modelName) === this.model?.constructor.name) {
                 //   const model = await this.repository.read(this.modelId as PrimaryKeyType);
                 //   if (model) {
@@ -3704,7 +3591,7 @@ class NgxRepositoryDirective extends DecafComponent {
         return this._context;
     }
     async refresh(model) {
-        if (model) {
+        if (model && Model.isModel(model)) {
             this.model = Model.build(model, this.modelName);
             this._data = model;
         }
@@ -3716,7 +3603,7 @@ class NgxRepositoryDirective extends DecafComponent {
         const condtion = this.filter || Condition.attribute(attr);
         const type = this.getModelPropertyType(this.repository.class, attr);
         if (this.modelId) {
-            return condtion.eq([Primitives.NUMBER, Primitives.BIGINT].includes(this.pkType)
+            return condtion.eq([Primitives.NUMBER, Primitives.BIGINT].includes(type)
                 ? Number(this.modelId)
                 : this.modelId);
         }
@@ -3756,16 +3643,40 @@ class NgxRepositoryDirective extends DecafComponent {
             .paginate(limit);
     }
     async transactionBegin(data, repository, operation) {
-        const hook = `before${operation.charAt(0).toUpperCase() + operation.slice(1)}`;
-        const handler = this.handlers?.[hook] || undefined;
-        const model = this.buildTransactionModel(data || {}, repository, operation);
-        if (handler && typeof handler === 'function') {
-            const result = (await handler.bind(this)(model, repository, this.modelId));
-            if (result === false) {
-                return undefined;
+        try {
+            const hook = `before${operation.charAt(0).toUpperCase() + operation.slice(1)}`;
+            const handler = this.handlers?.[hook] || undefined;
+            const model = this.buildTransactionModel(data || {}, repository, operation);
+            if (handler && typeof handler === 'function') {
+                const result = (await handler.bind(this)(model, repository, this.modelId));
+                if (result === false) {
+                    return undefined;
+                }
             }
+            return model;
+        }
+        catch (error) {
+            this.log.for(this).error(error?.message || String(error));
+            return undefined;
+        }
+    }
+    async transactionEnd(model, repository, operation) {
+        try {
+            const hook = `after${operation.charAt(0).toUpperCase() + operation.slice(1)}`;
+            const handler = this.handlers?.[hook] || undefined;
+            if (handler && typeof handler === 'function') {
+                const result = (await handler.bind(this)(model, repository, this.modelId));
+                if (result === false) {
+                    return undefined;
+                }
+                return result;
+            }
+            return model;
+        }
+        catch (error) {
+            this.log.for(this).error(error?.message || String(error));
+            return undefined;
         }
-        return model;
     }
     /**
      * @description Parses and transforms form data for repository operations.
@@ -3790,8 +3701,9 @@ class NgxRepositoryDirective extends DecafComponent {
         const pk = Model.pk(repository.class);
         const pkType = Metadata.type(repository.class, pk).name;
         const modelId = (this.modelId || data[pk]);
-        if (!this.modelId)
+        if (!this.modelId) {
             this.modelId = modelId;
+        }
         const uid = this.parsePkValue(operation === OperationKeys.DELETE ? data[pk] : modelId, pkType);
         if (operation !== OperationKeys.DELETE) {
             const properties = Metadata.properties(repository.class);
@@ -3800,6 +3712,9 @@ class NgxRepositoryDirective extends DecafComponent {
                 : properties.includes(this.pk) && !data[this.pk]
                     ? { [this.pk]: modelId }
                     : {};
+            if (!String(data?.[pk] || '').trim().length) {
+                data[pk] = undefined;
+            }
             return Model.build(Object.assign(data || {}, relation, modelId && !data[this.pk] ? { [this.pk]: modelId } : {}), repository.class.name);
         }
         return uid;
@@ -3825,12 +3740,38 @@ class NgxRepositoryDirective extends DecafComponent {
     getModelPkType(clazz) {
         return this.getModelPropertyType(clazz, Model.pk(clazz));
     }
+    /**
+     * @description Handles repository observation events with debouncing.
+     * @summary Processes repository change notifications and routes them appropriately.
+     * For CREATE events with a UID, handles them immediately. For other events,
+     * passes them to the debounced observer subject to prevent excessive updates.
+     *
+     * @param {...unknown[]} args - The repository event arguments including table, event type, and UID
+     * @returns {Promise<void>}
+     */
+    async handleRepositoryRefresh(...args) {
+        const [modelInstance, event, uid] = args;
+        if ([OperationKeys.CREATE, OperationKeys.DELETE].includes(event))
+            return this.handleObserveEvent(modelInstance, event, uid);
+        return this.repositoryObserverSubject.next(args);
+    }
+    async handleObserveEvent(...args) {
+        this.log.for(this.handleObserveEvent).info(`Repository change observed with args: ${args}`);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRepositoryDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxRepositoryDirective, isStandalone: true, inputs: { modelName: "modelName", pk: "pk", filter: "filter", filterBy: "filterBy", start: "start", limit: "limit", sortDirection: "sortDirection", sortBy: "sortBy", indexes: "indexes", _data: "_data" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxRepositoryDirective, isStandalone: true, inputs: { _query: "_query", _data: "_data", model: "model", modelId: "modelId", modelName: "modelName", pk: "pk", filter: "filter", filterBy: "filterBy", start: "start", limit: "limit", sortDirection: "sortDirection", sortBy: "sortBy", indexes: "indexes" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxRepositoryDirective, decorators: [{
             type: Directive
-        }], propDecorators: { modelName: [{
+        }], propDecorators: { _query: [{
+                type: Input
+            }], _data: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelId: [{
+                type: Input
+            }], modelName: [{
                 type: Input
             }], pk: [{
                 type: Input
@@ -3848,8 +3789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], indexes: [{
                 type: Input
-            }], _data: [{
-                type: Input
             }] } });
 
 /**
@@ -4217,19 +4156,8 @@ class NgxComponentDirective extends NgxRepositoryDirective {
          */
         this.colorSchema = WindowColorSchemes.light;
         this.destroySubscriptions$ = new Subject();
-        /**
-         * @description Subject for debouncing repository observation events.
-         * @summary RxJS Subject that collects repository change events and emits them after
-         * a debounce period. This prevents multiple rapid repository changes from triggering
-         * multiple list refresh operations, improving performance and user experience.
-         *
-         * @private
-         * @type {Subject<any>}
-         */
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.repositoryObserverSubject = new Subject();
         this.value = undefined;
-        this.componentName = componentName || 'NgxComponentDirective';
+        this.componentName = componentName || this.constructor.name || 'NgxComponentDirective';
         this.localeRoot = localeRoot;
         if (!this.localeRoot && this.componentName)
             this.localeRoot = this.componentName;
@@ -4243,23 +4171,22 @@ class NgxComponentDirective extends NgxRepositoryDirective {
             }
         });
     }
-    /**
-     * @description Cleanup lifecycle hook invoked when the directive is destroyed.
-     * @summary Ensures any resources allocated by the directive's media service are
-     * released (DOM listeners, timers, subscriptions, etc.). Implementations should
-     * keep `mediaService.destroy()` idempotent; calling it here prevents leaks when
-     * components are torn down.
-     * @returns {Promise<void>}
-     */
-    async ngOnDestroy() {
-        this.mediaService.destroy();
-        this.destroySubscriptions$.next();
-        this.destroySubscriptions$.complete();
-    }
     async initialize() {
         this.mediaService.darkModeEnabled();
         // connect component to media service for color scheme toggling
         this.mediaService.colorSchemeObserver(this.component);
+        if (!this.initialized && Object.keys(this.props || {}).length) {
+            this.parseProps(this);
+        }
+        this.router.events
+            .pipe(shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
+            .subscribe(async (event) => {
+            if (event instanceof NavigationStart) {
+                if (this.value) {
+                    await this.ngOnDestroy();
+                }
+            }
+        });
         this.route = this.router.url.replace('/', '');
         const instance = this;
         if (this.propsMapperFn) {
@@ -4272,12 +4199,12 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         if (!this.initialized) {
             const handler = this.handlers?.[ComponentEventNames.Render] || undefined;
             if (handler && typeof handler === 'function') {
-                await handler.bind(this)(instance);
+                await handler.bind(instance)(instance, this.name, this.value);
             }
             // search for event to render event
             const event = this.events?.[ComponentEventNames.Render] || undefined;
             if (event && typeof event === 'function') {
-                await event.bind(this)(instance);
+                await event.bind(instance)(instance, this.name, this.value);
             }
         }
         await super.initialize();
@@ -4286,6 +4213,22 @@ class NgxComponentDirective extends NgxRepositoryDirective {
             this.changeDetectorRef.detectChanges();
         }
     }
+    /**
+     * @description Cleanup lifecycle hook invoked when the directive is destroyed.
+     * @summary Ensures any resources allocated by the directive's media service are
+     * released (DOM listeners, timers, subscriptions, etc.). Implementations should
+     * keep `mediaService.destroy()` idempotent; calling it here prevents leaks when
+     * components are torn down.
+     * @returns {Promise<void>}
+     */
+    async ngOnDestroy() {
+        this.value = undefined;
+        this.mediaService.destroy();
+        if (this.destroySubscriptions$) {
+            this.destroySubscriptions$.next();
+            this.destroySubscriptions$.complete();
+        }
+    }
     /**
      * @description Getter for the current locale context identifier.
      * @summary Returns the current locale identifier by calling the getLocale method.
@@ -4342,8 +4285,9 @@ class NgxComponentDirective extends NgxRepositoryDirective {
     async ngOnChanges(changes) {
         if (changes[ModelKeys.MODEL]) {
             const { currentValue } = changes[ModelKeys.MODEL];
-            if (currentValue)
+            if (currentValue) {
                 this.getModel(currentValue);
+            }
             this.locale = this.localeContext;
         }
         // if (changes[UIKeys.HANDLERS]) {
@@ -4362,7 +4306,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         if (changes[BaseComponentProps.HANDLERS]) {
             const { currentValue, previousValue } = changes[BaseComponentProps.HANDLERS];
             if (currentValue && currentValue !== previousValue)
-                this.parseHandlers(currentValue);
+                this.parseHandlers(currentValue, this);
         }
         if (changes[UIKeys.EVENTS]) {
             const { currentValue, previousValue } = changes[UIKeys.EVENTS];
@@ -4370,7 +4314,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
                 if (!this._repository) {
                     this._repository = this.repository;
                 }
-                this.parseEvents(currentValue);
+                this.parseEvents(currentValue, this);
                 // for (const key in currentValue) {
                 //   const event = currentValue[key]();
                 //   if (event && typeof event === 'function') {
@@ -4422,42 +4366,19 @@ class NgxComponentDirective extends NgxRepositoryDirective {
             this.mediaService.toggleClass([this.component], AngularEngineKeys.DARK_PALETTE_CLASS, this.isDarkMode);
         });
     }
-    /**
-     * @description Handles repository observation events with debouncing.
-     * @summary Processes repository change notifications and routes them appropriately.
-     * For CREATE events with a UID, handles them immediately. For other events,
-     * passes them to the debounced observer subject to prevent excessive updates.
-     *
-     * @param {...unknown[]} args - The repository event arguments including table, event type, and UID
-     * @returns {Promise<void>}
-     * @memberOf ListComponent
-     */
-    async handleRepositoryRefresh(...args) {
-        const [modelInstance, event, uid] = args;
-        if ([OperationKeys.CREATE, OperationKeys.DELETE].includes(event))
-            return this.handleObserveEvent(modelInstance, event, uid);
-        return this.repositoryObserverSubject.next(args);
-    }
-    async handleObserveEvent(...args) {
-        this.log.for(this.handleObserveEvent).info(`Repository change observed with args: ${args}`);
-    }
-    parseHandlers(handlers) {
-        // function isClass(value: UIFunctionLike | Constructor<NgxEventHandler>): boolean {
-        //   return typeof value === 'function' && /^class\s/.test(String(value));
-        // }
-        Object.entries(handlers).forEach(([key, fn]) => {
-            if (isClassConstructor(fn)) {
-                const clazz = new fn();
-                this.handlers[key] = key in clazz ? clazz[key] : clazz.handle;
-                // !(Object.values(TransactionHooks).includes(key as keyof typeof TransactionHooks))
-                //   ? clazz.handle
-                //   : clazz[key as keyof NgxEventHandler];
-            }
-            else {
-                this.handlers[key] = fn;
-            }
-        });
-    }
+    // parseHandlers(handlers: Record<string, UIFunctionLike>): void {
+    //   // function isClass(value: UIFunctionLike | Constructor<NgxEventHandler>): boolean {
+    //   //   return typeof value === 'function' && /^class\s/.test(String(value));
+    //   // }
+    //   Object.entries(handlers).forEach(([key, fn]) => {
+    //     if (isClassConstructor<NgxEventHandler>(fn)) {
+    //       const clazz = new fn() as NgxEventHandler;
+    //       this.handlers[key] = key in clazz ? clazz[key as keyof NgxEventHandler] : clazz.handle;
+    //     } else {
+    //       this.handlers[key] = fn as UIFunctionLike;
+    //     }
+    //   });
+    // }
     // for (const key in currentValue) {
     //   const event = currentValue[key]();
     //   if (event && typeof event === 'function') {
@@ -4478,17 +4399,25 @@ class NgxComponentDirective extends NgxRepositoryDirective {
     //     }
     //   }
     // }
-    parseEvents(events) {
-        Object.entries(events).forEach(([key, fn]) => {
-            const event = fn();
-            if (isClassConstructor(event)) {
-                this.events[key] = new event()[key] || undefined;
-            }
-            else {
-                this.events[key] = fn;
-            }
-        });
-    }
+    // parseEvents<T extends DecafComponent<Model>>(
+    //   events: Record<string, UIFunctionLike>,
+    // ): UIEventProperty {
+    //   const result: UIEventProperty = {};
+    //   Object.entries(events).forEach(([key, fn]) => {
+    //     const event = (fn as UIFunctionLike)();
+    //     if (isClassConstructor<DecafComponent<Model>>(event)) {
+    //       const fn = new event()[key as keyof DecafComponent<Model>] || undefined;
+    //       if (fn) {
+    //         this.events[key] = fn;
+    //         result[key] = fn;
+    //       }
+    //     } else {
+    //       this.events[key] = fn as UIFunctionLike;
+    //       result[key] = fn;
+    //     }
+    //   });
+    //   return result;
+    // }
     /**
      * @description Retrieves or sets the locale context for the component.
      * @summary Gets the locale identifier from the locale context system. If a locale parameter
@@ -4605,11 +4534,17 @@ class NgxComponentDirective extends NgxRepositoryDirective {
      * @protected
      * @memberOf module:lib/engine/NgxComponentDirective
      */
-    parseProps(instance, skip = []) {
+    parseProps(instance, skip = [AngularEngineKeys.CHILDREN]) {
         const props = this.props;
         Object.keys(instance).forEach((key) => {
             if (Object.keys(this.props).includes(key) && !skip.includes(key)) {
                 this[key] = props[key];
+                if (key === BaseComponentProps.HANDLERS) {
+                    this.parseHandlers(props[key], this);
+                }
+                if (key === UIKeys.EVENTS) {
+                    this.parseEvents(props[key], this);
+                }
                 delete props[key];
             }
         });
@@ -4774,7 +4709,7 @@ class NgxComponentDirective extends NgxRepositoryDirective {
         await this.initialize();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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.16", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn" }, 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", label: "label", formGroup: "formGroup", value: "value", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", translatable: "translatable", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events", propsMapperFn: "propsMapperFn" }, 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.16", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
@@ -4798,9 +4733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], uid: [{
                 type: Input
-            }], model: [{
-                type: Input
-            }], modelId: [{
+            }], label: [{
                 type: Input
             }], formGroup: [{
                 type: Input
@@ -4871,7 +4804,11 @@ class NgxPageDirective extends NgxComponentDirective {
      * @param {boolean} [hasMenu=true] - Whether this page should display the menu
      * @memberOf module:lib/engine/NgxPageDirective
      */
-    constructor(localeRoot = 'NgxPageDirective', hasMenu = true) {
+    constructor(
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    localeRoot = 'NgxPageDirective', 
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    hasMenu = true) {
         super(localeRoot);
         /**
          * @description Page title text for the current view.
@@ -5085,8 +5022,7 @@ class NgxModelPageDirective extends NgxPageDirective {
     async initialize() {
         await super.initialize();
         await this.refresh(this.modelId);
-        if (!this.modelId && this.operations?.length)
-            this.operations = this.operations.filter((o) => [OperationKeys.UPDATE, OperationKeys.DELETE].includes(o));
+        this.changeDetectorRef.detectChanges();
         this.getLocale(this.modelName);
     }
     // /**
@@ -5108,8 +5044,9 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {string} [uid] - The unique identifier of the model to load; defaults to modelId
      */
     async refresh(uid) {
-        if (!uid)
+        if (!uid) {
             uid = this.modelId;
+        }
         try {
             this._repository = this.repository;
             switch (this.operation) {
@@ -5265,7 +5202,7 @@ 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 handleRead(uid, repository, modelName, pk) {
+    async handleRead(uid, repository, modelName) {
         if (!uid) {
             this.log.info('No key passed to model page read operation, backing to last page');
             return undefined;
@@ -5275,7 +5212,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             if (!modelName && this.model?.constructor)
                 this.modelName = modelName = this.model.constructor.name;
         }
-        const getRepository = async (modelName, model = {}, parent = '') => {
+        const getRepository = async (modelName, acc = {}, parent = '') => {
             if (this._repository)
                 return this._repository;
             const constructor = Model.get(modelName);
@@ -5285,10 +5222,10 @@ class NgxModelPageDirective extends NgxPageDirective {
                     const type = this.getModelPropertyType(constructor, prop);
                     const context = getModelAndRepository(type);
                     if (!context) {
-                        model[prop] = {};
-                        return getRepository(type, model, prop);
+                        acc[prop] = {};
+                        return getRepository(type, acc, prop);
                     }
-                    const { repository, pk, pkType } = context;
+                    const { repository, model, pk, pkType } = context;
                     if (!this.pk) {
                         this.pk = pk;
                         this.pkType = pkType;
@@ -5302,8 +5239,10 @@ class NgxModelPageDirective extends NgxPageDirective {
                         .execute();
                     if (modelName === this.modelName) {
                         const data = query?.length ? (query?.length === 1 ? query[0] : query) : undefined;
-                        model[prop] = data;
-                        this.model = Model.build({ [prop]: data }, modelName);
+                        acc[prop] = data;
+                        const model = await this.transactionEnd(data, repository, OperationKeys.READ);
+                        this.name = prop;
+                        this.model = Model.build({ [prop]: model ? model : data }, modelName);
                     }
                     else {
                         // model[parent] = {
@@ -5477,8 +5416,8 @@ class NgxModelPageDirective extends NgxPageDirective {
         return { ...event, success, message, model: result, aborted: false };
     }
     async batchOperation(context, redirect = false) {
-        const { data, repository, pk } = context.context;
-        return data;
+        // const { data, repository, pk } = context.context;
+        // return data;
         // return await this.submit({data}, false, repository, pk);
         // const result: boolean[] = [];
         // let resultMessage = '';
@@ -5496,13 +5435,11 @@ class NgxModelPageDirective extends NgxPageDirective {
         // return {...{data: models}, success, message: resultMessage};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxModelPageDirective, isStandalone: true, inputs: { modelId: "modelId", operation: "operation" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxModelPageDirective, isStandalone: true, inputs: { operation: "operation" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxModelPageDirective, decorators: [{
             type: Directive
-        }], propDecorators: { modelId: [{
-                type: Input
-            }], operation: [{
+        }], propDecorators: { operation: [{
                 type: Input
             }] } });
 
@@ -5718,6 +5655,7 @@ class ComponentRendererComponent extends NgxRenderableComponentDirective {
         super(...arguments);
         this.children = [];
         this.projectable = true;
+        this.pk = '';
         this.parent = undefined;
     }
     /**
@@ -5781,8 +5719,7 @@ class ComponentRendererComponent extends NgxRenderableComponentDirective {
      * @memberOf ComponentRendererComponent
      */
     createComponent(tag, globals = {}) {
-        const component = NgxRenderingEngine.components(tag)
-            ?.constructor;
+        const component = NgxRenderingEngine.components(tag)?.constructor;
         const metadata = reflectComponentType(component);
         const componentInputs = metadata.inputs;
         const props = globals?.['item'] || globals?.['props'] || {};
@@ -5811,23 +5748,26 @@ class ComponentRendererComponent extends NgxRenderableComponentDirective {
         const hasRootForm = hasProperty(BaseComponentProps.PARENT_FORM);
         if (hasRootForm && this.parentForm)
             props[BaseComponentProps.PARENT_FORM] = this.parentForm;
-        props['className'] = (props['className'] ?
-            props['className'] + ' ' + this.className : this.className || "");
+        props['className'] = props['className']
+            ? props['className'] + ' ' + this.className
+            : this.className || '';
         this.vcr.clear();
         // const projectable = (this.children?.length && this.projectable);
         // const template = projectable ? this.vcr.createEmbeddedView(this.inner as TemplateRef<unknown>, this.injector).rootNodes : [];
-        this.instance = NgxRenderingEngine.createComponent(component, props, this.injector, metadata, this.vcr, []);
+        this.instance = NgxRenderingEngine.createComponent(component, { ...props, ...{ modelId: props?.modelId || this.modelId, pk: props?.pk || this.pk } }, this.injector, metadata, this.vcr, []);
         this.subscribeEvents(component);
     }
     createParentComponent() {
         const { component, inputs } = this.parent;
         const metadata = reflectComponentType(component);
-        const template = this.projectable ? this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes : [];
+        const template = this.projectable
+            ? this.vcr.createEmbeddedView(this.inner, this.injector).rootNodes
+            : [];
         this.instance = NgxRenderingEngine.createComponent(component, inputs, this.injector, metadata, this.vcr, template);
         this.subscribeEvents(component);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComponentRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", children: "children", projectable: "projectable", parent: "parent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n\n<ng-template #componentOuter></ng-template>\n\n<ng-template #componentInner>\n  @if (parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if (!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if (projectable) {\n    @if (children?.length) {\n      @for(child of children; track child) {\n        @if (child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", children: "children", projectable: "projectable", pk: "pk", parent: "parent" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<!-- Keep to avoid id conflicts -->\n\n<ng-template #componentOuter></ng-template>\n\n<ng-template #componentInner>\n  @if (parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if (!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n    }\n  }\n  @if (projectable) {\n    @if (children?.length) {\n      @for(child of children; track child) {\n        @if (child.children?.length) {\n         <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n           <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        }\n      }\n    }\n  }\n\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
@@ -5839,6 +5779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], projectable: [{
                 type: Input
+            }], pk: [{
+                type: Input
             }], parent: [{
                 type: Input
             }] } });
@@ -5907,7 +5849,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
         this.checked = false;
         /**
          * @description Flag tracking if validation error event has been dispatched.
-         * @summary Prevents duplicate validation error events from being dispatched.
+         * @summary Proverride  duplicate validation error override  from being dispatched.
          * @type {boolean}
          * @private
          */
@@ -5930,7 +5872,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
          * @type {function(string, ...string): string}
          * @public
          */
-        this.sf = sf;
+        this.sf = sf$1;
         /**
          * @description Callback function invoked when the field value changes.
          * @summary Function registered by Angular's forms system through registerOnChange.
@@ -6058,8 +6000,9 @@ class NgxFormFieldDirective extends NgxComponentDirective {
      * @public
      */
     async ngOnChanges(changes) {
-        if (!this.initialized)
+        if (!this.initialized) {
             await super.ngOnChanges(changes);
+        }
         if (changes['activeFormGroupIndex'] &&
             this.multiple &&
             !changes['activeFormGroupIndex'].isFirstChange() &&
@@ -6102,7 +6045,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
     }
     /**
      * @description Clears the current form control value as a response to a UI interact
-     * @summary Set field value as undefined and prevents event propagation.
+     * @summary Set field value as undefined and proverride  event propagation.
      * @param {Event} event - The value to set
      * @return {void}
      * @public
@@ -6113,7 +6056,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
         this.setValue(undefined);
     }
     /**
-     * @description Handles IonSelect change events emitted from modal child components.
+     * @description Handles IonSelect change override  emitted from modal child components.
      * @summary Forces change detection when rendered inside a modal and synchronizes the select value with the directive state.
      * @param {SelectCustomEvent<SelectChangeEventDetail>} event - IonSelect change event containing the selected value.
      * @return {void}
@@ -6300,17 +6243,18 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
      * @param {string | M} model - The model to be rendered
      */
     async render(model) {
-        model = typeof model === "string" ? Model.build({}, model) : model;
+        model = typeof model === Primitives.STRING ? Model.build({}, String(model)) : model;
         if (model) {
             this.output = model.render(this.globals || {}, this.vcr, this.injector, this.inner, this.projectable);
             if (this.output?.inputs)
-                this.rendererId = sf(AngularEngineKeys.RENDERED_ID, this.output.inputs["rendererId"]);
+                this.rendererId = sf$1(AngularEngineKeys.RENDERED_ID, this.output.inputs['rendererId']);
             this.instance = this.output?.component;
-            const { operation, handlers } = this.globals || {};
+            const { operation } = this.globals || {};
             // const {inputs} = this.output;
             // await this.initProps(inputs || {});
-            if (operation)
+            if (operation) {
                 this.operation = operation;
+            }
             this.subscribeEvents();
         }
     }
@@ -6319,7 +6263,7 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModelRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [], selector: "ngx-decaf-model-renderer", host: { "[attr.id]": "uid" }, template: "  <!-- Keep to avoid id conflicts -->\n  <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <!-- <ng-template #inner>\n    <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\"  [id]=\"rendererId || ''\">\n      @for (child of output?.children; track child) {\n        @if (child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template> -->\n" }]
+            args: [{ standalone: true, imports: [], selector: 'ngx-decaf-model-renderer', host: { '[attr.id]': 'uid' }, template: "  <!-- Keep to avoid id conflicts -->\n  <div class=\"dcf-hidden\" [id]=\"uid\"></div>\n\n  <ng-template #componentOuter></ng-template>\n  <!-- <ng-template #inner>\n    <div class=\"dcf-grid dcf-grid-small dcf-model-renderer-component dcf-child-width-1-1\"  [id]=\"rendererId || ''\">\n      @for (child of output?.children; track child) {\n        @if (child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template> -->\n" }]
         }], propDecorators: { projectable: [{
                 type: Input
             }] } });
@@ -6464,10 +6408,12 @@ class NgxParentComponentDirective extends NgxComponentDirective {
     }
     async initialize(model) {
         await super.initialize();
-        if (model)
+        if (model) {
             this.model = model;
-        if (this.model && !this.repository)
+        }
+        if (this.model && !this.repository) {
             this._repository = this.repository;
+        }
     }
     async ngOnDestroy() {
         await super.ngOnDestroy();
@@ -6724,9 +6670,8 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
      * @returns {Promise<void>} - A promise that resolves when initialization is complete.
      */
     async ngOnInit() {
-        if (this.inlineContent && typeof this.inlineContent === Primitives.STRING)
-            this.inlineContent = this.domSanitizer.bypassSecurityTrustHtml(this.inlineContent);
         await super.initialize();
+        this.parseInlineContent();
     }
     /**
      * @description Initializes the modal with the provided options.
@@ -6748,6 +6693,14 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         if (['primary', 'secondary', 'tertiary', 'danger', 'medium', 'dark'].includes(this.headerBackground))
             this.iconColor = 'light';
     }
+    parseInlineContent() {
+        if (this.inlineContent) {
+            if (this.inlineContent instanceof HTMLElement) {
+                this.inlineContent = this.inlineContent.outerHTML;
+            }
+            this.inlineContent = this.domSanitizer.bypassSecurityTrustHtml(this.inlineContent);
+        }
+    }
     /**
      * @description Creates and presents the modal.
      * @summary Initializes the modal with the provided properties and displays it.
@@ -6767,6 +6720,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
      * @returns {Promise<void>} - A promise that resolves when the modal is presented.
      */
     async present() {
+        this.parseInlineContent();
         this.isOpen = true;
         this.changeDetectorRef.detectChanges();
     }
@@ -6827,7 +6781,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         await modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", tag: "tag", options: "options", globals: "globals", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition", fullscreen: "fullscreen", expandable: "expandable", lightBox: "lightBox", headerTransparent: "headerTransparent", headerBackground: "headerBackground", showHeader: "showHeader", showCloseButton: "showCloseButton" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ModalComponent = __decorate([
     Dynamic(),
@@ -6848,7 +6802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonHeader,
                         IonTitle,
                         IonToolbar,
-                    ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-fullscreen-expanded]=\"expanded\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar [color]=\"headerBackground\">\n        @if (title?.length) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          @if (expandable && !fullscreen) {\n            <ion-button\n              fill=\"clear\"\n              size=\"small\"\n              type=\"button\"\n              class=\"dcf-button-expand\"\n              (click)=\"handleExpandToggle()\"\n            >\n              <ngx-decaf-icon\n                [color]=\"iconColor\"\n                [name]=\"expanded ? 'ti-maximize-off' : 'ti-maximize'\"\n              />\n            </ion-button>\n          }\n          @if (showCloseButton) {\n            <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n              <ngx-decaf-icon [color]=\"iconColor\" name=\"ti-x\" />\n            </ion-button>\n          }\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === 'top') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (!tag && model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          } @else if (tag && globals) {\n            <ngx-decaf-component-renderer\n              [tag]=\"tag\"\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"{ props: globals }\"\n            />\n          }\n          @if (inlineContent && inlineContentPosition === 'bottom') {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-confirm{top:-100px;--max-width: 320px;--max-height: 35vh}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-title{font-weight:500;font-size:1.125rem;line-height:1.75rem;color:var(--dcf-color-gray-8)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-delete .dcf-title{color:var(--dcf-color-danger)}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-content{font-weight:400;font-size:.935rem;line-height:1.375rem;color:var(--dcf-color-gray-6);margin-top:1rem}.dcf-modal-component.dcf-modal-confirm ::ng-deep .dcf-buttons-grid{position:absolute;bottom:2rem;right:1rem}.dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-modal-component ion-button.dcf-button-close{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-no-header ion-header,.dcf-modal-component.dcf-no-title ion-header{box-shadow:none;border-color:transparent!important}.dcf-modal-component .dcf-modal-content ::ng-deep pre{border:1px solid var(--dcf-color-gray-2);white-space:pre-wrap;overflow-wrap:anywhere;background:rgba(var(--dcf-color-warning-rgb),.175)!important;padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);font-size:.9rem!important;font-weight:500;margin-top:2rem}@media (max-width: 768px){.dcf-modal-component .dcf-button-expand{display:none!important}}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--max-height: 50%;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-expand{--min-height: 50%;--min-width: 75%;--max-width: 100%}.dcf-modal-component.dcf-fullscreen-expanded,.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-expanded.dcf-header-transparent,.dcf-modal-component.dcf-fullscreen-modal.dcf-header-transparent{padding-left:2rem;padding-bottom:2rem;padding-right:1rem}.dcf-modal-component.dcf-fullscreen-expanded:not(.dcf-header-transparent).dcf-no-title ion-header ion-button,.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-buttons ion-button:not(:last-of-type){position:relative;right:1px}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;border-color:transparent!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-buttons,.dcf-modal-component.dcf-lightbox-modal ion-header ion-buttons{background:var(--dcf-color-gray-2)!important;border-radius:var(--dcf-border-radius)!important;box-shadow:var(--dcf-box-shadow)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{--background: transparent !important;margin:0!important;width:35px!important;height:25px!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ngx-decaf-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ngx-decaf-icon{transform:translate(-1px)!important}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['component']
@@ -6893,7 +6847,6 @@ let ModalConfirmComponent = class ModalConfirmComponent extends ModalComponent {
             });
             this.translatable = false;
         }
-        console.log(this.title);
         if (!this.message) {
             this.message = await this.translate(`${this.locale}.confirm.operations.${role}.message`, {
                 '0': uid,
@@ -7006,7 +6959,7 @@ async function getNgxInlineModal(inlineContent, props = {}, injector) {
         props,
         ...{
             inlineContent: inlineContent ?? '<div></div>',
-            className: `${props?.className ?? ''} dcf-modal dcf-modal-expand`,
+            className: `${props?.className ?? ''} dcf-modal`,
         },
     }, {}, injector || undefined);
 }
@@ -7287,6 +7240,19 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         }
         await super.initialize();
     }
+    /**
+     * @description Component after view initialization lifecycle method.
+     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
+     * This ensures proper initialization of read-only fields that don't require
+     * form functionality but still need view setup.
+     *
+     * @returns {Promise<void>}
+     * @memberOf CrudFieldComponent
+     */
+    async ngAfterViewInit() {
+        if (this.type === HTML5InputTypes.RADIO && !this.value)
+            this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
+    }
     /**
      * Returns a list of options for select or radio inputs, with their `text` property
      * localized if it does not already include the word 'options'. The localization key
@@ -7382,19 +7348,6 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
             }
         }
     }
-    /**
-     * @description Component after view initialization lifecycle method.
-     * @summary Calls the parent afterViewInit method for READ and DELETE operations.
-     * This ensures proper initialization of read-only fields that don't require
-     * form functionality but still need view setup.
-     *
-     * @returns {Promise<void>}
-     * @memberOf CrudFieldComponent
-     */
-    async ngAfterViewInit() {
-        if (this.type === HTML5InputTypes.RADIO && !this.value)
-            this.setValue(this.options[0].value); // TODO: migrate to RenderingEngine
-    }
     /**
      * @description Component cleanup lifecycle method.
      * @summary Performs cleanup operations for READ and DELETE operations by calling
@@ -7556,6 +7509,16 @@ class NgxFormDirective extends NgxParentComponentDirective {
     constructor() {
         super(...arguments);
         this.deepMerge = false;
+        this.path = '';
+        /**
+         * @description Enables multiple item management within the fieldset.
+         * @summary Boolean flag that determines if the fieldset supports adding multiple values.
+         * When true, displays a reorderable list of items with add/remove functionality.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.multiple = false;
         /**
          * @description Field update trigger mode for form validation.
          * @summary Determines when form field validation should be triggered. Options include
@@ -7676,6 +7639,15 @@ class NgxFormDirective extends NgxParentComponentDirective {
             this.formGroup = undefined;
         }
     }
+    async ngOnChanges(changes) {
+        await super.ngOnChanges(changes);
+        // if (changes[BaseComponentProps.MODEL_ID]) {
+        //   const { previousValue, currentValue } = changes[BaseComponentProps.MODEL_ID];
+        //   if (!previousValue && currentValue) {
+        //     await this.refresh(this.operation);
+        //   }
+        // }
+    }
     async ngAfterViewInit() {
         //TODO: ver se isso é necessário
         // if (this.formGroup)
@@ -7812,7 +7784,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", deepMerge: "deepMerge", path: "path", multiple: "multiple", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent", formGroupLoadedEvent: "formGroupLoadedEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxFormDirective, decorators: [{
             type: Directive
@@ -7820,6 +7792,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], deepMerge: [{
                 type: Input
+            }], path: [{
+                type: Input
+            }], multiple: [{
+                type: Input
             }], component: [{
                 type: ViewChild,
                 args: ['component', { static: false, read: ElementRef }]
@@ -8230,7 +8206,8 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
      * @memberOf LayoutComponent
      */
     async ngOnInit() {
-        super.parseProps(this);
+        // must always parse props first, parse children case of layout depends on it
+        super.parseProps(this, !this.children.length ? [] : ['children']);
         if (this.breakpoint)
             this.breakpoint =
                 `${this.breakpoint.startsWith('x') ? this.breakpoint.substring(0, 2) : this.breakpoint.substring(0, 1)}`.toLowerCase();
@@ -8239,7 +8216,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         await super.initialize();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 ? 'dcf-layout-row ' : '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 (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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                  <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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.16", 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 ? 'dcf-layout-row ' : '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 (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [pk]=\"pk\"\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -8247,7 +8224,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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 ? 'dcf-layout-row ' : '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 (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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                  <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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 ? 'dcf-layout-row ' : '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 (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\n            >\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      [pk]=\"pk\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n                  <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [pk]=\"pk\"\n                    [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.5rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div~div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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: [{
@@ -8276,13 +8253,13 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
      */
     async ngOnInit() {
         this.options = Object.assign({}, DefaultFormReactiveOptions, { buttons: { submit: { text: this.operation.toLowerCase() } } }, this.options || {});
-        await super.initialize();
         if (!this.pk && this.modelName) {
             const repo = getModelAndRepository(this.modelName);
             if (repo) {
                 this.pk = repo.pk;
             }
         }
+        await super.initialize();
     }
     /**
      * @description Handles delete operations by emitting delete events.
@@ -8298,7 +8275,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         super.submitEventEmit(this.model, 'CrudFormComponent', ComponentEventNames.Submit, this.handlers, OperationKeys.DELETE);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\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-right\">\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              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\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 : (locale + '.' + options.buttons.submit.text) | translate }}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\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          {{locale + '.delete' | translate}}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\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           {{ action ? action : (locale + '.' + options.buttons.submit.text) | translate }}\n        </ion-button>\n      </div>\n    }\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) ? (locale + '.back' | translate) : options.buttons.clear?.text}}\n      </ion-button>\n    </div>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\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    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -8306,7 +8283,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [TranslatePipe, ReactiveFormsModule, LayoutComponent, 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        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\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-right\">\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              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\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 : (locale + '.' + options.buttons.submit.text) | translate }}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\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          {{locale + '.delete' | translate}}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\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           {{ action ? action : (locale + '.' + options.buttons.submit.text) | translate }}\n        </ion-button>\n      </div>\n    }\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) ? (locale + '.back' | translate) : options.buttons.clear?.text}}\n      </ion-button>\n    </div>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: [TranslatePipe, ReactiveFormsModule, LayoutComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\"\n    #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\"\n  >\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        [pk]=\"pk\"\n        (listenEvent)=\"handleEvent($event)\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [modelId]=\"modelId\"\n        [cardType]=\"cardType ?? 'blank'\"\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    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon\n                  aria-hidden=\"true\"\n                  [slot]=\"options.buttons.clear?.iconSlot\"\n                  [name]=\"options.buttons.clear?.icon\"\n                ></ion-icon>\n              }\n              {{ locale + '.' + (allowClear ? options.buttons.clear?.text : 'back') | translate }}\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon\n                aria-hidden=\"true\"\n                [slot]=\"options.buttons.submit.iconSlot\"\n                [name]=\"options.buttons.submit.icon\"\n              ></ion-icon>\n            }\n            {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n          </ion-button>\n        </div>\n      </div>\n    }\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [pk]=\"pk\"\n      [modelId]=\"modelId\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [modelId]=\"modelId\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      (listenEvent)=\"handleEvent($event)\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\"\n    />\n  </section>\n\n  <section\n    [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\"\n    [id]=\"uid\"\n  >\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button (click)=\"handleDelete()\" color=\"danger\" type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ locale + '.delete' | translate }}\n        </ion-button>\n      </div>\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon\n              aria-hidden=\"true\"\n              [slot]=\"options.buttons.submit.iconSlot\"\n              [name]=\"options.buttons.submit.icon\"\n            ></ion-icon>\n          }\n          {{ action ? action : (locale + '.' + options.buttons.submit.text | translate) }}\n        </ion-button>\n      </div>\n    }\n    <div>\n      <ion-button fill=\"clear\" (click)=\"handleReset()\">\n        @if (options.buttons.clear?.icon) {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"options.buttons.clear?.iconSlot\"\n            [name]=\"options.buttons.clear?.icon\"\n          ></ion-icon>\n        }\n        {{\n          [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation)\n            ? (locale + '.back' | translate)\n            : options.buttons.clear?.text\n        }}\n      </ion-button>\n    </div>\n  </section>\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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.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: () => [] });
 
 /**
@@ -8883,7 +8860,12 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         else {
             this.activePage = this.getActivePage();
         }
-        this.mapper = Object.assign(this.mapper, { [this.pk]: this.pk });
+        if (this.pk) {
+            this.mapper = Object.assign(this.mapper || {}, { [this.pk]: this.pk });
+        }
+        await this.initialize();
+    }
+    async initialize() {
         await super.initialize();
         await this.refresh();
     }
@@ -8918,26 +8900,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      */
     async ngAfterViewInit() {
         await super.ngAfterViewInit();
-        // console.log(this);
-        // if (!this.collapsable)
-        //   this.isOpen = true;
-        // if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE) {
-        //   this.isOpen = true;
-        //   // hidden remove button
-        //   const accordionElement = this.component?.nativeElement.querySelector('ion-accordion-group');
-        //   if (accordionElement)
-        //     this.renderer.setAttribute(accordionElement, 'value', 'open');
-        // } else {
-        //   const inputs = this.component?.nativeElement.querySelectorAll('.dcf-field-required');
-        //   this.isRequired = inputs?.length > 0;
-        //   if (this.isRequired) {
-        //     this.accordionComponent.value = 'open';
-        //     this.handleAccordionToggle();
-        //   }
-        // }
-        // if (!(this.formGroup instanceof FormArray))
-        //   this.formGroup = (this.formGroup as FormGroup)
-        // this.changeDetectorRef.detectChanges();
     }
     async refresh(operation) {
         if (operation) {
@@ -8977,29 +8939,30 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                     ];
                 }
                 else {
-                    //  if (Array.isArray(data)) {
-                    //   this.value = [];
-                    //   const value = data.map((v) => {
-                    //     const formGroup = this.activeFormGroup as FormGroup;
-                    //     if (data.length > (formGroup.parent as FormArray).length)
-                    //       NgxFormService.addGroupToParent(formGroup.parent as FormArray);
-                    //     if (!Object.keys(this.mapper).length) this.mapper = this.getMapper(v as KeyValue);
-                    //     Object.entries(v).forEach(([key, value]) => {
-                    //       if (key === this.pk)
-                    //         formGroup.addControl(key, new FormControl({ value: value, disabled: false }));
-                    //       const control = formGroup.get(key);
-                    //       if (control instanceof FormControl) {
-                    //         control.setValue(value);
-                    //         control.updateValueAndValidity();
-                    //         formGroup.updateValueAndValidity();
-                    //       }
-                    //     });
-                    //     this.activeFormGroupIndex = (formGroup.parent as FormArray).length - 1;
-                    //   });
-                    //   this.setValue();
-                    //   this.changeDetectorRef.detectChanges();
-                    // }
-                    this.getItems(data);
+                    if (Array.isArray(data)) {
+                        this.value = [];
+                        data.map((v) => {
+                            const formGroup = this.activeFormGroup;
+                            if (data.length > formGroup.parent.length)
+                                NgxFormService.addGroupToParent(formGroup.parent);
+                            if (!Object.keys(this.mapper).length)
+                                this.mapper = this.getMapper(v);
+                            Object.entries(v).forEach(([key, value]) => {
+                                if (key === this.pk)
+                                    formGroup.addControl(key, new FormControl({ value: value, disabled: false }));
+                                const control = formGroup.get(key);
+                                if (control instanceof FormControl) {
+                                    control.setValue(value);
+                                    control.updateValueAndValidity();
+                                    formGroup.updateValueAndValidity();
+                                }
+                            });
+                            this.activeFormGroupIndex = formGroup.parent.length - 1;
+                        });
+                        this.setValue();
+                        // this.changeDetectorRef.detectChanges();
+                    }
+                    // this.getItems(data as []);
                 }
             }
         }
@@ -9347,11 +9310,11 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         if (formGroup?.length) {
             const value = formGroup.controls.map(({ value }) => value).filter((v) => this.hasValue(v));
             this.value = value;
-            this.getItems(value, this.items);
+            this.getItems(value);
         }
         this.updatingItem = undefined;
     }
-    getItems(value, items = []) {
+    getItems(value) {
         if (value) {
             if (!Array.isArray(value)) {
                 value = [value];
@@ -9376,7 +9339,6 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                         index: v.index > 1 ? v.index : index + 1,
                     };
                 }),
-                ...(this.operation === OperationKeys.UPDATE ? items : []),
             ];
         }
     }
@@ -9411,7 +9373,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\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'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length ? locale + '.clear_items' : locale + '.hidden_form') | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"item.title === isUniqueError\"\n                    [class.updating]=\"updatingItem?.['index'] === item.index - 1\"\n                    lines=\"full\"\n                    [button]=\"false\"\n                  >\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\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError && !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      }\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{ item.description }}</ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"locale + '.edit_item' | translate\"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"locale + '.remove_item' | translate\"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\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\">\n                    {{ locale + '.not_unique' | translate: { value: isUniqueError } }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n              >\n                {{\n                  locale + (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\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'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length ? locale + '.clear_items' : locale + '.hidden_form') | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"isUniqueError && item.title === isUniqueError\"\n                    [class.updating]=\"updatingItem?.['index'] === item.index - 1\"\n                    lines=\"full\"\n                    [button]=\"false\"\n                  >\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\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError && !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      }\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{ item.description }}</ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"locale + '.edit_item' | translate\"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"locale + '.remove_item' | translate\"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\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\">\n                    {{ locale + '.not_unique' | translate: { value: isUniqueError } }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n              >\n                {{\n                  locale + (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -9433,7 +9395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         LayoutComponent,
                         IonSpinner,
                         IconComponent,
-                    ], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\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'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length ? locale + '.clear_items' : locale + '.hidden_form') | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"item.title === isUniqueError\"\n                    [class.updating]=\"updatingItem?.['index'] === item.index - 1\"\n                    lines=\"full\"\n                    [button]=\"false\"\n                  >\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\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError && !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      }\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{ item.description }}</ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"locale + '.edit_item' | translate\"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"locale + '.remove_item' | translate\"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\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\">\n                    {{ locale + '.not_unique' | translate: { value: isUniqueError } }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n              >\n                {{\n                  locale + (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\n"] }]
+                    ], template: "@if (['create', 'update'].includes(operation) || !multiple) {\n  <div\n    [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.dcf-empty]=\"!items?.length\"\n    [class.dcf-open]=\"isOpen\"\n    #component\n  >\n    <div class=\"dcf-width-1-1\">\n      <div>\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'].includes(operation) && multiple) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button\n                fill=\"clear\"\n                size=\"small\"\n                (click)=\"handleClear($event)\"\n                [class.dcf-invisible]=\"!isOpen\"\n                [attr.aria-label]=\"\n                  (items?.length ? locale + '.clear_items' : locale + '.hidden_form') | translate\n                \"\n              >\n                <ngx-decaf-icon\n                  slot=\"icon-only\"\n                  [name]=\"'ti-' + (items?.length ? 'trash' : 'eye-off')\"\n                />\n              </ion-button>\n            </div>\n          }\n        </div>\n      </div>\n      <div\n        class=\"dcf-fieldset-content\"\n        [class.dcf-empty]=\"!items?.length && !isOpen\"\n        slot=\"content\"\n      >\n        @if (activePage) {\n          <div\n            class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\"\n            [class.dcf-disabled]=\"!activePage\"\n          >\n            <ngx-decaf-layout\n              [className]=\"''\"\n              [flexMode]=\"props.flexMode ?? false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [pk]=\"pk\"\n              [modelId]=\"modelId\"\n              [operation]=\"operation\"\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\n        @if (multiple && ['create', 'update'].includes(operation)) {\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group\n                [formGroup]=\"formGroup.parent\"\n                [disabled]=\"updatingItem\"\n                (ionItemReorder)=\"handleReorderItems($any($event))\"\n                #accordionComponent\n              >\n                @for (item of items; track item.index) {\n                  <ion-item\n                    [class.not-unique]=\"isUniqueError && item.title === isUniqueError\"\n                    [class.updating]=\"updatingItem?.['index'] === item.index - 1\"\n                    lines=\"full\"\n                    [button]=\"false\"\n                  >\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\n                            aria-hidden=\"true\"\n                            class=\"dcf-reorder-disabled\"\n                            size=\"small\"\n                            name=\"swap-vertical-outline\"\n                            disabled\n                          ></ion-icon>\n                        </div>\n                      }\n                    }\n\n                    <ion-label\n                      [color]=\"\n                        item.title === isUniqueError && !updatingItem?.[pk] === item.title\n                          ? 'danger'\n                          : ''\n                      \"\n                    >\n                      @if (ordenable) {\n                        {{ item.index }}.{{ item.title }}\n                      } @else {\n                        @if (item[pk]) {\n                          {{ pk }}: {{ item[pk] }} -\n                        }\n                        {{ item.title }}\n                      }\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{ item.description }}</ion-text>\n                      }\n                    </ion-label>\n                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) {\n                          {{ item.info }}\n                          <br />\n                        }\n                        @if (item.subinfo) {\n                          {{ item.subinfo }}\n                        }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if (editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button\n                            fill=\"clear\"\n                            size=\"small\"\n                            (click)=\"handleUpdateItem($index)\"\n                            [attr.aria-label]=\"locale + '.edit_item' | translate\"\n                          >\n                            <ngx-decaf-icon\n                              slot=\"icon-only\"\n                              size=\"small\"\n                              name=\"ti-cash-edit\"\n                              [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                            ></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button\n                          fill=\"clear\"\n                          size=\"small\"\n                          color=\"danger\"\n                          (click)=\"handleRemoveItem($index)\"\n                          [attr.aria-label]=\"locale + '.remove_item' | translate\"\n                        >\n                          <ngx-decaf-icon\n                            slot=\"icon-only\"\n                            size=\"small\"\n                            name=\"ti-row-remove\"\n                            [color]=\"!isDarkMode ? 'dark' : 'light'\"\n                          />\n                        </ion-button>\n                      }\n                    </div>\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (isUniqueError) {\n            <div\n              class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\"\n            >\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\">\n                    {{ locale + '.not_unique' | translate: { value: isUniqueError } }}\n                  </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\n                class=\"dcf-text-small\"\n                [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n              >\n                {{\n                  locale + (items.length !== max ? '.max_items' : '.max_items_reached')\n                    | translate: { '0': max }\n                }}\n              </ion-text>\n            </div>\n          }\n\n          <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n            @if (updatingItem) {\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  color=\"danger\"\n                  (click)=\"handleCancelUpdateItem()\"\n                  [attr.aria-label]=\"locale + '.cancel_update' | translate\"\n                >\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button\n                  size=\"small\"\n                  fill=\"clear\"\n                  (click)=\"handleCreateItem()\"\n                  [attr.aria-label]=\"locale + '.update_item' | translate\"\n                >\n                  <ion-icon aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | translate }}\n                </ion-button>\n              </div>\n            } @else {\n              @if (items.length < max || !max) {\n                <div>\n                  <ion-button\n                    size=\"small\"\n                    fill=\"clear\"\n                    class=\"dcf-button-add\"\n                    [color]=\"isDarkMode ? 'light' : 'dark'\"\n                    (click)=\"handleCreateItem()\"\n                    [attr.aria-label]=\"locale + '.create_item' | translate\"\n                  >\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                    <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{\n                      locale +\n                        (required\n                          ? items.length\n                            ? '.add'\n                            : '.add_first'\n                          : items.length\n                            ? '.add'\n                            : isOpen\n                              ? '.add_first'\n                              : '.show_form') | translate\n                    }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\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    <legend>{{ (title ? title : name) | translate }}</legend>\n    @if (!items.length) {\n      <div class=\"dcf-padding-xsmall\">\n        <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n      </div>\n    } @else {\n      @for (item of items; track trackItemFn($index, item)) {\n        <div class=\"dcf-fieldset-read-item\">\n          <div>\n            <ngx-decaf-layout\n              [className]=\"operation\"\n              [operation]=\"operation\"\n              [pk]=\"pk\"\n              [model]=\"model\"\n              [modelId]=\"modelId\"\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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.create ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControl: [{
                 type: Input
             }], customTypes: [{
@@ -11273,7 +11235,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * period. This prevents multiple rapid clicks from triggering multiple events.
          *
          * @private
-         * @type {Subject<CustomEvent | ListItemCustomEvent | IBaseCustomEvent>}
+         * @type {Subject<CustomEvent | IListItemCustomEvent | IBaseCustomEvent>}
          * @memberOf ListComponent
          */
         this.clickItemSubject = new Subject();
@@ -11402,7 +11364,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
             const mapperFn = value?.['valueParserFn'] || undefined;
             if (typeof mapperFn === 'function') {
-                const value = await mapperFn(key, this);
+                const value = await mapperFn(this, key);
                 if (typeof value === Primitives.STRING) {
                     mapper[value] = key;
                 }
@@ -11473,8 +11435,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         this.data = !this.model
             ? await this.getFromRequest(!!event, start, limit)
             : (await this.getFromModel(!!event));
-        if (!this.isModalChild)
-            this.refreshEventEmit(this.data);
+        this.refreshEventEmit(this.data);
         if (this.type === ListComponentsTypes.INFINITE) {
             if (this.page === this.pages) {
                 if (event?.target)
@@ -11611,12 +11572,12 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * debounced click subject. This allows the component to respond to clicks on
      * list items regardless of where they originate from.
      *
-     * @param {ListItemCustomEvent | IBaseCustomEvent} event - The click event
-     * @returns {void}
+     * @param {IListItemCustomEvent | IBaseCustomEvent} event - The click event
+     * @returns {Promise<void>}
      *
      * @memberOf ListComponent
      */
-    handleClick(event) {
+    async handleClick(event) {
         this.clickItemSubject.next(event);
     }
     /**
@@ -11717,7 +11678,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * This extracts the relevant data from the event and passes it to parent components.
      *
      * @private
-     * @param {ListItemCustomEvent | IBaseCustomEvent} event - The click event
+     * @param {IListItemCustomEvent | IBaseCustomEvent} event - The click event
      * @returns {void}
      *
      * @memberOf ListComponent
@@ -12093,7 +12054,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 else {
                     let val;
                     for (const _value of arrayValue)
-                        val = !val ? item[_value] : (typeof val === 'string' ? JSON.parse(val) : val)[_value];
+                        val = !val
+                            ? item[_value]
+                            : (typeof val === Primitives.STRING ? JSON.parse(val) : val)[_value];
                     if (isValidDate(new Date(val)))
                         val = `${formatDate(val)}`;
                     accum[key] = val === null || val === undefined ? value : val;
@@ -12149,7 +12112,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          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        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\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: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\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    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\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%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@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: ["multiple", "conditions", "sortOptions", "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.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", data: "data", source: "source", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (showRefresher) {\n  <ion-refresher\n    slot=\"fixed\"\n    [pullFactor]=\"1\"\n    [pullMin]=\"100\"\n    [pullMax]=\"200\"\n    (ionRefresh)=\"handleRefresh($event)\"\n  >\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar\n            [placeholder]=\"searchbarPlaceholder\"\n            [emitEventToWindow]=\"false\"\n            [debounce]=\"500\"\n            (searchEvent)=\"handleSearch($event)\"\n          />\n        }\n      </div>\n      @if (createButton) {\n        <div\n          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        >\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">\n              Create\n            </ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\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: isModalChild ? route : undefined,\n            model: child,\n            isModalChild: child.isModalChild,\n            emitEvent: child.emitEvent,\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    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\"\n      >\n        <ion-infinite-scroll-content\n          [loadingSpinner]=\"loadingSpinner\"\n          [loadingText]=\"loadingText\"\n        />\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%\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? (locale + '.' + empty.title | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? (locale + '.' + empty.subtitle | translate) : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@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: ["multiple", "conditions", "sortOptions", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "pk", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -12311,7 +12274,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
          * are performed on it. The emitted event contains information about the action,
          * the item data, and other relevant context for parent components to handle.
          *
-         * @type {EventEmitter<ListItemCustomEvent>}
+         * @type {EventEmitter<IListItemCustomEvent>}
          * @memberOf ListItemComponent
          */
         this.clickEvent = new EventEmitter();
@@ -12425,7 +12388,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
      *
      * @memberOf ListItemComponent
      */
-    async handleAction(action, event, target) {
+    async handleAction(event, action, target) {
         event.stopImmediatePropagation();
         if (this.actionMenuOpen) {
             await this.actionMenuComponent.dismiss();
@@ -12580,7 +12543,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
         this.actionMenuOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo", emitEvent: "emitEvent" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes(OperationKeys.READ) ? handleAction(OperationKeys.READ, $event, component) : ''\"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\"  />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if ((operations?.includes(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\n                  <ion-button shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\" [attr.aria-label]=\"locale+'.actions' | translate\">\n                    <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\" />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                                @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon [button]=\"true\" slot=\"icon-only\" name=\"ti-edit\" />\n                                } @else {\n                                  <ngx-decaf-icon [button]=\"true\" slot=\"icon-only\" color=\"danger\" name=\"ti-trash\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex \">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction(operation, $event, component)\"\n                            fill=\"clear\" shape=\"round\"\n                            [attr.aria-label]=\"(locale +'.operations.' + operation) | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "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: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo", emitEvent: "emitEvent" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"\n        operations?.includes(OperationKeys.READ)\n          ? handleAction($event, OperationKeys.READ, component)\n          : ''\n      \"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\" />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                  <span [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\"></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if (\n              (operations?.includes(OperationKeys.DELETE) ||\n                operations?.includes(OperationKeys.UPDATE)) &&\n              uid\n            ) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if (actionsType === 'popover') {\n                  <ion-button\n                    shape=\"round\"\n                    fill=\"clear\"\n                    color=\"primary\"\n                    (click)=\"presentActionsMenu($event)\"\n                    [attr.aria-label]=\"locale + '.actions' | translate\"\n                  >\n                    <ion-icon\n                      slot=\"icon-only\"\n                      aria-hidden=\"true\"\n                      name=\"ellipsis-vertical-outline\"\n                    />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\"\n                  >\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4\n                              class=\"dcf-text-capitalize\"\n                              [innerHTML]=\"'actions' | translate\"\n                            ></h4>\n                          </ion-list-header>\n                          @for (\n                            operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                            track operation\n                          ) {\n                            @if (operations?.includes(operation)) {\n                              <ion-item\n                                [button]=\"true\"\n                                (click)=\"handleAction($event, operation, component)\"\n                              >\n                                <div slot=\"start\">\n                                  @if (operation === OperationKeys.UPDATE) {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      name=\"ti-edit\"\n                                    />\n                                  } @else {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      color=\"danger\"\n                                      name=\"ti-trash\"\n                                    />\n                                  }\n                                </div>\n                                <ion-label class=\"dcf-text-capitalize\">\n                                  {{ operation | translate }}\n                                </ion-label>\n                              </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex\">\n                    @for (\n                      operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                      track operation\n                    ) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction($event, operation, component)\"\n                            fill=\"clear\"\n                            shape=\"round\"\n                            [attr.aria-label]=\"locale + '.operations.' + operation | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options\n        side=\"end\"\n        (ionSwipe)=\"operations.length === 1 ? handleAction($event, operations[0], component) : ''\"\n      >\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option\n            class=\"dcf-update\"\n            (click)=\"handleAction($event, OperationKeys.UPDATE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n          <ion-item-option\n            class=\"dcf-delete\"\n            (click)=\"handleAction($event, OperationKeys.DELETE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "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: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
@@ -12602,7 +12565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonContent,
                         IconComponent,
                         IonPopover,
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes(OperationKeys.READ) ? handleAction(OperationKeys.READ, $event, component) : ''\"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\"  />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if ((operations?.includes(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\n                  <ion-button shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\" [attr.aria-label]=\"locale+'.actions' | translate\">\n                    <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\" />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                                @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon [button]=\"true\" slot=\"icon-only\" name=\"ti-edit\" />\n                                } @else {\n                                  <ngx-decaf-icon [button]=\"true\" slot=\"icon-only\" color=\"danger\" name=\"ti-trash\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex \">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction(operation, $event, component)\"\n                            fill=\"clear\" shape=\"round\"\n                            [attr.aria-label]=\"(locale +'.operations.' + operation) | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"\n        operations?.includes(OperationKeys.READ)\n          ? handleAction($event, OperationKeys.READ, component)\n          : ''\n      \"\n      #component\n    >\n      @if (icon && lines !== 'inset') {\n        <div class=\"dcf-icon-container dcf-width-auto\" [slot]=\"iconSlot\">\n          <ngx-decaf-icon slot=\"icon-only\" [name]=\"icon\" />\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\" />\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            @if (title) {\n              <ion-label class=\"dcf-item-title\">\n                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                  <span [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\"></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if (\n              (operations?.includes(OperationKeys.DELETE) ||\n                operations?.includes(OperationKeys.UPDATE)) &&\n              uid\n            ) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if (actionsType === 'popover') {\n                  <ion-button\n                    shape=\"round\"\n                    fill=\"clear\"\n                    color=\"primary\"\n                    (click)=\"presentActionsMenu($event)\"\n                    [attr.aria-label]=\"locale + '.actions' | translate\"\n                  >\n                    <ion-icon\n                      slot=\"icon-only\"\n                      aria-hidden=\"true\"\n                      name=\"ellipsis-vertical-outline\"\n                    />\n                  </ion-button>\n                  <ion-popover\n                    #actionMenuComponent\n                    side=\"bottom\"\n                    alignment=\"left\"\n                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\"\n                  >\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4\n                              class=\"dcf-text-capitalize\"\n                              [innerHTML]=\"'actions' | translate\"\n                            ></h4>\n                          </ion-list-header>\n                          @for (\n                            operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                            track operation\n                          ) {\n                            @if (operations?.includes(operation)) {\n                              <ion-item\n                                [button]=\"true\"\n                                (click)=\"handleAction($event, operation, component)\"\n                              >\n                                <div slot=\"start\">\n                                  @if (operation === OperationKeys.UPDATE) {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      name=\"ti-edit\"\n                                    />\n                                  } @else {\n                                    <ngx-decaf-icon\n                                      [button]=\"true\"\n                                      slot=\"icon-only\"\n                                      color=\"danger\"\n                                      name=\"ti-trash\"\n                                    />\n                                  }\n                                </div>\n                                <ion-label class=\"dcf-text-capitalize\">\n                                  {{ operation | translate }}\n                                </ion-label>\n                              </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex\">\n                    @for (\n                      operation of [OperationKeys.UPDATE, OperationKeys.DELETE];\n                      track operation\n                    ) {\n                      <div>\n                        @if (operations?.includes(operation)) {\n                          <ngx-decaf-icon\n                            (click)=\"handleAction($event, operation, component)\"\n                            fill=\"clear\"\n                            shape=\"round\"\n                            [attr.aria-label]=\"locale + '.operations.' + operation | translate\"\n                            [button]=\"true\"\n                            slot=\"icon-only\"\n                            [color]=\"operation === OperationKeys.UPDATE ? 'dark' : 'danger'\"\n                            [name]=\"operation === OperationKeys.UPDATE ? 'ti-edit' : 'ti-trash'\"\n                          />\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options\n        side=\"end\"\n        (ionSwipe)=\"operations.length === 1 ? handleAction($event, operations[0], component) : ''\"\n      >\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option\n            class=\"dcf-update\"\n            (click)=\"handleAction($event, OperationKeys.UPDATE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n          <ion-item-option\n            class=\"dcf-delete\"\n            (click)=\"handleAction($event, OperationKeys.DELETE, component)\"\n            [expandable]=\"operations.length === 1\"\n          >\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}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;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:600;width:max-content!important}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}.dcf-icon-container{background:var(--dcf-color-gray-1);border-radius:50%;width:45px;height:45px;display:flex;justify-content:center;align-items:center}.dcf-icon-container ::ng-deep ion-icon{font-size:20px;transform:translateY(3px)!important}.dcf-icon-container ::ng-deep .ti{top:1px;left:1px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { read: ElementRef, static: false }]
@@ -12798,8 +12761,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
         this.pages = this.pageTitles.length;
         if (this.paginated) {
             if (!this.parentForm)
-                this.parentForm = (this.formGroup?.root ||
-                    this.formGroup);
+                this.parentForm = (this.formGroup?.root || this.formGroup);
             this.children = [
                 ...this.children.map((c) => {
                     if (!c.props)
@@ -13496,7 +13458,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", label: "label", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FileUploadComponent = __decorate([
     Dynamic(),
@@ -13531,8 +13493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], type: [{
                 type: Input
-            }], label: [{
-                type: Input
             }], buttonLabel: [{
                 type: Input
             }], size: [{
@@ -13731,7 +13691,7 @@ class NgxRouterService {
      * @memberOf RouterService
      */
     getQueryParamValue(param) {
-        return (this.parseAllQueryParams(param)?.[0]?.[param] || undefined);
+        return this.parseAllQueryParams(param)?.[0]?.[param] || undefined;
     }
     /**
      * @description Retrieves the last segment of the current URL.
@@ -13760,9 +13720,7 @@ class NgxRouterService {
      * @memberOf RouterService
      */
     getLastUrlSegment() {
-        return (this.router.url || globalThis.window.location.href)
-            .split('/')
-            .pop();
+        return (this.router.url || globalThis.window.location.href).split('/').pop();
     }
     /**
      * @description Retrieves the current URL of the application.
@@ -13825,8 +13783,7 @@ class NgxRouterService {
         const currentNavigation = this.router.getCurrentNavigation();
         if (!!currentNavigation &&
             currentNavigation.previousNavigation?.finalUrl?.toString() !== undefined)
-            this.previousUrl =
-                currentNavigation.previousNavigation?.finalUrl?.toString();
+            this.previousUrl = currentNavigation.previousNavigation?.finalUrl?.toString();
         return this.previousUrl;
     }
     /**
@@ -13929,24 +13886,16 @@ let TableComponent = class TableComponent extends ListComponent {
         }, {});
     }
     async ngOnInit() {
-        this.initialized = false;
+        // this.parseProps(this);
+        await super.initialize();
         this.type = ListComponentsTypes.PAGINATED;
         this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
-        if (!this.initialized) {
-            this.parseProps(this);
-        }
         this.repositoryObserverSubject
             .pipe(debounceTime(100), shareReplay$1(1), takeUntil$1(this.destroySubscriptions$))
             .subscribe(([modelInstance, event, uid]) => this.handleObserveEvent(modelInstance, event, uid));
         this.cols = this._cols;
-        if (this.allowOperations)
-            this.allowOperations =
-                this.isAllowed(OperationKeys.UPDATE) || this.isAllowed(OperationKeys.DELETE);
+        this.getOperations();
         this.searchValue = undefined;
-        if (this.operations) {
-            this.cols.push('actions');
-        }
-        this.headers = this._headers;
         const filter = this.routerService.getQueryParamValue('filter');
         if (filter) {
             const value = this.routerService.getQueryParamValue('value');
@@ -13967,9 +13916,21 @@ let TableComponent = class TableComponent extends ListComponent {
         if (this.filterModel) {
             await this.getFilterOptions();
         }
-        await super.initialize();
         await this.refresh();
     }
+    getOperations() {
+        if (this.allowOperations) {
+            this.allowOperations =
+                this.isAllowed(OperationKeys.UPDATE) || this.isAllowed(OperationKeys.DELETE);
+        }
+        else {
+            this.operations = [];
+        }
+        if (this.operations?.length) {
+            this.cols.push('actions');
+        }
+        this.headers = this._headers;
+    }
     async getFilterOptions() {
         const repo = getModelAndRepository(this.filterModel);
         if (repo) {
@@ -13989,54 +13950,93 @@ let TableComponent = class TableComponent extends ListComponent {
                 this.filterOptions = query.map((item) => this.filterOptionsMapper(item));
         }
     }
-    itemMapper(item, mapper, props = {}) {
+    async itemMapper(item, mapper, props = {}) {
         this.model = item;
         const mapped = super.itemMapper(item, this.cols.filter((c) => c !== 'actions'), props);
         const { children } = this.props || [];
-        return Object.keys(mapped).reduce((accum, curr, index) => {
-            const child = children?.[index];
-            if (child) {
-                const { events } = child?.['props'] || {};
-                if (events) {
-                    const { render } = events || undefined;
-                    if (render) {
-                        const clazz = new (events.render())();
-                        const renderFn = clazz.render.bind(this);
-                        if (renderFn instanceof Promise) {
-                            (async () => await renderFn)();
-                        }
-                        else {
-                            renderFn();
+        const entries = Object.entries(mapped);
+        for (const [curr, value] of entries) {
+            const getEvents = async (index, name) => {
+                try {
+                    const child = children.find((c) => c?.['props']?.name === name);
+                    if (child) {
+                        const { events, name } = child?.['props'] || {};
+                        if (events) {
+                            const sequence = String(index);
+                            const evts = this.parseEvents(events, this);
+                            for (const [key, evt] of Object.entries(evts)) {
+                                const handler = evt;
+                                if (key === ComponentEventNames.Render) {
+                                    if (handler?.name === ComponentEventNames.Render) {
+                                        mapped[sequence] = {
+                                            ...mapped[sequence],
+                                            value: await handler.bind(this)(this, name, value),
+                                        };
+                                    }
+                                    else {
+                                        const handlerFn = await handler(this, name, value);
+                                        mapped[sequence] = {
+                                            ...mapped[sequence],
+                                            value: name + ' ' + typeof handlerFn === 'function' || handlerFn instanceof Promise
+                                                ? await handlerFn.bind(this)(this, name, value)
+                                                : handlerFn,
+                                        };
+                                    }
+                                }
+                                if (key === 'handleClick' || key === 'handleAction') {
+                                    mapped[sequence] = {
+                                        ...mapped[sequence],
+                                        handler: {
+                                            index: Number(sequence),
+                                            handle: handler.bind(this),
+                                        },
+                                    };
+                                }
+                            }
                         }
                     }
+                    return value;
+                }
+                catch (error) {
+                    this.log
+                        .for(this.itemMapper)
+                        .error(`Error mapping child events. ${error?.message || error}`);
                 }
-            }
-            const parserFn = mapper[this.cols[index]]?.valueParserFn || undefined;
-            return {
-                ...accum,
-                [curr]: parserFn ? parserFn(mapped[curr], this) : mapped[curr],
             };
-        }, { ...props });
+            const name = this.cols[Number(curr)];
+            const index = Number(curr);
+            const parserFn = mapper[name]?.valueParserFn || undefined;
+            const resolvedValue = parserFn ? await parserFn(this, name, value) : value;
+            mapped[curr] = {
+                prop: name ?? this.pk,
+                value: resolvedValue,
+                index: index || 0,
+            };
+            await getEvents(index, name);
+        }
+        return mapped;
     }
     async mapResults(data) {
+        this._data = [...data];
         if (!data || !data.length)
             return [];
-        return data.reduce((accum, curr) => [
-            ...accum,
-            this.itemMapper(curr, this.mapper, { uid: curr[this.pk] }),
-        ], []);
+        return await Promise.all(data.map(async (curr) => await this.itemMapper(curr, this.mapper, { uid: curr[this.pk] })));
     }
-    async handleAction(event, action, uid, redirect) {
-        if (action === OperationKeys.READ && !this.isAllowed(OperationKeys.UPDATE)) {
-            redirect = false;
+    async handleAction(event, handler, uid, action) {
+        if (handler) {
+            const handlerFn = await handler(this, event, uid);
+            return typeof handlerFn === 'function' ? handlerFn() : handlerFn;
         }
-        if (redirect) {
+        await this.handleRedirect(event, uid, action);
+    }
+    async handleRedirect(event, uid, action) {
+        if (event instanceof Event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+        if (this.operations.includes(action)) {
             await this.router.navigate([`/${this.route}/${action}/${uid}`]);
         }
-        event.stopImmediatePropagation();
-        const data = this.items.find((item) => item['uid'] === uid);
-        if (data)
-            this.listenEvent.emit({ name: ComponentEventNames.Click, data });
     }
     async openFilterSelectOptions(event) {
         const type = this.filterOptions.length > 10 ? SelectFieldInterfaces.MODAL : SelectFieldInterfaces.POPOVER;
@@ -14070,7 +14070,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid, true)\">\n            @for (col of item | keyvalue; track $index) {\n              @if (!['actions', 'uid'].includes(col.key)) {\n                <td\n                  [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async)\"\n                ></td>\n              } @else {\n                @if (allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid, true)\"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"handleAction($event, OperationKeys.DELETE, item.uid, true)\"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper", allowOperations: "allowOperations" }, usesInheritance: true, ngImport: i0, template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: 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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -14086,7 +14086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         IconComponent,
                         PaginationComponent,
-                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid, true)\">\n            @for (col of item | keyvalue; track $index) {\n              @if (!['actions', 'uid'].includes(col.key)) {\n                <td\n                  [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async)\"\n                ></td>\n              } @else {\n                @if (allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid, true)\"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"handleAction($event, OperationKeys.DELETE, item.uid, true)\"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
+                    ], template: "@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if (filterOptions?.length) {\n        <div\n          class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container dcf-flex dcf-flex-middle\"\n        >\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? ''\"\n            [labelPlacement]=\"'floating'\"\n            [label]=\"locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\"locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for (option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button\n              fill=\"clear\"\n              (click)=\"handleFilterSelectClear($event)\"\n              slot=\"end\"\n              size=\"small\"\n              [disabled]=\"!filterValue\"\n            >\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if (initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for (header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate }}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of items; track trackItemFn($index, item)) {\n          <tr>\n            @for (col of item | keyvalue; track $index) {\n              @if (!['handler', 'actions', 'uid'].includes(col.key)) {\n                <td\n                  (click)=\"\n                    handleAction(\n                      $event,\n                      col?.value.handler ? col.value.handler.handle : undefined,\n                      item.uid.value,\n                      OperationKeys.READ\n                    )\n                  \"\n                  [innerHTML]=\"col.value.value\"\n                ></td>\n              } @else {\n                @if (allowOperations && col.key !== 'handler') {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"\">\n                      @if (operations?.includes(OperationKeys.UPDATE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.UPDATE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"primary\"\n                          name=\"ti-edit\"\n                        />\n                      }\n                      @if (operations?.includes(OperationKeys.DELETE)) {\n                        <ngx-decaf-icon\n                          [button]=\"true\"\n                          (click)=\"\n                            handleRedirect($event, item.uid.value, OperationKeys.DELETE, true)\n                          \"\n                          fill=\"clear\"\n                          slot=\"icon-only\"\n                          color=\"danger\"\n                          name=\"ti-trash\"\n                        />\n                      }\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"'component.list.empty.title' | translate\"\n        [subtitle]=\"'component.list.empty.subtitle' | translate\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"'component.list.search.title' | translate\"\n        [subtitle]=\"'component.list.search.subtitle' | translate: { '0': parseSearchValue() }\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n</div>\n@if (loadMoreData) {\n  <div class=\"dcf-table-pagination\">\n    @if (pages > 0 && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n    }\n  </div>\n}\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
         }], propDecorators: { filterModel: [{
                 type: Input
             }], filterOptions: [{
@@ -14227,13 +14227,13 @@ class NgxEventHandler extends DecafEventHandler {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor() {
         super();
-        //TODO: pass to ui decorator decaf componnet
-        this.readonly = false;
+        this._data = null;
     }
     async handle(event, data, instance, ...args) {
         this.log.for(this.handle).info(`Handle called with args: ${event}, ${data}, ${instance}`);
     }
     from(...args) {
+        this.log.for(this.process).info(`Process called with args: ${args}`);
         return this;
     }
     async process(...args) {
@@ -14377,5 +14377,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, 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, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, TransactionHooks, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isClassConstructor, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_FLAVOUR_TOKEN, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, ModalComponent, ModalConfirmComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxRouterService, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SelectFieldInterfaces, SteppedFormComponent, TableComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getDbAdapterFlavour, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getMenuIcon, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxModalCrudComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, presentModalConfirm, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDarkMode, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map