@decaf-ts/for-angular 0.0.53 → 0.0.54

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

@@ -1,6 +1,6 @@
 import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, UIKeys, RenderingError, UIMediaBreakPoints, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { InjectionToken, NgModule, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
+import { InjectionToken, NgModule, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation, HostListener } 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';
@@ -349,6 +349,25 @@ const DefaultFormReactiveOptions = {
         },
     },
 };
+/**
+ * @description Mapping of select field interface types used in Ionic components.
+ * @summary Provides a set of supported select interface types for Ionic select fields,
+ * mapping human-readable keys to their corresponding `SelectInterface` string values.
+ * This allows for consistent usage and reference of select interface types throughout the application.
+ * @type {Record<string, SelectInterface>}
+ * @property {string} PopOver - Represents the 'popover' select interface.
+ * @property {string} Alert - Represents the 'alert' select interface.
+ * @property {string} ActionSheet - Represents the 'action-sheet' select interface.
+ * @property {string} modal - Represents the 'modal' select interface.
+ * @const SelectFieldInterfaces
+ * @memberOf module:lib/engine/constants
+ */
+const SelectFieldInterfaces = {
+    POPOVER: 'popover',
+    ALERT: 'alert',
+    ACTION_SHEET: 'action-sheet',
+    MODAL: 'modal',
+};
 
 /**
  * @module module:lib/engine/ValidatorFactory
@@ -559,7 +578,7 @@ function provideDecafDynamicComponents(...components) {
  * // Use repository for queries
  * const users = await userRepo.findAll();
  */
