@decaf-ts/for-angular 0.0.41 → 0.0.42

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

@@ -1,6 +1,7 @@
 import { UIKeys, HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule, Location, NgComponentOutlet } from '@angular/common';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf, ReservedModels } from '@decaf-ts/decorator-validation';
 import { InternalError, OperationKeys, NotFoundError } from '@decaf-ts/db-decorators';
@@ -16,14 +17,12 @@ import { forkJoin, Subject, BehaviorSubject, fromEvent, merge, of, Observable, t
 import { provideHttpClient, HttpClient } from '@angular/common/http';
 import { map, distinctUntilChanged, takeUntil, shareReplay, tap, switchMap } from 'rxjs/operators';
 import { __decorate, __metadata } from 'tslib';
-import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonButton, IonIcon, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonContent, IonPopover, ModalController, IonModal, IonSpinner, IonButtons, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+import { IonModal, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar, IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle, IonIcon, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonPopover } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, trashOutline, addOutline, alertCircleOutline, arrowUpOutline, arrowDownOutline, searchOutline, closeOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
 import { apply, metadata } from '@decaf-ts/reflection';
 import { DomSanitizer, Title } from '@angular/platform-browser';
-import { modalController } from '@ionic/core';
-import { NgxMediaService as NgxMediaService$1 } from 'src/lib/engine';
 import { MenuController } from '@ionic/angular';
 
 /**
@@ -89,7 +88,7 @@ const FormConstants = {
  * @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} EventConstants
+ * @typedef {Object} ComponentEventNames
  * @property {string} BACK_BUTTON_NAVIGATION - Event fired when back button navigation ends
  * @property {string} REFRESH - Event fired when a refresh action occurs
  * @property {string} CLICK - Event fired when a click action occurs
@@ -98,13 +97,14 @@ const FormConstants = {
  * @property {string} FIELDSET_ADD_GROUP - Event fired when adding a group to a fieldset
  * @property {string} FIELDSET_UPDATE_GROUP - Event fired when updating a fieldset group
  * @property {string} FIELDSET_REMOVE_GROUP - Event fired when removing a fieldset group
- * @const EventConstants
+ * @const ComponentEventNames
  * @memberOf module:lib/engine/constants
  */
-const EventConstants = {
+const ComponentEventNames = {
     BACK_BUTTON_NAVIGATION: 'backButtonNavigationEndEvent',
     REFRESH: 'RefreshEvent',
     CLICK: 'ClickEvent',
+    CHANGE: 'ChangeEvent',
     SUBMIT: 'SubmitEvent',
     VALIDATION_ERROR: 'validationErrorEvent',
     FIELDSET_ADD_GROUP: 'fieldsetAddGroupEvent',
@@ -321,6 +321,7 @@ const ElementSizes = {
     xsmall: 'xsmall',
     small: 'small',
     medium: 'medium',
+    default: 'default',
     large: 'large',
     xLarge: 'xlarge',
     '2xLarge': '2xlarge',
@@ -328,6 +329,13 @@ const ElementSizes = {
     expand: 'expand',
     block: 'block',
 };
+const ElementPositions = {
+    left: 'left',
+    center: 'center',
+    right: 'right',
+    top: 'top',
+    bottom: 'bottom',
+};
 const LayoutGridGaps = {
     small: 'small',
     medium: 'medium',
@@ -335,6 +343,13 @@ const LayoutGridGaps = {
     collapse: 'collapse',
     none: ''
 };
+const ListItemPositions = {
+    uid: 'uid',
+    title: 'title',
+    description: 'description',
+    info: 'info',
+    subinfo: 'subinfo',
+};
 
 /**
  * @module module:lib/engine/ValidatorFactory
@@ -502,7 +517,7 @@ const CPTKN = new InjectionToken('CPTKN', { providedIn: 'root', factory: () => '
  * @summary Used to provide configuration for internationalization resources, including
  * translation file locations and supported languages. This token configures how the
  * application loads and manages translation resources.
- * @const {InjectionToken<{resources: I18nResourceConfig[]; versionedSuffix: boolean}>}
+ * @const {InjectionToken<I18nToken>}
  * @memberOf module:lib/for-angular-common.module
  */
 const I18N_CONFIG_TOKEN = new InjectionToken('I18N_CONFIG_TOKEN');
@@ -511,8 +526,8 @@ const I18N_CONFIG_TOKEN = new InjectionToken('I18N_CONFIG_TOKEN');
  * @summary Helper function to package component constructors for registration with the
  * rendering engine. This function accepts component classes and returns them as an array
  * suitable for use with the CPTKN injection token.
- * @param {...Constructor<unknown>[]} components - Component constructor classes to register
- * @return {Constructor<unknown>[]} Array of component constructors
+ * @param {...Constructor[]} components - Component constructor classes to register
+ * @return {Constructor} Array of component constructors
  * @memberOf module:lib/for-angular-common.module
  * @example
  * // Register multiple custom components
@@ -1388,7 +1403,7 @@ class NgxFormService {
         const parts = path.split('.');
         const controlName = parts.pop();
         const { childOf } = componentProps;
-        let currentGroup = formGroup;
+        const currentGroup = formGroup;
         function setArrayComponentProps(formGroupArray) {
             const props = formGroupArray?.[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] || {};
             if (!props[ModelKeys.MODEL][controlName])
@@ -1396,7 +1411,7 @@ class NgxFormService {
         }
         for (const part of parts) {
             if (!currentGroup.get(part)) {
-                const partFormGroup = (isMultiple && part === childOf) ? new FormArray([new FormGroup({})]) : new FormGroup({});
+                const partFormGroup = (isMultiple && (part === childOf || childOf?.endsWith(`${part}`))) ? new FormArray([new FormGroup({})]) : new FormGroup({});
                 const pk = componentProps?.pk || parentProps?.pk || '';
                 partFormGroup[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] = {
                     childOf: childOf || '',
@@ -1420,7 +1435,7 @@ class NgxFormService {
             }
             if (childOf && currentGroup instanceof FormArray)
                 setArrayComponentProps(currentGroup);
-            currentGroup = currentGroup.get(part);
+            return [currentGroup.get(part), controlName];
         }
         return [currentGroup, controlName];
     }
@@ -1587,7 +1602,7 @@ class NgxFormService {
      */
     static addFormControl(formGroup, componentProps, parentProps = {}, index = 0) {
         const isMultiple = parentProps?.['multiple'] || parentProps?.['type'] === 'Array' || false;
-        const { name, childOf, } = componentProps;
+        const { name, childOf } = componentProps;
         if (isMultiple)
             componentProps['pk'] = componentProps['pk'] || parentProps?.['pk'] || '';
         const fullPath = childOf ? isMultiple ? `${childOf}.${index}.${name}` : `${childOf}.${name}` : name;
@@ -1608,11 +1623,16 @@ class NgxFormService {
                 }
             }
         }
-        const root = parentGroup instanceof FormArray ? parentGroup.controls[componentProps?.['page'] - 1] : parentGroup;
-        componentProps['formGroup'] = root;
+        let rootGroup = parentGroup;
+        if (rootGroup instanceof FormArray)
+            rootGroup = parentGroup.controls[componentProps?.['page'] - 1];
+        // if(childOf?.includes("."))
+        //   rootGroup = (rootGroup as FormGroup)?.parent as FormArray
+        // componentProps['formGroup'] = root as FormGroup;
+        componentProps['formGroup'] = rootGroup;
         componentProps['formControl'] = parentGroup.get(controlName);
         // componentProps['multiple'] = isMultiple;
-        return root;
+        return parentGroup;
     }
     /**
      * @description Retrieves a control from a registered form.
@@ -1841,6 +1861,8 @@ class NgxFormService {
             const control = formGroup.controls[key];
             const parentProps = NgxFormService.getPropsFromControl(formGroup);
             if (!(control instanceof FormControl)) {
+                if (control.disabled)
+                    continue;
                 const value = NgxFormService.getFormData(control);
                 const isValid = control.valid;
                 if (parentProps.multiple) {
@@ -1932,7 +1954,7 @@ class NgxFormService {
             throw new Error(`Unknown control type at: ${path || 'root'}`);
         control.markAsTouched();
         control.markAsDirty();
-        control.updateValueAndValidity();
+        control.updateValueAndValidity({ emitEvent: true });
         if (control instanceof FormGroup) {
             Object.values(control.controls).forEach(childControl => {
                 this.validateFields(childControl);
@@ -1967,7 +1989,7 @@ class NgxFormService {
         //       return null;
         //   return Object.keys(group.controls).find(name => control === group.get(name)) || null;
         // }
-        return control.valid;
+        return control?.disabled ? true : control.valid;
     }
     /**
      * @description Generates validators from component properties.
@@ -2825,6 +2847,20 @@ var component = {
 		previous: "Previous",
 		submit: "Submit",
 		cancel: "Cancel"
+	},
+	file_upload: {
+		drag_file: "Drag and drop your image here",
+		buttons: {
+			select: "Select File",
+			preview: "Preview",
+			clear: "Clear"
+		},
+		selection: "{0} file(s) selected with success",
+		selection_error: "{0} file(s) failed validation and will not be uploaded.",
+		errors: {
+			not_allowed: "File {0} is not allowed.",
+			max_size: "The maximum allowed file size is {0} MB"
+		}
 	}
 };
 var en = {
@@ -2842,6 +2878,15 @@ var en = {
  *
  * @link {@link I18nLoader}
  */
+const libLanguage = { en };
+/**
+ * @description Retrieves the locale context for a given class, object, or string.
+ * @summary Resolves the locale context by extracting the class name or using the provided suffix.
+ *
+ * @param {FunctionLike | object | string} clazz - The class, object, or string to derive the locale context from.
+ * @param {string} [suffix] - An optional suffix to append to the locale context.
+ * @returns {string} - The resolved locale context string.
+ */
 function getLocaleContext(clazz, suffix) {
     return getLocaleFromClassName(clazz, suffix);
 }
@@ -2867,36 +2912,81 @@ function getLocaleContextByKey(locale, phrase) {
     const parts = phrase.split(' ');
     return `${locale}.${cleanSpaces(parts.join('.'), true)}`;
 }
+/**
+ * @description Factory function for creating an instance of I18nLoader.
+ * @summary Configures and returns an I18nLoader instance with the specified HTTP client and translation resources.
+ *
+ * @param {HttpClient} http - The HTTP client used to fetch translation resources.
+ * @returns {TranslateLoader} - An instance of I18nLoader configured with the provided HTTP client and resources.
+ */
 function I18nLoaderFactory(http) {
     const { resources, versionedSuffix } = inject(I18N_CONFIG_TOKEN, { optional: true }) ?? provideI18nLoader().useValue;
     return new I18nLoader(http, resources?.length ? resources : [{ prefix: './app/assets/i18n/', suffix: '.json' }], versionedSuffix);
 }
+/**
+ * @description Provides the I18nLoader configuration.
+ * @summary Configures the translation resources and versioned suffix for the I18nLoader.
+ *
+ * @param {I18nResourceConfigType} [resources=[]] - The translation resources to be used by the loader.
+ * @param {boolean} [versionedSuffix=false] - Whether to append a versioned suffix to resource URLs.
+ * @returns {object} - The configuration object for the I18nLoader.
+ */
 function provideI18nLoader(resources = [], versionedSuffix = false) {
-    if (!Array.isArray(resources))
+    if (!Array.isArray(resources)) {
         resources = [resources];
+    }
     return {
         provide: I18N_CONFIG_TOKEN,
-        useValue: { resources: [
-                ...resources
-            ], versionedSuffix }
+        useValue: { resources: [...resources], versionedSuffix },
     };
 }
-const libLanguage = { en };
+/**
+ * @description Custom implementation of TranslateLoader for loading translations.
+ * @summary Fetches and merges translation resources, supporting versioned suffixes and recursive merging.
+ */
 class I18nLoader {
+    /**
+     * @param {HttpClient} http - The HTTP client used to fetch translation resources.
+     * @param {I18nResourceConfig[]} [resources=[]] - The translation resources to be loaded.
+     * @param {boolean} [versionedSuffix=false] - Whether to append a versioned suffix to resource URLs.
+     */
     constructor(http, resources = [], versionedSuffix = false) {
         this.http = http;
         this.resources = resources;
         this.versionedSuffix = versionedSuffix;
     }
+    /**
+     * @description Appends a versioned suffix to the resource URL if enabled.
+     * @summary Generates a versioned suffix based on the current date.
+     *
+     * @param {string} suffix - The original suffix of the resource URL.
+     * @returns {string} - The modified suffix with a version string appended.
+     */
     getSuffix(suffix) {
-        if (!this.versionedSuffix)
+        if (!this.versionedSuffix) {
             return suffix;
+        }
         const today = new Date();
         return `${suffix}?version=${today.getFullYear()}${today.getMonth()}${today.getDay()}`;
     }
+    /**
+     * @description Fetches and merges translations for the specified language.
+     * @summary Loads translation resources, merges them recursively, and includes library keys.
+     *
+     * @param {string} lang - The language code for the translations to load.
+     * @returns {Observable<TranslationObject>} - An observable that emits the merged translation object.
+     */
     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)}`)));
+        const libKeys = libLanguage[lang] || libLanguage['en'] || {};
+        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.
+         *
+         * @param {KeyValue} target - The target object to merge into.
+         * @param {KeyValue} source - The source object to merge from.
+         * @returns {KeyValue} - The merged object.
+         */
         function recursiveMerge(target, source) {
             for (const key of Object.keys(source)) {
                 if (source[key] instanceof Object) {
@@ -2916,24 +3006,47 @@ class I18nLoader {
                 ...res.reduce((acc, current) => {
                     for (const key in current) {
                         let value = current[key] || {};
-                        if (libKeys[key])
+                        if (libKeys[key]) {
                             value = { ...libKeys[key], ...recursiveMerge(libKeys[key], current[key]) };
+                        }
                         acc[key] = value;
                     }
                     return acc;
-                }, {})
+                }, {}),
             };
             return merged;
         }));
     }
 }
+/**
+ * @description Custom implementation of TranslateParser for interpolation.
+ * @summary Extends TranslateParser to support string formatting with parameters.
+ */
 class I18nParser extends TranslateParser {
+    /**
+     * @description Interpolates a translation string with parameters.
+     * @summary Replaces placeholders in the translation string with parameter values.
+     *
+     * @param {string} value - The translation string to interpolate.
+     * @param {object | string} [params={}] - The parameters to replace placeholders with.
+     * @returns {string} - The interpolated translation string.
+     */
     interpolate(value, params = {}) {
-        if (typeof params === Primitives.STRING)
-            params = { "0": params };
+        if (typeof params === Primitives.STRING) {
+            params = { '0': params };
+        }
         return sf(value, ...Object.values(params));
     }
 }
+/**
+ * @description Provides the internationalization (i18n) configuration for the application.
+ * @summary Configures the translation service with a fallback language, default language, custom parser, and loader.
+ *
+ * @param {RootTranslateServiceConfig} [config={fallbackLang: 'en', lang: 'en'}] - The configuration for the translation service, including fallback and default languages.
+ * @param {I18nResourceConfigType} [resources=[]] - The translation resources to be used by the loader.
+ * @param {boolean} [versionedSuffix=false] - Whether to append a versioned suffix to resource URLs.
+ * @returns {Array} - An array of providers for the translation service and loader.
+ */
 function provideI18n(config = { fallbackLang: 'en', lang: 'en' }, resources = [], versionedSuffix = false) {
     return [
         provideHttpClient(),
@@ -2947,7 +3060,7 @@ function provideI18n(config = { fallbackLang: 'en', lang: 'en' }, resources = []
                 deps: [HttpClient],
             },
         }),
-        provideI18nLoader(resources, versionedSuffix)
+        provideI18nLoader(resources, versionedSuffix),
     ];
 }
 
@@ -3961,7 +4074,7 @@ class NgxComponentDirective extends LoggedClass {
         return this.router.navigateByUrl(page);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route", isModalChild: "isModalChild" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
@@ -4013,6 +4126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], route: [{
                 type: Input
+            }], isModalChild: [{
+                type: Input
             }] } });
 
 class NgxRenderableComponentDirective extends NgxComponentDirective {
@@ -4104,8 +4219,11 @@ class NgxRenderableComponentDirective extends NgxComponentDirective {
      * @return {void}
      * @memberOf NgxComponentDirective
      */
-    async subscribeEvents() {
-        const component = this?.output?.component;
+    async subscribeEvents(component) {
+        if (!component)
+            component = this?.output?.component;
+        if (!this.instance && component)
+            this.instance = component;
         if (this.instance && component) {
             const componentKeys = Object.keys(this.instance);
             for (const key of componentKeys) {
@@ -4320,14 +4438,14 @@ class ComponentRendererComponent extends NgxRenderableComponentDirective {
         // 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.subscribeEvents();
+        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 : [];
         this.instance = NgxRenderingEngine.createComponent(component, inputs, this.injector, metadata, this.vcr, template);
-        this.subscribeEvents();
+        this.subscribeEvents(component);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ComponentRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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"] }] }); }
@@ -4608,7 +4726,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
                 }));
                 if (errors.length) {
                     if (accordionComponent && !this.validationErrorEventDispatched) {
-                        const validationErrorEvent = new CustomEvent(EventConstants.VALIDATION_ERROR, {
+                        const validationErrorEvent = new CustomEvent(ComponentEventNames.VALIDATION_ERROR, {
                             detail: { fieldName: this.name, hasErrors: true },
                             bubbles: true
                         });
@@ -4676,104 +4794,621 @@ function Dynamic() {
 }
 
 /**
- * @description A dynamic form field component for CRUD operations.
- * @summary The CrudFieldComponent is a versatile form field component that adapts to different
- * input types and CRUD operations. It extends NgxFormFieldDirective to inherit form handling capabilities
- * and implements lifecycle hooks to properly initialize, render, and clean up. This component
- * supports various input types (text, number, date, select, etc.), validation rules, and styling
- * options, making it suitable for building dynamic forms for create, read, update, and delete
- * operations.
- *
- * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
- * @param {string} name - The field name, used as form control identifier
- * @param {PossibleInputTypes} type - The input type (text, number, date, select, etc.)
- * @param {string|number|Date} value - The initial value of the field
- * @param {boolean} disabled - Whether the field is disabled
- * @param {string} label - The display label for the field
- * @param {string} placeholder - Placeholder text when field is empty
- * @param {string} format - Format pattern for the field value
- * @param {boolean} hidden - Whether the field should be hidden
- * @param {number|Date} max - Maximum allowed value
- * @param {number} maxlength - Maximum allowed length
- * @param {number|Date} min - Minimum allowed value
- * @param {number} minlength - Minimum allowed length
- * @param {string} pattern - Validation pattern
- * @param {boolean} readonly - Whether the field is read-only
- * @param {boolean} required - Whether the field is required
- * @param {number} step - Step value for number inputs
- * @param {FormGroup} formGroup - The parent form group
- * @param {StringOrBoolean} translatable - Whether field labels should be translated
+ * @module module:lib/components/model-renderer/model-renderer.component
+ * @description Model renderer component module.
+ * @summary Exposes `ModelRendererComponent` which dynamically renders UI components
+ * from model definitions using the `NgxRenderingEngine`. It handles model changes,
+ * event subscription and lifecycle for the rendered output.
  *
- * @component CrudFieldComponent
+ * @link {@link ModelRendererComponent}
+ */
+/**
+ * @description Component for rendering dynamic models
+ * @summary This component is responsible for dynamically rendering models,
+ * handling model changes, and managing event subscriptions for the rendered components.
+ * It uses the NgxRenderingEngine to render the models and supports both string and Model inputs.
+ * @class
+ * @template M - Type extending Model
+ * @param {Injector} injector - Angular Injector for dependency injection
  * @example
- * <ngx-decaf-crud-field
- *   operation="create"
- *   name="firstName"
- *   type="text"
- *   label="<NAME>"
- *   placeholder="<NAME>"
- *   [value]="model.firstName"
- *   [disabled]="model.readOnly">
+ * <ngx-decaf-model-renderer
+ *   [model]="myModel"
+ *   [globals]="globalVariables"
+ *   (listenEvent)="handleEvent($event)">
+ * </ngx-decaf-model-renderer>
+ * @mermaid
+ * sequenceDiagram
+ *   participant App
+ *   participant ModelRenderer
+ *   participant RenderingEngine
+ *   participant Model
+ *   App->>ModelRenderer: Input model
+ *   ModelRenderer->>Model: Parse if string
+ *   Model-->>ModelRenderer: Parsed model
+ *   ModelRenderer->>RenderingEngine: Render model
+ *   RenderingEngine-->>ModelRenderer: Rendered output
+ *   ModelRenderer->>ModelRenderer: Subscribe to events
+ *   ModelRenderer-->>App: Emit events
+ */
+class ModelRendererComponent extends NgxRenderableComponentDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * @description Set if render content projection is allowed
+         * @default true
+         */
+        this.projectable = true;
+    }
+    // private injector: Injector = inject(Injector);
+    // constructor() {}
+    /**
+     * @description Refreshes the rendered model
+     * @param {string | M} model - The model to be rendered
+     */
+    refresh(model) {
+        model =
+            typeof model === 'string'
+                ? Model.build({}, model)
+                : 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.instance = this.output?.component;
+        this.subscribeEvents();
+    }
+    /**
+     * @description Lifecycle hook that is called when data-bound properties of a directive change
+     * @param {SimpleChanges} changes - Object containing changes
+     */
+    ngOnChanges(changes) {
+        if (changes[BaseComponentProps.MODEL]) {
+            const { currentValue } = changes[BaseComponentProps.MODEL];
+            this.refresh(currentValue);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, 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", styles: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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" }]
+        }], propDecorators: { projectable: [{
+                type: Input
+            }] } });
+
+/**
+ * @module module:lib/engine/NgxParentComponentDirective
+ * @description Directive base for parent container components used by the rendering system.
+ * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
+ * column/row configuration and parent component wiring used by layout and container components.
  *
+ * @link {@link NgxParentComponentDirective}
+ */
+/**
+ * @description Layout component for creating responsive grid layouts in Angular applications.
+ * @summary This component provides a flexible grid system that can be configured with dynamic
+ * rows and columns. It supports responsive breakpoints and can render child components within
+ * the grid structure. The component extends NgxComponentDirective to inherit common functionality
+ * and integrates with the model and component renderer systems.
  *
- * @memberOf module:for-angular
+ * @class NgxParentComponentDirective
+ * @extends {NgxComponentDirective}
+ * @implements {OnInit}
  */
-let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective {
+class NgxParentComponentDirective extends NgxComponentDirective {
     constructor() {
         super(...arguments);
-        this.className = 'dcf-width-1-1';
         /**
-         * @description The parent field path, if this field is nested.
-         * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
+       * @description Unique identifier for the current record.
+       * @summary A unique identifier for the current record being displayed or manipulated.
+       * This is typically used in conjunction with the primary key for operations on specific records.
+       *
+       * @type {string | number}
+       */
+        this.page = 1;
+        /**
+         * @description Unique identifier for the current record.
+         * @summary A unique identifier for the current record being displayed or manipulated.
+         * This is typically used in conjunction with the primary key for operations on specific records.
          *
-         * @type {string}
-         * @memberOf CrudFieldComponent
+         * @type {string | number}
          */
+        this.pages = 1;
         /**
-         * @description The parent field path for nested field structures.
-         * @summary Specifies the full dot-delimited path of the parent field when this field
-         * is part of a nested structure. This is used for hierarchical form organization
-         * and proper form control resolution in complex form structures.
+         * @description Array of UI model metadata for the currently active page.
+         * @summary Contains only the UI model metadata for fields that should be displayed
+         * on the currently active page. This is a filtered subset of the children array,
+         * updated whenever the user navigates between pages.
          *
-         * @type {string}
-         * @default ''
-         * @memberOf CrudFieldComponent
+         * @type { UIModelMetadata | UIModelMetadata[] | FieldDefinition | FieldDefinition[] | undefined }
          */
-        this.childOf = '';
+        this.activePage = undefined;
         /**
-         * @description The initial value of the field.
-         * @summary Sets the initial value of the form field. This can be a string, number, or Date
-         * depending on the field type. For select fields, this should match one of the option values.
+         * @description The currently active page number.
+         * @summary Tracks which page of the multi-step form is currently being displayed.
+         * This property is updated as users navigate through the form steps using
+         * the next/back buttons or programmatic navigation.
          *
-         * @type {string | number | Date}
-         * @default ''
-         * @memberOf CrudFieldComponent
+         * @type {number}
          */
-        this.value = '';
+        this.activeIndex = 1;
         /**
-         * @description Whether the field should be hidden.
-         * @summary When true, the field will not be visible in the UI but will still be part of the form model.
-         * This is useful for fields that need to be included in form submission but should not be displayed to the user.
+         * @description Array of UI model metadata for all form fields.
+         * @summary Contains the complete collection of UI model metadata that defines
+         * the structure, validation, and presentation of form fields across all pages.
+         * Each metadata object contains information about field type, validation rules,
+         * page assignment, and display properties.
          *
-         * @type {boolean}
-         * @memberOf CrudFieldComponent
+         * @type {UIModelMetadata[]}
          */
-        this.hidden = false;
+        this.children = [];
         /**
-         * @description Interface style for select inputs.
-         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
-         * This determines how the select options are presented to the user.
+         * @description Number of columns or array of column definitions for the grid layout.
+         * @summary Defines the column structure of the grid. When a number is provided, it creates
+         * that many equal-width columns. When an array is provided, each element can define specific
+         * column properties or sizing. This allows for flexible grid layouts that can adapt to
+         * different content requirements.
          *
-         * @type {SelectInterface}
-         * @memberOf CrudFieldComponent
+         * @type {(number | string[])}
+         * @default 1
          */
-        this.interface = 'popover';
+        this.cols = 1;
         /**
-         * @description Spellcheck attribute for text inputs.
-         * @summary Enables or disables spellchecking for text inputs.
-         * When true, the browser will check the spelling of the input text.
-         *
-         * @type {boolean}
+         * @description Number of rows or array of row definitions for the grid layout.
+         * @summary Defines the row structure of the grid. When a number is provided, it creates
+         * that many equal-height rows. When an array is provided, each element can define specific
+         * row properties or sizing. This provides control over vertical spacing and content organization.
+         *
+         * @type {(number | string[])}
+         * @default 1
+         */
+        this.rows = 1;
+        /**
+         * @description Defines the body style of the card.
+         * @summary Specifies the appearance of the card body, allowing customization
+         * between default, small, or blank styles. This input is used to control the
+         * visual presentation of the card content.
+         * @type {'default' | 'small' | 'blank'}
+         * @default 'default'
+         */
+        this.cardBody = 'default';
+        /**
+         * @description Specifies the type of the card.
+         * @summary Determines the card's visual style, such as clear or shadowed.
+         * This input allows for flexible styling of the card component to match
+         * different design requirements.
+         * @type {'clear' | 'shadow'}
+         * @default 'clear'
+         */
+        this.cardType = 'clear';
+        /**
+         * @description Controls whether borders are displayed around the fieldset.
+         * @summary Boolean flag that determines if the fieldset should be visually outlined with borders.
+         * When true, borders are shown to visually separate the fieldset from surrounding content.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.borders = false;
+        /**
+         * @description Media breakpoint for responsive behavior.
+         * @summary Determines the responsive breakpoint at which the layout should adapt.
+         * This affects how the grid behaves on different screen sizes, allowing for
+         * mobile-first or desktop-first responsive design patterns. The breakpoint
+         * is automatically processed to ensure compatibility with the UI framework.
+         *
+         * @type {UIMediaBreakPointsType}
+         * @default 'medium'
+         */
+        this.breakpoint = UIMediaBreakPoints.MEDIUM;
+        /**
+         * @description Determines if the layout should match the parent container's size or configuration.
+         * @summary Boolean flag that controls whether the component should adapt its layout to match its parent.
+         * When true, the component will attempt to align or size itself according to the parent container.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.match = true;
+        /**
+         * @description Preloads card placeholders for rendering.
+         * @summary Used to create an array of placeholder elements for card components,
+         * typically to reserve space or trigger rendering logic before actual data is loaded.
+         *
+         * @type {any[]}
+         * @default [undefined]
+         */
+        this.preloadCards = new Array(1);
+    }
+    async ngOnInit(model) {
+        if (model)
+            this.model = model;
+        if (this.model && !this.repository)
+            this._repository = this.repository;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.timerSubscription)
+            this.timerSubscription.unsubscribe();
+    }
+    getActivePage(page) {
+        const content = this.children[page];
+        this.activePage = undefined;
+        this.preloadCards = [...new Array(1)];
+        this.timerSubscription = timer(1).subscribe(() => this.activePage = { ...this.children[page] });
+        this.activeIndex = page;
+        if (content)
+            return content;
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxParentComponentDirective, isStandalone: true, inputs: { page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows", cardBody: "cardBody", cardType: "cardType", borders: "borders", breakpoint: "breakpoint", match: "match" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
+            type: Directive
+        }], propDecorators: { page: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], parentForm: [{
+                type: Input
+            }], children: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cardBody: [{
+                type: Input
+            }], cardType: [{
+                type: Input
+            }], borders: [{
+                type: Input
+            }], breakpoint: [{
+                type: Input
+            }], match: [{
+                type: Input
+            }] } });
+
+/**
+ * @description Modal component for displaying dynamic content in a modal dialog.
+ * @summary This component provides a flexible and reusable modal dialog implementation
+ * for Angular applications. It supports dynamic content rendering, customizable options,
+ * and event handling for modal lifecycle events. The modal can be used for various purposes,
+ * such as displaying forms, lightboxes, or selection dialogs.
+ *
+ * @class ModalComponent
+ * @example
+ * ```typescript
+ * <ngx-decaf-modal [isOpen]="true" [title]="'Example Modal'"></ngx-decaf-modal>
+ * ```
+ * @mermaid
+ * sequenceDiagram
+ *   participant User
+ *   participant ModalComponent
+ *   User->>ModalComponent: Open modal
+ *   ModalComponent->>ModalController: Initialize modal
+ *   ModalController-->>ModalComponent: Modal options set
+ *   User->>ModalComponent: Interact with modal
+ *   ModalComponent->>ModalController: Handle dismiss event
+ */
+let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
+    constructor() {
+        super("ModalComponent");
+        /**
+         * @description Determines whether the modal is open.
+         * @summary Controls the visibility of the modal dialog. When set to true, the modal is displayed.
+         * @type {boolean}
+         * @default false
+         */
+        this.isOpen = false;
+        /**
+         * @description Position of the inline content within the modal.
+         * @summary Determines whether the inline content is displayed at the top or bottom of the modal.
+         * @type {'top' | 'bottom'}
+         * @default 'bottom'
+         */
+        this.inlineContentPosition = 'bottom';
+        /**
+         * @description Enables fullscreen mode for the modal.
+         * @summary When set to true, the modal occupies the entire screen.
+         * @type {boolean}
+         * @default false
+         */
+        this.fullscreen = false;
+        /**
+         * @description Enables lightbox mode for the modal.
+         * @summary When set to true, the modal is displayed as a lightbox.
+         * @type {boolean}
+         * @default false
+         */
+        this.lightBox = false;
+        /**
+         * @description Event emitted when the modal is about to be dismissed.
+         * @summary Emits an OverlayEventDetail object containing details about the dismiss event.
+         * @type {EventEmitter<OverlayEventDetail>}
+         */
+        this.willDismissEvent = new EventEmitter();
+        /**
+         * @description Sanitizer instance for bypassing security and sanitizing HTML content.
+         * @summary Used to sanitize dynamic HTML content, ensuring it is safe to render in the DOM.
+         * @type {DomSanitizer}
+         */
+        this.domSanitizer = inject(DomSanitizer);
+        addIcons(allIcons);
+    }
+    /**
+     * @description Lifecycle hook that initializes the modal component.
+     * @summary Sets up the modal controller and sanitizes inline content if provided.
+     *
+     * @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);
+        }
+    }
+    /**
+     * @description Initializes the modal with the provided options.
+     * @summary Merges default options with user-provided options and sets global configuration.
+     *
+     * @param {KeyValue} [options={}] - Additional options for modal initialization.
+     * @returns {Promise<void>} - A promise that resolves when initialization is complete.
+     */
+    async initialize(options = {}) {
+        this.options = Object.assign({}, DefaultModalOptions, this.options, options);
+        this.globals = Object.assign({}, this.globals || {}, { isModalChild: true });
+        this.initialized = true;
+    }
+    /**
+     * @description Creates and presents the modal.
+     * @summary Initializes the modal with the provided properties and displays it.
+     *
+     * @param {KeyValue} [props={}] - Properties to initialize the modal.
+     * @returns {Promise<ModalComponent>} - A promise that resolves with the modal instance.
+     */
+    async create(props = {}) {
+        await this.initialize(props);
+        await this.present();
+        return this;
+    }
+    /**
+     * @description Presents the modal.
+     * @summary Sets the modal's visibility to true and triggers change detection.
+     *
+     * @returns {Promise<void>} - A promise that resolves when the modal is presented.
+     */
+    async present() {
+        this.isOpen = true;
+        this.changeDetectorRef.detectChanges();
+    }
+    /**
+     * @description Handles custom events for the modal.
+     * @summary Stops event propagation and triggers confirm or cancel actions based on event data.
+     *
+     * @param {IBaseCustomEvent} event - The custom event to handle.
+     * @returns {Promise<void>} - A promise that resolves when the event is handled.
+     */
+    async handleEvent(event) {
+        if (event instanceof Event) {
+            event.stopImmediatePropagation();
+        }
+        await (event?.data ? this.confirm(event) : this.cancel());
+    }
+    /**
+     * @description Handles the modal dismiss event.
+     * @summary This method is triggered when the modal is about to be dismissed. It emits the `willDismissEvent` with the event details.
+     *
+     * @param {CustomEvent<OverlayEventDetail>} event - The dismiss event containing overlay details.
+     * @returns {Promise<OverlayEventDetail>} - A promise that resolves with the overlay event details.
+     */
+    async handleWillDismiss(event) {
+        const { detail } = event;
+        this.willDismissEvent.emit(event);
+        return detail;
+    }
+    /**
+     * @description Cancels the modal and dismisses it with a cancel action.
+     * @summary This method is used to programmatically close the modal with a cancel action.
+     *
+     * @returns {Promise<void>} - A promise that resolves when the modal is dismissed.
+     */
+    async cancel() {
+        await this.modal.dismiss(undefined, ActionRoles.cancel);
+    }
+    /**
+     * @description Confirms the modal and dismisses it with a confirm action.
+     * @summary This method is used to programmatically close the modal with a confirm action, passing optional event data.
+     *
+     * @param {IBaseCustomEvent} event - The custom event containing data to pass during confirmation.
+     * @returns {Promise<void>} - A promise that resolves when the modal is dismissed.
+     */
+    async confirm(event) {
+        await this.modal.dismiss(event?.data || undefined, ActionRoles.confirm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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", lightBox: "lightBox" }, 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  [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-lightbox-modal]=\"lightBox\"\n  class=\"dcf-modal-component\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\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 [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @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 [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.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;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;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: 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(),
+    __metadata("design:paramtypes", [])
+], ModalComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-modal', standalone: true, imports: [IonModal, ComponentRendererComponent, ModelRendererComponent, TranslatePipe, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], host: { '[attr.id]': 'uid' }, template: "<ion-modal\n  [id]=\"uid\"\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-lightbox-modal]=\"lightBox\"\n  class=\"dcf-modal-component\"\n  #component\n>\n  <ng-template>\n    <ion-header [transparent]=\"lightBox\">\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{ title | translate }}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button size=\"small\" type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content>\n      <section class=\"dcf-modal-body\">\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 [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (model) {\n            <ngx-decaf-model-renderer\n              (onIonChange)=\"handleEvent($event)\"\n              (listenEvent)=\"handleEvent($event)\"\n              [model]=\"model\"\n              [globals]=\"globals\"\n            />\n          }\n          @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 [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal.dcf-lightbox-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-lightbox-modal ion-header{--background: transparent !important;background-color:transparent;box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-light) !important;transform:translate(2px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.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;background:#fff!important}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{height:100%;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']
+            }], title: [{
+                type: Input
+            }], isOpen: [{
+                type: Input
+            }], tag: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], globals: [{
+                type: Input
+            }], inlineContent: [{
+                type: Input
+            }], inlineContentPosition: [{
+                type: Input
+            }], fullscreen: [{
+                type: Input
+            }], lightBox: [{
+                type: Input
+            }], willDismissEvent: [{
+                type: Output
+            }] } });
+/**
+ * @description Retrieves a modal component instance.
+ * @summary Creates and initializes a modal component with the provided properties and options.
+ *
+ * @param {Partial<ModalComponent>} [props={}] - Properties to initialize the modal component.
+ * @param {Partial<ModalOptions>} [modalProps={}] - Additional modal options.
+ * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
+ * @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
+ */
+async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
+    const { globals } = { ...props };
+    if (!globals || !globals?.['operation']) {
+        props.globals = { ...(globals || {}), operation: OperationKeys.CREATE };
+    }
+    const component = await NgxRenderingEngine.createComponent(ModalComponent, props, injector || undefined).create(modalProps);
+    return component.modal;
+}
+/**
+ * @description Presents a lightbox modal with inline content.
+ * @summary Displays a modal in lightbox mode with the specified content and properties.
+ *
+ * @param {string | SafeHtml} inlineContent - The content to display in the lightbox modal.
+ * @param {Partial<ModalComponent>} [props={}] - Properties to initialize the modal component.
+ * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
+ * @returns {Promise<void>} - A promise that resolves when the modal is presented.
+ */
+async function presentNgxLightBoxModal(inlineContent, props = {}, injector) {
+    return (await getNgxModalComponent({ props, ...{ inlineContent, lightBox: true } }, {}, injector || undefined)).present();
+}
+/**
+ * @description Retrieves a modal for selecting options.
+ * @summary Creates and initializes a modal component for displaying a list of selectable options.
+ *
+ * @param {SelectOption[]} options - The list of options to display in the modal.
+ * @param {EnvironmentInjector} [injector] - Optional environment injector for dependency injection.
+ * @returns {Promise<IonModal>} - A promise that resolves with the modal instance.
+ */
+async function getNgxSelectOptionsModal(options, injector) {
+    const props = {
+        tag: 'ngx-decaf-list',
+        globals: {
+            data: options,
+            item: { tag: true },
+            pk: 'value',
+            mapper: { title: 'text', uid: 'value' },
+        },
+    };
+    return (await getNgxModalComponent(props, {}, injector || undefined));
+}
+
+/**
+ * @description A dynamic form field component for CRUD operations.
+ * @summary The CrudFieldComponent is a versatile form field component that adapts to different
+ * input types and CRUD operations. It extends NgxFormFieldDirective to inherit form handling capabilities
+ * and implements lifecycle hooks to properly initialize, render, and clean up. This component
+ * supports various input types (text, number, date, select, etc.), validation rules, and styling
+ * options, making it suitable for building dynamic forms for create, read, update, and delete
+ * operations.
+ *
+ * @param {CrudOperations} operation - The CRUD operation being performed (create, read, update, delete)
+ * @param {string} name - The field name, used as form control identifier
+ * @param {PossibleInputTypes} type - The input type (text, number, date, select, etc.)
+ * @param {string|number|Date} value - The initial value of the field
+ * @param {boolean} disabled - Whether the field is disabled
+ * @param {string} label - The display label for the field
+ * @param {string} placeholder - Placeholder text when field is empty
+ * @param {string} format - Format pattern for the field value
+ * @param {boolean} hidden - Whether the field should be hidden
+ * @param {number|Date} max - Maximum allowed value
+ * @param {number} maxlength - Maximum allowed length
+ * @param {number|Date} min - Minimum allowed value
+ * @param {number} minlength - Minimum allowed length
+ * @param {string} pattern - Validation pattern
+ * @param {boolean} readonly - Whether the field is read-only
+ * @param {boolean} required - Whether the field is required
+ * @param {number} step - Step value for number inputs
+ * @param {FormGroup} formGroup - The parent form group
+ * @param {StringOrBoolean} translatable - Whether field labels should be translated
+ *
+ * @component CrudFieldComponent
+ * @example
+ * <ngx-decaf-crud-field
+ *   operation="create"
+ *   name="firstName"
+ *   type="text"
+ *   label="<NAME>"
+ *   placeholder="<NAME>"
+ *   [value]="model.firstName"
+ *   [disabled]="model.readOnly">
+ *
+ *
+ * @memberOf module:for-angular
+ */
+let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective {
+    constructor() {
+        super(...arguments);
+        this.className = 'dcf-width-1-1';
+        /**
+         * @description The parent field path, if this field is nested.
+         * @summary Specifies the full dot-delimited path of the parent field. This is only set when the field is nested.
+         *
+         * @type {string}
+         * @memberOf CrudFieldComponent
+         */
+        /**
+         * @description The parent field path for nested field structures.
+         * @summary Specifies the full dot-delimited path of the parent field when this field
+         * is part of a nested structure. This is used for hierarchical form organization
+         * and proper form control resolution in complex form structures.
+         *
+         * @type {string}
+         * @default ''
+         * @memberOf CrudFieldComponent
+         */
+        this.childOf = '';
+        /**
+         * @description The initial value of the field.
+         * @summary Sets the initial value of the form field. This can be a string, number, or Date
+         * depending on the field type. For select fields, this should match one of the option values.
+         *
+         * @type {string | number | Date}
+         * @default ''
+         * @memberOf CrudFieldComponent
+         */
+        this.value = '';
+        /**
+         * @description Whether the field should be hidden.
+         * @summary When true, the field will not be visible in the UI but will still be part of the form model.
+         * This is useful for fields that need to be included in form submission but should not be displayed to the user.
+         *
+         * @type {boolean}
+         * @memberOf CrudFieldComponent
+         */
+        this.hidden = false;
+        /**
+         * @description Interface style for select inputs.
+         * @summary Specifies the interface style for select inputs, such as 'alert', 'action-sheet', or 'popover'.
+         * This determines how the select options are presented to the user.
+         *
+         * @type {SelectInterface}
+         * @memberOf CrudFieldComponent
+         */
+        this.interface = 'popover';
+        /**
+         * @description Spellcheck attribute for text inputs.
+         * @summary Enables or disables spellchecking for text inputs.
+         * When true, the browser will check the spelling of the input text.
+         *
+         * @type {boolean}
          * @default false
          * @memberOf CrudFieldComponent
          */
@@ -4869,7 +5504,6 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
      * @memberOf CrudFieldComponent
      */
     async ngOnInit() {
-        console.log(this.enableDarkMode, this.operation, this.name);
         this.options = await this.getOptions();
         addIcons({ chevronDownOutline, chevronUpOutline });
         if (Array.isArray(this.hidden) && !this.hidden.includes(this.operation)) {
@@ -4947,6 +5581,16 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
             this.interface = 'modal';
         return this.options;
     }
+    async openSelectOptions(event, selectInterface) {
+        if (selectInterface === 'modal') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            const modal = await getNgxSelectOptionsModal(this.options);
+            const { data, role } = await modal.onWillDismiss();
+            if (role === ActionRoles.confirm && data !== this.value)
+                this.setValue(data);
+        }
+    }
     /**
      * @description Component after view initialization lifecycle method.
      * @summary Calls the parent afterViewInit method for READ and DELETE operations.
@@ -5011,7 +5655,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         this.value = this.formControl.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", className: "className", path: "path", childOf: "childOf", type: "type", value: "value", disabled: "disabled", label: "label", placeholder: "placeholder", format: "format", hidden: "hidden", max: "max", maxlength: "maxlength", min: "min", minlength: "minlength", pattern: "pattern", readonly: "readonly", required: "required", step: "step", equals: "equals", different: "different", lessThan: "lessThan", lessThanOrEqual: "lessThanOrEqual", greaterThan: "greaterThan", greaterThanOrEqual: "greaterThanOrEqual", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { listeners: { "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)" }, properties: { "attr.id": "uid", "attr.class": "className" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
@@ -5031,7 +5675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonLabel,
                         IonText,
                         IonTextarea
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if (operation === 'read' || operation === 'delete') {\n  <ng-container>\n    <div>\n      <ion-item [class]=\"'dcf-input-item ' + operation\" #component>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if (value) {\n              <ion-text [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n             @if (['checkbox'].includes(type)) {\n               <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"large\" name=\"checkmark-circle-outline\"></ion-icon>\n            } @else {\n              <br />\n            }\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n          }\n          @else if (type === 'select') {\n            <div>\n              <ion-select\n                (ionInput)=\"handleModalChildChanges()\"\n                (ionChange)=\"handleModalChildChanges()\"\n                [id]=\"name\"\n                toggleIcon=\"chevron-down-outline\"\n                expandedIcon=\"chevron-up-outline\"\n                [interface]=\"interface\"\n                [mode]=\"'md'\"\n                [hidden]=\"hidden || !options?.length\"\n                [labelPlacement]=\"labelPlacement\"\n                [label]=\"label | translate\"\n                [value]=\"value\"\n                (click)=\"openSelectOptions($event, interface)\"\n                [fill]=\"fill\"\n                [placeholder]=\"placeholder | translate\"\n                [formControlName]=\"name\"\n                [interface]=\"interface\" #component>\n                @if (options?.length) {\n                  @for(option of options; track trackItemFn($index, option.text)) {\n                    <ion-select-option [value]=\"option.value\">\n                      {{ option.text | translate }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></div>\n              @if (!options?.length) {\n                <ion-text color=\"danger\">\n                  * {{ 'errors.empty_options' | translate:{'0': name} }}\n                </ion-text>\n              }\n          </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -5120,138 +5764,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 args: ['component', { read: ElementRef }]
             }], formGroup: [{
                 type: Input
-            }], formControl: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], handleFieldsetUpdateGroupEvent: [{
-                type: HostListener,
-                args: ['window:fieldsetUpdateGroupEvent', ['$event']]
-            }] } });
-
-/**
- * @module module:lib/engine/NgxParentComponentDirective
- * @description Directive base for parent container components used by the rendering system.
- * @summary Provides NgxParentComponentDirective which offers inputs for children metadata,
- * column/row configuration and parent component wiring used by layout and container components.
- *
- * @link {@link NgxParentComponentDirective}
- */
-/**
- * @description Layout component for creating responsive grid layouts in Angular applications.
- * @summary This component provides a flexible grid system that can be configured with dynamic
- * rows and columns. It supports responsive breakpoints and can render child components within
- * the grid structure. The component extends NgxComponentDirective to inherit common functionality
- * and integrates with the model and component renderer systems.
- *
- * @class NgxParentComponentDirective
- * @extends {NgxComponentDirective}
- * @implements {OnInit}
- */
-class NgxParentComponentDirective extends NgxComponentDirective {
-    constructor() {
-        super(...arguments);
-        /**
-       * @description Unique identifier for the current record.
-       * @summary A unique identifier for the current record being displayed or manipulated.
-       * This is typically used in conjunction with the primary key for operations on specific records.
-       *
-       * @type {string | number}
-       */
-        this.page = 1;
-        /**
-         * @description Unique identifier for the current record.
-         * @summary A unique identifier for the current record being displayed or manipulated.
-         * This is typically used in conjunction with the primary key for operations on specific records.
-         *
-         * @type {string | number}
-         */
-        this.pages = 1;
-        /**
-         * @description Array of UI model metadata for the currently active page.
-         * @summary Contains only the UI model metadata for fields that should be displayed
-         * on the currently active page. This is a filtered subset of the children array,
-         * updated whenever the user navigates between pages.
-         *
-         * @type {UIModelMetadata | UIModelMetadata[] | undefined}
-         */
-        this.activeContent = undefined;
-        /**
-         * @description The currently active page number.
-         * @summary Tracks which page of the multi-step form is currently being displayed.
-         * This property is updated as users navigate through the form steps using
-         * the next/back buttons or programmatic navigation.
-         *
-         * @type {number}
-         */
-        this.activeIndex = 1;
-        /**
-         * @description Array of UI model metadata for all form fields.
-         * @summary Contains the complete collection of UI model metadata that defines
-         * the structure, validation, and presentation of form fields across all pages.
-         * Each metadata object contains information about field type, validation rules,
-         * page assignment, and display properties.
-         *
-         * @type {UIModelMetadata[]}
-         */
-        this.children = [];
-        /**
-         * @description Number of columns or array of column definitions for the grid layout.
-         * @summary Defines the column structure of the grid. When a number is provided, it creates
-         * that many equal-width columns. When an array is provided, each element can define specific
-         * column properties or sizing. This allows for flexible grid layouts that can adapt to
-         * different content requirements.
-         *
-         * @type {(number | string[])}
-         * @default 1
-         */
-        this.cols = 1;
-        /**
-         * @description Number of rows or array of row definitions for the grid layout.
-         * @summary Defines the row structure of the grid. When a number is provided, it creates
-         * that many equal-height rows. When an array is provided, each element can define specific
-         * row properties or sizing. This provides control over vertical spacing and content organization.
-         *
-         * @type {(number | string[])}
-         * @default 1
-         */
-        this.rows = 1;
-    }
-    async ngOnInit(model) {
-        if (model)
-            this.model = model;
-        if (this.model && !this.repository)
-            this._repository = this.repository;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxParentComponentDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxParentComponentDirective, isStandalone: true, inputs: { page: "page", pages: "pages", parentForm: "parentForm", children: "children", cols: "cols", rows: "rows" }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxParentComponentDirective, decorators: [{
-            type: Directive
-        }], propDecorators: { page: [{
-                type: Input
-            }], pages: [{
+            }], formControl: [{
                 type: Input
-            }], parentForm: [{
+            }], multiple: [{
                 type: Input
-            }], children: [{
+            }], uid: [{
                 type: Input
-            }], cols: [{
+            }], page: [{
                 type: Input
-            }], rows: [{
+            }], translatable: [{
                 type: Input
+            }], handleFieldsetUpdateGroupEvent: [{
+                type: HostListener,
+                args: ['window:fieldsetUpdateGroupEvent', ['$event']]
             }] } });
 
 class NgxFormDirective extends NgxParentComponentDirective {
     constructor() {
         super(...arguments);
-        this.crudFieldComponent = ComponentsTagNames.CRUD_FIELD;
         /**
          * @description Indicates whether this form is being used inside a modal dialog.
          * @summary When true, the form may alter its submit/reset behavior to integrate
@@ -5336,6 +5866,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
          * @default Randomly generated 12-character string
          */
         this.allowClear = true;
+        this.match = false;
         // protected override enableDarkMode: boolean = true;
         //   /**
         //  * @description Angular change detection service.
@@ -5386,14 +5917,14 @@ class NgxFormDirective extends NgxParentComponentDirective {
     */
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     async ngOnInit(model) {
-        this.uid = generateRandomValue(12);
+        if (!this.uid)
+            this.uid = generateRandomValue(12);
         // dont call super.ngOnInit to model conflicts
         if (this.operation === OperationKeys.READ || this.operation === OperationKeys.DELETE)
             this.formGroup = undefined;
         this.initialized = true;
     }
     ngAfterViewInit() {
-        this.isModalChild = this.component.nativeElement?.closest('ion-modal') ? true : false;
         if (this.isModalChild)
             this.changeDetectorRef.detectChanges();
     }
@@ -5411,9 +5942,14 @@ class NgxFormDirective extends NgxParentComponentDirective {
             NgxFormService.unregister(this.formGroup);
     }
     getFormArrayIndex(index) {
-        if (!(this.formGroup instanceof FormArray) && this.formGroup)
+        if (!(this.formGroup instanceof FormArray) && this.formGroup) {
+            if (this.formGroup.disabled)
+                this.formGroup.enable();
             return this.formGroup;
+        }
         const formGroup = this.formGroup.at(index);
+        if (formGroup.disabled)
+            formGroup.enable();
         if (formGroup) {
             if (this.children.length) {
                 const children = [...this.children];
@@ -5464,18 +6000,54 @@ class NgxFormDirective extends NgxParentComponentDirective {
         const isValid = NgxFormService.validateFields(this.formGroup);
         if (this.isModalChild)
             this.changeDetectorRef.detectChanges();
-        if (!isValid)
+        if (!isValid) {
             return false;
+        }
         const data = NgxFormService.getFormData(this.formGroup);
         this.submitEvent.emit({
             data,
             component: componentName || this.componentName,
-            name: eventName || this.action || EventConstants.SUBMIT,
+            name: eventName || this.action || ComponentEventNames.SUBMIT,
             handlers: this.handlers,
         });
     }
+    /**
+    * @description Updates the active form group and children for the specified page.
+    * @summary Extracts the FormGroup for the given page from the FormArray and filters
+    * the children to show only fields belonging to that page. Uses a timer to ensure
+    * proper Angular change detection when updating the activeContent.
+    *
+    * @param {number} page - The page number to activate
+    * @return {UIModelMetadata | UIModelMetadata[] | FieldDefinition | undefined}
+    *
+    * @private
+    * @mermaid
+    * sequenceDiagram
+    *   participant S as SteppedFormComponent
+    *   participant F as FormArray
+    *   participant T as Timer
+    *
+    *   S->>F: Extract FormGroup at index (page - 1)
+    *   F-->>S: Return page FormGroup
+    *   S->>S: Set activeContent = undefined
+    *   S->>T: timer(10).subscribe()
+    *   T-->>S: Filter children for active page
+    *   S->>S: Set activeContent
+    *
+    * @memberOf SteppedFormComponent
+    */
+    getActivePage(page) {
+        if (!(this.formGroup instanceof FormArray))
+            this.formGroup = this.formGroup?.parent;
+        this.formGroup = this.formGroup.at(page - 1);
+        this.activePage = undefined;
+        this.timerSubscription = timer(10).subscribe(() => this.activePage = this.children.filter(c => c.props?.['page'] === page));
+        if (this.activePage)
+            return this.activePage;
+        return undefined;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", modalForm: "modalForm", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", rendererId: "rendererId", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxFormDirective, isStandalone: true, inputs: { parentFormId: "parentFormId", modalForm: "modalForm", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", rendererId: "rendererId", allowClear: "allowClear", match: "match" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxFormDirective, decorators: [{
             type: Directive
@@ -5509,97 +6081,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Output
             }], allowClear: [{
                 type: Input
-            }] } });
-
-/**
- * @module module:lib/components/model-renderer/model-renderer.component
- * @description Model renderer component module.
- * @summary Exposes `ModelRendererComponent` which dynamically renders UI components
- * from model definitions using the `NgxRenderingEngine`. It handles model changes,
- * event subscription and lifecycle for the rendered output.
- *
- * @link {@link ModelRendererComponent}
- */
-/**
- * @description Component for rendering dynamic models
- * @summary This component is responsible for dynamically rendering models,
- * handling model changes, and managing event subscriptions for the rendered components.
- * It uses the NgxRenderingEngine to render the models and supports both string and Model inputs.
- * @class
- * @template M - Type extending Model
- * @param {Injector} injector - Angular Injector for dependency injection
- * @example
- * <ngx-decaf-model-renderer
- *   [model]="myModel"
- *   [globals]="globalVariables"
- *   (listenEvent)="handleEvent($event)">
- * </ngx-decaf-model-renderer>
- * @mermaid
- * sequenceDiagram
- *   participant App
- *   participant ModelRenderer
- *   participant RenderingEngine
- *   participant Model
- *   App->>ModelRenderer: Input model
- *   ModelRenderer->>Model: Parse if string
- *   Model-->>ModelRenderer: Parsed model
- *   ModelRenderer->>RenderingEngine: Render model
- *   RenderingEngine-->>ModelRenderer: Rendered output
- *   ModelRenderer->>ModelRenderer: Subscribe to events
- *   ModelRenderer-->>App: Emit events
- */
-class ModelRendererComponent extends NgxRenderableComponentDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * @description Set if render content projection is allowed
-         * @default true
-         */
-        this.projectable = true;
-    }
-    // private injector: Injector = inject(Injector);
-    // constructor() {}
-    /**
-     * @description Refreshes the rendered model
-     * @param {string | M} model - The model to be rendered
-     */
-    refresh(model) {
-        model =
-            typeof model === 'string'
-                ? Model.build({}, model)
-                : 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.instance = this.output?.component;
-        this.subscribeEvents();
-    }
-    /**
-     * @description Lifecycle hook that is called when data-bound properties of a directive change
-     * @param {SimpleChanges} changes - Object containing changes
-     */
-    ngOnChanges(changes) {
-        if (changes[BaseComponentProps.MODEL]) {
-            const { currentValue } = changes[BaseComponentProps.MODEL];
-            this.refresh(currentValue);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModelRendererComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { projectable: "projectable" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, 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", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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" }]
-        }], propDecorators: { projectable: [{
+            }], match: [{
                 type: Input
             }] } });
 
 let CardComponent = class CardComponent extends NgxComponentDirective {
     constructor() {
         super(...arguments);
-        this.type = 'default';
+        this.type = 'clear';
         this.title = '';
-        this.body = 'small';
+        this.body = 'default';
         this.subtitle = '';
         this.color = '';
         this.separator = false;
@@ -5608,18 +6099,21 @@ let CardComponent = class CardComponent extends NgxComponentDirective {
         this.componentName = 'CardComponent';
     }
     ngOnInit() {
-        console.log(this.componentName, this.type);
         this.initialized = true;
+        this.mediaService.isDarkMode().subscribe(isDark => {
+            this.isDarkMode = isDark;
+            this.mediaService.toggleClass([this.component], AngularEngineKeys.DARK_PALETTE_CLASS, this.isDarkMode);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CardComponent, isStandalone: true, selector: "ngx-decaf-card", inputs: { type: "type", title: "title", body: "body", subtitle: "subtitle", color: "color", separator: "separator", borders: "borders", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition" }, usesInheritance: true, ngImport: i0, template: "\n  <ion-card\n      [class]=\"'dcf-card ' + className\"\n      [color]=\"color\"\n      mode=\"md\"\n      [class.dcf-card-separator]=\"separator\"\n      [class.dcf-card-default]=\"type === 'default'\"\n      [class.dcf-card-shadow]=\"type === 'shadow'\"\n      [class.dcf-card-bordered]=\"borders\"\n      [class.dcf-card-small]=\"body === 'small'\"\n      #component\n    >\n    @if(title || subtitle) {\n      <ion-card-header>\n        @if(title) {\n          <ion-card-title>{{ locale ? (title |  translate) : title }}</ion-card-title>\n        }\n        @if(subtitle) {\n          <ion-card-subtitle>{{ locale ? (subtitle |  translate) : subtitle }}</ion-card-subtitle>\n        }\n      </ion-card-header>\n    }\n    <ion-card-content>\n      @if(inlineContent && inlineContentPosition === 'top') {\n        <div [innerHTML]=\"inlineContent\"></div>\n      }\n\n      <ng-content slot=\"content\"></ng-content>\n\n      @if(inlineContent && inlineContentPosition === 'bottom') {\n        <div [innerHTML]=\"inlineContent\"></div>\n      }\n    </ion-card-content>\n  </ion-card>\n\n", styles: [".dcf-card{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card>*{width:100%!important}.dcf-card ion-card-content{padding:var(--dcf-padding)}.dcf-card ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card ion-card-header{padding-left:.2rem!important}.dcf-card ion-card-content{padding:var(--dcf-margin-small)}.dcf-card.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card.dcf-card-default{box-shadow:none!important}.dcf-card.dcf-card-default.dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card.dcf-card-shadow{box-shadow:var(--dcf-card-box-shadow)!important}.dcf-card.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CardComponent, isStandalone: true, selector: "ngx-decaf-card", inputs: { type: "type", title: "title", body: "body", subtitle: "subtitle", color: "color", separator: "separator", borders: "borders", inlineContent: "inlineContent", inlineContentPosition: "inlineContentPosition" }, usesInheritance: true, ngImport: i0, template: "<ion-card\n  [class]=\"'dcf-card ' + className + ' ' + 'dcf-card-' + body\"\n  [color]=\"color\"\n  mode=\"md\"\n  [class.dcf-card-separator]=\"separator\"\n  [class.dcf-card-shadow]=\"type === 'shadow'\"\n  [class.dcf-card-bordered]=\"borders\"\n  [class.dcf-card-separator]=\"separator\"\n  #component\n>\n  @if (title || subtitle) {\n    <ion-card-header>\n      @if (title) {\n        <ion-card-title>{{\n          locale ? (title | translate) : title\n        }}</ion-card-title>\n      }\n      @if (subtitle) {\n        <ion-card-subtitle>{{\n          locale ? (subtitle | translate) : subtitle\n        }}</ion-card-subtitle>\n      }\n    </ion-card-header>\n  }\n  <ion-card-content>\n    @if (inlineContent && inlineContentPosition === \"top\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n\n    <ng-content slot=\"content\"></ng-content>\n\n    @if (inlineContent && inlineContentPosition === \"bottom\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: [".dcf-card{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card .dcf-card{border-radius:0!important}.dcf-card:not(.dcf-card-shadow){box-shadow:none!important}.dcf-card:not(.dcf-card-shadow).dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-card-separator,.dcf-card.dcf-card-blank{padding:0!important;margin:0!important;background:transparent!important}.dcf-card.dcf-card-separator>*,.dcf-card.dcf-card-blank>*{padding:0!important;margin:0!important}.dcf-card.dcf-card-separator ion-card-header{padding:unset!important;margin:unset!important}.dcf-card.dcf-card-separator ion-card-title{padding:unset!important;margin:unset!important;font-weight:500;font-size:1rem;line-height:1.5rem}.dcf-card.dcf-card-separator.dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-card-small ion-card-header{padding:var(--dcf-padding-xsmall) 0!important}.dcf-card.dcf-card-small ion-card-content{padding:var(--dcf-padding-xsmall)!important}.dcf-card>*{width:100%!important}.dcf-card ion-card-content{padding:var(--dcf-padding)}.dcf-card ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card ion-card-header{padding-left:.2rem!important}.dcf-card ion-card-header+ion-card-content{margin-top:var(--dcf-margin-small)}.dcf-card ion-card-content{padding:var(--dcf-margin) var(--dcf-margin-small)}.dcf-card.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card.dcf-card-shadow{box-shadow:var(--dcf-card-box-shadow)!important}.dcf-card.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CardComponent = __decorate([
     Dynamic()
 ], CardComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-card', imports: [TranslatePipe, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle], standalone: true, template: "\n  <ion-card\n      [class]=\"'dcf-card ' + className\"\n      [color]=\"color\"\n      mode=\"md\"\n      [class.dcf-card-separator]=\"separator\"\n      [class.dcf-card-default]=\"type === 'default'\"\n      [class.dcf-card-shadow]=\"type === 'shadow'\"\n      [class.dcf-card-bordered]=\"borders\"\n      [class.dcf-card-small]=\"body === 'small'\"\n      #component\n    >\n    @if(title || subtitle) {\n      <ion-card-header>\n        @if(title) {\n          <ion-card-title>{{ locale ? (title |  translate) : title }}</ion-card-title>\n        }\n        @if(subtitle) {\n          <ion-card-subtitle>{{ locale ? (subtitle |  translate) : subtitle }}</ion-card-subtitle>\n        }\n      </ion-card-header>\n    }\n    <ion-card-content>\n      @if(inlineContent && inlineContentPosition === 'top') {\n        <div [innerHTML]=\"inlineContent\"></div>\n      }\n\n      <ng-content slot=\"content\"></ng-content>\n\n      @if(inlineContent && inlineContentPosition === 'bottom') {\n        <div [innerHTML]=\"inlineContent\"></div>\n      }\n    </ion-card-content>\n  </ion-card>\n\n", styles: [".dcf-card{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card>*{width:100%!important}.dcf-card ion-card-content{padding:var(--dcf-padding)}.dcf-card ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card ion-card-header{padding-left:.2rem!important}.dcf-card ion-card-content{padding:var(--dcf-margin-small)}.dcf-card.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card.dcf-card-default{box-shadow:none!important}.dcf-card.dcf-card-default.dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card.dcf-card-shadow{box-shadow:var(--dcf-card-box-shadow)!important}.dcf-card.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-card', imports: [TranslatePipe, IonCard, IonCardHeader, IonCardContent, IonCardTitle, IonCardSubtitle], standalone: true, template: "<ion-card\n  [class]=\"'dcf-card ' + className + ' ' + 'dcf-card-' + body\"\n  [color]=\"color\"\n  mode=\"md\"\n  [class.dcf-card-separator]=\"separator\"\n  [class.dcf-card-shadow]=\"type === 'shadow'\"\n  [class.dcf-card-bordered]=\"borders\"\n  [class.dcf-card-separator]=\"separator\"\n  #component\n>\n  @if (title || subtitle) {\n    <ion-card-header>\n      @if (title) {\n        <ion-card-title>{{\n          locale ? (title | translate) : title\n        }}</ion-card-title>\n      }\n      @if (subtitle) {\n        <ion-card-subtitle>{{\n          locale ? (subtitle | translate) : subtitle\n        }}</ion-card-subtitle>\n      }\n    </ion-card-header>\n  }\n  <ion-card-content>\n    @if (inlineContent && inlineContentPosition === \"top\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n\n    <ng-content slot=\"content\"></ng-content>\n\n    @if (inlineContent && inlineContentPosition === \"bottom\") {\n      <div [innerHTML]=\"inlineContent\"></div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: [".dcf-card{display:flow-root;border-radius:var(--dcf-border-radius-small)}.dcf-card .dcf-card{border-radius:0!important}.dcf-card:not(.dcf-card-shadow){box-shadow:none!important}.dcf-card:not(.dcf-card-shadow).dcf-card-bordered .dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-card-separator,.dcf-card.dcf-card-blank{padding:0!important;margin:0!important;background:transparent!important}.dcf-card.dcf-card-separator>*,.dcf-card.dcf-card-blank>*{padding:0!important;margin:0!important}.dcf-card.dcf-card-separator ion-card-header{padding:unset!important;margin:unset!important}.dcf-card.dcf-card-separator ion-card-title{padding:unset!important;margin:unset!important;font-weight:500;font-size:1rem;line-height:1.5rem}.dcf-card.dcf-card-separator.dcf-card-bordered{border-color:transparent!important}.dcf-card.dcf-card-small ion-card-header{padding:var(--dcf-padding-xsmall) 0!important}.dcf-card.dcf-card-small ion-card-content{padding:var(--dcf-padding-xsmall)!important}.dcf-card>*{width:100%!important}.dcf-card ion-card-content{padding:var(--dcf-padding)}.dcf-card ion-card-header+ion-card-content{padding-top:0!important;margin-top:var(--dcf-margin-small)}.dcf-card ion-card-header{padding-left:1.25rem}@media (max-width: 575px){.dcf-card ion-card-header{padding-left:.2rem!important}.dcf-card ion-card-header+ion-card-content{margin-top:var(--dcf-margin-small)}.dcf-card ion-card-content{padding:var(--dcf-margin) var(--dcf-margin-small)}.dcf-card.dcf-card-small ion-content{padding:var(--dcf-padding-xsmall)}}.dcf-card.dcf-height-1-1{display:flex;align-items:center;justify-content:center}.dcf-card.dcf-height-1-1.dcf-card-layout{height:calc(100% - 1.5rem)}.dcf-card.dcf-card-shadow{box-shadow:var(--dcf-card-box-shadow)!important}.dcf-card.dcf-card-bordered{border:1px solid var(--dcf-color-gray-2)}.dcf-card ion-card-title{padding:var(--dcf-padding-small) var(--dcf-spacement) 0rem var(--dcf-spacement)!important;font-weight:500;font-size:1.125rem;line-height:1.75rem}.dcf-card ion-card-subtitle{padding:0rem var(--dcf-spacement);color:var(--ion-color-gray-4);margin-top:0!important}.dcf-palette-dark.dcf-card-bordered{border-color:transparent!important}::ng-deep ngx-decaf-list ion-list{padding:0!important;margin:0!important}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], title: [{
@@ -5675,18 +6169,6 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
          * @memberOf LayoutComponent
          */
         this.gap = LayoutGridGaps.collapse;
-        /**
-         * @description Media breakpoint for responsive behavior.
-         * @summary Determines the responsive breakpoint at which the layout should adapt.
-         * This affects how the grid behaves on different screen sizes, allowing for
-         * mobile-first or desktop-first responsive design patterns. The breakpoint
-         * is automatically processed to ensure compatibility with the UI framework.
-         *
-         * @type {UIMediaBreakPointsType}
-         * @default 'medium'
-         * @memberOf LayoutComponent
-         */
-        this.breakpoint = UIMediaBreakPoints.MEDIUM;
         /**
          * @description Media breakpoint for responsive behavior.
          * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -5699,18 +6181,6 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
          * @memberOf LayoutComponent
          */
         this.grid = true;
-        /**
-         * @description Media breakpoint for responsive behavior.
-         * @summary Determines the responsive breakpoint at which the layout should adapt.
-         * This affects how the grid behaves on different screen sizes, allowing for
-         * mobile-first or desktop-first responsive design patterns. The breakpoint
-         * is automatically processed to ensure compatibility with the UI framework.
-         *
-         * @type {UIMediaBreakPointsType}
-         * @default 'medium'
-         * @memberOf LayoutComponent
-         */
-        this.match = true;
         /**
          * @description Media breakpoint for responsive behavior.
          * @summary Determines the responsive breakpoint at which the layout should adapt.
@@ -5760,6 +6230,10 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
      */
     get _cols() {
         let cols = this.cols;
+        if (typeof cols === Primitives.BOOLEAN) {
+            cols = 1;
+            this.flexMode = true;
+        }
         if (typeof cols === Primitives.NUMBER)
             cols = Array.from({ length: Number(cols) }, () => '');
         return cols;
@@ -5832,7 +6306,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
                         return child;
                 })
             };
-        }).map(row => {
+        }).map((row, index) => {
             const colsLength = this.getRowColsLength(row);
             row.cols = row.cols.map((c) => {
                 let { col } = c;
@@ -5845,9 +6319,8 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
                     }
                 }
                 else {
-                    if (typeof col === Primitives.NUMBER) {
-                        col = `${col}-${colsLength}`;
-                    }
+                    if (typeof col === Primitives.NUMBER)
+                        col = (colsLength <= this.maxColsLength) ? `${col}-${colsLength}` : `${index + 1}-${col}`;
                     col = ['2-4', '3-6'].includes(col) ? `1-2` : col;
                 }
                 col = `dcf-child-${col}-${this.breakpoint} dcf-width-${col}`;
@@ -5872,7 +6345,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
     async ngOnInit() {
         super.parseProps(this);
         if (this.breakpoint)
-            this.breakpoint = `${this.breakpoint}`.toLowerCase();
+            this.breakpoint = `${this.breakpoint.startsWith('x') ? this.breakpoint.substring(0, 2) : this.breakpoint.substring(0, 1)}`.toLowerCase();
         this.cols = this._cols;
         this.rows = this._rows;
         // if (this._rows.length === 1)
@@ -5880,9 +6353,10 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         // if (this._cols.length === 1)
         //   this.grid = false;
         this.initialized = true;
+        this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", breakpoint: "breakpoint", grid: "grid", match: "match", 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]=\" (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap ) + ' ' + (className || '') \"\n           [class.dcf-grid-match]=\"match\"\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]=\"child.colClass\"\n              [class.dcf-first-column]=\" $index === 0\"\n            >\n\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\">\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-layout-container{display:flow-root}.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-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+.dcf-grid-small{margin-top:1.75rem!important}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-layout-container{display:flow-root}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2)}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -5890,15 +6364,11 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\" (!grid ? 'dcf-layout-row ' : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap ) + ' ' + (className || '') \"\n           [class.dcf-grid-match]=\"match\"\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]=\"child.colClass\"\n              [class.dcf-first-column]=\" $index === 0\"\n            >\n\n              <div>\n                @if (child.tag === 'ngx-decaf-crud-form') {\n                  <ngx-decaf-card [className]=\"(match ? 'dcf-height-1-1 dcf-card-layout' : '') + className\">\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-layout-container{display:flow-root}.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-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+.dcf-grid-small{margin-top:1.75rem!important}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-layout-container{display:flow-root}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2)}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
-            }], breakpoint: [{
-                type: Input
             }], grid: [{
                 type: Input
-            }], match: [{
-                type: Input
             }], flexMode: [{
                 type: Input
             }], rowCard: [{
@@ -5939,11 +6409,11 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         this.submitEvent.emit({
             data: this.modelId,
             component: 'CrudFormComponent',
-            name: EventConstants.SUBMIT,
+            name: ComponentEventNames.SUBMIT,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -5951,9 +6421,97 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
+class NgxSvgDirective {
+    constructor() {
+        this.mediaService = inject(NgxMediaService);
+        this.element = inject(ElementRef);
+        this.http = inject(HttpClient);
+    }
+    ngOnInit() {
+        this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
+        if (this.path)
+            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxSvgDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngx-decaf-svg]',
+                    standalone: true
+                }]
+        }], propDecorators: { path: [{
+                type: Input,
+                args: ['ngx-decaf-svg']
+            }] } });
+
+let IconComponent = class IconComponent {
+    constructor() {
+        this.color = "dark";
+        this.slot = 'icon-only';
+        this.button = false;
+        this.buttonFill = 'clear';
+        this.buttonShape = 'round';
+        this.size = 'default';
+        this.type = 'ionic';
+        this.isSvg = false;
+        this.initialized = false;
+        this.inline = false;
+        this.isDarkMode = false;
+        this.mediaService = new NgxMediaService();
+        addIcons(allIcons);
+    }
+    ngOnInit() {
+        if (this.button)
+            this.slot = 'icon-only';
+        if (this.name?.includes('.')) {
+            this.type = 'image';
+            this.isSvg = this.name.endsWith('.svg');
+        }
+        this.initialized = true;
+    }
+    ngAfterViewInit() {
+        this.mediaService.isDarkMode().subscribe(isDark => {
+            this.isDarkMode = isDark;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            >\n              ></span\n            >\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        } @else {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon ion-icon:not([size]){font-size:1.35rem!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+};
+IconComponent = __decorate([
+    Dynamic(),
+    __metadata("design:paramtypes", [])
+], IconComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid', '[attr.aria-hidden]': '!button' }, template: "<div class=\"dcf-icon\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            >\n              ></span\n            >\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        } @else {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon ion-icon:not([size]){font-size:1.35rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { component: [{
+                type: ViewChild,
+                args: ['component', { read: ElementRef, static: false }]
+            }], name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], slot: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }], buttonFill: [{
+                type: Input
+            }], buttonShape: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }] } });
+
 /**
  * @description Component for displaying empty state messages with optional actions.
  * @summary This component provides a standardized way to display empty state messages
@@ -6074,13 +6632,13 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
          * @default 'large'
          * @memberOf EmptyStateComponent
          */
-        this.iconSize = 'large';
+        this.iconSize = ElementSizes.large;
         /**
          * @description The color of the displayed icon.
          * @summary Specifies the color for the icon using Ionic's predefined color system.
          * This allows the icon to match the application's color scheme.
          *
-         * @type {PredefinedColors | undefined}
+         * @type {string}
          * @default 'medium'
          * @memberOf EmptyStateComponent
          */
@@ -6131,8 +6689,7 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
          * @memberOf EmptyStateComponent
          */
         this.enableCreationByModelRoute = false;
-        addIcons(allIcons);
-        this.type = 'default';
+        this.type = 'clear';
         this.componentName = "EmptyStateComponent";
         this.enableDarkMode = true;
     }
@@ -6167,8 +6724,8 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
         super.ngOnInit();
         this.initialize();
         this.showIcon = stringToBoolean(this.showIcon);
-        this.titleColor = `dcf-title color-${this.titleColor}`;
-        this.subtitleColor = `dcf-subtitle color-${this.titleColor}`;
+        this.titleColor = `dcf-title dcf-color-${this.titleColor}`;
+        this.subtitleColor = `dcf-subtitle dcf-color-${this.subtitleColor}`;
         if (this.searchValue)
             this.searchSubtitle = await this.getSearchSubtitle(this.subtitle);
         if (!this.buttonLink && this.model && this.route)
@@ -6244,7 +6801,7 @@ let EmptyStateComponent = class EmptyStateComponent extends CardComponent {
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: " <ngx-decaf-card [className]=\"className\">\n\n    @if (icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          [name]=\"icon\"\n          [size]=\"iconSize\"\n          [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n      </div>\n    }\n    @if (title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if (subtitle) {\n      <p [class]=\"subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n    }\n    @if (!enableCreationByModelRoute) {\n       @if (buttonLink && buttonText) {\n        <div>\n          <ion-button\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"handleClick()\">\n            {{  buttonText }}\n          </ion-button>\n        </div>\n      }\n    } @else {\n\n      <div>\n        <ion-button\n          class=\"dcf-margin-top\"\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n          {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n        </ion-button>\n      </div>\n\n    }\n  </ngx-decaf-card>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host ion-icon{font-size:2.5rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}:host .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\">\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n            />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p [class]=\"isDarkMode ? 'light' : subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink && buttonText) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\">\n              {{  buttonText }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n            {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n          </ion-button>\n        </div>\n\n      }\n    </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { 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: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
@@ -6253,11 +6810,11 @@ EmptyStateComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [
-                        IonIcon,
+                        IconComponent,
                         TranslatePipe,
                         IonButton,
                         CardComponent
-                    ], template: " <ngx-decaf-card [className]=\"className\">\n\n    @if (icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          [name]=\"icon\"\n          [size]=\"iconSize\"\n          [color]=\"!this.isDarkMode ? iconColor : ''\"\n          />\n      </div>\n    }\n    @if (title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if (subtitle) {\n      <p [class]=\"subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n    }\n    @if (!enableCreationByModelRoute) {\n       @if (buttonLink && buttonText) {\n        <div>\n          <ion-button\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"handleClick()\">\n            {{  buttonText }}\n          </ion-button>\n        </div>\n      }\n    } @else {\n\n      <div>\n        <ion-button\n          class=\"dcf-margin-top\"\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n          {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n        </ion-button>\n      </div>\n\n    }\n  </ngx-decaf-card>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host ion-icon{font-size:2.5rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important;color:var(--dcf-color-gray-6)!important}:host .dcf-isubtitle{font-weight:500!important}\n"] }]
+                    ], template: "<div class=\"decaf-empty-state-component\" #component>\n  <ngx-decaf-card [className]=\"className\">\n      @if (icon && showIcon) {\n        <div class=\"dcf-icon-container\">\n          <ngx-decaf-icon\n            aria-hidden=\"true\"\n            [name]=\"icon\"\n            [size]=\"iconSize\"\n            [color]=\"!this.isDarkMode ? iconColor : ''\"\n            />\n        </div>\n      }\n      @if (title) {\n        <h4 class=\"dcf-ititle\" [class]=\"isDarkMode ? 'light' : titleColor\" [innerHTML]=\"title\"></h4>\n      }\n      @if (subtitle) {\n        <p [class]=\"isDarkMode ? 'light' : subtitleColor\" [innerHTML]=\"searchValue ? searchSubtitle : subtitle\"></p>\n      }\n      @if (!enableCreationByModelRoute) {\n        @if (buttonLink && buttonText) {\n          <div>\n            <ion-button\n              [size]=\"buttonSize\"\n              [fill]=\"buttonFill\"\n              [color]=\"buttonColor\"\n              (click)=\"handleClick()\">\n              {{  buttonText }}\n            </ion-button>\n          </div>\n        }\n      } @else {\n\n        <div>\n          <ion-button\n            class=\"dcf-margin-top\"\n            [size]=\"buttonSize\"\n            [fill]=\"buttonFill\"\n            [color]=\"buttonColor\"\n            (click)=\"changeOperation(OperationKeys.CREATE)\" fill=\"clear\">\n            {{  buttonText?.length ? buttonText : locale + '.button_create' | translate }}\n          </ion-button>\n        </div>\n\n      }\n    </ngx-decaf-card>\n</div>\n", styles: [":host{text-align:center}:host ion-button{margin-top:.75rem}:host .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}:host .dcf-ititle{font-weight:600!important}:host .dcf-subtitle{font-weight:500!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], titleColor: [{
@@ -6452,11 +7009,44 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
          * @summary Numeric limit that controls how many items can be added when `multiple` is true.
          * When set to Infinity there is no limit.
          *
-         * @type {number}
-         * @default Infinity
+         * @type {number}
+         * @default Infinity
+         * @memberOf FieldsetComponent
+         */
+        this.max = undefined;
+        /**
+         * @description Maximum allowed items in the fieldset.
+         * @summary Numeric limit that controls how many items can be added when `multiple` is true.
+         * When set to Infinity there is no limit.
+         *
+         * @type {number}
+         * @default Infinity
+         * @memberOf FieldsetComponent
+         */
+        this.required = false;
+        /**
+         * @description Determines if the fieldset items can be reordered.
+         * @summary Boolean flag that enables or disables the drag-and-drop reordering functionality
+         * for the items within the fieldset. When set to true, users can rearrange the order
+         * of items using drag-and-drop gestures. This is particularly useful for managing
+         * lists where the order of items is significant.
+         *
+         * @type {boolean}
+         * @default true
+         * @memberOf FieldsetComponent
+         */
+        this.ordenable = true;
+        /**
+         * @description Determines if the fieldset items can be edited by the user.
+         * @summary Boolean flag that enables or disables the editing functionality
+         * for the items within the fieldset. When set to true, users can modify the items.
+         *
+         * @type {boolean}
+         * @default true
          * @memberOf FieldsetComponent
+         * @default true
          */
-        this.max = undefined;
+        this.editable = true;
         addIcons({ alertCircleOutline, addOutline, trashOutline, createOutline });
     }
     /**
@@ -6474,21 +7064,38 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             this.multiple = false;
         this.buttonLabel = this.translateService.instant(this.locale + '.add');
         this.buttonCancelLabel = this.translateService.instant(this.locale + '.cancel');
+        if (!this.multiple)
+            this.ordenable = false;
         if ([OperationKeys.CREATE, OperationKeys.UPDATE].includes(this.operation)) {
             if (!this.formGroup) {
-                if (this.parentForm instanceof FormGroup)
-                    this.formGroup = this.parentForm.controls[this.childOf];
+                if (this.parentForm instanceof FormGroup) {
+                    // iterate on childOf path to get correct formGroup
+                    const parts = this.childOf.split('.');
+                    let formGroup = this.parentForm;
+                    for (const part of parts)
+                        formGroup = formGroup.controls[part];
+                    this.formGroup = formGroup;
+                    if (this.formGroup instanceof FormGroup)
+                        this.formGroup = this.formGroup.parent;
+                }
                 if (!this.formGroup && this.parentForm instanceof FormArray)
                     this.formGroup = this.parentForm;
                 if (!this.formGroup && this.children[0]?.['formGroup'] instanceof FormGroup)
                     this.formGroup = this.children[0]?.['formGroup'].parent;
+                if (this.formGroup && !(this.formGroup instanceof FormArray))
+                    this.formGroup = this.formGroup?.parent;
             }
-            this.children = this.children.map(child => {
-                if (!child.props)
-                    child.props = {};
-                child.props = Object.assign(child.props, { activeFormGroup: this.activeFormGroupIndex, multiple: this.multiple });
-                return child;
-            });
+        }
+        if (this.multiple) {
+            this.formGroup?.setErrors(null);
+            this.formGroup?.disable();
+            if (this.required) {
+                this.collapsable = false;
+                this.activePage = this.getActivePage();
+            }
+        }
+        else {
+            this.activePage = this.getActivePage();
         }
         this.initialized = true;
     }
@@ -6523,26 +7130,25 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
     */
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        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.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();
+        // this.changeDetectorRef.detectChanges();
     }
     /**
      * @description Handles removal of the fieldset with slide animation.
@@ -6555,15 +7161,23 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @returns {void}
      * @memberOf FieldsetComponent
      */
-    handleRemoveComponent(event) {
-        event.stopImmediatePropagation();
-        this.component.nativeElement.classList.add('dcf-animation', 'dcf-animation-slide-top-medium', 'dcf-animation-reverse', 'dcf-animation-fast');
-        setTimeout(() => {
-            // Use Renderer2 to safely remove the element
-            const parent = this.renderer.parentNode(this.component.nativeElement);
-            if (parent)
-                this.renderer.removeChild(parent, this.component.nativeElement);
-        }, 150);
+    handleClear(event) {
+        if (event)
+            event.stopImmediatePropagation();
+        this.formGroup?.disable();
+        this.items = [];
+        this.value = undefined;
+        this.activePage = undefined;
+        this.activeFormGroupIndex = 0;
+        this.accordionComponent.value = '';
+        this.changeDetectorRef.detectChanges();
+        // this.component.nativeElement.classList.add('dcf-animation', 'dcf-animation-slide-top-medium', 'dcf-animation-reverse', 'dcf-animation-fast');
+        // setTimeout(() => {
+        //   // Use Renderer2 to safely remove the element
+        //   const parent = this.renderer.parentNode(this.component.nativeElement);
+        //   if (parent)
+        //     this.renderer.removeChild(parent, this.component.nativeElement);
+        // }, 150);
     }
     /**
      * @description Handles creating new items or triggering group addition events.
@@ -6588,6 +7202,10 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
     async handleCreateItem(event) {
         if (event && event instanceof CustomEvent)
             event.stopImmediatePropagation();
+        if (!this.activePage) {
+            this.activePage = this.getActivePage();
+            return;
+        }
         const formGroup = this.activeFormGroup;
         const value = formGroup.value;
         const hasSomeValue = this.hasValue(value);
@@ -6603,7 +7221,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                     this.setValue();
                     NgxFormService.addGroupToParent(formGroup.parent);
                     this.activeFormGroupIndex = formGroup.parent.length - 1;
-                    this.getFormArrayIndex(this.activeFormGroupIndex);
+                    this.activePage = this.getActivePage();
                 }
                 else {
                     this.isUniqueError = typeof value === ReservedModels.OBJECT ?
@@ -6620,6 +7238,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         if (formGroup) {
             this.updatingItem = Object.assign({}, formGroup.value || {}, { index });
             this.activeFormGroupIndex = index;
+            this.activePage = this.getActivePage();
         }
     }
     /**
@@ -6660,8 +7279,13 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             formArray.removeAt(index);
         }
         this.setValue();
-        if (this.activeFormGroupIndex > 0)
-            this.activeFormGroupIndex = this.activeFormGroupIndex - 1;
+        if (this.items.length > 0) {
+            if (this.activeFormGroupIndex > 0)
+                this.activeFormGroupIndex = this.activeFormGroupIndex - 1;
+        }
+        else {
+            this.handleClear();
+        }
     }
     /**
      * @description Handles reordering of items within the fieldset list.
@@ -6740,7 +7364,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
     handleAccordionToggle(event) {
         if (event)
             event.stopImmediatePropagation();
-        if (!this.collapsable) {
+        if (!this.collapsable || this.isRequired) {
             this.isOpen = true;
         }
         else {
@@ -6758,15 +7382,32 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * error state and accordion visibility accordingly.
      *
      * @param {CustomEvent} event - Custom event containing validation error details
-     * @returns {void}
+     * @returns {UIModelMetadata[] | undefined}
      * @memberOf FieldsetComponent
      */
-    handleValidationError(event) {
-        event.stopImmediatePropagation();
-        const { hasErrors } = event.detail;
-        this.isOpen = this.hasValidationErrors = hasErrors;
-        if (hasErrors)
-            this.accordionComponent.value = 'open';
+    // handleValidationError(event: CustomEvent): void {
+    //   event.stopImmediatePropagation();
+    //   const {hasErrors} = event.detail;
+    //   this.isOpen = this.hasValidationErrors = hasErrors;
+    //   if (hasErrors)
+    //     this.accordionComponent.value = 'open';
+    // }
+    getActivePage() {
+        this.activePage = undefined;
+        this.isOpen = true;
+        this.accordionComponent.value = 'open';
+        this.changeDetectorRef.detectChanges();
+        this.timerSubscription = timer(10).subscribe(() => {
+            this.children = this.children.map(child => {
+                if (!child.props)
+                    child.props = {};
+                child.props = Object.assign(child.props, { activeFormGroup: this.activeFormGroupIndex, multiple: this.multiple });
+                return child;
+            });
+        });
+        if (this.multiple)
+            this.getFormArrayIndex(this.activeFormGroupIndex);
+        return this.children;
     }
     /**
      * @description Processes and stores a new or updated value in the fieldset.
@@ -6820,7 +7461,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion value=\"open\">\n        @if (collapsable) {\n          <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                    <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n                @for(item of items; track item.index) {\n                  <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                    <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                      }\n                    </ion-label>\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                    }\n\n                    @if (!updatingItem) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                        <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                    }\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (children?.length) {\n            <ngx-decaf-layout\n              [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n              [flexMode]=\"props.flexMode || false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [children]=\"children || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          }\n\n          @if (multiple && ['create', 'update'].includes(operation)) {\n            @if (isUniqueError) {\n              <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n                <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                  <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                    <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                  </div>\n                  <div class=\"dcf-width-expand\">\n                    <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                  </div>\n                </div>\n              </div>\n            }\n             @if(max) {\n                <div class=\"dcf-width-1-1 dcf-max-message-container\">\n                  <ion-text class=\"dcf-text-small\"\n                    [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n                  >\n                    {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n                  </ion-text>\n                </div>\n              }\n            <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n              @if (updatingItem) {\n                <div>\n                  <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                    {{ buttonCancelLabel }}\n                  </ion-button>\n                </div>\n                <div>\n                  <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                    <ion-icon name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                    {{ locale + '.update' | translate }}\n                  </ion-button>\n                </div>\n              } @else {\n                @if (items.length < max || !max) {\n                  <div>\n                    <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                      <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                      {{ locale + '.add' | translate }}\n                    </ion-button>\n                  </div>\n\n                }\n              }\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}*{overflow-x:hidden!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component ion-accordion{background:var(--dcf-card-background)!important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .25rem;margin:unset;margin-top:.125rem}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=content]{padding:var(--dcf-padding-small) .25rem}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component.dcf-blank [slot=content]{padding:var(--dcf-padding-small) .25rem;margin:0!important}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-fieldset-component.not-collapsable .dcf-title{margin:var(--dcf-padding-small)!important;display:inline-block}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small)}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.dcf-not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable || required) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion\n        value=\"open\"\n        [class.dcf-disabled]=\"!activePage\"\n        [class.dcf-empty]=\"!items?.length\"\n      >\n        @if (collapsable && !required) {\n          <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                    <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n         @if (activePage) {\n            <div>\n              <ngx-decaf-layout\n                [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                [flexMode]=\"props.flexMode ?? false\"\n                [match]=\"false\"\n                [gap]=\"'small'\"\n                [children]=\"activePage || []\"\n                [parentForm]=\"formGroup || parentForm\"\n                [rows]=\"rows\"\n                [cols]=\"cols\"\n                [borders]=\"borders ?? false\"\n                [breakpoint]=\"breakpoint ?? 'large'\"\n                [hidden]=\"items.length === max && !updatingItem\"\n              />\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n\n      @if (multiple && items.length) {\n      <ion-list class=\"dcf-fields-list\">\n        <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n          @for(item of items; track item.index) {\n            <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n              @if(ordenable) {\n                @if (items?.length > 1 && !updatingItem) {\n                  <ion-reorder slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                  </ion-reorder>\n                } @else {\n                  <div slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                  </div>\n                }\n              }\n\n              <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                @if (item.description?.length > 0) {\n                  <br />\n                  <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                }\n              </ion-label>\n\n              @if(editable) {\n                @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                    <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                  </ion-button>\n                }\n              }\n\n\n              @if (!updatingItem) {\n                <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                  <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                </ion-button>\n              }\n            </ion-item>\n          }\n        </ion-reorder-group>\n      </ion-list>\n    }\n\n    @if (multiple && ['create', 'update'].includes(operation)) {\n      @if (isUniqueError) {\n        <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n          <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n            <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n              <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n            </div>\n            <div class=\"dcf-width-expand\">\n              <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n            </div>\n          </div>\n        </div>\n      }\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion:not(.dcf-empty){background:var(--dcf-card-background)!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -6842,7 +7483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonButton,
                         IonIcon,
                         LayoutComponent
-                    ], template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion value=\"open\">\n        @if (collapsable) {\n          <ion-item [class.disable-collapse]=\"!collapsable\" slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                    <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n          @if (multiple && items.length) {\n            <ion-list class=\"dcf-fields-list\">\n              <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n                @for(item of items; track item.index) {\n                  <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                    <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                      @if (item.description?.length > 0) {\n                        <br />\n                        <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                      }\n                    </ion-label>\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                    }\n\n                    @if (!updatingItem) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem($index)\">\n                        <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                      </ion-button>\n                    }\n                  </ion-item>\n                }\n              </ion-reorder-group>\n            </ion-list>\n          }\n\n          @if (children?.length) {\n            <ngx-decaf-layout\n              [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n              [flexMode]=\"props.flexMode || false\"\n              [match]=\"false\"\n              [gap]=\"'small'\"\n              [children]=\"children || []\"\n              [parentForm]=\"formGroup || parentForm\"\n              [rows]=\"rows\"\n              [cols]=\"cols\"\n              [hidden]=\"items.length === max && !updatingItem\"\n            />\n          }\n\n          @if (multiple && ['create', 'update'].includes(operation)) {\n            @if (isUniqueError) {\n              <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n                <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                  <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                    <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                  </div>\n                  <div class=\"dcf-width-expand\">\n                    <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                  </div>\n                </div>\n              </div>\n            }\n             @if(max) {\n                <div class=\"dcf-width-1-1 dcf-max-message-container\">\n                  <ion-text class=\"dcf-text-small\"\n                    [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n                  >\n                    {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n                  </ion-text>\n                </div>\n              }\n            <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\">\n              @if (updatingItem) {\n                <div>\n                  <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                    {{ buttonCancelLabel }}\n                  </ion-button>\n                </div>\n                <div>\n                  <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                    <ion-icon name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                    {{ locale + '.update' | translate }}\n                  </ion-button>\n                </div>\n              } @else {\n                @if (items.length < max || !max) {\n                  <div>\n                    <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                      <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n                      {{ locale + '.add' | translate }}\n                    </ion-button>\n                  </div>\n\n                }\n              }\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}*{overflow-x:hidden!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component ion-accordion{background:var(--dcf-card-background)!important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .25rem;margin:unset;margin-top:.125rem}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=content]{padding:var(--dcf-padding-small) .25rem}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component.dcf-blank [slot=content]{padding:var(--dcf-padding-small) .25rem;margin:0!important}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-fieldset-component.not-collapsable .dcf-title{margin:var(--dcf-padding-small)!important;display:inline-block}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small)}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
+                    ], template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.dcf-not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable || required) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion\n        value=\"open\"\n        [class.dcf-disabled]=\"!activePage\"\n        [class.dcf-empty]=\"!items?.length\"\n      >\n        @if (collapsable && !required) {\n          <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                    <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n         @if (activePage) {\n            <div>\n              <ngx-decaf-layout\n                [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                [flexMode]=\"props.flexMode ?? false\"\n                [match]=\"false\"\n                [gap]=\"'small'\"\n                [children]=\"activePage || []\"\n                [parentForm]=\"formGroup || parentForm\"\n                [rows]=\"rows\"\n                [cols]=\"cols\"\n                [borders]=\"borders ?? false\"\n                [breakpoint]=\"breakpoint ?? 'large'\"\n                [hidden]=\"items.length === max && !updatingItem\"\n              />\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n\n      @if (multiple && items.length) {\n      <ion-list class=\"dcf-fields-list\">\n        <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n          @for(item of items; track item.index) {\n            <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n              @if(ordenable) {\n                @if (items?.length > 1 && !updatingItem) {\n                  <ion-reorder slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                  </ion-reorder>\n                } @else {\n                  <div slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                  </div>\n                }\n              }\n\n              <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                @if (item.description?.length > 0) {\n                  <br />\n                  <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                }\n              </ion-label>\n\n              @if(editable) {\n                @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                    <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                  </ion-button>\n                }\n              }\n\n\n              @if (!updatingItem) {\n                <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                  <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                </ion-button>\n              }\n            </ion-item>\n          }\n        </ion-reorder-group>\n      </ion-list>\n    }\n\n    @if (multiple && ['create', 'update'].includes(operation)) {\n      @if (isUniqueError) {\n        <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n          <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n            <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n              <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n            </div>\n            <div class=\"dcf-width-expand\">\n              <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n            </div>\n          </div>\n        </div>\n      }\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion:not(.dcf-empty){background:var(--dcf-card-background)!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -6864,6 +7505,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], max: [{
                 type: Input
+            }], required: [{
+                type: Input
+            }], ordenable: [{
+                type: Input
+            }], editable: [{
+                type: Input
             }] } });
 
 /**
@@ -7999,7 +8646,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         this.searchEvent.emit(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon tabindex=\"0\" name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon aria-hidden=\"true\" name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon aria-hidden=\"true\" name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { 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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
@@ -8017,7 +8664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonSelectOption,
                         IonIcon,
                         SearchbarComponent
-                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
+                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon tabindex=\"0\" name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon aria-hidden=\"true\" name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon aria-hidden=\"true\" name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
                 args: ['optionsFilterElement', { read: ElementRef, static: false }]
@@ -8170,7 +8817,7 @@ class PaginationComponent extends NgxComponentDirective {
         if (page)
             this.current = page;
         this.clickEvent.emit({
-            name: EventConstants.CLICK,
+            name: ComponentEventNames.CLICK,
             data: {
                 direction,
                 page: this.current
@@ -8745,11 +9392,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             this.item['tag'] = ComponentsTagNames.LIST_ITEM;
         this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
         await this.refresh();
-        // if (this.operations.includes(OperationKeys.CREATE) && this.route)
-        //   this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
         if (!this.initialized)
-            return this.parseProps(this);
+            this.parseProps(this);
         this.initialized = true;
+        if (this.isModalChild)
+            this.changeDetectorRef.detectChanges();
     }
     /**
      * @description Cleans up resources when the component is destroyed.
@@ -8926,6 +9573,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this.page = 1;
             }
             this.searchValue = value;
+            if (this.isModalChild)
+                this.changeDetectorRef.detectChanges();
             await this.refresh(true);
         }
         else {
@@ -8959,6 +9608,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     async clearSearch() {
         await this.handleSearch(undefined);
+        if (this.isModalChild)
+            this.changeDetectorRef.detectChanges();
     }
     /**
      * @description Emits a refresh event with the current data.
@@ -8975,7 +9626,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             data = this.items;
         this.skeletonData = new Array(data?.length || 2);
         this.refreshEvent.emit({
-            name: EventConstants.REFRESH,
+            name: ComponentEventNames.REFRESH,
             data: data || [],
             component: this.componentName
         });
@@ -9046,7 +9697,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async refresh(event = false) {
-        //  if (typeof force !== 'boolean' && force.type === EventConstants.BACK_BUTTON_NAVIGATION) {
+        //  if (typeof force !== 'boolean' && force.type === ComponentEventNames.BACK_BUTTON_NAVIGATION) {
         //    const {refresh} = (force as CustomEvent).detail;
         //    if (!refresh)
         //      return false;
@@ -9057,7 +9708,6 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         this.data = !this.model ?
             await this.getFromRequest(!!event, start, limit)
             : await this.getFromModel(!!event);
-        this.refreshEventEmit();
         if (this.type === ListComponentsTypes.INFINITE) {
             if (this.page === this.pages) {
                 if (event?.target)
@@ -9068,7 +9718,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this.page += 1;
                 this.refreshing = false;
                 setTimeout(() => {
-                    if (event?.target && event?.type !== EventConstants.BACK_BUTTON_NAVIGATION)
+                    if (event?.target && event?.type !== ComponentEventNames.BACK_BUTTON_NAVIGATION)
                         event.target.complete();
                 }, 200);
             }
@@ -9127,7 +9777,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     parseSearchResults(results, search) {
-        return results.filter((item) => Object.values(item).some(value => value.toString().toLowerCase().includes(search?.toLowerCase())));
+        const filtered = results.filter((item) => Object.values(item).some(v => {
+            if (v.toString().toLowerCase().includes(search?.toLowerCase()))
+                return v;
+        }));
+        return filtered;
     }
     /**
      * @description Fetches data from a request source.
@@ -9143,7 +9797,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async getFromRequest(force = false, start, limit) {
-        let request = [];
+        let data = [...this.data || []];
         if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
             // (self.data as ListItem[]) = [];
             if (!this.searchValue?.length && !this.searchValue) {
@@ -9151,20 +9805,31 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                     this.logger.info('No data and source passed to infinite list');
                     return [];
                 }
-                if (this.source instanceof Function)
-                    request = await this.source();
-                if (!Array.isArray(request))
-                    request = request?.['response']?.['data'] || request?.['results'] || [];
-                this.data = [...await this.parseResult(request)];
+                if (this.source instanceof Function) {
+                    data = await this.source();
+                    if (!Array.isArray(data))
+                        data = data?.['response']?.['data'] || data?.['results'] || [];
+                }
+                if (!data?.length && this.data?.length)
+                    data = this.data;
+                this.data = [...await this.parseResult(data)];
                 if (this.data?.length)
                     this.items = this.type === ListComponentsTypes.INFINITE ?
-                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...request.slice(start, limit)];
+                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...data.slice(start, limit)];
             }
             else {
-                this.data = this.parseSearchResults(this.data, this.searchValue);
-                this.items = this.data;
+                const data = await this.parseResult(this.parseSearchResults(this.data, this.searchValue));
+                this.items = [...data];
+                if (this.isModalChild)
+                    this.changeDetectorRef.detectChanges();
             }
         }
+        else {
+            const data = [...await this.parseResult(this.data)];
+            this.items = this.type === ListComponentsTypes.INFINITE ? [...(this.items || []), ...(data || [])] : [...(data || [])];
+            if (this.isModalChild)
+                this.changeDetectorRef.detectChanges();
+        }
         if (this.loadMoreData && this.type === ListComponentsTypes.PAGINATED)
             this.getMoreData(this.data?.length || 0);
         return this.data || [];
@@ -9457,7 +10122,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         return (searchValue?.query).map(item => `${item.index} ${item.condition} ${item.value}`).join(", ");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  @if (model && enableFilter) {\n    @if (data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if (data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<div #component>\n\n</div>\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  @if (model && enableFilter) {\n    @if (data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -9484,7 +10149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  @if (model && enableFilter) {\n    @if (data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if (data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "<div #component>\n\n</div>\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  @if (model && enableFilter) {\n    @if (data?.length || searching) {\n      <ngx-decaf-filter\n        [model]=\"model\"\n        [sortDirection]=\"sortDirection\"\n        [disableSort]=\"disableSort\"\n        (filterEvent)=\"handleFilter($event)\"\n        (searchEvent)=\"handleSearch($event)\"\n      />\n    }\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -9736,8 +10401,8 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
         // forcing trap focus
         removeFocusTrap();
         if (!this.route) {
-            const event = { target: target, action, pk: this.pk, data: this.uid, name: EventConstants.CLICK, component: this.componentName };
-            windowEventEmitter(`ListItem${EventConstants.CLICK}`, event);
+            const event = { target: target, action, pk: this.pk, data: this.uid, name: ComponentEventNames.CLICK, component: this.componentName };
+            windowEventEmitter(`ListItem${ComponentEventNames.CLICK}`, event);
             return this.clickEvent.emit(event);
         }
         return await this.redirect(action, (typeof this.uid === 'number' ? `${this.uid}` : this.uid));
@@ -9872,7 +10537,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
         this.actionMenuOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, 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]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\"\n      #component\n    >\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\"></ion-icon>\n          </ion-avatar>\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 dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\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                {{ uid !== title ? (uid + ' - ' + title) : title }}\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('delete') || operations.includes('update')) && uid) {\n\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                <ion-button class=\"\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\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 ['update', 'delete']; track operation) {\n                          @if (operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if (operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\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              </div>\n            }\n            <!-- @if (operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if (operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if (operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\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('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if (operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-avatar ion-icon{font-size:20px}ion-avatar .dcf-icon-large{transform:translateY(5px)}\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: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, 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]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\"\n      #component\n    >\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\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\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                {{ uid !== title ? (uid + ' - ' + title) : title }}\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('delete') || operations.includes('update')) && uid) {\n\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                <ion-button class=\"\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\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\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 ['update', 'delete']; track operation) {\n                          @if (operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if (operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\" />\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\" />\n                                }\n                              </ion-avatar>\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              </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('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('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('delete')) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction('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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-avatar ion-icon{font-size:20px}ion-avatar .dcf-icon-large{transform:translateY(5px)}\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: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
@@ -9893,7 +10558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonButton,
                         IonContent,
                         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]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\"\n      #component\n    >\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\"></ion-icon>\n          </ion-avatar>\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 dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\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                {{ uid !== title ? (uid + ' - ' + title) : title }}\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('delete') || operations.includes('update')) && uid) {\n\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                <ion-button class=\"\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\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 ['update', 'delete']; track operation) {\n                          @if (operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if (operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\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              </div>\n            }\n            <!-- @if (operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if (operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if (operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\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('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if (operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-avatar ion-icon{font-size:20px}ion-avatar .dcf-icon-large{transform:translateY(5px)}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\"\n      #component\n    >\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\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if (icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\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                {{ uid !== title ? (uid + ' - ' + title) : title }}\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('delete') || operations.includes('update')) && uid) {\n\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                <ion-button class=\"\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\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\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 ['update', 'delete']; track operation) {\n                          @if (operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if (operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\" />\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\" />\n                                }\n                              </ion-avatar>\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              </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('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('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('delete')) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction('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:700}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}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@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}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-avatar ion-icon{font-size:20px}ion-avatar .dcf-icon-large{transform:translateY(5px)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { read: ElementRef, static: false }]
@@ -10091,7 +10756,7 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
                     c.props['page'] = page > this.pages ? this.pages : page;
                     return c;
                 })];
-            this.getCurrentFormGroup(this.activeIndex);
+            this.getActivePage(this.activeIndex);
         }
         else {
             this.children = this.pageTitles.map((page, index) => {
@@ -10104,6 +10769,12 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
                     items
                 };
             });
+            // this.formGroup =  new FormGroup(
+            //   (this.formGroup as FormArray).controls.reduce((acc, control, index) => {
+            //     acc[index] = control as FormGroup;
+            //     return acc;
+            //   }, {} as Record<string, FormGroup>)
+            // );
         }
         this.initialized = true;
     }
@@ -10147,286 +10818,631 @@ let SteppedFormComponent = class SteppedFormComponent extends NgxFormDirective {
      *     S->>P: submitEvent.emit({data, name: SUBMIT})
      *   end
      *
-     * @memberOf SteppedFormComponent
+     * @memberOf SteppedFormComponent
+     */
+    handleNext(lastPage = false) {
+        const isValid = NgxFormService.validateFields(this.formGroup);
+        // const isValid = this.paginated ?
+        //   NgxFormService.validateFields(this.formGroup as FormGroup) :
+        //   (this.formGroup as FormArray)?.controls.every(control => NgxFormService.validateFields(control as FormGroup));
+        if (!lastPage) {
+            if (isValid) {
+                this.activeIndex = this.activeIndex + 1;
+                this.getActivePage(this.activeIndex);
+            }
+        }
+        else {
+            if (isValid) {
+                const rootForm = this.formGroup?.root || this.formGroup;
+                const data = Object.assign({}, ...Object.values(NgxFormService.getFormData(rootForm)));
+                this.submitEvent.emit({
+                    data,
+                    component: this.componentName,
+                    name: this.action || ComponentEventNames.SUBMIT,
+                    handlers: this.handlers,
+                });
+            }
+        }
+    }
+    /**
+     * @description Handles navigation to the previous page.
+     * @summary Moves the user back to the previous page in the stepped form.
+     * This method decrements the active page number and updates the form
+     * group and children to display the previous page's content.
+     *
+     * @return {void}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant S as SteppedFormComponent
+     *
+     *   U->>S: Click Back
+     *   S->>S: activeIndex--
+     *   S->>S: getCurrentFormGroup(activeIndex)
+     *   Note over S: Update active form and children
+     *
+     * @memberOf SteppedFormComponent
+     */
+    handleBack() {
+        if (!this.paginated)
+            return this.location.back();
+        this.activeIndex = this.activeIndex - 1;
+        this.getActivePage(this.activeIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form\n  class=\"dcf-steped-form\"\n  [class.paginated]=\"paginated\"\n  novalidate\n  #component\n>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for (page of pageTitles; track $index) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div\n              class=\"dcf-step\"\n              [class.dcf-active]=\"activeIndex === $index + 1\"\n              [class.dcf-passed]=\"$index + 1 < activeIndex\"\n            >\n              {{ $index + 1 }}\n            </div>\n            @if (page?.title || page?.description) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">\n                    {{ page?.description | translate }}\n                  </div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg\n                  width=\"8\"\n                  height=\"12\"\n                  viewBox=\"0 0 8 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (\n      pageTitles[activeIndex - 1]?.title ||\n      pageTitles[activeIndex - 1]?.description\n    ) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">\n              {{ pageTitles[activeIndex - 1]?.title | translate }}\n            </div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">\n              {{ pageTitles[activeIndex - 1]?.description | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activePage?.length) {\n      <ngx-decaf-layout\n        [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n        [children]=\"activePage || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [match]=\"false\"\n        [cardBody]=\"cardBody\"\n        [cardType]=\"cardType\"\n        [rows]=\"rows\"\n        [cols]=\"cols\"\n        [match]=\"false\"\n      />\n    } @else {\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      <br />\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    }\n    <div\n      class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n    >\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">{{ locale + \".previous\" | translate }}</ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\" (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{ locale + \".submit\" | translate }}\n          } @else {\n            {{ locale + \".next\" | translate }}\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ngx-decaf-card\n          [className]=\"className\"\n          [body]=\"cardBody\"\n          [type]=\"cardType\"\n        >\n          <div>\n            @if (item.title || item.description) {\n              <div class=\"dcf-information\">\n                <div>\n                  @if (item.title) {\n                    <div class=\"dcf-title\">{{ item.title | translate }}</div>\n                  }\n                  @if (item.description) {\n                    <div class=\"dcf-description\">\n                      {{ item.description | translate }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n              @if (initialized && item.items?.length) {\n                <ngx-decaf-layout\n                  [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                  [children]=\"item.items || []\"\n                  [parentForm]=\"formGroup || parentForm\"\n                  [flexMode]=\"props.flexMode || false\"\n                  [gap]=\"'small'\"\n                  [cardBody]=\"cardBody\"\n                  [cardType]=\"cardType\"\n                  [rows]=\"rows\"\n                  [cols]=\"cols\"\n                  [match]=\"false\"\n                />\n              }\n            </div>\n          </div>\n        </ngx-decaf-card>\n      }\n      <div\n        class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button color=\"light\" (click)=\"handleBack()\">\n            {{ locale + \".cancel\" | translate }}\n          </ion-button>\n        </div>\n\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button fill=\"solid\" (click)=\"handleNext(true)\">\n            {{ locale + \".submit\" | translate }}\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\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: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+};
+SteppedFormComponent = __decorate([
+    Dynamic(),
+    __metadata("design:paramtypes", [])
+], SteppedFormComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SteppedFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-stepped-form', imports: [
+                        TranslatePipe,
+                        ReactiveFormsModule,
+                        IonSkeletonText,
+                        IonText,
+                        IonButton,
+                        LayoutComponent
+                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form\n  class=\"dcf-steped-form\"\n  [class.paginated]=\"paginated\"\n  novalidate\n  #component\n>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for (page of pageTitles; track $index) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div\n              class=\"dcf-step\"\n              [class.dcf-active]=\"activeIndex === $index + 1\"\n              [class.dcf-passed]=\"$index + 1 < activeIndex\"\n            >\n              {{ $index + 1 }}\n            </div>\n            @if (page?.title || page?.description) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">\n                    {{ page?.description | translate }}\n                  </div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg\n                  width=\"8\"\n                  height=\"12\"\n                  viewBox=\"0 0 8 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (\n      pageTitles[activeIndex - 1]?.title ||\n      pageTitles[activeIndex - 1]?.description\n    ) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">\n              {{ pageTitles[activeIndex - 1]?.title | translate }}\n            </div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">\n              {{ pageTitles[activeIndex - 1]?.description | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activePage?.length) {\n      <ngx-decaf-layout\n        [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n        [children]=\"activePage || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [match]=\"false\"\n        [cardBody]=\"cardBody\"\n        [cardType]=\"cardType\"\n        [rows]=\"rows\"\n        [cols]=\"cols\"\n        [match]=\"false\"\n      />\n    } @else {\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      <br />\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    }\n    <div\n      class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\"\n    >\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">{{ locale + \".previous\" | translate }}</ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\" (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{ locale + \".submit\" | translate }}\n          } @else {\n            {{ locale + \".next\" | translate }}\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ngx-decaf-card\n          [className]=\"className\"\n          [body]=\"cardBody\"\n          [type]=\"cardType\"\n        >\n          <div>\n            @if (item.title || item.description) {\n              <div class=\"dcf-information\">\n                <div>\n                  @if (item.title) {\n                    <div class=\"dcf-title\">{{ item.title | translate }}</div>\n                  }\n                  @if (item.description) {\n                    <div class=\"dcf-description\">\n                      {{ item.description | translate }}\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <div [class.dcf-margin-bottom]=\"cardType === 'blank'\">\n              @if (initialized && item.items?.length) {\n                <ngx-decaf-layout\n                  [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                  [children]=\"item.items || []\"\n                  [parentForm]=\"formGroup || parentForm\"\n                  [flexMode]=\"props.flexMode || false\"\n                  [gap]=\"'small'\"\n                  [cardBody]=\"cardBody\"\n                  [cardType]=\"cardType\"\n                  [rows]=\"rows\"\n                  [cols]=\"cols\"\n                  [match]=\"false\"\n                />\n              }\n            </div>\n          </div>\n        </ngx-decaf-card>\n      }\n      <div\n        class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\"\n      >\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button color=\"light\" (click)=\"handleBack()\">\n            {{ locale + \".cancel\" | translate }}\n          </ion-button>\n        </div>\n\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button fill=\"solid\" (click)=\"handleNext(true)\">\n            {{ locale + \".submit\" | translate }}\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { children: [{
+                type: Input
+            }], paginated: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], pageTitles: [{
+                type: Input
+            }], operation: [{
+                type: Input
+            }], startPage: [{
+                type: Input
+            }] } });
+
+const FileErrors = {
+    notAllowed: 'not_allowed',
+    maxSize: 'max_size',
+};
+/**
+ * @description File upload component for Angular applications.
+ * @summary This component provides a user interface for uploading files with support for drag-and-drop,
+ * file validation, and preview functionality. It integrates seamlessly with Angular reactive forms
+ * and supports multiple file uploads, directory mode, and custom file size limits.
+ *
+ * @class FileUploadComponent
+ * @example
+ * ```typescript
+ * <ngx-decaf-file-upload [formGroup]="formGroup" [name]="'fileInput'" [multiple]="true"></ngx-decaf-file-upload>
+ * ```
+ * @mermaid
+ * sequenceDiagram
+ *   participant User
+ *   participant FileUploadComponent
+ *   User->>FileUploadComponent: Select or drag files
+ *   FileUploadComponent->>FileUploadComponent: Validate files
+ *   FileUploadComponent->>FileUploadComponent: Emit change event
+ *   User->>FileUploadComponent: Remove file
+ *   FileUploadComponent->>FileUploadComponent: Update file list
+ */
+let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirective {
+    constructor() {
+        super("FileUploadComponent");
+        /**
+         * @description Allows multiple file selection.
+         * @summary When true, the user can select multiple files for upload.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.multiple = false;
+        /**
+         * @description Specifies the input type for the file upload field.
+         * @summary Defines the type of input element used for file uploads, such as file or directory.
+         *
+         * @type {PossibleInputTypes}
+         * @default HTML5InputTypes.FILE
+         */
+        this.type = HTML5InputTypes.FILE;
+        /**
+         * @description Size of the file upload component.
+         * @summary Determines the visual size of the file upload component, such as large, small, or default.
+         *
+         * @type {Extract<ElementSize, 'large' | 'small' | 'default'>}
+         * @default ElementSizes.large
+         */
+        this.size = ElementSizes.large;
+        /**
+         * @description Flex positioning of the container's content.
+         * @summary Controls how child elements are positioned within the container when flex layout
+         * is enabled. Options include 'center', 'top', 'bottom', 'left', 'right', and combinations
+         * like 'top-left'. This property is only applied when the flex property is true.
+         *
+         * @type {FlexPosition}
+         * @default 'center'
+         */
+        this.position = 'center';
+        /**
+         * @description Accepted file types for upload.
+         * @summary Specifies the file types that are allowed for upload, such as images or documents.
+         *
+         * @type {string | string[]}
+         * @default ['image/*']
+         */
+        this.accept = ['image/*'];
+        /**
+         * @description Whether to show an icon in the file upload field.
+         * @summary When true, an icon is displayed alongside the file upload input.
+         *
+         * @type {boolean}
+         * @default true
+         */
+        this.showIcon = true;
+        /**
+         * @description Enables directory mode for file uploads.
+         * @summary When true, the user can upload entire directories instead of individual files.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.enableDirectoryMode = false;
+        /**
+         * @description Maximum file size allowed for upload.
+         * @summary Specifies the maximum size (in MB) for files that can be uploaded.
+         *
+         * @type {number}
+         * @default 1
+         */
+        this.maxFileSize = 1;
+        /**
+         * @description Event emitted when the file upload field changes.
+         * @summary Emits an event containing details about the change in the file upload field.
+         *
+         * @type {EventEmitter<IBaseCustomEvent>}
+         */
+        this.changeEvent = new EventEmitter();
+        /**
+         * @description Preview of the first file in the upload list.
+         * @summary Stores the data URL of the first file in the upload list for preview purposes.
+         * This is typically used to display a thumbnail or preview image.
+         *
+         * @type {string | undefined}
+         */
+        this.preview = undefined;
+        /**
+         * @description List of files selected for upload.
+         * @summary Contains the files selected by the user for upload. This array is updated
+         * whenever files are added or removed from the upload list.
+         *
+         * @type {File[]}
+         */
+        this.files = [];
+        /**
+         * @description List of errors encountered during file validation.
+         * @summary Stores validation errors for files that do not meet the specified criteria,
+         * such as file type or size restrictions. Each error includes the file name, size, and error message.
+         *
+         * @type {IFileUploadError[]}
+         */
+        this.errors = [];
+        /**
+         * @description Indicates whether a drag operation is in progress.
+         * @summary This flag is set to true when a file is being dragged over the upload area.
+         * It is used to provide visual feedback to the user during drag-and-drop operations.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.dragging = false;
+        /**
+         * @description Counter for drag events.
+         * @summary Tracks the number of drag events to ensure proper handling of drag-and-drop
+         * operations. The counter is incremented on drag enter and decremented on drag leave.
+         *
+         * @type {number}
+         * @default 0
+         */
+        this.dragCounter = 0;
+    }
+    /**
+     * @description Lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.
+     * @summary Sets up the component by enabling directory mode if specified, formatting the accepted file types,
+     * and converting the maximum file size from megabytes to bytes.
+     *
+     * @returns {void}
+     */
+    ngOnInit() {
+        if (this.enableDirectoryMode) {
+            this.multiple = true;
+        }
+        if (Array.isArray(this.accept)) {
+            this.accept = this.accept.join(',');
+        }
+        // Convert maxFileSize from MB to bytes
+        this.maxFileSize = this.maxFileSize * 1024 * 1024;
+    }
+    /**
+     * @description Lifecycle hook that is called when a directive, pipe, or service is destroyed.
+     * @summary Cleans up the component by calling the parent ngOnDestroy method and clearing the file upload state.
+     *
+     * @returns {Promise<void> | void}
+     */
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.handleClear();
+    }
+    /**
+     * @description Handles the click event to trigger file selection.
+     * @summary Simulates a click on the hidden file input element to open the file selection dialog.
+     * This method is used to allow users to select files programmatically.
+     *
+     * @returns {void}
+     */
+    handleClickToSelect() {
+        const element = this.component.nativeElement;
+        if (element)
+            element.querySelector('#dcf-file-input')?.click();
+    }
+    /**
+     * @description Handles the file selection event.
+     * @summary Processes the files selected by the user, validates them, and updates the file list.
+     * This method is triggered when the user selects files using the file input element.
+     *
+     * @param {Event} event - The file selection event.
+     * @returns {void}
+     */
+    handleSelection(event) {
+        this.clearErrors();
+        const input = event.target;
+        if (input.files) {
+            const fileList = Array.from(input.files);
+            this.handleSelectionConfirm(fileList);
+            input.value = '';
+        }
+    }
+    /**
+     * @description Handles the drop event for drag-and-drop file uploads.
+     * @summary Processes the files dropped by the user, validates them, and updates the file list.
+     * This method is triggered when the user drops files onto the upload area.
+     *
+     * @param {DragEvent} event - The drag-and-drop event.
+     * @returns {void}
+     */
+    handleDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragCounter = 0;
+        this.dragging = false;
+        this.clearErrors();
+        if (!event.dataTransfer)
+            return;
+        const fileList = Array.from(event.dataTransfer.files);
+        this.handleSelectionConfirm(fileList);
+    }
+    /**
+     * @description Handles the drag over event for drag-and-drop file uploads.
+     * @summary Sets the dragging flag to true to provide visual feedback during drag-and-drop operations.
+     * This method is triggered when the user drags files over the upload area.
+     *
+     * @param {DragEvent} event - The drag over event.
+     * @returns {void}
+     */
+    handleDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragging = true;
+    }
+    /**
+     * @description Handles the drag leave event for drag-and-drop file uploads.
+     * @summary Decrements the drag counter and clears the dragging flag when the counter reaches zero.
+     * This method is triggered when the user drags files out of the upload area.
+     *
+     * @param {DragEvent} event - The drag leave event.
+     * @returns {void}
+     */
+    handleDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragCounter = Math.max(0, this.dragCounter - 1);
+        if (this.dragCounter === 0) {
+            this.dragging = false;
+        }
+    }
+    /**
+     * @description Clears the file list and validation errors.
+     * @summary Resets the file upload component by clearing the selected files, preview, and errors.
+     * This method is used to reset the component state.
+     *
+     * @returns {void}
      */
-    handleNext(lastPage = false) {
-        const isValid = this.paginated ?
-            NgxFormService.validateFields(this.formGroup) :
-            this.formGroup?.controls.every(control => NgxFormService.validateFields(control));
-        if (!lastPage) {
-            if (isValid) {
-                this.activeIndex = this.activeIndex + 1;
-                this.getCurrentFormGroup(this.activeIndex);
+    handleClear() {
+        this.clearErrors();
+        this.preview = undefined;
+        this.files = [];
+    }
+    /**
+     * @description Confirms the file selection and updates the component state.
+     * @summary Validates each file in the selection, updates the file list, and emits
+     * the change event. If multiple or directory mode is enabled, adds files to the existing list.
+     * Otherwise, replaces the existing files with the new selection.
+     *
+     * @param {File[]} files - The array of files selected by the user.
+     * @returns {Promise<void>}
+     */
+    async handleSelectionConfirm(files) {
+        const validFiles = [];
+        for (const file of files) {
+            const isValid = this.validateFile(file);
+            if (isValid === true) {
+                validFiles.push(file);
             }
-        }
-        else {
-            if (isValid) {
-                const rootForm = this.formGroup?.root || this.formGroup;
-                const data = Object.assign({}, ...Object.values(NgxFormService.getFormData(rootForm)));
-                this.submitEvent.emit({
-                    data,
-                    component: this.componentName,
-                    name: this.action || EventConstants.SUBMIT,
-                    handlers: this.handlers,
+            else {
+                this.errors.push({
+                    name: file.name,
+                    error: isValid,
+                    size: file.size
                 });
             }
         }
+        if (this.multiple || this.enableDirectoryMode) {
+            this.files = this.files.concat(validFiles);
+        }
+        else {
+            this.files = [validFiles[0]];
+        }
+        if (this.files.length) {
+            const dataValues = await this.getDataURLs(this.files);
+            this.setValue(JSON.stringify(dataValues));
+        }
+        await this.getPreview();
+        this.changeEventEmit();
+    }
+    /**
+     * @description Validates a single file against the component's constraints.
+     * @summary Checks the file type and size against the accepted values and limits.
+     * Returns true if the file is valid, or an error code if it is not.
+     *
+     * @param {File} file - The file to be validated.
+     * @returns {true | string} - Returns true if valid, error code otherwise.
+     */
+    validateFile(file) {
+        if (this.accept && this.accept !== '*') {
+            const acceptedExtensions = Array.isArray(this.accept) ?
+                this.accept : this.accept.split(',').map(ext => ext.trim());
+            const accept = acceptedExtensions.some(ext => {
+                if (ext === '*')
+                    return true;
+                if (ext.endsWith('/*'))
+                    return file.type.startsWith(ext.replace(/\/\*$/, ''));
+                const fileExtension = file.type.split('/').pop() || '';
+                return file.type === ext || fileExtension === ext || file.name.toLowerCase().endsWith(ext.replace('.', ''));
+            });
+            if (!accept)
+                return FileErrors.notAllowed;
+        }
+        if (this.maxFileSize && file.size > this.maxFileSize)
+            return FileErrors.maxSize;
+        return true;
     }
     /**
-     * @description Handles navigation to the previous page.
-     * @summary Moves the user back to the previous page in the stepped form.
-     * This method decrements the active page number and updates the form
-     * group and children to display the previous page's content.
-     *
-     * @return {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant U as User
-     *   participant S as SteppedFormComponent
-     *
-     *   U->>S: Click Back
-     *   S->>S: activeIndex--
-     *   S->>S: getCurrentFormGroup(activeIndex)
-     *   Note over S: Update active form and children
+     * @description Displays a preview of the selected file in a lightbox.
+     * @summary If the file is an image, its data URL is retrieved and displayed in a modal lightbox.
+     * The lightbox shows the image at its natural size, constrained to the viewport dimensions.
      *
-     * @memberOf SteppedFormComponent
+     * @param {File | string} [file] - The file to be previewed. If not provided, the current preview file is used.
+     * @returns {Promise<void>}
      */
-    handleBack() {
-        if (this.paginated) {
-            this.activeIndex = this.activeIndex - 1;
-            this.getCurrentFormGroup(this.activeIndex);
+    async showFilePreview(file, fileExtension = 'image/') {
+        let content;
+        if (file instanceof File) {
+            const dataUrl = await this.getDataURLs(file);
+            if (dataUrl && dataUrl.length)
+                file = dataUrl[0];
         }
-        this.location.back();
+        if (fileExtension.includes('image/'))
+            content = '<img src="' + file + '" style="max-width: 100%; height: auto;" />';
+        if (fileExtension.includes('xml')) {
+            const parseXml = (xmlString) => {
+                try {
+                    xmlString = xmlString.replace(/^data:[^;]+;base64,/, '').replace(/\s+/g, '');
+                    const decodedString = atob(xmlString);
+                    const parser = new DOMParser();
+                    const xmlDoc = parser.parseFromString(decodedString, "text/xml");
+                    // const encoder = new TextEncoder(); // gera bytes UTF-8
+                    // const utf8Bytes = encoder.encode(xmlDoc.documentElement.outerHTML);
+                    // return new TextDecoder("utf-8").decode(utf8Bytes);
+                    return xmlDoc.documentElement.innerHTML;
+                }
+                catch (error) {
+                    this.logger.error(error?.message);
+                    return undefined;
+                }
+            };
+            content = parseXml(file);
+            content = `<div class="dfc-padding">${content}</div>`;
+        }
+        await presentNgxLightBoxModal(content || "");
     }
     /**
-     * @description Updates the active form group and children for the specified page.
-     * @summary Extracts the FormGroup for the given page from the FormArray and filters
-     * the children to show only fields belonging to that page. Uses a timer to ensure
-     * proper Angular change detection when updating the activeContent.
-     *
-     * @param {number} page - The page number to activate
-     * @return {void}
-     *
-     * @private
-     * @mermaid
-     * sequenceDiagram
-     *   participant S as SteppedFormComponent
-     *   participant F as FormArray
-     *   participant T as Timer
+     * @description Checks if a file is an image based on its MIME type.
+     * @summary Determines if the file can be accepted as an image by checking
+     * if its type starts with 'image/'.
      *
-     *   S->>F: Extract FormGroup at index (page - 1)
-     *   F-->>S: Return page FormGroup
-     *   S->>S: Set activeContent = undefined
-     *   S->>T: timer(10).subscribe()
-     *   T-->>S: Filter children for active page
-     *   S->>S: Set activeContent
-     *
-     * @memberOf SteppedFormComponent
+     * @param {File} file - The file to be checked.
+     * @returns {boolean} - True if the file is an image, false otherwise.
      */
-    getCurrentFormGroup(page) {
-        if (!(this.formGroup instanceof FormArray))
-            this.formGroup = this.formGroup?.parent;
-        this.formGroup = this.formGroup.at(page - 1);
-        this.activeContent = undefined;
-        this.timerSubscription = timer(10).subscribe(() => this.activeContent = this.children.filter(c => c.props?.['page'] === page));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { children: "children", paginated: "paginated", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\" novalidate #component>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activeIndex === $index + 1\" [class.dcf-passed]=\"($index + 1) < activeIndex\">{{ $index + 1 }}</div>\n            @if ((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (pageTitles[activeIndex - 1]?.title || pageTitles[activeIndex - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activeIndex - 1]?.title  | translate }}</div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activeIndex - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activeContent?.length) {\n        <ngx-decaf-layout\n          [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n          [children]=\"activeContent || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [match]=\"false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\"\n          [match]=\"false\"\n        />\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if (item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if (item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if (item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div>\n                @if (initialized && item.items?.length) {\n                  <div>\n                    <ngx-decaf-layout\n                      [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                      [children]=\"item.items || []\"\n                      [parentForm]=\"formGroup || parentForm\"\n                      [flexMode]=\"props.flexMode || false\"\n                      [gap]=\"'small'\"\n                      [rows]=\"rows\"\n                      [cols]=\"cols\"\n                      [match]=\"false\"\n\n                    />\n                  </div>\n\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\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: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { 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: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "breakpoint", "grid", "match", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-};
-SteppedFormComponent = __decorate([
-    Dynamic(),
-    __metadata("design:paramtypes", [])
-], SteppedFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: SteppedFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-stepped-form', imports: [
-                        TranslatePipe,
-                        ReactiveFormsModule,
-                        IonSkeletonText,
-                        IonText,
-                        IonButton,
-                        LayoutComponent
-                    ], standalone: true, host: { '[attr.id]': 'uid' }, template: "<form class=\"dcf-steped-form\" [class.paginated]=\"paginated\" novalidate #component>\n  @if (paginated) {\n    <div class=\"dcf-page-steps\">\n      <div class=\"dcf-grid dcf-grid-collapse skip\">\n        @for(page of pageTitles; track $index;) {\n          <div class=\"dcf-flex dcf-flex-middle\">\n            <div class=\"dcf-step\" [class.dcf-active]=\"activeIndex === $index + 1\" [class.dcf-passed]=\"($index + 1) < activeIndex\">{{ $index + 1 }}</div>\n            @if ((page?.title || page?.description)) {\n              <div class=\"dcf-information dcf-visible@s\">\n                @if (page?.title) {\n                  <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n                }\n                @if (page?.description) {\n                  <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n                }\n                <div class=\"dcf-separator\"></div>\n              </div>\n            }\n            @if ($index < pageTitles.length - 1) {\n              <div class=\"dcf-arrow-container\">\n                <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M1.5 1L6.5 6L1.5 11\" />\n                </svg>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (pageTitles[activeIndex - 1]?.title || pageTitles[activeIndex - 1]?.description) {\n      <div class=\"dcf-current-step\">\n        <div>\n          @if (pageTitles[activeIndex - 1]?.title) {\n            <div class=\"dcf-title\">{{  pageTitles[activeIndex - 1]?.title  | translate }}</div>\n          }\n          @if (pageTitles[activeIndex - 1]?.description) {\n            <div class=\"dcf-description\">{{ pageTitles[activeIndex - 1]?.description | translate }}</div>\n          }\n        </div>\n      </div>\n    }\n\n    @if (initialized && activeContent?.length) {\n        <ngx-decaf-layout\n          [className]=\"'dcf-stepped-form-grid paginated dcf-grid-nested'\"\n          [children]=\"activeContent || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [match]=\"false\"\n          [rows]=\"rows\"\n          [cols]=\"cols\"\n          [match]=\"false\"\n        />\n    } @else {\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n      <br />\n      <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n      <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    }\n    <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activeIndex <= 1\">\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n            {{locale + '.previous' | translate}}\n        </ion-button>\n      </div>\n\n      <div class=\"dcf-width-1-2@s\">\n        <ion-button fill=\"solid\"  (click)=\"handleNext(activeIndex === pages ? true : false)\">\n          @if (activeIndex === pages) {\n            {{locale + '.submit' | translate}}\n          } @else {\n            {{locale + '.next' | translate}}\n            <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n          }\n        </ion-button>\n      </div>\n    </div>\n  } @else {\n    <div class=\"dcf-single-step\">\n      @for (item of children; track $index) {\n        <ion-card>\n          <ion-card-content>\n            @if (item.title || item.description) {\n                <div class=\"dcf-information\">\n                  <div>\n                    @if (item.title) {\n                      <div class=\"dcf-title\">{{  item.title | translate }}</div>\n                    }\n                    @if (item.description) {\n                      <div class=\"dcf-description\">{{ item.description | translate }}</div>\n                    }\n                  </div>\n                </div>\n              }\n              <div>\n                @if (initialized && item.items?.length) {\n                  <div>\n                    <ngx-decaf-layout\n                      [className]=\"'dcf-stepped-form-grid dcf-grid-nested'\"\n                      [children]=\"item.items || []\"\n                      [parentForm]=\"formGroup || parentForm\"\n                      [flexMode]=\"props.flexMode || false\"\n                      [gap]=\"'small'\"\n                      [rows]=\"rows\"\n                      [cols]=\"cols\"\n                      [match]=\"false\"\n\n                    />\n                  </div>\n\n                }\n              </div>\n          </ion-card-content>\n        </ion-card>\n      }\n      <div class=\"dcf-buttons-container dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n        <div class=\"dcf-width-auto@s dcf-width-1-1\">\n          <ion-button  color=\"light\" (click)=\"handleBack()\">\n                {{locale + '.cancel' | translate}}\n            </ion-button>\n          </div>\n\n          <div class=\"dcf-width-auto@s dcf-width-1-1\">\n            <ion-button fill=\"solid\"  (click)=\"handleNext(true)\">\n              {{locale + '.submit' | translate}}\n            </ion-button>\n          </div>\n        </div>\n      </div>\n    }\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form.paginated{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}.dcf-single-step .dcf-information{margin-bottom:1rem}.dcf-single-step .dcf-step-container:not(.ngx-decaf-fieldset){padding-bottom:1.5rem;padding-top:.5rem}.dcf-single-step ion-card{margin-bottom:1.5rem}.dcf-single-step ion-card .dcf-information{margin-top:.75rem}.dcf-step-form-container{margin-bottom:1.75rem!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset,.dcf-steped-form ::ng-deep ngx-decaf-fieldset{padding-top:0!important;padding-bottom:0!important}.dcf-steped-form ::ng-deep ngx-decaf-component-renderer.ngx-decaf-fieldset ion-button,.dcf-steped-form ::ng-deep ngx-decaf-fieldset ion-button{margin-top:1rem!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { children: [{
-                type: Input
-            }], paginated: [{
-                type: Input
-            }], pages: [{
-                type: Input
-            }], pageTitles: [{
-                type: Input
-            }], operation: [{
-                type: Input
-            }], startPage: [{
-                type: Input
-            }] } });
-
-let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
-    constructor() {
-        super("ModalComponent");
-        this.isOpen = false;
-        this.InlineContentPosition = 'bottom';
-        this.fullscreen = false;
-        this.modalController = inject(ModalController);
-        addIcons(allIcons);
-    }
-    async ngOnInit() {
-        if (!this.modalController)
-            this.modalController = modalController;
-    }
-    async initialize(options = {}) {
-        if (!this.modalController)
-            this.modalController = modalController;
-        this.options = Object.assign({}, DefaultModalOptions, this.options, options);
-        this.initialized = true;
+    isImageFile(file) {
+        return file && file.type.startsWith('image/');
     }
-    async create(props = {}) {
-        if (!this.initialized)
-            await this.initialize(props);
-        return this;
+    /**
+     * @description Removes a file from the selection.
+     * @summary Updates the file list to exclude the file at the specified index.
+     * Emits the change event and updates the preview if necessary.
+     *
+     * @param {number} index - The index of the file to be removed.
+     * @returns {Promise<void>}
+     */
+    async removeFile(index) {
+        if (index <= this.files.length)
+            this.files = [...this.files.filter((_, i) => i !== index)];
+        await this.getPreview();
+        this.changeEventEmit();
     }
-    present() {
-        this.isOpen = true;
-        this.changeDetectorRef.detectChanges();
+    /**
+     * @description Retrieves the preview image for the selected files.
+     * @summary If the first selected file is an image, its data URL is retrieved and set as the preview.
+     * If the file is not an image, the preview is cleared.
+     *
+     * @returns {Promise<void>}
+     */
+    async getPreview() {
+        this.preview = undefined;
+        const file = this.files && this.files.length ? this.files[0] : null;
+        if (file) {
+            const dataUrl = await this.getDataURLs(file);
+            if (dataUrl && dataUrl.length)
+                this.preview = dataUrl[0];
+        }
     }
-    async handleEvent(event) {
-        if (event instanceof Event)
-            event.stopImmediatePropagation();
-        console.log(event);
-    }
-    handleWillDismiss(event) {
-        const { data, role } = event.detail;
-        this.listenEvent.emit({
-            name: role,
-            component: "ModalComponent",
-            data: data
+    /**
+     * @description Emits the change event for the file upload field.
+     * @summary Triggers the change event, notifying any listeners that the value has changed.
+     * The event contains the updated value, component name, and event type.
+     *
+     * @returns {void}
+     */
+    changeEventEmit() {
+        this.changeEvent.emit({
+            data: this.value,
+            component: this.componentName,
+            name: ComponentEventNames.CHANGE,
         });
     }
-    async cancel() {
-        this.modalController.dismiss(null, ActionRoles.cancel, this.uid);
-        this.isOpen = false;
-    }
-    async confirm(event) {
-        await this.modalController.dismiss(this.name, ActionRoles.confirm, this.uid);
-        this.isOpen = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ModalComponent, isStandalone: true, selector: "ngx-decaf-modal", inputs: { title: "title", isOpen: "isOpen", options: "options", globals: "globals", inlineContent: "inlineContent", InlineContentPosition: "InlineContentPosition", fullscreen: "fullscreen" }, host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "<ion-modal [id]=\"uid\"\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  >\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{title | translate}}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"dcf-modal-body\">\n        @if (model) {\n          <ngx-decaf-model-renderer (onIonChange)=\"handleEvent($event)\" (listenEvent)=\"handleEvent($event)\" [model]=\"model\" [globals]=\"globals\" />\n\n        } @else {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\" ></ion-spinner>\n          </div>\n        }\n\n      </section>\n\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:60px;height:60px}ion-modal.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { 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(),
-    __metadata("design:paramtypes", [])
-], ModalComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-modal', standalone: true, imports: [IonModal, ModelRendererComponent, TranslatePipe, IonSpinner, IonButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], host: { '[attr.id]': 'uid' }, template: "<ion-modal [id]=\"uid\"\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  >\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title) {\n          <ion-title>{{title | translate}}</ion-title>\n        }\n        <ion-buttons slot=\"end\">\n          <ion-button type=\"button\" class=\"dcf-button-close\" (click)=\"cancel()\">\n            <ion-icon name=\"close-outline\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"dcf-modal-body\">\n        @if (model) {\n          <ngx-decaf-model-renderer (onIonChange)=\"handleEvent($event)\" (listenEvent)=\"handleEvent($event)\" [model]=\"model\" [globals]=\"globals\" />\n\n        } @else {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\" ></ion-spinner>\n          </div>\n        }\n\n      </section>\n\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-body{height:100%;padding:1.5rem 1rem}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:60px;height:60px}ion-modal.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], isOpen: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], globals: [{
-                type: Input
-            }], inlineContent: [{
-                type: Input
-            }], InlineContentPosition: [{
-                type: Input
-            }], fullscreen: [{
-                type: Input
-            }] } });
-async function getNgxModalComponent(props = {}, modalProps = {}, injector) {
-    const { globals } = { ...props };
-    if (!globals || !globals?.['operation'])
-        props.globals = { ...(globals || {}), operation: OperationKeys.CREATE };
-    const component = NgxRenderingEngine.createComponent(ModalComponent, props, injector || undefined);
-    return component.create(modalProps);
-}
-
-class NgxSvgDirective {
-    constructor() {
-        this.mediaService = inject(NgxMediaService);
-        this.element = inject(ElementRef);
-        this.http = inject(HttpClient);
-    }
-    ngOnInit() {
-        this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
-        if (this.path)
-            this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxSvgDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[ngx-decaf-svg]',
-                    standalone: true
-                }]
-        }], propDecorators: { path: [{
-                type: Input,
-                args: ['ngx-decaf-svg']
-            }] } });
-
-let IconComponent = class IconComponent {
-    constructor() {
-        this.color = "";
-        this.slot = 'icon-only';
-        this.button = false;
-        this.buttonFill = 'clear';
-        this.buttonShape = 'round';
-        this.size = 'default';
-        this.type = 'ionic';
-        this.isSvg = false;
-        this.initialized = false;
-        this.inline = false;
-        this.mediaService = new NgxMediaService$1();
-        addIcons(allIcons);
+    /**
+     * @description Retrieves the data URLs for the selected files.
+     * @summary Converts the selected image files to data URLs using FileReader.
+     * The resulting data URLs can be used for previewing images in the browser.
+     *
+     * @param {File[] | File} [files] - The files for which to generate data URLs.
+     * If not provided, the currently selected files are used.
+     *
+     * @returns {Promise<string[] | undefined>} - A promise that resolves to an array of data URLs, or undefined if an error occurs.
+     */
+    async getDataURLs(files) {
+        if (!files)
+            files = this.files;
+        if (!Array.isArray(files))
+            files = [files];
+        // files = files.filter(f => f.type && f.type.startsWith('image/'));
+        return this.readFile(files).then(urls => {
+            // validate generated DataURLs
+            const invalid = urls.some(u => !this.isValidDataURL(u));
+            if (invalid)
+                return undefined;
+            if (this.multiple || this.enableDirectoryMode)
+                return urls;
+            return urls.length ? [urls[0]] : undefined;
+        }).catch(() => {
+            return undefined;
+        });
     }
-    ngOnInit() {
-        if (this.button)
-            this.slot = 'icon-only';
-        if (this.name?.includes('.')) {
-            this.type = 'image';
-            this.isSvg = this.name.endsWith('.svg');
+    /**
+     * @description Validates the format of a data URL.
+     * @summary Checks if the data URL is a non-empty string and matches the expected pattern
+     * for base64-encoded image data URLs. Uses a regular expression to validate the format.
+     *
+     * @param {string | undefined} dataURL - The data URL to be validated.
+     * @returns {boolean} - True if the data URL is valid, false otherwise.
+     */
+    isValidDataURL(dataURL) {
+        if (!dataURL || typeof dataURL !== 'string') {
+            return false;
+        }
+        // Regex para qualquer MIME type seguido de ;base64
+        const match = dataURL.match(/^data:([a-zA-Z0-9.+-\\/]+);base64,([A-Za-z0-9+/=\s]+)$/);
+        if (!match)
+            return false;
+        const payload = match[2];
+        try {
+            if (typeof atob === 'function') {
+                // remove espaços e tenta decodificar
+                atob(payload.replace(/\s+/g, ''));
+            }
+            return true;
+        }
+        catch {
+            return false;
         }
-        this.initialized = true;
     }
-    ngAfterViewInit() {
-        this.mediaService.setDarkMode(this.component.nativeElement);
+    /**
+     * @description Clears all error messages from the component.
+     * @summary Resets the error state, removing all error messages from the display.
+     *
+     * @returns {void}
+     */
+    clearErrors() {
+        this.errors = [];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon\" #component>\n  @if(initialized) {\n    @if(button) {\n      <ion-button\n        [fill]=\"buttonFill\"\n        [shape]=\"buttonShape\"\n        [color]=\"color\">\n        @if(type === 'image') {\n          @if(isSvg) {\n            <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\">\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\" [alt]=\"name\"  [title]=\"name\" [slot]=\"slot\" [src]=\"name\" [style.width]=\"width\" title=\"icon\"  />\n          }\n\n        } @else {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [size]=\"size\"\n            [color]=\"color\"\n            [name]=\"name\"  />\n        }\n      </ion-button>\n    } @else {\n      @if(type === 'image') {\n        @if(isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n\n            >\n          </span>\n        } @else {\n            <img aria-hidden=\"true\" [alt]=\"name\"  [title]=\"name\" [slot]=\"slot\" [src]=\"name\" [style.width]=\"width\" title=\"icon\"  />\n        }\n      }\n      @if(type === 'ionic') {\n\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"color\"\n          [name]=\"name\"  />\n\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}.dcf-icon ion-icon:not([size]){font-size:1.35rem!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+    /**
+     * @description Reads the selected files as data URLs.
+     * @summary Uses the FileReader API to read each file as a data URL.
+     * Returns a promise that resolves to an array of data URLs.
+     *
+     * @param {File[]} files - The files to be read.
+     * @returns {Promise<string[]>} - A promise that resolves to an array of data URLs.
+     */
+    readFile(files) {
+        return Promise.all(files.map(file => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onerror = () => reject(reader.error);
+            reader.onload = () => resolve(String(reader.result || ''));
+            reader.readAsDataURL(file);
+        })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", 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", 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    <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 (!preview) {\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 + \".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]=\"preview\"\n                      [title]=\"locale + '.preview' | translate\"\n                      [alt]=\"locale + '.preview' | translate\"\n                    />\n                    <div class=\"dcf-overlay\">\n                      <ion-button (click)=\"showFilePreview(preview)\" 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)=\"showFilePreview(file, file.type)\"\n                            [name]=\"'image-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\n\n      </div>\n    </div>\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 .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: 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" }] }); }
 };
-IconComponent = __decorate([
+FileUploadComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
-], IconComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconComponent, decorators: [{
+], FileUploadComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid' }, template: "<div class=\"dcf-icon\" #component>\n  @if(initialized) {\n    @if(button) {\n      <ion-button\n        [fill]=\"buttonFill\"\n        [shape]=\"buttonShape\"\n        [color]=\"color\">\n        @if(type === 'image') {\n          @if(isSvg) {\n            <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\">\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\" [alt]=\"name\"  [title]=\"name\" [slot]=\"slot\" [src]=\"name\" [style.width]=\"width\" title=\"icon\"  />\n          }\n\n        } @else {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [size]=\"size\"\n            [color]=\"color\"\n            [name]=\"name\"  />\n        }\n      </ion-button>\n    } @else {\n      @if(type === 'image') {\n        @if(isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n\n            >\n          </span>\n        } @else {\n            <img aria-hidden=\"true\" [alt]=\"name\"  [title]=\"name\" [slot]=\"slot\" [src]=\"name\" [style.width]=\"width\" title=\"icon\"  />\n        }\n      }\n      @if(type === 'ionic') {\n\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"color\"\n          [name]=\"name\"  />\n\n      }\n    }\n  }\n</div>\n", styles: ["::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}.dcf-icon ion-icon:not([size]){font-size:1.35rem!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, CardComponent, IconComponent, IonList, IonLabel, IonItem, IonText, TranslatePipe, IonIcon, IonButton], 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    <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 (!preview) {\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 + \".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]=\"preview\"\n                      [title]=\"locale + '.preview' | translate\"\n                      [alt]=\"locale + '.preview' | translate\"\n                    />\n                    <div class=\"dcf-overlay\">\n                      <ion-button (click)=\"showFilePreview(preview)\" 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)=\"showFilePreview(file, file.type)\"\n                            [name]=\"'image-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\n\n      </div>\n    </div>\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 .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"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
-                args: ['component', { read: ElementRef, static: false }]
+                args: ['component', { static: true }]
+            }], formGroup: [{
+                type: Input
             }], name: [{
                 type: Input
-            }], color: [{
+            }], formControl: [{
                 type: Input
-            }], slot: [{
+            }], required: [{
                 type: Input
-            }], button: [{
+            }], multiple: [{
                 type: Input
-            }], buttonFill: [{
+            }], type: [{
                 type: Input
-            }], buttonShape: [{
+            }], label: [{
                 type: Input
-            }], width: [{
+            }], buttonLabel: [{
                 type: Input
             }], size: [{
                 type: Input
-            }], inline: [{
+            }], position: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], enableDirectoryMode: [{
                 type: Input
+            }], maxFileSize: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
             }] } });
 
 /**
@@ -10455,7 +11471,8 @@ const Components = [
     FilterComponent,
     SteppedFormComponent,
     IconComponent,
-    CardComponent
+    CardComponent,
+    FileUploadComponent
 ];
 class ForAngularComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -10474,7 +11491,8 @@ class ForAngularComponentsModule {
             FilterComponent,
             SteppedFormComponent,
             IconComponent,
-            CardComponent], exports: [ModelRendererComponent,
+            CardComponent,
+            FileUploadComponent], exports: [ModelRendererComponent,
             ComponentRendererComponent,
             CrudFieldComponent,
             CrudFormComponent,
@@ -10489,7 +11507,8 @@ class ForAngularComponentsModule {
             FilterComponent,
             SteppedFormComponent,
             IconComponent,
-            CardComponent] }); }
+            CardComponent,
+            FileUploadComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
             CrudFormComponent,
             EmptyStateComponent,
@@ -10503,7 +11522,8 @@ class ForAngularComponentsModule {
             FilterComponent,
             SteppedFormComponent,
             IconComponent,
-            CardComponent] }); }
+            CardComponent,
+            FileUploadComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
             type: NgModule,
@@ -10701,7 +11721,7 @@ class NgxPageDirective extends NgxComponentDirective {
      * @return {void}
      * @memberOf module:lib/engine/NgxPageDirective
      */
-    setPageTitle(route, menu) {
+    async setPageTitle(route, menu) {
         if (!route)
             route = this.router.url.replace('/', '');
         if (!menu)
@@ -10709,7 +11729,7 @@ class NgxPageDirective extends NgxComponentDirective {
         const activeMenu = menu.find(item => item?.url?.includes(route));
         if (activeMenu) {
             const title = activeMenu?.title || activeMenu?.label;
-            this.titleService.setTitle(`${title}`);
+            this.titleService.setTitle(`${await this.translate(title)} ${this.appName ? `- ${this.appName}` : ''}`);
             if (!this.title)
                 this.title = title;
         }
@@ -10780,10 +11800,13 @@ class NgxModelPageDirective extends NgxPageDirective {
     //   super("NgxModelPageDirective");
     // }
     get pageTitle() {
+        if (!this.modelName && this.model instanceof Model)
+            this.modelName = this.model?.constructor?.name || "";
         if (!this.operation)
-            return `Listing ${this.modelName}`;
+            return this.title ? this.title : `Listing ${this.modelName}`;
         const operation = this.operation.charAt(0).toUpperCase() + this.operation.slice(1).toLowerCase();
-        return `${operation} ${this.modelName}`;
+        return this.modelName ?
+            `${operation} ${this.modelName}` : this.title;
     }
     /**
      * @description Lazy-initialized repository getter with model resolution.
@@ -10863,7 +11886,7 @@ class NgxModelPageDirective extends NgxPageDirective {
     async handleEvent(event) {
         const { name } = event;
         switch (name) {
-            case EventConstants.SUBMIT:
+            case ComponentEventNames.SUBMIT:
                 await this.handleSubmit(event);
                 break;
         }
@@ -10879,7 +11902,7 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {IBaseCustomEvent} event - The submit event containing form data
      * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
      */
-    async handleSubmit(event) {
+    async handleSubmit(event, redirect = false) {
         try {
             const repo = this._repository;
             const operation = this.operation === OperationKeys.READ ? 'delete' : this.operation.toLowerCase();
@@ -10893,7 +11916,8 @@ class NgxModelPageDirective extends NgxPageDirective {
             });
             if (result) {
                 repo.refresh(this.modelName, this.operation, this.modelId);
-                this.location.back();
+                if (redirect)
+                    this.location.back();
             }
             return {
                 ...event,
@@ -10996,5 +12020,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementSizes, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getNgxModalComponent, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelRepository, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxLightBoxModal, provideDbAdapter, provideDynamicComponents, provideI18n, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map