-function getModelAndRepository(model) {
+function getModelAndRepository(model, clazz) {
     try {
         const modelName = (typeof model === Primitives.STRING
             ? model
@@ -575,6 +594,11 @@ function getModelAndRepository(model) {
         const pk = Model.pk(repository.class);
         if (!pk)
             return undefined;
+        if (clazz) {
+            clazz.repository = repository;
+            clazz.model = model;
+            clazz.pk = pk;
+        }
         return { repository, model, pk };
     }
     catch (error) {
@@ -2874,7 +2898,7 @@ var errors = {
 	greaterThanOrEqual: "This field must be greater than or equal to field {0}",
 	form_control: "Controlador do formulário não encontrado para {0}.",
 	not_found: "No records found with <span class=\"text-bold\">{0}: {1} in {2}</span>.",
-	empty_options: "No options available for field {0}. Fix the data source."
+	empty_options: "No options available for required field {0}. Fix the data source."
 };
 var operations = {
 	read: {
@@ -2882,8 +2906,8 @@ var operations = {
 		error: "Error reading item with {0} {1}."
 	},
 	create: {
-		success: "Successfully created item with {0} {1}.",
-		error: "Error creating item with {0} {1}."
+		success: "Successfully created item.",
+		error: "Error creating item."
 	},
 	update: {
 		success: "Successfully updated item with {0} {1}.",
@@ -2965,6 +2989,7 @@ var component = {
 		preview: "Preview",
 		buttons: {
 			select: "Select File",
+			select_directory: "Select Directory",
 			preview: "Preview",
 			clear: "Clear"
 		},
@@ -4900,6 +4925,7 @@ class NgxFormFieldDirective extends NgxComponentDirective {
     setValue(value) {
         this.formControl.setValue(value);
         this.formControl.updateValueAndValidity();
+        this.value = value;
     }
     handleModalChildChanges() {
         if (this.isModalChild)
@@ -5461,7 +5487,7 @@ let ModalComponent = class ModalComponent extends NgxParentComponentDirective {
         await this.modal.dismiss(event?.data || undefined, ActionRoles.confirm);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", headerTransparent: "headerTransparent", showHeader: "showHeader" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title?.length) {\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\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header{box-shadow:none}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-header-transparent ion-button,.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{box-shadow:var(--dcf-box-shadow)!important;border-radius:12px;margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-gray-2) !important;transform:translate(4px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", headerTransparent: "headerTransparent", showHeader: "showHeader" }, outputs: { willDismissEvent: "willDismissEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["component"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-modal\n  [id]=\"uid\"\n  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title?.length) {\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\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component.dcf-modal{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-select-interface ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius) !important}.dcf-modal-component.dcf-modal-select-interface ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)!important}.dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header{box-shadow:none}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-header-transparent ion-button,.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{box-shadow:var(--dcf-box-shadow)!important;border-radius:12px;margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-gray-2) !important;transform:translate(4px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: 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(),
@@ -5469,7 +5495,7 @@ ModalComponent = __decorate([
 ], ModalComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title?.length) {\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\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header{box-shadow:none}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-header-transparent ion-button,.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{box-shadow:var(--dcf-box-shadow)!important;border-radius:12px;margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-gray-2) !important;transform:translate(4px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
+            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  [class]=\"'dcf-modal-component ' + className\"\n  [isOpen]=\"isOpen\"\n  (willDismiss)=\"handleWillDismiss($event)\"\n  [backdropDismiss]=\"options?.backdropDismiss\"\n  [showBackdrop]=\"options?.showBackdrop\"\n  [animated]=\"options?.animated\"\n  [canDismiss]=\"options?.canDismiss\"\n  [class.dcf-fullscreen-modal]=\"fullscreen\"\n  [class.dcf-lightbox-modal]=\"lightBox\"\n  [class.dcf-modal-no-header]=\"!showHeader\"\n  [class.dcf-header-transparent]=\"headerTransparent\"\n  [class.dcf-no-title]=\"!title?.length\"\n  #component\n>\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        @if (title?.length) {\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\" [class.dcf-has-title]=\"title?.length\">\n        @if (!tag && !model && !inlineContent) {\n          <div class=\"dcf-loading-container\">\n            <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n          </div>\n        } @else {\n          @if (inlineContent && inlineContentPosition === \"top\") {\n            <div class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n          @if (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 class=\"dcf-modal-content\" id=\"dcf-modal-content\" [innerHTML]=\"inlineContent\"></div>\n          }\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".dcf-modal-component ::ng-deep form .dcf-buttons-grid{align-content:center!important;justify-content:center;padding-top:1rem}.dcf-modal-component.dcf-modal{--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-modal-select-interface{--min-width: 300px;--max-width: 500px;--border-radius: var(--dcf-border-radius)}.dcf-modal-component.dcf-modal-select-interface .dcf-modal-body{--max-height: 60%;max-height:60%;padding:0px var(--dcf-padding-small)!important}.dcf-modal-component.dcf-modal-select-interface ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius) !important}.dcf-modal-component.dcf-modal-select-interface ion-header{box-shadow:none!important;border-bottom:1px solid var(--dcf-color-gray-2)!important}.dcf-modal-component.dcf-modal-expand{--height: 90%;--width: 90%;--max-width: 100%}.dcf-modal-component.dcf-modal-expand ion-button{--background: var(--dcf-color-light) !important;--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-fullscreen-modal{--height: 100%;--width: 100%;--max-width: 100%;--border-radius: 0}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header{box-shadow:none}.dcf-modal-component.dcf-fullscreen-modal:not(.dcf-header-transparent).dcf-no-title ion-header ion-button{transform:translate(-5px,5px)}.dcf-modal-component.dcf-lightbox-modal ion-content{--background: transparent !important}.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{display:flex;height:auto;justify-content:center;align-items:center}.dcf-modal-component.dcf-lightbox-modal.dcf-fullscreen-modal{padding:var(--dcf-padding-small)}.dcf-modal-component.dcf-header-transparent ion-header{box-shadow:none!important;border-bottom:none!important}.dcf-modal-component.dcf-header-transparent ion-title{width:calc(100% + 10px);position:relative;top:1.25rem;background:#fff;height:50px!important}.dcf-modal-component.dcf-header-transparent ion-content[part=background],.dcf-modal-component.dcf-header-transparent ion-content::part(background){border-radius:var(--dcf-border-radius)!important}.dcf-modal-component.dcf-header-transparent .dcf-modal-body.dcf-has-title{padding-top:2rem!important}.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{--background: transparent;--box-shadow: none !important}@media (max-width: 767px){.dcf-modal-component.dcf-header-transparent,.dcf-modal-component.dcf-lightbox-modal{padding:var(--dcf-padding-xsmall)}.dcf-modal-component.dcf-header-transparent ion-button,.dcf-modal-component.dcf-lightbox-modal ion-button{transform:translate(2px,2px)!important}}.dcf-modal-component.dcf-header-transparent ion-header,.dcf-modal-component.dcf-lightbox-modal ion-header{box-shadow:none!important;padding:unset!important;margin:unset!important;height:30px}.dcf-modal-component.dcf-header-transparent ion-header ion-button,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button{box-shadow:var(--dcf-box-shadow)!important;border-radius:12px;margin:0!important;width:32px!important;height:25px!important;--background: var(--dcf-color-gray-2) !important;transform:translate(4px);--border-radius: var(--dcf-border-radius-small) !important}.dcf-modal-component.dcf-header-transparent ion-header ion-button *,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button *{margin:-5px}.dcf-modal-component.dcf-header-transparent ion-header ion-button ion-icon,.dcf-modal-component.dcf-lightbox-modal ion-header ion-button ion-icon{font-size:1.15rem!important;color:var(--dcf-color-gray-5)}.dcf-modal-component.dcf-header-transparent ion-header ion-toolbar,.dcf-modal-component.dcf-lightbox-modal ion-header ion-toolbar{--background: transparent !important;padding:unset!important;margin:unset!important}.dcf-modal-component.dcf-header-transparent ion-content,.dcf-modal-component.dcf-lightbox-modal ion-content{max-width:calc(100% - 10px)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body{background:#fff!important;padding:2px 0 0;border-radius:var(--dcf-border-radius)}.dcf-modal-component.dcf-header-transparent .dcf-modal-body>div,.dcf-modal-component.dcf-lightbox-modal .dcf-modal-body>div{border-radius:var(--dcf-border-radius)!important;max-width:calc(100% - 5px)}.dcf-modal-component:not(.dcf-lightbox-modal) .dcf-modal-body{padding:1.5rem 1rem}.dcf-modal-component .dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-modal-component .dcf-loading-container ion-spinner{width:60px;height:60px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { modal: [{
                 type: ViewChild,
                 args: ['component']
@@ -5549,7 +5575,7 @@ async function presentNgxInlineModal(inlineContent, props = {}, injector) {
  * @returns {Promise<void>} - A promise that resolves when the modal is presented.
  */
 async function getNgxInlineModal(inlineContent, props = {}, injector) {
-    return (await getNgxModalComponent({ props, ...{ inlineContent: inlineContent ?? '<div></div>', className: `${props?.className ?? ''} dcf-modal-expand` } }, {}, injector || undefined));
+    return (await getNgxModalComponent({ props, ...{ inlineContent: inlineContent ?? '<div></div>', className: `${props?.className ?? ''} dcf-modal dcf-modal-expand` } }, {}, injector || undefined));
 }
 /**
  * @description Retrieves a modal for selecting options.
@@ -5559,15 +5585,19 @@ async function getNgxInlineModal(inlineContent, props = {}, injector) {
  * @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) {
+async function getNgxSelectOptionsModal(title, options, injector) {
     const props = {
         tag: 'ngx-decaf-list',
+        title,
         globals: {
             data: options,
+            showSearchbar: options?.length > 10,
             item: { tag: true },
             pk: 'value',
             mapper: { title: 'text', uid: 'value' },
+            type: ListComponentsTypes.INFINITE
         },
+        className: `dcf-modal dcf-modal-select-interface`,
     };
     return (await getNgxModalComponent(props, {}, injector || undefined));
 }
@@ -5673,7 +5703,7 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
          * @type {SelectInterface}
          * @memberOf CrudFieldComponent
          */
-        this.interface = 'popover';
+        this.interface = SelectFieldInterfaces.POPOVER;
         /**
          * @description Spellcheck attribute for text inputs.
          * @summary Enables or disables spellchecking for text inputs.
@@ -5833,9 +5863,11 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
                     this.options = this.options();
                 }
                 else {
-                    const repo = getModelAndRepository(this.options?.['name']);
+                    const repo = getModelAndRepository(this.options?.['name'], this);
                     if (repo) {
                         const { repository } = repo;
+                        if (typeof this.optionsMapper === 'object' && !Object.keys(this.optionsMapper).length)
+                            this.optionsMapper = { value: this.pk, text: this.pk };
                         this.options = await repository.select().execute();
                     }
                 }
@@ -5852,27 +5884,28 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
                 this.options = dataMapper(this.options, this.optionsMapper);
             }
         }
-        const options = this.options.map(async (option) => {
-            const text = !this.translatable ? option.text : await this.translate((!option.text.includes('options') ?
+        const translateOptions = this.options.map(async (option) => {
+            const text = !this.translatable ? option.text : await this.translate((!option.text?.includes('options') ?
                 getLocaleContextByKey(`${this.label.toLowerCase().replace('label', 'options')}`, option.text)
                 : option.text));
             return {
                 value: option.value,
-                text: text.toLowerCase().includes('.options') ? option.text : text,
+                text,
                 selected: option?.selected ?? false,
                 hidden: option?.hidden ?? false,
                 disabled: option?.disabled ?? false,
             };
         });
-        this.options = await Promise.all(options);
+        this.options = await Promise.all(translateOptions);
         if (this.type !== HTML5InputTypes.SELECT)
             return this.options;
-        if (this.options.length > 10 && this.interface === 'popover')
-            this.interface = 'modal';
+        if (this.options.length > 10 && this.interface === SelectFieldInterfaces.POPOVER)
+            this.interface = SelectFieldInterfaces.MODAL;
         if (this.options.length === 0 && !this.required)
             this.value = "";
-        return (!this.required || (this.options?.length > 1 && this.startEmpty) ?
+        const options = (!this.required || (this.options?.length > 1 && this.startEmpty) ?
             [{ value: '', text: '', selected: true, disabled: this.required }, ...this.options] : this.options);
+        return this.options = [...options];
     }
     /**
      * Handles the opening of select options based on the specified interface type.
@@ -5890,10 +5923,12 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
         if (selectInterface === 'modal') {
             event.preventDefault();
             event.stopImmediatePropagation();
-            const modal = await getNgxSelectOptionsModal(this.options);
+            const modal = await getNgxSelectOptionsModal(this.label, this.options);
             const { data, role } = await modal.onWillDismiss();
-            if (role === ActionRoles.confirm && data !== this.value)
+            if (role === ActionRoles.confirm && data !== this.value) {
                 this.setValue(data);
+                this.component.nativeElement.ionChange.emit({ value: data });
+            }
         }
     }
     /**
@@ -5941,25 +5976,8 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxFormFieldDirective
             return false;
         return this.formControl.value.includes(value);
     }
-    /**
-     * @description Handles fieldset group update events from parent fieldsets.
-     * @summary Processes events triggered when an existing group needs to be updated.
-     * Updates the active form group index and refreshes the form group and form control
-     * references to point to the group being edited.
-     *
-     * @param {CustomEvent} event - The fieldset update group event containing update details
-     * @returns {void}
-     * @memberOf CrudFieldComponent
-     */
-    handleFieldsetUpdateGroupEvent(event) {
-        const { formGroup, index } = event.detail;
-        this.activeFormGroupIndex = index;
-        this.formGroup = formGroup;
-        this.formControl = this.formGroup.get(this.name);
-        this.value = this.formControl.value;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", startEmpty: "startEmpty", 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') || readonly) {\n  @if(!hidden) {\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) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\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 ?? null\"\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\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.disabled\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\">\n                @if (!options?.length) {\n                  <ion-text color=\"danger\">\n                    * {{ 'errors.empty_options' | translate:{'0': name} }}\n                  </ion-text>\n                }\n              </div>\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", startEmpty: "startEmpty", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable" }, host: { 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') || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div >\n        <ion-item [class.dcf-item-readonly]=\"readonly\" [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) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\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 ?? null\"\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\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\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.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.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(),
@@ -5980,7 +5998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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') || readonly) {\n  @if(!hidden) {\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) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\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 ?? null\"\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\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.disabled\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div class=\"dcf-error\" [innerHTML]=\"getErrors(container)\">\n                @if (!options?.length) {\n                  <ion-text color=\"danger\">\n                    * {{ 'errors.empty_options' | translate:{'0': name} }}\n                  </ion-text>\n                }\n              </div>\n            </div>\n          }\n          @else {\n            <ion-input\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [type]=\"type\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [inputmode]=\"inputmode\"\n              [labelPlacement]=\"labelPlacement\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [max]=\"max !== undefined ? max : null\"\n              [min]=\"min !== undefined ? min : null\"\n              [pattern]=\"pattern !== undefined ? pattern : null\"\n              [step]=\"step !== undefined ? step : null\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [label]=\"label | translate\" #component />\n          }\n      </div>\n    </ng-container>\n  } @else {\n    <div>\n      <p class=\"dcf-error\">\n        {{ 'errors.form.control' | translate:{'0': name} }}\n      </p>\n    </div>\n  }\n\n}\n\n", styles: ["ion-item{--border-color: transparent}ion-item:not(.dcf-input-item){--inner-padding-start: 0rem;--padding-start: 0rem;--background: transparent}ion-item.dcf-input-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--inner-padding-start: .75rem;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15;--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-item.dcf-input-item.dcf-palette-dark{--border-color: var(--dcf-color-gray-6) !important}ion-item.dcf-input-item.read,ion-item.dcf-input-item.delete{--min-height: 30px;padding:unset;margin:unset!important;margin-bottom:var(--dcf-margin-xsmall)!important}ion-item.dcf-input-item.read ion-label,ion-item.dcf-input-item.delete ion-label{font-weight:600;margin-top:0!important;margin-bottom:.25rem!important;font-size:.925rem}ion-item.dcf-input-item.read ion-label:not(:first-of-type),ion-item.dcf-input-item.delete ion-label:not(:first-of-type){margin:100rem}ion-item.dcf-input-item.read span,ion-item.dcf-input-item.read ion-text,ion-item.dcf-input-item.delete span,ion-item.dcf-input-item.delete ion-text{font-weight:400!important;font-size:.825rem;min-height:.5rem!important}ion-item.dcf-input-item.read span:not(.dcf-display-block),ion-item.dcf-input-item.read ion-text:not(.dcf-display-block),ion-item.dcf-input-item.delete span:not(.dcf-display-block),ion-item.dcf-input-item.delete ion-text:not(.dcf-display-block){display:inline-block}ion-item.dcf-input-item.read span.dcf-display-block,ion-item.dcf-input-item.read ion-text.dcf-display-block,ion-item.dcf-input-item.delete span.dcf-display-block,ion-item.dcf-input-item.delete ion-text.dcf-display-block{display:block!important}ion-item.dcf-input-item>*,ion-item.dcf-input-item ion-select{width:100%!important}ion-item.dcf-input-item.create.checkbox+.checkbox,ion-item.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}ion-item.dcf-input-item.create ion-item,ion-item.dcf-input-item.update ion-item{--border-color: transparent}ion-item.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,ion-item.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}ion-textarea textarea{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating::part(label){line-height:1.2rem!important}.dcf-proccessing,.dcf-proccessing *{pointer-events:none;touch-action:none;cursor:text}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary);margin-left:.5rem;margin-right:.5rem;border-radius:var(--dcf-border-radius-small);padding:3px}ion-checkbox{--size: 1.5rem;--checkbox-background-checked: var(--dcf-color-primary);--checkmark-width: 2px}ion-radio-group .dcf-radio-group-label{font-weight:600}ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-checkbox-group{width:100%}.dcf-checkbox-group .dcf-label{font-weight:600}.dcf-checkbox-group .dcf-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}.dcf-checkbox-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999}.dcf-error .ti,.dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action{cursor:pointer;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid', '[attr.class]': 'className' }, template: "@if ((operation === 'read' || operation === 'delete') || readonly) {\n  @if(!hidden) {\n    <ng-container>\n      <div >\n        <ion-item [class.dcf-item-readonly]=\"readonly\" [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) && value === 'true') {\n                <ion-icon aria-hidden=\"true\" class=\"dcf-margin-small-top\" [color]=\"!isDarkMode  ? 'primary' : 'light'\" size=\"small\" name=\"checkmark-circle-outline\"></ion-icon>\n              } @else {\n                <br />\n              }\n            }\n          </ion-label>\n        </ion-item>\n      </div>\n    </ng-container>\n  }\n} @else {\n  @if (formControl) {\n    <ng-container [formGroup]=\"multiple ? activeFormGroup : formControl.parent\">\n      <div\n          [id]=\"uid\" #container\n          [class]=\"'dcf-input-item ' + (operation || 'create')\"\n          [class.dcf-field-required]=\"required\"\n          [class.dcf-field-readonly]=\"readonly\"\n        >\n          @if (type === 'textarea') {\n            <ion-textarea\n              (ionInput)=\"handleModalChildChanges()\"\n              (ionChange)=\"handleModalChildChanges()\"\n              [id]=\"name\"\n              [mode]=\"'md'\"\n              [hidden]=\"hidden\"\n              [autoGrow]=\"true\"\n              [minlength]=\"minlength !== undefined ? minlength : null\"\n              [maxlength]=\"maxlength !== undefined ? maxlength : null\"\n              [readonly]=\"readonly !== undefined ? readonly : null\"\n              [inputmode]=\"inputmode\"\n              [spellcheck]=\"spellcheck\"\n              [rows]=\"rows\"\n              [labelPlacement]=\"labelPlacement\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [errorText]=\"getErrors(container)\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [label]=\"label | translate\"\n            #component>\n            </ion-textarea>\n          }\n          @else if (type === 'checkbox') {\n            @if (!options?.length) {\n              <ion-item class=\"dcf-width-1-1\" [hidden]=\"hidden\">\n                <ion-checkbox\n                  (ionInput)=\"handleModalChildChanges()\"\n                  (ionChange)=\"handleModalChildChanges()\"\n                  [id]=\"name\"\n                  [mode]=\"'md'\"\n                  [errorText]=\"getErrors(container)\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [justify]=\"justify || 'start'\"\n                  [value]=\"value\"\n                  [checked]=\"checked\"\n                  [readonly]=\"readonly\"\n                  (ionChange)=\"checked = !checked\"\n                  [formControlName]=\"name\"\n                  #component>\n                  <span>{{label | translate}}</span>\n                </ion-checkbox>\n\n              </ion-item>\n            } @else {\n              <div class=\"dcf-checkbox-group\">\n                <label class=\"dcf-label\" [for]=\"path\">{{ label | translate }}</label>\n                @for(option of options; track trackItemFn($index, option.text)) {\n                  <ion-item class=\"dcf-width-1-1\" [button]=\"true\">\n                    <ion-checkbox\n                      (ionInput)=\"handleModalChildChanges()\"\n                      (ionChange)=\"handleModalChildChanges()\"\n                      [id]=\"option.text\"\n                      [mode]=\"'md'\"\n                      [labelPlacement]=\"labelPlacement\"\n                      [justify]=\"justify\"\n                      [value]=\"option.value\"\n                      [readonly]=\"readonly\"\n                      [checked]=\"isOptionChecked(option.value)\"\n                      (ionChange)=\"toggleOptionSelection(option.value, $event)\"\n                      #component>\n                      <span>{{ $index + 1 }}. {{ option?.text | translate }}</span>\n                    </ion-checkbox>\n                  </ion-item>\n                }\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            }\n\n          }\n          @else if (type === 'radio' && options?.length) {\n            <ion-radio-group class=\"dcf-width-1-1\" [formControlName]=\"name\" [value]=\"value\" #component>\n              <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n              @for(option of options; track $index) {\n                <ion-item>\n                  <ion-radio\n                    (ionInput)=\"handleModalChildChanges()\"\n                    (ionChange)=\"handleModalChildChanges()\"\n                    [id]=\"name\"\n                    [errorText]=\"getErrors(container)\"\n                    [mode]=\"'md'\"\n                    [hidden]=\"hidden\"\n                    [labelPlacement]=\"labelPlacement\"\n                    [alignment]=\"alignment\"\n                    [justify]=\"justify\"\n                    [readonly]=\"readonly\"\n                    [value]=\"option.value\"\n                  >{{ option?.text | translate }}</ion-radio>\n                </ion-item>\n              }\n            </ion-radio-group>\n            <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\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 ?? null\"\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\n                      [value]=\"option.value\"\n                      [class.dcf-disabled]=\"option.disabled\"\n                      [class.dcf-hidden]=\"option.hidden\"\n                      [hidden]=\"option.hidden\">\n                      {{ option.text }}\n                    </ion-select-option>\n                  }\n                }\n              </ion-select>\n              <div\n                class=\"dcf-error\"\n                [class.dcf-options-error]=\"!options?.length\"\n                [innerHTML]=\"options?.length ?\n                  getErrors(container) : 'errors.empty_options' | translate:{'0': name}\">\n              </div>\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.dcf-options-error{position:relative;margin-bottom:.25rem!important}.dcf-error .ti,.dcf-error ngx-decaf-icon,.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"] }]
         }], ctorParameters: () => [], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -6081,9 +6099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], translatable: [{
                 type: Input
-            }], handleFieldsetUpdateGroupEvent: [{
-                type: HostListener,
-                args: ['window:fieldsetUpdateGroupEvent', ['$event']]
             }] } });
 
 class NgxFormDirective extends NgxParentComponentDirective {
@@ -6810,7 +6825,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n         @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([operations].includes('delete') && [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 (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n         @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n\n\n\n    @if (operations.includes(OperationKeys.DELETE) && [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\n     @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -6818,7 +6833,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n         @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([operations].includes('delete') && [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 (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      <ngx-decaf-layout\n        [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n        [children]=\"children || []\"\n        [parentForm]=\"formGroup || parentForm\"\n        [operation]=\"operation\"\n        [cardType]=\"cardType ?? 'blank'\"\n        [match]=\"match ?? false\"\n        [gap]=\"'small'\"\n        [flexMode]=\"props.flexMode || false\"\n        [rows]=\"rows\"\n        [borders]=\"borders ?? false\"\n        [breakpoint]=\"breakpoint ?? 'large'\"\n        [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-right\">\n         @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n\n      </div>\n    }\n\n  </form>\n} @else {\n  <section #component [id]=\"uid\">\n    <ngx-decaf-layout\n      [className]=\"''\"\n      [children]=\"children || []\"\n      [operation]=\"operation\"\n      [cardType]=\"cardType ?? 'blank'\"\n      [match]=\"match ?? false\"\n      [gap]=\"'small'\"\n      [flexMode]=\"props.flexMode || false\"\n      [rows]=\"rows\"\n      [borders]=\"borders ?? false\"\n      [breakpoint]=\"breakpoint ?? 'large'\"\n      [cols]=\"cols\" />\n  </section>\n\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n\n\n\n    @if (operations.includes(OperationKeys.DELETE) && [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\n     @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{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.read,.dcf-buttons-grid.dcf-flex.delete{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex{flex-direction:column-reverse}.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxSvgDirective {
@@ -6829,7 +6844,6 @@ class NgxSvgDirective {
     }
     ngOnInit() {
         this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
-        console.log(this.path);
         if (this.path)
             this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
     }
@@ -8260,7 +8274,11 @@ class SearchbarComponent extends NgxComponentDirective {
      * @memberOf SearchbarComponent
      */
     handleChange(event) {
-        this.emitEvent(event?.detail?.value ?? undefined);
+        const value = event?.detail?.value;
+        if (value === this.currentValue)
+            return;
+        this.currentValue = value ?? undefined;
+        this.emitEvent(this.currentValue);
     }
     /**
      * @description Handles clearing of the searchbar input field.
@@ -8272,7 +8290,8 @@ class SearchbarComponent extends NgxComponentDirective {
      * @memberOf SearchbarComponent
      */
     handleClear() {
-        this.emitEvent(undefined);
+        this.currentValue = undefined;
+        this.emitEvent(this.currentValue);
     }
     /**
      * @description Handles real-time input events on the searchbar.
@@ -8304,10 +8323,11 @@ class SearchbarComponent extends NgxComponentDirective {
      * @memberOf SearchbarComponent
      */
     handleInput(event) {
-        const value = event?.detail?.value;
-        if (!value || !value?.length)
-            return this.handleClear();
-        this.emitEvent(value);
+        const value = event?.detail?.value?.length ? event.detail.value : undefined;
+        if (value === this.currentValue)
+            return;
+        this.currentValue = value ?? undefined;
+        this.emitEvent(this.currentValue);
     }
     /**
      * @description Handles blur events on the searchbar.
@@ -8359,11 +8379,11 @@ class SearchbarComponent extends NgxComponentDirective {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionChange)=\"handleChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SearchbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [IonSearchbar], template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionChange)=\"handleChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n" }]
+            args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [IonSearchbar], template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n" }]
         }], ctorParameters: () => [], propDecorators: { autocomplete: [{
                 type: Input
             }], autocorrect: [{
@@ -8870,7 +8890,8 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
                     this.lastFilter = {};
                     this.inputElement.value = "";
                     if (!this.multiple) {
-                        this.inputElement.disabled = true;
+                        if (this.inputElement)
+                            this.inputElement.disabled = true;
                         this.inputElement.blur();
                         return await this.submit();
                     }
@@ -8947,8 +8968,10 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
             this.step = 1;
             this.lastFilter = {};
         }
-        this.inputElement.disabled = false;
-        this.handleFocus(this.indexes);
+        if (this.inputElement) {
+            this.inputElement.disabled = false;
+            this.handleFocus(this.indexes);
+        }
     }
     /**
      * @description Resets the component to its initial state.
@@ -8963,7 +8986,8 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         this.step = 1;
         this.lastFilter = {};
         this.value = '';
-        this.inputElement.disabled = false;
+        if (this.inputElement)
+            this.inputElement.disabled = false;
         if (submit) {
             setTimeout(() => {
                 this.submit();
@@ -9547,7 +9571,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default ListComponentsTypes.INFINITE
          * @memberOf ListComponent
          */
-        this.type = ListComponentsTypes.INFINITE;
+        this.type = ListComponentsTypes.PAGINATED;
         /**
          * @description Controls the visibility of the search bar.
          * @summary When set to true, displays a search bar at the top of the list that allows
@@ -10025,10 +10049,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             if (value === undefined) {
                 this.loadMoreData = true;
                 this.page = 1;
+                this.items = [];
             }
-            this.searchValue = value;
             if (this.isModalChild)
                 this.changeDetectorRef.detectChanges();
+            this.searchValue = value;
             await this.refresh(true);
         }
         else {
@@ -10257,10 +10282,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     async getFromRequest(force = false, start, limit) {
         let data = [...(this.data || [])];
-        if (!this.data?.length ||
-            force ||
-            this.searchValue?.length ||
-            !!this.searchValue) {
+        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
             // (self.data as ListItem[]) = [];
             if (!this.searchValue?.length &&
                 !this.searchValue) {
@@ -10275,19 +10297,19 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 }
                 if (!data?.length && this.data?.length)
                     data = this.data;
-                this.data = [...(await this.parseResult(data))];
+                data = [...(await this.parseResult(data))];
                 if (this.data?.length)
-                    this.items =
+                    data =
                         this.type === ListComponentsTypes.INFINITE
-                            ? (this.items || []).concat([...this.data.slice(start, limit)])
+                            ? [...(this.items || []).concat([...data.slice(start, limit)])]
                             : [...data.slice(start, limit)];
             }
             else {
-                const data = await this.parseResult(this.parseSearchResults(this.data, this.searchValue));
-                this.items = [...data];
-                if (this.isModalChild)
-                    this.changeDetectorRef.detectChanges();
+                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))];
@@ -10606,7 +10628,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length && !searching\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n\n\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n\n\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -10634,7 +10656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         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\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length && !searching\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n\n\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n      <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n        @if (model && enableFilter) {\n          @if (data?.length || searching) {\n            <ngx-decaf-filter\n              [model]=\"model\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n        }\n      </div>\n      @if(createButton) {\n        <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n          <div>\n            <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n\n\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -11023,7 +11045,7 @@ let ListItemComponent = class ListItemComponent extends NgxComponentDirective {
         this.actionMenuOpen = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('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(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\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                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item button=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                              @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                                } @else {\n                                  <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex  dcf-flex-space-between\">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div tabindex=\"0\" (keydown.enter)=\"handleAction(operation, $event, component)\" (click)=\"handleAction(operation, $event, component)\">\n                        @if (operations?.includes(operation)) {\n                          <ion-button fill=\"clear\" shape=\"round\">\n                            @if (operation === OperationKeys.UPDATE) {\n                              <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                            } @else {\n                              <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                            }\n                          </ion-button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight: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}}@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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { actionsType: "actionsType", lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" }, properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }, { propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('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                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if ((operations?.includes(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\n                  <ion-button 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                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item button=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                              @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                                } @else {\n                                  <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex  dcf-flex-space-between\">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div tabindex=\"0\" (keydown.enter)=\"handleAction(operation, $event, component)\" (click)=\"handleAction(operation, $event, component)\">\n                        @if (operations?.includes(operation)) {\n                          <ion-button fill=\"clear\" shape=\"round\">\n                            @if (operation === OperationKeys.UPDATE) {\n                              <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                            } @else {\n                              <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                            }\n                          </ion-button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight: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}}@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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
@@ -11045,7 +11067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         IonContent,
                         IconComponent,
                         IonPopover
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (title || description) {\n  <ion-item-sliding>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"!operations?.length ? false : button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('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(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\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                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item button=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                              @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                                } @else {\n                                  <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex  dcf-flex-space-between\">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div tabindex=\"0\" (keydown.enter)=\"handleAction(operation, $event, component)\" (click)=\"handleAction(operation, $event, component)\">\n                        @if (operations?.includes(operation)) {\n                          <ion-button fill=\"clear\" shape=\"round\">\n                            @if (operation === OperationKeys.UPDATE) {\n                              <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                            } @else {\n                              <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                            }\n                          </ion-button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight: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}}@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]=\"!operations?.length ? false : 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                {{ title | translate }}\n              </ion-label>\n            }\n            @if (description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if (info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if (info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if (subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if ((operations?.includes(OperationKeys.DELETE) || operations?.includes(OperationKeys.UPDATE)) && uid) {\n              <div class=\"dcf-visible@s\" id=\"dcf-actions\">\n                @if(actionsType === 'popover') {\n                  <ion-button 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                    [isOpen]=\"actionMenuOpen\"\n                    (didDismiss)=\"actionMenuOpen = false\">\n                    <ng-template>\n                      <ion-content class=\"ion-padding\">\n                        <ion-list lines=\"none\">\n                          <ion-list-header>\n                            <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                          </ion-list-header>\n                          @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                            @if (operations?.includes(operation)) {\n                            <ion-item button=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <div slot=\"start\">\n                              @if (operation === OperationKeys.UPDATE) {\n                                  <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                                } @else {\n                                  <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                                }\n                              </div>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                            }\n                          }\n                        </ion-list>\n                      </ion-content>\n                    </ng-template>\n                  </ion-popover>\n                } @else {\n                  <div class=\"dcf-grid-actions dcf-grid dcf-grid-small dcf-flex  dcf-flex-space-between\">\n                    @for (operation of [OperationKeys.UPDATE, OperationKeys.DELETE]; track operation) {\n                      <div tabindex=\"0\" (keydown.enter)=\"handleAction(operation, $event, component)\" (click)=\"handleAction(operation, $event, component)\">\n                        @if (operations?.includes(operation)) {\n                          <ion-button fill=\"clear\" shape=\"round\">\n                            @if (operation === OperationKeys.UPDATE) {\n                              <ngx-decaf-icon name=\"assets/images/icons/edit.svg\" />\n                            } @else {\n                              <ngx-decaf-icon color=\"danger\" name=\"assets/images/icons/trash.svg\" />\n                            }\n                          </ion-button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n              </div>\n            }\n            @if (windowWidth > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if (showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if (operations?.includes(OperationKeys.UPDATE)) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction(OperationKeys.UPDATE, $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\" />\n          </ion-item-option>\n        }\n        @if (operations?.includes(OperationKeys.DELETE)) {\n        <ion-item-option class=\"dcf-delete\" (click)=\"handleAction(OperationKeys.DELETE,  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\" />\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item:not(.dcf-palette-dark){--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item:not(.dcf-palette-dark) .dcf-info{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark) .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item:not(.dcf-palette-dark) .dcf-description{color:var(--dcf-color-gray-6)}ion-item:not(.dcf-palette-dark)>ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-item:not(.dcf-palette-dark) ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete),ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-delete) ion-icon,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete *,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update .dcf-ti,ion-item:not(.dcf-palette-dark) ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}ion-item.dcf-palette-dark{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item.dcf-palette-dark .dcf-description{color:var(--dcf-color-gray-4)}ion-item.dcf-palette-dark ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-item.dcf-palette-dark ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete),ion-item.dcf-palette-dark ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-delete) ion-icon,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) .dcf-ti,ion-item.dcf-palette-dark ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-delete .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-delete *,ion-item.dcf-palette-dark ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item.dcf-palette-dark ion-item-option.dcf-update .dcf-ti,ion-item.dcf-palette-dark ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight: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}}@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 }]
@@ -11928,7 +11950,7 @@ let FileUploadComponent = class FileUploadComponent extends NgxFormFieldDirectiv
         })));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", label: "label", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FileUploadComponent, isStandalone: true, selector: "ngx-decaf-file-upload", inputs: { formGroup: "formGroup", name: "name", formControl: "formControl", required: "required", multiple: "multiple", type: "type", label: "label", buttonLabel: "buttonLabel", size: "size", position: "position", accept: "accept", showIcon: "showIcon", enableDirectoryMode: "enableDirectoryMode", previewHandler: "previewHandler", maxFileSize: "maxFileSize" }, outputs: { changeEvent: "changeEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"decaf-file-component\"  #component>\n  <input\n      id=\"dcf-file-input\"\n      type=\"file\"\n      placeholder=\"Select files\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"handleSelection($event)\"\n      [multiple]=\"multiple\"\n      hidden\n      [attr.webkitdirectory]=\"enableDirectoryMode ? true : null\"\n    />\n\n  <ngx-decaf-card [className]=\"className\" [body]=\"'blank'\">\n    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: i1$1.DecimalPipe, name: "number" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FileUploadComponent = __decorate([
     Dynamic(),
@@ -11936,7 +11958,7 @@ FileUploadComponent = __decorate([
 ], FileUploadComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, CardComponent, IonText, IconComponent, IonList, IonLabel, IonItem, TranslatePipe, 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    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + \".buttons.select\" | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
+            args: [{ selector: 'ngx-decaf-file-upload', standalone: true, imports: [CommonModule, ReactiveFormsModule, CardComponent, IonText, IconComponent, IonList, IonLabel, IonItem, TranslatePipe, 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    @if(['create', 'update'].includes(operation)) {\n      <div>\n        <div\n          [class]=\"\n            'dcf-drop-area '\n            + ' dcf-' + size\n            + ' dcf-flex dcf-flex-' + position\n            + ' dcf-text-' + position\n            \"\n\n          [class.dcf-dragging]=\"dragging\"\n          [class.dcf-has-files]=\"files.length\"\n          (drop)=\"!files?.length ? handleDrop($event) : dragging = false\"\n          (dragover)=\"!files?.length ? handleDragOver($event) : dragging = false\"\n          (dragleave)=\"!files?.length ? handleDragLeave($event) : dragging = false\"\n        >\n          <div>\n            @if (!previewFile) {\n              @if(showIcon) {\n                <ngx-decaf-icon name=\"cloud-upload-outline\" size=\"large\" />\n              }\n              <p class=\"dcf-drag-description\">{{ label ? (label | translate) : (locale + \".drag_file\" | translate) }}</p>\n              <ion-button class=\"dcf-button-select\" (click)=\"handleClickToSelect()\" size=\"small\">\n                {{ buttonLabel ? (buttonLabel | translate) : (locale + (enableDirectoryMode ? \".buttons.select_directory\" : \".buttons.select\") | translate) }}\n              </ion-button>\n              <div #container>\n                <span class=\"dcf-error\" [innerHTML]=\"getErrors(container)\"></span>\n              </div>\n            } @else {\n              @if ((!directoryMode && !multiple) ) {\n                <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse\">\n                  <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                    <div class=\"dcf-preview-image\">\n                      <ion-img\n                        [src]=\"previewFile\"\n                        [title]=\"locale + '.preview' | translate\"\n                        [alt]=\"locale + '.preview' | translate\"\n                      />\n                      <div class=\"dcf-overlay\">\n                        <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                          {{ locale + \".buttons.preview\" | translate }}\n                        </ion-button>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                    <div>\n                      <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                      <p class=\"subtitle\">{{ files[0].name }}</p>\n                      <ion-button (click)=\"handleClear()\" fill=\"clear\" color=\"danger\"  size=\"small\">{{ locale + \".buttons.clear\" | translate }} </ion-button>\n                    </div>\n                  </div>\n                </div>\n              } @else {\n                <div class=\"dcf-margin-bottom\">\n                  {{ locale + \".selection\" | translate: { \"0\": files.length > 10 ? files.length : `0${files.length}` } }}\n                  @if(errors.length > 0) {\n                    <br /><span class=\"dcf-error-message\">{{ locale + \".selection_error\" | translate: { \"0\": errors.length > 10 ? errors.length : `0${errors.length}` } }}</span>\n                  }\n                </div>\n                <div class=\"dcf-preview-list-container\">\n                  <ion-list class=\"dcf-preview-list\">\n                    @for (file of errors; track $index) {\n                      <ion-item lines=\"full\" class=\"dcf-error-item\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <div class=\"dcf-error-message\" slot=\"end\">\n                          {{ locale + \".errors.\" + file.error | translate: { \"0\":  file.error === 'max_size' ? maxFileSize / 1024 / 1024 : file.name.split(\".\") } }}\n                        </div>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                      </ion-item>\n                    }\n\n                    @for (file of files; track $index) {\n                      <ion-item lines=\"full\">\n                        <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                        <ion-note slot=\"end\">{{ file.size / 1024 / 1024 | number: \"1.1-1\" }} MB</ion-note>\n                        <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                            <ngx-decaf-icon\n                              [button]=\"true\"\n                              [slot]=\"'icon-only'\"\n                              (click)=\"preview(file?.source || file, file.type)\"\n                              [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                            />\n                          <ngx-decaf-icon\n                            [button]=\"true\"\n                            [slot]=\"'icon-only'\"\n                            [name]=\"'trash-outline'\"\n                            (click)=\"removeFile($index)\"\n                            [color]=\"'danger'\"\n                            [size]=\"'small'\"\n                          />\n                        </div>\n                      </ion-item>\n                    }\n                  </ion-list>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"(files?.length > 1 ? 'dcf-preview-list-container' : '')\">\n        @if(!files?.length) {\n          <div class=\"dcf-padding-xsmall\">\n            <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n          </div>\n        } @else {\n          @if(files?.length === 1 && isImageFile(files[0])) {\n            <div class=\"dcf-preview dcf-grid dcf-grid-match dcf-grid-collapse read\">\n              <div class=\"dcf-width-1-4@m dcf-width-1-3@s  dcf-flex dcf-flex-center dcf-flex-middle\">\n                <div class=\"dcf-preview-image\">\n                  <ion-img\n                  [src]=\"previewFile\"\n                  [title]=\"locale + '.preview' | translate\"\n                  [alt]=\"locale + '.preview' | translate\"\n                  />\n                  <div class=\"dcf-overlay\">\n                    <ion-button (click)=\"preview(previewFile)\" fill=\"clear\" color=\"light\" size=\"small\">\n                      {{ locale + \".buttons.preview\" | translate }}\n                    </ion-button>\n                  </div>\n                </div>\n              </div>\n              <div class=\"description dcf-flex dcf-flex-middle dcf-width-expand@s\">\n                <div>\n                  <p class=\"dcf-title\">{{ locale + \".preview\" | translate }}</p>\n                  <p class=\"subtitle\">{{ files[0].name }}</p>\n                </div>\n              </div>\n            </div>\n          } @else {\n            <ion-list class=\"dcf-preview-list\">\n              @for (file of files; track $index) {\n                <ion-item lines=\"full\">\n                  @if(file?.name) {\n                    <ion-label slot=\"start\">{{ file.name }}</ion-label>\n                  }\n                  <div class=\"dcf-flex dcf-flex-middle\" slot=\"end\">\n                    <ngx-decaf-icon\n                    [button]=\"true\"\n                    [slot]=\"'icon-only'\"\n                    (click)=\"preview(file.source, file.type)\"\n                    [name]=\"file.type.includes('image') ? 'image-outline' : 'document-text-outline'\"\n                    />\n                  </div>\n                </ion-item>\n              }\n            </ion-list>\n          }\n        }\n      </div>\n    }\n  </ngx-decaf-card>\n</div>\n\n<!-- <ion-card-header>\n    <ion-card-title>Upload de Imagem</ion-card-title>\n  </ion-card-header>\n\n  <ion-card-content>\n    <div\n      class=\"dcf-drop-area\"\n      [class.dragging]=\"dragging\"\n      (drop)=\"onDrop($event)\"\n      (dragover)=\"onDragOver($event)\"\n      (dragleave)=\"onDragLeave($event)\"\n    >\n      <div class=\"dcf-drop-content\">\n        <ion-icon name=\"cloud-upload-outline\" size=\"large\"></ion-icon>\n        <p>Arraste e solte aqui ou</p>\n        <ion-button size=\"small\" fill=\"outline\" (click)=\"triggerFileSelect()\">Selecionar arquivo</ion-button>\n      </div>\n    </div>\n\n    <input\n      #fileInput\n      type=\"file\"\n      [attr.accept]=\"accept\"\n      [attr.multiple]=\"multiple ? true : null\"\n      (change)=\"onFileSelected($event)\"\n      hidden\n    />\n\n    <div *ngIf=\"previewUrl\" class=\"dcf-preview\">\n      <ion-item>\n        <div slot=\"start\">\n          <ion-img [src]=\"previewUrl\"></ion-img>\n        </div>\n        <ion-label>\n          <h3>Pr\u00E9-visualiza\u00E7\u00E3o</h3>\n          <p *ngIf=\"files.length\">{{ files[0].name }}</p>\n        </ion-label>\n      </ion-item>\n    </div>\n\n    <ion-list *ngIf=\"files.length\">\n      <ion-list-header>\n        <ion-label>Arquivos selecionados</ion-label>\n      </ion-list-header>\n      <ion-item *ngFor=\"let f of files; let i = index\">\n        <ion-label>{{ f.name }}</ion-label>\n        <ion-note slot=\"end\">{{ (f.size / 1024 / 1024) | number:'1.1-1' }} MB</ion-note>\n        <ion-button fill=\"clear\" slot=\"end\" (click)=\"removeFile(i)\">\n          <ion-icon slot=\"icon-only\" name=\"close-circle\"></ion-icon>\n        </ion-button>\n      </ion-item>\n    </ion-list>\n\n    <div *ngIf=\"errors.length\">\n      <ion-list>\n        <ion-item *ngFor=\"let err of errors\">\n          <ion-icon name=\"alert-circle\" slot=\"start\" color=\"danger\"></ion-icon>\n          <ion-label color=\"danger\">{{ err }}</ion-label>\n        </ion-item>\n      </ion-list>\n    </div>\n\n    <ion-row class=\"dcf-actions\">\n      <ion-col>\n        <ion-button expand=\"block\" (click)=\"triggerFileSelect()\">Selecionar</ion-button>\n      </ion-col>\n      <ion-col>\n        <ion-button expand=\"block\" color=\"danger\" fill=\"outline\" (click)=\"clear()\">Limpar</ion-button>\n      </ion-col>\n    </ion-row>\n  </ion-card-content> -->\n", styles: [".decaf-file-component.dcf-palette-dark .dcf-button-select{--background: rgb(var(--dcf-color-light-rgb), .1) !important;--background-hover: rgb(var(--dcf-color-light-rgb), .75) !important;--background-activated: rgb(var(--dcf-color-light-rgb), .4) !important;--background-focused: rgb(var(--dcf-color-light-rgb), .4) !important;--color: var(--dcf-color-light) !important}.decaf-file-component.dcf-palette-dark .dcf-has-files{border-style:solid;border-color:var(--dcf-color-gray-6)!important}.decaf-file-component .dcf-upload-icon{--box-shadow: none !important}.decaf-file-component .dcf-upload-icon ion-icon{width:1.5rem!important}.decaf-file-component ion-button.dcf-button-select{--background: rgb(var(--dcf-color-primary-rgb), .1);--background-hover: rgb(var(--dcf-color-primary-rgb), .75);--background-activated: rgb(var(--dcf-color-primary-rgb), .4);--background-focused: rgb(var(--dcf-color-primary-rgb), .4);--color: var(--dcf-color-primary-shade);--border-radius: var(--dcf-border-radius-small);--box-shadow: none;--padding-top: var(--dcf-padding-xsmall);--padding-bottom: var(--dcf-padding-xsmall);--padding-start: var(--dcf-padding-small);--padding-end: var(--dcf-padding-small);font-weight:500;text-transform:none;margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-error{color:var(--dcf-color-danger)!important;font-size:.8rem!important;font-weight:500!important;line-height:1.1rem;z-index:9999;animation-duration:.05s;animation-timing-function:ease-in;animation-fill-mode:both;animation-name:fadeBottomSmallAnimation}.decaf-file-component .dcf-error .ti,.decaf-file-component .dcf-error ion-icon{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.decaf-file-component ion-card-content{width:100%}.decaf-file-component .dcf-error-message{color:var(--dcf-color-danger);font-size:.875rem}.decaf-file-component .dcf-drag-description{font-size:1rem;line-height:1.5rem;font-weight:500;margin-bottom:var(--dcf-margin-small)}.decaf-file-component .dcf-drop-area{display:flex;align-items:center;border:1.5px dashed var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small)!important;transition:border-style .15s ease,border-color .15s ease;background:transparent}.decaf-file-component .dcf-drop-area.dcf-large{min-height:180px}.decaf-file-component .dcf-drop-area>div{width:100%}.decaf-file-component .dcf-drop-area.dcf-has-files{border-style:solid;border-color:var(--dcf-color-primary-shade);transition:border-style .15s ease,border-color .15s ease;padding:var(--dcf-spacement) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-drop-area:not(.dcf-has-files){border-style:dashed;padding:var(--dcf-spacement) var(--dcf-spacement-medium)}.decaf-file-component .dcf-drop-area.dcf-dragging{background:#00000008;border-color:var(--ion-color-primary);box-shadow:0 2px 8px #0000000f}.decaf-file-component .dcf-preview{padding:var(--dcf-padding-xsmall) var(--dcf-spacement-small)!important}.decaf-file-component .dcf-preview.read{padding:var(--dcf-spacement)!important}.decaf-file-component .dcf-preview .dcf-preview-image{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-xsmall);max-width:320px;padding:.5rem;box-sizing:border-box;height:160px;position:relative;cursor:pointer;overflow:hidden}.decaf-file-component .dcf-preview .dcf-preview-image ion-img{height:140px!important;display:block;width:100%}.decaf-file-component .dcf-preview .dcf-preview-image:hover .dcf-overlay{opacity:1}.decaf-file-component .dcf-preview .dcf-preview-image .dcf-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease}.decaf-file-component .dcf-preview .description{text-align:left;padding:1rem;font-size:.75rem}.decaf-file-component .dcf-preview .description .dcf-title{font-size:1rem;font-weight:500}.decaf-file-component .dcf-preview .description ion-button{margin-top:var(--dcf-margin-small)!important}.decaf-file-component .dcf-preview-list-container{max-height:150px;overflow-y:auto}.decaf-file-component .dcf-preview-list-container ion-list{padding:0!important;margin:0!important}@media (max-width: 767px){.decaf-file-component .dcf-preview-list-container ion-list{width:100%;min-width:576px;overflow-x:auto}}.decaf-file-component .dcf-preview-list-container:not(:hover){scrollbar-color:rgba(var(--dcf-color-medium-rgb),.125) transparent!important}.decaf-file-component .dcf-preview-list-container ion-item{font-size:.875rem!important}.decaf-file-component .dcf-preview-list-container ion-item.dcf-error-item{--background: rgba(var(--dcf-color-danger-rgb), .02) !important;--border-color: rgba(var(--dcf-color-danger-rgb), .2) !important}.decaf-file-component .dcf-preview-list-container ion-item ion-item{--padding-top: .25rem;--padding-bottom: 0rem;--inner-padding-start: 0rem;--padding-start: var(--dcf-padding-xsmall) !important;--padding-end: 0rem;--inner-padding-end: var(--dcf-padding-xsmall) !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8);--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { static: true }]
@@ -12452,7 +12474,7 @@ class NgxModelPageDirective extends NgxPageDirective {
         const { name } = event;
         switch (name) {
             case ComponentEventNames.SUBMIT:
-                await this.submit(event, repository);
+                await this.submit(event, false, repository);
                 break;
         }
     }
@@ -12465,9 +12487,11 @@ class NgxModelPageDirective extends NgxPageDirective {
      * operation with detailed logging.
      *
      * @param {IBaseCustomEvent} event - The submit event containing form data
-     * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
+     * @return {Promise<IModelComponentSubmitEvent|void>} Promise that resolves on success or throws on error
      */
-    async submit(event, repository, redirect = false) {
+    async submit(event, redirect = false, repository) {
+        let success = false;
+        let message = '';
         try {
             if (!repository)
                 repository = this._repository;
@@ -12494,29 +12518,20 @@ class NgxModelPageDirective extends NgxPageDirective {
                             : repository.deleteAll(model));
                         break;
                 }
-                const message = await this.translate(!Array.isArray(result)
+                message = await this.translate(!Array.isArray(result)
                     ? `operations.${operation}.${result ? 'success' : 'error'}`
-                    : `operations.multiple`);
-                if (result) {
-                    // repository.refresh(this.modelName, this.operation, this.modelId as EventIds);
-                    if (redirect)
-                        this.location.back();
+                    : `operations.multiple`, { "0": this.pk, "1": model[this.pk] || '' });
+                success = result ? true : false;
+                if (success && redirect) {
+                    this.location.back();
                 }
-                return {
-                    ...event,
-                    success: result ? true : false,
-                    message,
-                };
             }
         }
         catch (error) {
             this.log.for(this.submit).error(`Error during ${this.operation} operation: ${error instanceof Error ? error.message : error}`);
-            return {
-                ...event,
-                success: false,
-                message: error instanceof Error ? error.message : error,
-            };
+            message = error instanceof Error ? error.message : error;
         }
+        return { ...event, success, message };
     }
     /**
      * @description Retrieves a model instance from the repository by unique identifier.
@@ -12654,5 +12669,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActionRoles, AngularEngineKeys, BaseComponentProps, CPTKN, CardComponent, ComponentEventNames, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER, DB_ADAPTER_PROVIDER_TOKEN, DecafFakerRepository, DefaultFormReactiveOptions, DefaultListEmptyOptions, DefaultModalOptions, Dynamic, DynamicModule, ElementPositions, ElementSizes, EmptyStateComponent, FieldsetComponent, FileUploadComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, I18nParser, IconComponent, LOCALE_ROOT_TOKEN, LayoutComponent, LayoutGridGaps, ListComponent, ListComponentsTypes, ListItemComponent, ListItemPositions, LoggerLevels, ModalComponent, ModelRendererComponent, NgxComponentDirective, NgxEventHandler, NgxFormDirective, NgxFormFieldDirective, NgxFormService, NgxMediaService, NgxModelPageDirective, NgxPageDirective, NgxParentComponentDirective, NgxRenderingEngine, NgxSvgDirective, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, 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, SelectFieldInterfaces, SteppedFormComponent, WindowColorSchemes, cleanSpaces, dataMapper, decafPageTransition, filterString, formatDate, generateRandomValue, getFakerData, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getModelAndRepository, getNgxInlineModal, getNgxModalComponent, getNgxSelectOptionsModal, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, presentNgxInlineModal, presentNgxLightBoxModal, provideDecafDbAdapter, provideDecafDynamicComponents, provideDecafI18nConfig, provideDecafI18nLoader, provideDecafPageTransition, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map