@decaf-ts/for-angular 0.0.10 → 0.0.12

package/dist/{fesm2022 → lib/fesm2022}/decaf-ts-for-angular.mjs

@@ -1,6 +1,6 @@
 import { UIKeys, parseValueByType, HTML5InputTypes, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, RenderingError } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
-import { reflectComponentType, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, ViewChild, Input, Output, Component, ElementRef, isDevMode, Inject, Directive, ChangeDetectorRef, HostListener, Injector } from '@angular/core';
+import { reflectComponentType, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule, inject, EnvironmentInjector, EventEmitter, ViewContainerRef, TemplateRef, Component, ViewChild, Input, Output, ElementRef, isDevMode, Inject, Directive, ChangeDetectorRef, HostListener, Injector } from '@angular/core';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, ComparisonValidationKeys, PathProxyEngine, isValidDate as isValidDate$1, parseDate, sf, Primitives, Model } from '@decaf-ts/decorator-validation';
 import { InternalError, OperationKeys } from '@decaf-ts/db-decorators';
 import * as i2$1 from '@angular/forms';
@@ -973,35 +973,9 @@ class ForAngularModule {
             ngModule: ForAngularModule,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ForAngularModule, imports: [IonApp,
-            IonRouterOutlet,
-            IonSplitPane,
-            IonImg,
-            IonText,
-            IonTitle,
-            IonButton,
-            IonRouterLink,
-            IonContent,
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule,
-            TranslatePipe], exports: [IonApp,
-            IonRouterOutlet,
-            IonSplitPane,
-            IonImg,
-            IonText,
-            IonTitle,
-            IonButton,
-            IonRouterLink,
-            IonContent,
-            CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule,
-            TranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularModule, imports: [IonApp,
+    static { this.ɵfac = function ForAngularModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ForAngularModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ForAngularModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [IonApp,
             IonRouterOutlet,
             IonSplitPane,
             IonImg,
@@ -1018,16 +992,79 @@ class ForAngularModule {
             ReactiveFormsModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: ComponentsAndModules,
-                    declarations: [],
-                    exports: ComponentsAndModules,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
-                }]
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ForAngularModule, [{
+        type: NgModule,
+        args: [{
+                imports: ComponentsAndModules,
+                declarations: [],
+                exports: ComponentsAndModules,
+                schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ForAngularModule, { imports: [IonApp,
+        IonRouterOutlet,
+        IonSplitPane,
+        IonImg,
+        IonText,
+        IonTitle,
+        IonButton,
+        IonRouterLink,
+        IonContent,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        TranslatePipe], exports: [IonApp,
+        IonRouterOutlet,
+        IonSplitPane,
+        IonImg,
+        IonText,
+        IonTitle,
+        IonButton,
+        IonRouterLink,
+        IonContent,
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        TranslatePipe] }); })();
 
+const _c0$a = ["componentViewContainer"];
+const _c1$7 = ["inner"];
+function ComponentRendererComponent_ng_template_0_Template(rf, ctx) { }
+function ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 3);
+} if (rf & 2) {
+    const child_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngComponentOutlet", child_r1.component)("ngComponentOutletInjector", child_r1.injector)("ngComponentOutletInputs", child_r1.inputs)("ngComponentOutletContent", child_r1.content);
+} }
+function ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ngx-decaf-component-renderer", 2);
+} if (rf & 2) {
+    const child_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("parent", child_r1);
+} }
+function ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_0_Template, 1, 4, "ng-container")(1, ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Conditional_1_Template, 1, 1, "ngx-decaf-component-renderer", 2);
+} if (rf & 2) {
+    const child_r1 = ctx.$implicit;
+    i0.ɵɵconditional(!(child_r1.children == null ? null : child_r1.children.length) ? 0 : 1);
+} }
+function ComponentRendererComponent_ng_template_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ComponentRendererComponent_ng_template_2_Conditional_0_For_1_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.parent.children);
+} }
+function ComponentRendererComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentRendererComponent_ng_template_2_Conditional_0_Template, 2, 0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional((ctx_r1.parent == null ? null : ctx_r1.parent.children == null ? null : ctx_r1.parent.children.length) ? 0 : -1);
+} }
 /**
  * @description Dynamic component renderer for Decaf Angular applications.
  * @summary This component provides a flexible way to dynamically render Angular components
@@ -1311,30 +1348,40 @@ class ComponentRendererComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "vcr", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n     }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }, { kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵfac = function ComponentRendererComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentRendererComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentRendererComponent, selectors: [["ngx-decaf-component-renderer"]], viewQuery: function ComponentRendererComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$a, 7, ViewContainerRef);
+            i0.ɵɵviewQuery(_c1$7, 7, TemplateRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.vcr = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inner = _t.first);
+        } }, inputs: { tag: "tag", globals: "globals", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 4, vars: 0, consts: [["componentViewContainer", ""], ["inner", ""], [3, "parent"], [4, "ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletInputs", "ngComponentOutletContent"]], template: function ComponentRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ComponentRendererComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ComponentRendererComponent_ng_template_2_Template, 1, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } }, dependencies: [ComponentRendererComponent, ForAngularModule, i2.NgComponentOutlet] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponentRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-component-renderer', imports: [ForAngularModule], standalone: true, template: "<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n     }\n  }\n</ng-template>\n\n\n" }]
-        }], ctorParameters: () => [], propDecorators: { vcr: [{
-                type: ViewChild,
-                args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
-            }], tag: [{
-                type: Input,
-                args: [{ required: true }]
-            }], globals: [{
-                type: Input
-            }], listenEvent: [{
-                type: Output
-            }], model: [{
-                type: Input
-            }], parent: [{
-                type: Input
-            }], inner: [{
-                type: ViewChild,
-                args: ['inner', { read: TemplateRef, static: true }]
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentRendererComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-component-renderer', imports: [ForAngularModule], standalone: true, template: "<ng-template #componentViewContainer></ng-template>\n\n<ng-template #inner>\n  @if(parent?.children?.length) {\n    @for(child of parent.children; track child) {\n        @if(!child.children?.length) {\n          <ng-container\n                *ngComponentOutlet=\"\n                  child.component;\n                  injector: child.injector;\n                  inputs: child.inputs;\n                  content:child.content;\n                \"\n          />\n        } @else {\n          <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n        }\n     }\n  }\n</ng-template>\n\n\n" }]
+    }], () => [], { vcr: [{
+            type: ViewChild,
+            args: ['componentViewContainer', { static: true, read: ViewContainerRef }]
+        }], tag: [{
+            type: Input,
+            args: [{ required: true }]
+        }], globals: [{
+            type: Input
+        }], listenEvent: [{
+            type: Output
+        }], model: [{
+            type: Input
+        }], parent: [{
+            type: Input
+        }], inner: [{
+            type: ViewChild,
+            args: ['inner', { read: TemplateRef, static: true }]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentRendererComponent, { className: "ComponentRendererComponent", filePath: "components/component-renderer/component-renderer.component.ts", lineNumber: 71 }); })();
 
 /**
  * @class NgxCrudFormField
@@ -1488,6 +1535,143 @@ function Dynamic() {
     }, metadata(NgxRenderingEngine2.key(AngularEngineKeys.DYNAMIC), true));
 }
 
+const _c0$9 = ["component"];
+const _forTrack0$2 = ($index, $item) => $item.value;
+function CrudFieldComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-text", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHTML", ctx_r0.type === "password" ? "********" : ctx_r0.value, i0.ɵɵsanitizeHtml);
+} }
+function CrudFieldComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "br");
+} }
+function CrudFieldComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0, null, 0);
+    i0.ɵɵelementStart(2, "div")(3, "ion-item")(4, "ion-label");
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelement(7, "br");
+    i0.ɵɵtemplate(8, CrudFieldComponent_Conditional_0_Conditional_8_Template, 1, 1, "ion-text", 4)(9, CrudFieldComponent_Conditional_0_Conditional_9_Template, 1, 0, "br");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("dcf-input-item " + ctx_r0.operation);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 4, ctx_r0.label), "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.value ? 8 : 9);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-textarea", 5);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "translate");
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const container_r2 = i0.ɵɵreference(3);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("mode", ctx_r0.mode)("hidden", ctx_r0.hidden)("required", ctx_r0.required !== undefined ? ctx_r0.required : null)("minlength", ctx_r0.minlength !== undefined ? ctx_r0.minlength : null)("maxlength", ctx_r0.maxlength !== undefined ? ctx_r0.maxlength : null)("readonly", ctx_r0.readonly !== undefined ? ctx_r0.readonly : null)("inputmode", ctx_r0.inputmode)("spellcheck", ctx_r0.spellcheck)("rows", ctx_r0.rows)("labelPlacement", ctx_r0.labelPlacement)("value", ctx_r0.value)("fill", ctx_r0.fill)("errorText", ctx_r0.getErrors(container_r2))("placeholder", ctx_r0.translatable ? i0.ɵɵpipeBind1(1, 16, ctx_r0.placeholder) : ctx_r0.placeholder)("formControlName", ctx_r0.name)("label", ctx_r0.translatable ? i0.ɵɵpipeBind1(2, 18, ctx_r0.label) : ctx_r0.label);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item")(1, "ion-checkbox", 9, 2);
+    i0.ɵɵlistener("ionChange", function CrudFieldComponent_Conditional_1_Conditional_5_Template_ion_checkbox_ionChange_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.checked = !ctx_r0.checked); });
+    i0.ɵɵelement(3, "span", 4);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const container_r2 = i0.ɵɵreference(3);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("name", ctx_r0.path)("mode", ctx_r0.mode)("errorText", ctx_r0.getErrors(container_r2))("hidden", ctx_r0.hidden)("labelPlacement", ctx_r0.labelPlacement)("justify", ctx_r0.justify)("value", ctx_r0.value)("checked", ctx_r0.checked)("readonly", ctx_r0.readonly)("formControlName", ctx_r0.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind1(4, 11, ctx_r0.label), i0.ɵɵsanitizeHtml);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_6_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-item")(1, "ion-radio", 11);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const option_r4 = ctx.$implicit;
+    i0.ɵɵnextContext(2);
+    const container_r2 = i0.ɵɵreference(3);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("errorText", ctx_r0.getErrors(container_r2))("mode", ctx_r0.mode)("hidden", ctx_r0.hidden)("labelPlacement", ctx_r0.labelPlacement)("alignment", ctx_r0.alignment)("justify", ctx_r0.justify)("readonly", ctx_r0.readonly)("value", option_r4.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.translatable ? i0.ɵɵpipeBind1(3, 9, option_r4 == null ? null : option_r4.text) : option_r4 == null ? null : option_r4.text);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-radio-group", 6, 0)(2, "label", 10);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(5, CrudFieldComponent_Conditional_1_Conditional_6_For_6_Template, 4, 11, "ion-item", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("formControlName", ctx_r0.name)("name", ctx_r0.path)("value", ctx_r0.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("for", ctx_r0.path);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 5, ctx_r0.label));
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.options);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_7_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-select-option", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r5 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("value", option_r5.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.translatable ? i0.ɵɵpipeBind1(2, 2, option_r5.text) : ctx_r0.options.text, " ");
+} }
+function CrudFieldComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-select", 7);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵrepeaterCreate(3, CrudFieldComponent_Conditional_1_Conditional_7_For_4_Template, 3, 4, "ion-select-option", 12, _forTrack0$2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const container_r2 = i0.ɵɵreference(3);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", ctx_r0.path)("mode", ctx_r0.mode)("hidden", ctx_r0.hidden)("labelPlacement", ctx_r0.labelPlacement)("label", ctx_r0.translatable ? i0.ɵɵpipeBind1(1, 11, ctx_r0.label) : ctx_r0.label)("value", ctx_r0.value)("fill", ctx_r0.fill)("placeholder", ctx_r0.translatable ? i0.ɵɵpipeBind1(2, 13, ctx_r0.placeholder) : ctx_r0.placeholder)("formControlName", ctx_r0.name)("errorText", ctx_r0.getErrors(container_r2))("interface", ctx_r0.interface);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r0.options);
+} }
+function CrudFieldComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-input", 8);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "translate");
+} if (rf & 2) {
+    i0.ɵɵnextContext();
+    const container_r2 = i0.ɵɵreference(3);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("name", ctx_r0.path)("type", ctx_r0.type)("mode", ctx_r0.mode)("hidden", ctx_r0.hidden)("inputmode", ctx_r0.inputmode)("labelPlacement", ctx_r0.labelPlacement)("required", ctx_r0.required !== undefined ? ctx_r0.required : false)("minlength", ctx_r0.minlength !== undefined ? ctx_r0.minlength : null)("maxlength", ctx_r0.maxlength !== undefined ? ctx_r0.maxlength : null)("readonly", ctx_r0.readonly !== undefined ? ctx_r0.readonly : null)("max", ctx_r0.max !== undefined ? ctx_r0.max : null)("min", ctx_r0.min !== undefined ? ctx_r0.min : null)("pattern", ctx_r0.pattern !== undefined ? ctx_r0.pattern : null)("step", ctx_r0.step !== undefined ? ctx_r0.step : null)("fill", ctx_r0.fill)("placeholder", ctx_r0.translatable ? i0.ɵɵpipeBind1(1, 19, ctx_r0.placeholder) : ctx_r0.placeholder)("formControlName", ctx_r0.name)("errorText", ctx_r0.getErrors(container_r2))("label", ctx_r0.translatable ? i0.ɵɵpipeBind1(2, 21, ctx_r0.label) : ctx_r0.label);
+} }
+function CrudFieldComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0, 3, 0);
+    i0.ɵɵelementStart(2, "div", null, 1);
+    i0.ɵɵtemplate(4, CrudFieldComponent_Conditional_1_Conditional_4_Template, 3, 20, "ion-textarea", 5)(5, CrudFieldComponent_Conditional_1_Conditional_5_Template, 5, 13, "ion-item")(6, CrudFieldComponent_Conditional_1_Conditional_6_Template, 7, 7, "ion-radio-group", 6)(7, CrudFieldComponent_Conditional_1_Conditional_7_Template, 5, 15, "ion-select", 7)(8, CrudFieldComponent_Conditional_1_Conditional_8_Template, 3, 23, "ion-input", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("formGroup", ctx_r0.formGroup);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("dcf-input-item " + (ctx_r0.operation || "create"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.type === "textarea" ? 4 : ctx_r0.type === "checkbox" ? 5 : ctx_r0.type === "radio" ? 6 : ctx_r0.type === "select" ? 7 : 8);
+} }
 /**
  * @description A dynamic form field component for CRUD operations.
  * @summary The CrudFieldComponent is a versatile form field component that adapts to different
@@ -1653,125 +1837,143 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
         if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation))
             this.onDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFieldComponent, isStandalone: true, selector: "ngx-decaf-crud-field", inputs: { operation: "operation", name: "name", 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", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", translatable: "translatable", uid: "uid" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600;color:var(--ion-color-gray-7)}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important;color:var(--ion-color-gray-5)}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15;--border-color: var(--ion-color-gray-2)}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--ion-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.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;color:var(--ion-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: 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"] }] }); }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCrudFieldComponent_BaseFactory; return function CrudFieldComponent_Factory(__ngFactoryType__) { return (ɵCrudFieldComponent_BaseFactory || (ɵCrudFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CrudFieldComponent)))(__ngFactoryType__ || CrudFieldComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CrudFieldComponent, selectors: [["ngx-decaf-crud-field"]], viewQuery: function CrudFieldComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$9, 5, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.component = _t.first);
+        } }, inputs: { operation: "operation", name: "name", 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", cols: "cols", rows: "rows", alignment: "alignment", checked: "checked", justify: "justify", cancelText: "cancelText", interface: "interface", options: "options", mode: "mode", spellcheck: "spellcheck", inputmode: "inputmode", autocomplete: "autocomplete", fill: "fill", labelPlacement: "labelPlacement", updateOn: "updateOn", formGroup: "formGroup", formControl: "formControl", translatable: "translatable", uid: "uid" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 2, vars: 1, consts: [["component", ""], ["container", ""], ["checkboxElement", ""], [3, "formGroup"], [3, "innerHTML"], [3, "mode", "hidden", "required", "minlength", "maxlength", "readonly", "inputmode", "spellcheck", "rows", "labelPlacement", "value", "fill", "errorText", "placeholder", "formControlName", "label"], [3, "formControlName", "name", "value"], ["toggleIcon", "chevron-down-outline", "expandedIcon", "chevron-up-outline", 3, "name", "mode", "hidden", "labelPlacement", "label", "value", "fill", "placeholder", "formControlName", "errorText", "interface"], [3, "name", "type", "mode", "hidden", "inputmode", "labelPlacement", "required", "minlength", "maxlength", "readonly", "max", "min", "pattern", "step", "fill", "placeholder", "formControlName", "errorText", "label"], [3, "ionChange", "name", "mode", "errorText", "hidden", "labelPlacement", "justify", "value", "checked", "readonly", "formControlName"], [1, "dcf-radio-group-label", 3, "for"], [3, "errorText", "mode", "hidden", "labelPlacement", "alignment", "justify", "readonly", "value"], [3, "value"]], template: function CrudFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CrudFieldComponent_Conditional_0_Template, 10, 6, "ng-container")(1, CrudFieldComponent_Conditional_1_Template, 9, 4, "ng-container", 3);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.operation === "read" || ctx.operation === "delete" ? 0 : 1);
+        } }, dependencies: [ForAngularModule, i1.IonText, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.RequiredValidator, i2$1.MinLengthValidator, i2$1.MaxLengthValidator, i2$1.PatternValidator, i2$1.FormGroupDirective, i2$1.FormControlName, i3.TranslatePipe, IonInput,
+            IonItem,
+            IonCheckbox,
+            IonRadioGroup,
+            IonRadio,
+            IonSelect,
+            IonSelectOption,
+            IonLabel,
+            IonTextarea], styles: [".dcf-input-item.create[_ngcontent-%COMP%], .dcf-input-item.update[_ngcontent-%COMP%]{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox[_ngcontent-%COMP%] + .checkbox[_ngcontent-%COMP%], .dcf-input-item.update.checkbox[_ngcontent-%COMP%] + .checkbox[_ngcontent-%COMP%]{margin-top:-.25rem!important}.dcf-input-item.create[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%], .dcf-input-item.update[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]{--border-color: transparent}.dcf-input-item.create[_ngcontent-%COMP%]   ion-item.dcf-text-wrap[_ngcontent-%COMP%]   ion-label[_ngcontent-%COMP%] > *[_ngcontent-%COMP%], .dcf-input-item.update[_ngcontent-%COMP%]   ion-item.dcf-text-wrap[_ngcontent-%COMP%]   ion-label[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read[_ngcontent-%COMP%]   ion-label[_ngcontent-%COMP%], .dcf-input-item.delete[_ngcontent-%COMP%]   ion-label[_ngcontent-%COMP%]{font-weight:600;color:var(--ion-color-gray-7)}.dcf-input-item.read[_ngcontent-%COMP%]   ion-text[_ngcontent-%COMP%], .dcf-input-item.delete[_ngcontent-%COMP%]   ion-text[_ngcontent-%COMP%]{display:block;margin-top:.5rem!important;color:var(--ion-color-gray-5)}.dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15;--border-color: var(--ion-color-gray-2)}.dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%], .dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   ion-text[_ngcontent-%COMP%]{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:not(.dcf-display-block), .dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   ion-text[_ngcontent-%COMP%]:not(.dcf-display-block){display:inline-block}.dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   span.dcf-display-block[_ngcontent-%COMP%], .dcf-input-item[_ngcontent-%COMP%]   ion-item[_ngcontent-%COMP%]   ion-text.dcf-display-block[_ngcontent-%COMP%]{display:block!important}ion-textarea[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]{scrollbar-width:thin!important;margin-bottom:.5rem!important}ion-select.dcf-select-label-placement-floating[_ngcontent-%COMP%]::part(label){line-height:1.2rem!important}.dcf-proccessing[_ngcontent-%COMP%], .dcf-proccessing[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{pointer-events:none;touch-action:none;cursor:text}ion-checkbox[_ngcontent-%COMP%]{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-item[_ngcontent-%COMP%]{--inner-padding-start: .75rem}ion-checkbox[_ngcontent-%COMP%]::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item[_ngcontent-%COMP%]   .dcf-radio-group-label[_ngcontent-%COMP%], ion-radio-group[_ngcontent-%COMP%]   .dcf-radio-group-label[_ngcontent-%COMP%]{font-weight:600}ion-item[_ngcontent-%COMP%]   .dcf-radio-group-label[_ngcontent-%COMP%] ~ ion-item[_ngcontent-%COMP%], ion-radio-group[_ngcontent-%COMP%]   .dcf-radio-group-label[_ngcontent-%COMP%] ~ ion-item[_ngcontent-%COMP%]{margin-top:.5rem;--inner-padding-start: .75rem}ion-item[_ngcontent-%COMP%] + .dcf-helper[_ngcontent-%COMP%], ion-radio-group[_ngcontent-%COMP%] + .dcf-helper[_ngcontent-%COMP%]{padding-left:.75rem;position:relative}.dcf-error[_ngcontent-%COMP%]{position:absolute;color:var(--ion-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:_ngcontent-%COMP%_fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.dcf-error[_ngcontent-%COMP%]   .ti[_ngcontent-%COMP%], .dcf-error[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{position:relative;top:2px!important;min-width:20px;font-size:1rem!important;text-align:left}.dcf-helper[_ngcontent-%COMP%]{font-size:.875rem!important;font-weight:500;margin-top:.25rem;margin-bottom:-.75rem}.dcf-helper.dcf-has-action[_ngcontent-%COMP%]{cursor:pointer;color:var(--ion-color-gray-7)!important;text-decoration:underline}.dcf-error[_ngcontent-%COMP%] + .dcf-helper[_ngcontent-%COMP%]{padding-top:1rem}@keyframes _ngcontent-%COMP%_fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes _ngcontent-%COMP%_fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes _ngcontent-%COMP%_fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}"] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
 ], CrudFieldComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFieldComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [
-                        ForAngularModule,
-                        IonInput,
-                        IonItem,
-                        IonCheckbox,
-                        IonRadioGroup,
-                        IonRadio,
-                        IonSelect,
-                        IonSelectOption,
-                        IonLabel,
-                        IonText,
-                        IonTextarea,
-                        IonIcon
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600;color:var(--ion-color-gray-7)}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important;color:var(--ion-color-gray-5)}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15;--border-color: var(--ion-color-gray-2)}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--ion-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.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;color:var(--ion-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], propDecorators: { operation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], name: [{
-                type: Input,
-                args: [{ required: true }]
-            }], path: [{
-                type: Input,
-                args: [{ required: true }]
-            }], childOf: [{
-                type: Input
-            }], type: [{
-                type: Input,
-                args: [{ required: true }]
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input,
-                args: [{ required: true }]
-            }], placeholder: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], hidden: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], minlength: [{
-                type: Input
-            }], pattern: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], step: [{
-                type: Input
-            }], equals: [{
-                type: Input
-            }], different: [{
-                type: Input
-            }], lessThan: [{
-                type: Input
-            }], lessThanOrEqual: [{
-                type: Input
-            }], greaterThan: [{
-                type: Input
-            }], greaterThanOrEqual: [{
-                type: Input
-            }], cols: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], alignment: [{
-                type: Input
-            }], checked: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }], cancelText: [{
-                type: Input
-            }], interface: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], spellcheck: [{
-                type: Input
-            }], inputmode: [{
-                type: Input
-            }], autocomplete: [{
-                type: Input
-            }], fill: [{
-                type: Input
-            }], labelPlacement: [{
-                type: Input
-            }], updateOn: [{
-                type: Input
-            }], component: [{
-                type: ViewChild,
-                args: ['component', { read: ElementRef }]
-            }], formGroup: [{
-                type: Input
-            }], formControl: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CrudFieldComponent, [{
+        type: Component,
+        args: [{ standalone: true, imports: [
+                    ForAngularModule,
+                    IonInput,
+                    IonItem,
+                    IonCheckbox,
+                    IonRadioGroup,
+                    IonRadio,
+                    IonSelect,
+                    IonSelectOption,
+                    IonLabel,
+                    IonText,
+                    IonTextarea,
+                    IonIcon
+                ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if(operation === 'read' || operation === 'delete') {\n  <ng-container #component>\n    <div [class]=\"'dcf-input-item ' + operation\">\n      <ion-item>\n        <ion-label>\n          {{ label | translate }}<br />\n          @if(value) {\n            <ion-text  [innerHTML]=\"type === 'password' ? '********' : value\"></ion-text>\n          } @else {\n            <br />\n          }\n        </ion-label>\n      </ion-item>\n    </div>\n  </ng-container>\n} @else {\n  <ng-container #component [formGroup]=\"formGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [required]=\"required !== undefined ? required : null\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [label]=\"translatable ? (label | translate) : label\"\n          >\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [errorText]=\"getErrors(container)\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [justify]=\"justify\"\n              [value]=\"value\"\n              [checked]=\"checked\"\n              [readonly]=\"readonly\"\n              (ionChange)=\"checked = !checked\"\n              [formControlName]=\"name\"\n            >\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [name]=\"path\" [value]=\"value\" #component>\n            <label class=\"dcf-radio-group-label\" [for]=\"path\">{{label | translate}}</label>\n            @for(option of options; track option) {\n              <ion-item>\n                <ion-radio\n                  [errorText]=\"getErrors(container)\"\n                  [mode]=\"mode\"\n                  [hidden]=\"hidden\"\n                  [labelPlacement]=\"labelPlacement\"\n                  [alignment]=\"alignment\"\n                  [justify]=\"justify\"\n                  [readonly]=\"readonly\"\n                  [value]=\"option.value\"\n                >{{ translatable ?  (option?.text | translate) : option?.text }}</ion-radio>\n              </ion-item>\n            }\n          </ion-radio-group>\n        }\n        @else if(type === 'select') {\n            <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [name]=\"path\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"translatable ? (placeholder | translate) : placeholder\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\">\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ translatable ? (option.text | translate) : options.text }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [name]=\"path\"\n            [type]=\"type\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [inputmode]=\"inputmode\"\n            [labelPlacement]=\"labelPlacement\"\n            [required]=\"required !== undefined ? required : false\"\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]=\"translatable ? (placeholder | translate) : placeholder\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"translatable ? (label | translate) : label\">\n          </ion-input>\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: [".dcf-input-item.create,.dcf-input-item.update{margin-bottom:1.8rem;margin-top:0!important}.dcf-input-item.create.checkbox+.checkbox,.dcf-input-item.update.checkbox+.checkbox{margin-top:-.25rem!important}.dcf-input-item.create ion-item,.dcf-input-item.update ion-item{--border-color: transparent}.dcf-input-item.create ion-item.dcf-text-wrap ion-label>*,.dcf-input-item.update ion-item.dcf-text-wrap ion-label>*{white-space:wrap!important;word-break:break-all!important}.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{font-weight:600;color:var(--ion-color-gray-7)}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important;color:var(--ion-color-gray-5)}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-hover: var(--ion-color-primary);--background-activated-opacity: .15;--background-focused: var(--ion-color-primary);--background-focused-opacity: .15;--border-color: var(--ion-color-gray-2)}.dcf-input-item ion-item span,.dcf-input-item ion-item ion-text{font-weight:400!important;font-size:.925rem;min-height:.5rem!important}.dcf-input-item ion-item span:not(.dcf-display-block),.dcf-input-item ion-item ion-text:not(.dcf-display-block){display:inline-block}.dcf-input-item ion-item span.dcf-display-block,.dcf-input-item ion-item ion-text.dcf-display-block{display:block!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{--size: 1.5rem;--checkbox-background-checked: var(--ion-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;border:2px solid var(--ion-color-primary);padding:3px}ion-item .dcf-radio-group-label,ion-radio-group .dcf-radio-group-label{font-weight:600}ion-item .dcf-radio-group-label~ion-item,ion-radio-group .dcf-radio-group-label~ion-item{margin-top:.5rem;--inner-padding-start: .75rem}ion-item+.dcf-helper,ion-radio-group+.dcf-helper{padding-left:.75rem;position:relative}.dcf-error{position:absolute;color:var(--ion-color-danger)!important;font-size:.8rem!important;font-weight:600!important;line-height:1.1rem;box-sizing:border-box;z-index:9999;margin-top:0;animation-duration:.1s;animation-timing-function:ease-out;animation-fill-mode:both;animation-name:fadeTopSmallAnimation;display:flex;align-items:flex-start;gap:.25rem}.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;color:var(--ion-color-gray-7)!important;text-decoration:underline}.dcf-error+.dcf-helper{padding-top:1rem}@keyframes fadeTopSmallAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeBottomSmallAnimation{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeTopMediumAnimation{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+    }], null, { operation: [{
+            type: Input,
+            args: [{ required: true }]
+        }], name: [{
+            type: Input,
+            args: [{ required: true }]
+        }], path: [{
+            type: Input,
+            args: [{ required: true }]
+        }], childOf: [{
+            type: Input
+        }], type: [{
+            type: Input,
+            args: [{ required: true }]
+        }], value: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], label: [{
+            type: Input,
+            args: [{ required: true }]
+        }], placeholder: [{
+            type: Input
+        }], format: [{
+            type: Input
+        }], hidden: [{
+            type: Input
+        }], max: [{
+            type: Input
+        }], maxlength: [{
+            type: Input
+        }], min: [{
+            type: Input
+        }], minlength: [{
+            type: Input
+        }], pattern: [{
+            type: Input
+        }], readonly: [{
+            type: Input
+        }], required: [{
+            type: Input
+        }], step: [{
+            type: Input
+        }], equals: [{
+            type: Input
+        }], different: [{
+            type: Input
+        }], lessThan: [{
+            type: Input
+        }], lessThanOrEqual: [{
+            type: Input
+        }], greaterThan: [{
+            type: Input
+        }], greaterThanOrEqual: [{
+            type: Input
+        }], cols: [{
+            type: Input
+        }], rows: [{
+            type: Input
+        }], alignment: [{
+            type: Input
+        }], checked: [{
+            type: Input
+        }], justify: [{
+            type: Input
+        }], cancelText: [{
+            type: Input
+        }], interface: [{
+            type: Input
+        }], options: [{
+            type: Input
+        }], mode: [{
+            type: Input
+        }], spellcheck: [{
+            type: Input
+        }], inputmode: [{
+            type: Input
+        }], autocomplete: [{
+            type: Input
+        }], fill: [{
+            type: Input
+        }], labelPlacement: [{
+            type: Input
+        }], updateOn: [{
+            type: Input
+        }], component: [{
+            type: ViewChild,
+            args: ['component', { read: ElementRef }]
+        }], formGroup: [{
+            type: Input
+        }], formControl: [{
+            type: Input
+        }], translatable: [{
+            type: Input
+        }], uid: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CrudFieldComponent, { className: "CrudFieldComponent", filePath: "components/crud-field/crud-field.component.ts", lineNumber: 100 }); })();
 
 /**
  * @description Abstract base class for dynamic Angular modules
@@ -2393,6 +2595,7 @@ function removeFocusTrap() {
         doc.activeElement?.blur();
 }
 
+const _c0$8 = ["component"];
 /**
  * @description Base component class that provides common functionality for all Decaf components.
  * @summary The NgxBaseComponent serves as the foundation for all Decaf UI components, providing
@@ -2876,52 +3079,58 @@ class NgxBaseComponent {
     trackItemFn(index, item) {
         return `${index}-${item}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxBaseComponent, isStandalone: true, selector: "ng-component", inputs: { rendererId: "rendererId", model: "model", props: "props", item: "item", pk: "pk", route: "route", operations: "operations", uid: "uid", mapper: "mapper", locale: "locale", translatable: "translatable", className: "className", mode: "mode", renderChild: "renderChild" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = function NgxBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NgxBaseComponent)(i0.ɵɵdirectiveInject('instanceToken')); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NgxBaseComponent, selectors: [["ng-component"]], viewQuery: function NgxBaseComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$8, 7, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.component = _t.first);
+        } }, inputs: { rendererId: "rendererId", model: "model", props: "props", item: "item", pk: "pk", route: "route", operations: "operations", uid: "uid", mapper: "mapper", locale: "locale", translatable: "translatable", className: "className", mode: "mode", renderChild: "renderChild" }, outputs: { listenEvent: "listenEvent" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 0, vars: 0, template: function NgxBaseComponent_Template(rf, ctx) { }, encapsulation: 2 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBaseComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    template: '',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['instanceToken']
-                }] }], propDecorators: { component: [{
-                type: ViewChild,
-                args: ['component', { read: ElementRef, static: true }]
-            }], rendererId: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], props: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], pk: [{
-                type: Input
-            }], route: [{
-                type: Input
-            }], operations: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }], mapper: [{
-                type: Input
-            }], locale: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], mode: [{
-                type: Input
-            }], renderChild: [{
-                type: Input
-            }], listenEvent: [{
-                type: Output
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NgxBaseComponent, [{
+        type: Component,
+        args: [{
+                standalone: true,
+                template: '',
+            }]
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: ['instanceToken']
+            }] }], { component: [{
+            type: ViewChild,
+            args: ['component', { read: ElementRef, static: true }]
+        }], rendererId: [{
+            type: Input
+        }], model: [{
+            type: Input
+        }], props: [{
+            type: Input
+        }], item: [{
+            type: Input
+        }], pk: [{
+            type: Input
+        }], route: [{
+            type: Input
+        }], operations: [{
+            type: Input
+        }], uid: [{
+            type: Input
+        }], mapper: [{
+            type: Input
+        }], locale: [{
+            type: Input
+        }], translatable: [{
+            type: Input
+        }], className: [{
+            type: Input
+        }], mode: [{
+            type: Input
+        }], renderChild: [{
+            type: Input
+        }], listenEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NgxBaseComponent, { className: "NgxBaseComponent", filePath: "engine/NgxBaseComponent.ts", lineNumber: 97 }); })();
 
 /**
  * @module engine
@@ -2947,6 +3156,128 @@ const DefaultFormReactiveOptions = {
     },
 };
 
+const _c0$7 = ["reactiveForm"];
+const _c1$6 = ["*"];
+const _c2$2 = () => ["create", "update"];
+const _c3$1 = () => ["delete", "read", "update"];
+function CrudFormComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("slot", ctx_r1.options.buttons.submit.iconSlot)("name", ctx_r1.options.buttons.submit.icon);
+} }
+function CrudFormComponent_Conditional_0_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("slot", ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.iconSlot)("name", ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.icon);
+} }
+function CrudFormComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 8);
+    i0.ɵɵlistener("click", function CrudFormComponent_Conditional_0_Conditional_9_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleReset()); });
+    i0.ɵɵtemplate(1, CrudFormComponent_Conditional_0_Conditional_9_Conditional_1_Template, 1, 2, "ion-icon", 6);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.icon) ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpureFunction0(2, _c2$2).includes(ctx_r1.operation) ? "Back" : ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.text, " ");
+} }
+function CrudFormComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "form", 3, 0);
+    i0.ɵɵlistener("submit", function CrudFormComponent_Conditional_0_Template_form_submit_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.submit($event)); });
+    i0.ɵɵprojection(2, 0, ["#formContent", ""]);
+    i0.ɵɵelementStart(3, "div", 4)(4, "div")(5, "ion-button", 5);
+    i0.ɵɵtemplate(6, CrudFormComponent_Conditional_0_Conditional_6_Template, 1, 2, "ion-icon", 6);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div");
+    i0.ɵɵtemplate(9, CrudFormComponent_Conditional_0_Conditional_9_Template, 3, 3, "ion-button", 7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("id", ctx_r1.rendererId)("formGroup", ctx_r1.formGroup)("target", ctx_r1.target);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.options.buttons.submit.icon ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.action ? ctx_r1.action : ctx_r1.options.buttons.submit.text, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.options.buttons.clear ? 9 : -1);
+} }
+function CrudFormComponent_Conditional_1_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("slot", ctx_r1.options.buttons.submit.iconSlot)("name", ctx_r1.options.buttons.submit.icon);
+} }
+function CrudFormComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "ion-button", 10);
+    i0.ɵɵlistener("click", function CrudFormComponent_Conditional_1_Conditional_1_Template_ion_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleDelete()); });
+    i0.ɵɵtemplate(2, CrudFormComponent_Conditional_1_Conditional_1_Conditional_2_Template, 1, 2, "ion-icon", 6);
+    i0.ɵɵtext(3, " Delete ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.options.buttons.submit.icon ? 2 : -1);
+} }
+function CrudFormComponent_Conditional_1_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("slot", ctx_r1.options.buttons.submit.iconSlot)("name", ctx_r1.options.buttons.submit.icon);
+} }
+function CrudFormComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "ion-button", 5);
+    i0.ɵɵtemplate(2, CrudFormComponent_Conditional_1_Conditional_2_Conditional_2_Template, 1, 2, "ion-icon", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.options.buttons.submit.icon ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.options.buttons.submit.text, " ");
+} }
+function CrudFormComponent_Conditional_1_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 6);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("slot", ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.iconSlot)("name", ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.icon);
+} }
+function CrudFormComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "ion-button", 8);
+    i0.ɵɵlistener("click", function CrudFormComponent_Conditional_1_Conditional_3_Template_ion_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleReset()); });
+    i0.ɵɵtemplate(2, CrudFormComponent_Conditional_1_Conditional_3_Conditional_2_Template, 1, 2, "ion-icon", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.icon) ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpureFunction0(2, _c3$1).includes(ctx_r1.operation) ? "Back" : ctx_r1.options.buttons.clear == null ? null : ctx_r1.options.buttons.clear.text, " ");
+} }
+function CrudFormComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵtemplate(1, CrudFormComponent_Conditional_1_Conditional_1_Template, 4, 1, "div")(2, CrudFormComponent_Conditional_1_Conditional_2_Template, 4, 2, "div")(3, CrudFormComponent_Conditional_1_Conditional_3_Template, 4, 3, "div");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap("dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left " + ctx_r1.operation);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.operation === "delete" && ctx_r1.uid ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.operation === ctx_r1.OperationKeys.CREATE || ctx_r1.operation === ctx_r1.OperationKeys.UPDATE ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.options.buttons.clear ? 3 : -1);
+} }
 /**
  * @component CrudFormComponent
  * @example <ngx-decaf-crud-form
@@ -3032,46 +3363,57 @@ let CrudFormComponent = class CrudFormComponent {
             name: EventConstants.SUBMIT_EVENT,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid" }, outputs: { submitEvent: "submitEvent" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["reactiveForm"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div id=\"dcf-buttons-container\" class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      <div>\n          @if(options.buttons.clear) {\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              {{ ['create', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n            </ion-button>\n          }\n        </div>\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" id=\"dcf-buttons-container\">\n\n    @if(operation === 'delete' && uid) {\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      <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          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: ["#dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){#dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){#dcf-buttons-container.dcf-flex div{width:100%}#dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = function CrudFormComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CrudFormComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CrudFormComponent, selectors: [["ngx-decaf-crud-form"]], viewQuery: function CrudFormComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$7, 5, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.component = _t.first);
+        } }, inputs: { model: "model", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid" }, outputs: { submitEvent: "submitEvent" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1$6, decls: 2, vars: 1, consts: [["reactiveForm", ""], ["novalidate", "", 3, "id", "formGroup", "target"], ["id", "dcf-buttons-container", 3, "class"], ["novalidate", "", 3, "submit", "id", "formGroup", "target"], ["id", "dcf-buttons-container", 1, "dcf-grid", "dcf-grid-collapse", "dcf-flex", "dcf-flex-left"], ["type", "submit"], ["aria-hidden", "true", 3, "slot", "name"], ["fill", "clear"], ["fill", "clear", 3, "click"], ["id", "dcf-buttons-container"], ["color", "danger", "type", "button", 3, "click"]], template: function CrudFormComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵtemplate(0, CrudFormComponent_Conditional_0_Template, 10, 6, "form", 1)(1, CrudFormComponent_Conditional_1_Template, 4, 5, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.operation !== "read" && ctx.operation !== "delete" ? 0 : 1);
+        } }, dependencies: [ForAngularModule, i1.IonButton, i2$1.ɵNgNoValidate, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, IonIcon], styles: ["#dcf-buttons-container[_ngcontent-%COMP%]{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){#dcf-buttons-container.dcf-flex[_ngcontent-%COMP%]{flex-direction:row-reverse}}@media (max-width: 990px){#dcf-buttons-container.dcf-flex[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{width:100%}#dcf-buttons-container.dcf-flex[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]{width:100%;margin-bottom:1rem}}"] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic()
 ], CrudFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CrudFormComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ForAngularModule, IonIcon], template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div id=\"dcf-buttons-container\" class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      <div>\n          @if(options.buttons.clear) {\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              {{ ['create', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n            </ion-button>\n          }\n        </div>\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" id=\"dcf-buttons-container\">\n\n    @if(operation === 'delete' && uid) {\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      <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          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: ["#dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){#dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){#dcf-buttons-container.dcf-flex div{width:100%}#dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], updateOn: [{
-                type: Input
-            }], component: [{
-                type: ViewChild,
-                args: ['reactiveForm', { static: false, read: ElementRef }]
-            }], target: [{
-                type: Input
-            }], method: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], action: [{
-                type: Input
-            }], operation: [{
-                type: Input,
-                args: [{ required: true }]
-            }], handlers: [{
-                type: Input
-            }], formGroup: [{
-                type: Input
-            }], childOf: [{
-                type: Input
-            }], rendererId: [{
-                type: Input
-            }], uid: [{
-                type: Input
-            }], submitEvent: [{
-                type: Output
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CrudFormComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ForAngularModule, IonIcon], template: "@if(operation !== 'read' && operation !== 'delete') {\n  <form #reactiveForm [id]=\"rendererId\" [formGroup]=\"formGroup\" (submit)=\"submit($event)\" novalidate [target]=\"target\">\n    <ng-content #formContent></ng-content>\n    <div id=\"dcf-buttons-container\" class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      <div>\n          @if(options.buttons.clear) {\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              {{ ['create', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n            </ion-button>\n          }\n        </div>\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" id=\"dcf-buttons-container\">\n\n    @if(operation === 'delete' && uid) {\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      <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          {{ ['delete', 'read', 'update'].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: ["#dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 991px){#dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 990px){#dcf-buttons-container.dcf-flex div{width:100%}#dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}\n"] }]
+    }], null, { model: [{
+            type: Input
+        }], updateOn: [{
+            type: Input
+        }], component: [{
+            type: ViewChild,
+            args: ['reactiveForm', { static: false, read: ElementRef }]
+        }], target: [{
+            type: Input
+        }], method: [{
+            type: Input
+        }], options: [{
+            type: Input
+        }], action: [{
+            type: Input
+        }], operation: [{
+            type: Input,
+            args: [{ required: true }]
+        }], handlers: [{
+            type: Input
+        }], formGroup: [{
+            type: Input
+        }], childOf: [{
+            type: Input
+        }], rendererId: [{
+            type: Input
+        }], uid: [{
+            type: Input
+        }], submitEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CrudFormComponent, { className: "CrudFormComponent", filePath: "components/crud-form/crud-form.component.ts", lineNumber: 54 }); })();
 
 /**
  * @module helpers
@@ -3085,6 +3427,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * utility functions.
  */
 
+function EmptyStateComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "ion-icon", 3);
+    i0.ɵɵelementEnd();
+} }
+function EmptyStateComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "h5", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r0.titleColor);
+    i0.ɵɵproperty("innerHTML", ctx_r0.title, i0.ɵɵsanitizeHtml);
+} }
+function EmptyStateComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.subtitleColor);
+    i0.ɵɵproperty("innerHTML", ctx_r0.subtitle, i0.ɵɵsanitizeHtml);
+} }
+function EmptyStateComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "p", 4);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.subtitleColor);
+    i0.ɵɵproperty("innerHTML", ctx_r0.searchSubtitle, i0.ɵɵsanitizeHtml);
+} }
+function EmptyStateComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, EmptyStateComponent_Conditional_4_Conditional_0_Template, 1, 3, "p", 2)(1, EmptyStateComponent_Conditional_4_Conditional_1_Template, 1, 3, "p", 2);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(!ctx_r0.searchValue ? 0 : 1);
+} }
+function EmptyStateComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "ion-button", 5);
+    i0.ɵɵlistener("click", function EmptyStateComponent_Conditional_5_Template_ion_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.handleClick()); });
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("size", ctx_r0.buttonSize)("fill", ctx_r0.buttonFill)("color", ctx_r0.buttonColor);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.buttonText, " ");
+} }
 /**
  * @description Component for displaying empty state messages with optional actions.
  * @summary This component provides a standardized way to display empty state messages
@@ -3372,51 +3759,68 @@ let EmptyStateComponent = class EmptyStateComponent extends NgxBaseComponent {
         const result = await this.translate.instant(content, { 'value0': this.searchValue });
         return this.sanitizer.bypassSecurityTrustHtml(result);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EmptyStateComponent, isStandalone: true, selector: "ngx-decaf-empty-state", inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, usesInheritance: true, ngImport: i0, template: "\n<ion-card id=\"dcf-card-empty-state\" [ngClass]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          name=\"alert-circle-outline\"\n          size=\"large\"\n          color=\"danger\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      @if(!searchValue) {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"subtitle\"></p>\n      } @else {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"searchSubtitle\"></p>\n      }\n    }\n    @if(buttonLink && buttonText) {\n      <div>\n        <ion-button\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"handleClick()\">\n          {{  buttonText }}\n        </ion-button>\n      </div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--ion-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = function EmptyStateComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || EmptyStateComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EmptyStateComponent, selectors: [["ngx-decaf-empty-state"]], inputs: { title: "title", titleColor: "titleColor", subtitle: "subtitle", subtitleColor: "subtitleColor", showIcon: "showIcon", icon: "icon", iconSize: "iconSize", iconColor: "iconColor", buttonLink: "buttonLink", buttonText: "buttonText", buttonFill: "buttonFill", buttonColor: "buttonColor", buttonSize: "buttonSize", searchValue: "searchValue" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 6, vars: 5, consts: [["id", "dcf-card-empty-state", 3, "ngClass"], [1, "dcf-icon-container"], [3, "class", "innerHTML"], ["name", "alert-circle-outline", "size", "large", "color", "danger"], [3, "innerHTML"], [3, "click", "size", "fill", "color"]], template: function EmptyStateComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "ion-card", 0)(1, "ion-card-content");
+            i0.ɵɵtemplate(2, EmptyStateComponent_Conditional_2_Template, 2, 0, "div", 1)(3, EmptyStateComponent_Conditional_3_Template, 1, 3, "h5", 2)(4, EmptyStateComponent_Conditional_4_Template, 2, 1)(5, EmptyStateComponent_Conditional_5_Template, 3, 4, "div");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngClass", ctx.className);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.icon && ctx.showIcon ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.title ? 3 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.subtitle ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.buttonLink && ctx.buttonText ? 5 : -1);
+        } }, dependencies: [ForAngularModule, i1.IonButton, i2.NgClass, IonCard,
+            IonCardContent,
+            IonIcon], styles: ["ion-card[_ngcontent-%COMP%]{text-align:center}ion-card[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]{margin-top:.75rem}ion-card[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{font-size:2.5rem}ion-card[_ngcontent-%COMP%]   .dcf-icon-container[_ngcontent-%COMP%]{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card[_ngcontent-%COMP%]   .dcf-ititle[_ngcontent-%COMP%]{font-weight:600!important;color:var(--ion-color-gray-6)!important}ion-card[_ngcontent-%COMP%]   .dcf-isubtitle[_ngcontent-%COMP%]{font-weight:500!important}"] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], EmptyStateComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmptyStateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [
-                        ForAngularModule,
-                        IonCard,
-                        IonCardContent,
-                        IonTitle,
-                        IonIcon
-                    ], template: "\n<ion-card id=\"dcf-card-empty-state\" [ngClass]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          name=\"alert-circle-outline\"\n          size=\"large\"\n          color=\"danger\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      @if(!searchValue) {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"subtitle\"></p>\n      } @else {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"searchSubtitle\"></p>\n      }\n    }\n    @if(buttonLink && buttonText) {\n      <div>\n        <ion-button\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"handleClick()\">\n          {{  buttonText }}\n        </ion-button>\n      </div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--ion-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }], titleColor: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], subtitleColor: [{
-                type: Input
-            }], showIcon: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconSize: [{
-                type: Input
-            }], iconColor: [{
-                type: Input
-            }], buttonLink: [{
-                type: Input
-            }], buttonText: [{
-                type: Input
-            }], buttonFill: [{
-                type: Input
-            }], buttonColor: [{
-                type: Input
-            }], buttonSize: [{
-                type: Input
-            }], searchValue: [{
-                type: Input
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EmptyStateComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [
+                    ForAngularModule,
+                    IonCard,
+                    IonCardContent,
+                    IonTitle,
+                    IonIcon
+                ], template: "\n<ion-card id=\"dcf-card-empty-state\" [ngClass]=\"className\">\n  <ion-card-content>\n    @if(icon && showIcon) {\n      <div class=\"dcf-icon-container\">\n        <ion-icon\n          name=\"alert-circle-outline\"\n          size=\"large\"\n          color=\"danger\"\n          />\n      </div>\n    }\n    @if(title) {\n      <h5 [class]=\"titleColor\" [innerHTML]=\"title\"></h5>\n    }\n    @if(subtitle) {\n      @if(!searchValue) {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"subtitle\"></p>\n      } @else {\n        <p [class]=\"subtitleColor\" [innerHTML]=\"searchSubtitle\"></p>\n      }\n    }\n    @if(buttonLink && buttonText) {\n      <div>\n        <ion-button\n          [size]=\"buttonSize\"\n          [fill]=\"buttonFill\"\n          [color]=\"buttonColor\"\n          (click)=\"handleClick()\">\n          {{  buttonText }}\n        </ion-button>\n      </div>\n    }\n  </ion-card-content>\n</ion-card>\n", styles: ["ion-card{text-align:center}ion-card ion-button{margin-top:.75rem}ion-card ion-icon{font-size:2.5rem}ion-card .dcf-icon-container{transform:scale(1.25);opacity:.75;margin-top:1.25rem!important;margin-bottom:.5rem!important}ion-card .dcf-ititle{font-weight:600!important;color:var(--ion-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"] }]
+    }], () => [], { title: [{
+            type: Input
+        }], titleColor: [{
+            type: Input
+        }], subtitle: [{
+            type: Input
+        }], subtitleColor: [{
+            type: Input
+        }], showIcon: [{
+            type: Input
+        }], icon: [{
+            type: Input
+        }], iconSize: [{
+            type: Input
+        }], iconColor: [{
+            type: Input
+        }], buttonLink: [{
+            type: Input
+        }], buttonText: [{
+            type: Input
+        }], buttonFill: [{
+            type: Input
+        }], buttonColor: [{
+            type: Input
+        }], buttonSize: [{
+            type: Input
+        }], searchValue: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EmptyStateComponent, { className: "EmptyStateComponent", filePath: "components/empty-state/empty-state.component.ts", lineNumber: 72 }); })();
 
 class CollapsableDirective {
     constructor() {
@@ -3433,17 +3837,19 @@ class CollapsableDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapsableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CollapsableDirective, isStandalone: true, selector: "[decafCollapsable]", ngImport: i0 }); }
+    static { this.ɵfac = function CollapsableDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsableDirective)(); }; }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CollapsableDirective, selectors: [["", "decafCollapsable", ""]], standalone: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CollapsableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[decafCollapsable]',
-                    standalone: true
-                }]
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsableDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[decafCollapsable]',
+                standalone: true
+            }]
+    }], null, null); })();
 
+const _c0$6 = ["component"];
+const _c1$5 = ["*"];
 /**
  * @description Dynamic fieldset component with collapsible accordion functionality.
  * @summary This component provides a sophisticated fieldset container that automatically
@@ -3640,25 +4046,48 @@ let FieldsetComponent = class FieldsetComponent {
         if (target.tagName === 'ION-ACCORDION-GROUP')
             this.isOpen = !!value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", operation: "operation", target: "target" }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<fieldset [class]=\"'dcf-fieldset ' + operation\" #component>\n  <ion-accordion-group (ionChange)=\"handleChange($event)\">\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" >\n        <legend>{{ name }}</legend>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\" decafCollapsable>\n        <ng-content></ng-content>\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n", styles: [".dcf-fieldset{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--ion-color-gray-2);border-radius:8px}.dcf-fieldset ion-accordion-group{--border-color:red !important}.dcf-fieldset.read{margin-top:1.25rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "directive", type: CollapsableDirective, selector: "[decafCollapsable]" }] }); }
+    static { this.ɵfac = function FieldsetComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FieldsetComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FieldsetComponent, selectors: [["ngx-decaf-fieldset"]], viewQuery: function FieldsetComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$6, 5, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.component = _t.first);
+        } }, inputs: { name: "name", operation: "operation", target: "target" }, standalone: true, features: [i0.ɵɵStandaloneFeature], ngContentSelectors: _c1$5, decls: 9, vars: 4, consts: [["component", ""], [3, "ionChange"], ["value", "open"], ["slot", "header"], ["slot", "content", "decafCollapsable", ""]], template: function FieldsetComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "fieldset", null, 0)(2, "ion-accordion-group", 1);
+            i0.ɵɵlistener("ionChange", function FieldsetComponent_Template_ion_accordion_group_ionChange_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); });
+            i0.ɵɵelementStart(3, "ion-accordion", 2)(4, "ion-item", 3)(5, "legend");
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "div", 4);
+            i0.ɵɵprojection(8);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵclassMap("dcf-fieldset " + ctx.operation);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.name);
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-hidden", !ctx.isOpen);
+        } }, dependencies: [ForAngularModule, IonAccordionGroup, IonAccordion, IonItem, CollapsableDirective], styles: [".dcf-fieldset[_ngcontent-%COMP%]{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--ion-color-gray-2);border-radius:8px}.dcf-fieldset[_ngcontent-%COMP%]   ion-accordion-group[_ngcontent-%COMP%]{--border-color:red !important}.dcf-fieldset.read[_ngcontent-%COMP%]{margin-top:1.25rem}.dcf-fieldset[_ngcontent-%COMP%]   ion-accordion.accordion-collapsing[_ngcontent-%COMP%], .dcf-fieldset[_ngcontent-%COMP%]   ion-accordion.accordion-collapsed[_ngcontent-%COMP%]{margin-bottom:1rem}.dcf-fieldset[_ngcontent-%COMP%]   ion-accordion[_ngcontent-%COMP%]   ion-item[slot=header][_ngcontent-%COMP%]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset[_ngcontent-%COMP%]   ion-accordion[_ngcontent-%COMP%]   ion-item[slot=header][_ngcontent-%COMP%]   legend[_ngcontent-%COMP%]{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset[_ngcontent-%COMP%]   ion-accordion[_ngcontent-%COMP%]   [slot=content][_ngcontent-%COMP%]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}"] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic()
 ], FieldsetComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldsetComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ForAngularModule, IonAccordionGroup, IonAccordion, IonItem, CollapsableDirective], template: "<fieldset [class]=\"'dcf-fieldset ' + operation\" #component>\n  <ion-accordion-group (ionChange)=\"handleChange($event)\">\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" >\n        <legend>{{ name }}</legend>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\" decafCollapsable>\n        <ng-content></ng-content>\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n", styles: [".dcf-fieldset{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--ion-color-gray-2);border-radius:8px}.dcf-fieldset ion-accordion-group{--border-color:red !important}.dcf-fieldset.read{margin-top:1.25rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}\n"] }]
-        }], propDecorators: { component: [{
-                type: ViewChild,
-                args: ['component', { static: false, read: ElementRef }]
-            }], name: [{
-                type: Input
-            }], operation: [{
-                type: Input
-            }], target: [{
-                type: Input
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldsetComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [ForAngularModule, IonAccordionGroup, IonAccordion, IonItem, CollapsableDirective], template: "<fieldset [class]=\"'dcf-fieldset ' + operation\" #component>\n  <ion-accordion-group (ionChange)=\"handleChange($event)\">\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" >\n        <legend>{{ name }}</legend>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\" decafCollapsable>\n        <ng-content></ng-content>\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n", styles: [".dcf-fieldset{margin-bottom:1.8rem;padding-bottom:0;padding-top:1rem;border:1px solid var(--ion-color-gray-2);border-radius:8px}.dcf-fieldset ion-accordion-group{--border-color:red !important}.dcf-fieldset.read{margin-top:1.25rem}.dcf-fieldset ion-accordion.accordion-collapsing,.dcf-fieldset ion-accordion.accordion-collapsed{margin-bottom:1rem}.dcf-fieldset ion-accordion ion-item[slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: 12px}.dcf-fieldset ion-accordion ion-item[slot=header] legend{font-weight:600;font-size:1rem;color:#333;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:1rem!important;padding-inline:.75rem;background-color:#fff}\n"] }]
+    }], null, { component: [{
+            type: ViewChild,
+            args: ['component', { static: false, read: ElementRef }]
+        }], name: [{
+            type: Input
+        }], operation: [{
+            type: Input
+        }], target: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FieldsetComponent, { className: "FieldsetComponent", filePath: "components/fieldset/fieldset.component.ts", lineNumber: 68 }); })();
 
 /**
  * @description Searchbar component for Angular applications.
@@ -4086,63 +4515,242 @@ class SearchbarComponent extends NgxBaseComponent {
     preventChange(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  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: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.ɵfac = function SearchbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchbarComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchbarComponent, selectors: [["ngx-decaf-searchbar"]], hostBindings: function SearchbarComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("toggleSearchbarVisibility", function SearchbarComponent_toggleSearchbarVisibility_HostBindingHandler($event) { return ctx.handleToggleVisibility($event); }, false, i0.ɵɵresolveWindow);
+        } }, 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" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 2, vars: 14, consts: [["component", ""], ["ngClass", "dcf-searchbar", "name", "search", "mode", "ios", 3, "keyup.enter", "ionChange", "ionInput", "ionClear", "autocomplete", "showCancelButton", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showClearButton", "spellcheck", "type"]], template: function SearchbarComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "ion-searchbar", 1, 0);
+            i0.ɵɵlistener("keyup.enter", function SearchbarComponent_Template_ion_searchbar_keyup_enter_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.preventChange($event)); })("ionChange", function SearchbarComponent_Template_ion_searchbar_ionChange_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleChange($event)); })("ionInput", function SearchbarComponent_Template_ion_searchbar_ionInput_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleInput($event)); })("ionClear", function SearchbarComponent_Template_ion_searchbar_ionClear_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleClear()); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("autocomplete", ctx.autocomplete)("showCancelButton", ctx.showCancelButton)("cancelButtonText", ctx.buttonCancelText)("clearIcon", ctx.clearIcon)("color", ctx.color)("debounce", ctx.debounce)("disabled", ctx.disabled)("enterkeyhint", ctx.enterkeyhint)("inputmode", ctx.inputmode)("placeholder", ctx.placeholder)("searchIcon", ctx.searchIcon)("showClearButton", ctx.showClearButton)("spellcheck", ctx.spellcheck)("type", ctx.type);
+        } }, dependencies: [ForAngularModule, i2.NgClass, IonSearchbar] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [ForAngularModule, IonSearchbar], template: "<ion-searchbar\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" }]
-        }], ctorParameters: () => [], propDecorators: { autocomplete: [{
-                type: Input
-            }], autocorrect: [{
-                type: Input
-            }], animated: [{
-                type: Input
-            }], buttonCancelText: [{
-                type: Input
-            }], clearIcon: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], debounce: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], enterkeyhint: [{
-                type: Input
-            }], inputmode: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], searchIcon: [{
-                type: Input
-            }], showCancelButton: [{
-                type: Input
-            }], showClearButton: [{
-                type: Input
-            }], spellcheck: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], queryKeys: [{
-                type: Input
-            }], isVisible: [{
-                type: Input
-            }], wrapper: [{
-                type: Input
-            }], wrapperColor: [{
-                type: Input
-            }], emitEventToWindow: [{
-                type: Input
-            }], searchEvent: [{
-                type: Output
-            }], handleToggleVisibility: [{
-                type: HostListener,
-                args: ["window:toggleSearchbarVisibility", ['$event']]
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchbarComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [ForAngularModule, IonSearchbar], template: "<ion-searchbar\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" }]
+    }], () => [], { autocomplete: [{
+            type: Input
+        }], autocorrect: [{
+            type: Input
+        }], animated: [{
+            type: Input
+        }], buttonCancelText: [{
+            type: Input
+        }], clearIcon: [{
+            type: Input
+        }], color: [{
+            type: Input
+        }], debounce: [{
+            type: Input
+        }], disabled: [{
+            type: Input
+        }], enterkeyhint: [{
+            type: Input
+        }], inputmode: [{
+            type: Input
+        }], placeholder: [{
+            type: Input
+        }], searchIcon: [{
+            type: Input
+        }], showCancelButton: [{
+            type: Input
+        }], showClearButton: [{
+            type: Input
+        }], spellcheck: [{
+            type: Input
+        }], type: [{
+            type: Input
+        }], value: [{
+            type: Input
+        }], queryKeys: [{
+            type: Input
+        }], isVisible: [{
+            type: Input
+        }], wrapper: [{
+            type: Input
+        }], wrapperColor: [{
+            type: Input
+        }], emitEventToWindow: [{
+            type: Input
+        }], searchEvent: [{
+            type: Output
+        }], handleToggleVisibility: [{
+            type: HostListener,
+            args: ["window:toggleSearchbarVisibility", ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchbarComponent, { className: "SearchbarComponent", filePath: "components/searchbar/searchbar.component.ts", lineNumber: 32 }); })();
 
+const _c0$5 = ["optionsFilterElement"];
+function _forTrack0$1($index, $item) { return this.trackItemFn($index, $item == null ? null : $item["index"]); }
+const _c1$4 = a0 => ({ "dcf-hidden": a0 });
+function FilterComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-searchbar", 15);
+    i0.ɵɵlistener("searchEvent", function FilterComponent_Conditional_0_Template_ngx_decaf_searchbar_searchEvent_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleSearch($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("emitEventToWindow", false)("debounce", 500);
+} }
+function FilterComponent_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-chip", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("outline", true);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(filter_r4 == null ? null : filter_r4["index"]);
+} }
+function FilterComponent_For_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-chip", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("outline", true);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(filter_r4 == null ? null : filter_r4["condition"]);
+} }
+function FilterComponent_For_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-chip", 17);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementStart(2, "ion-icon", 18);
+    i0.ɵɵlistener("click", function FilterComponent_For_6_Conditional_2_Template_ion_icon_click_2_listener() { i0.ɵɵrestoreView(_r5); const filter_r4 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.removeFilter(filter_r4 == null ? null : filter_r4["value"])); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const filter_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("outline", true);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", filter_r4 == null ? null : filter_r4["value"], " ");
+} }
+function FilterComponent_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, FilterComponent_For_6_Conditional_0_Template, 2, 2, "ion-chip", 16)(1, FilterComponent_For_6_Conditional_1_Template, 2, 2, "ion-chip", 16)(2, FilterComponent_For_6_Conditional_2_Template, 3, 2, "ion-chip", 17);
+} if (rf & 2) {
+    const filter_r4 = ctx.$implicit;
+    i0.ɵɵconditional((filter_r4 == null ? null : filter_r4["index"]) ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((filter_r4 == null ? null : filter_r4["condition"]) ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((filter_r4 == null ? null : filter_r4["value"]) ? 2 : -1);
+} }
+function FilterComponent_Conditional_11_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("keydown.enter", function FilterComponent_Conditional_11_Conditional_3_For_1_Template_div_keydown_enter_0_listener() { const key_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectOption(key_r7)); })("click", function FilterComponent_Conditional_11_Conditional_3_For_1_Template_div_click_0_listener() { const key_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectOption(key_r7)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const key_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", key_r7, " ");
+} }
+function FilterComponent_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, FilterComponent_Conditional_11_Conditional_3_For_1_Template, 2, 1, "div", 20, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r2.filteredOptions);
+} }
+function FilterComponent_Conditional_11_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵlistener("click", function FilterComponent_Conditional_11_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.filteredOptions = ctx_r2.options; return i0.ɵɵresetView(ctx_r2.value = ""); })("keydown.enter", function FilterComponent_Conditional_11_Conditional_4_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.filteredOptions = ctx_r2.options; return i0.ɵɵresetView(ctx_r2.value = ""); });
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "no_suggestions"), " ");
+} }
+function FilterComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", null, 1)(2, "div");
+    i0.ɵɵtemplate(3, FilterComponent_Conditional_11_Conditional_3_Template, 2, 0)(4, FilterComponent_Conditional_11_Conditional_4_Template, 3, 3, "div", 19);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap("dcf-dropdown " + (ctx_r2.options.length > 0 ? " dcf-active" : ""));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.filteredOptions.length > 0 ? 3 : 4);
+} }
+function FilterComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "ion-button", 12);
+    i0.ɵɵlistener("click", function FilterComponent_Conditional_12_Template_ion_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clear()); });
+    i0.ɵɵelement(2, "ion-icon", 23);
+    i0.ɵɵelementEnd()();
+} }
+function FilterComponent_Conditional_16_Conditional_3_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵlistener("keydown.enter", function FilterComponent_Conditional_16_Conditional_3_For_1_Template_div_keydown_enter_0_listener() { const key_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectOption(key_r11)); })("click", function FilterComponent_Conditional_16_Conditional_3_For_1_Template_div_click_0_listener() { const key_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectOption(key_r11)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const key_r11 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", key_r11, " ");
+} }
+function FilterComponent_Conditional_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, FilterComponent_Conditional_16_Conditional_3_For_1_Template, 2, 1, "div", 20, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r2.filteredOptions);
+} }
+function FilterComponent_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵlistener("click", function FilterComponent_Conditional_16_Conditional_4_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.filteredOptions = ctx_r2.options; return i0.ɵɵresetView(ctx_r2.value = ""); })("keydown.enter", function FilterComponent_Conditional_16_Conditional_4_Template_div_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.filteredOptions = ctx_r2.options; return i0.ɵɵresetView(ctx_r2.value = ""); });
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "no_suggestions"), " ");
+} }
+function FilterComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", null, 1)(2, "div");
+    i0.ɵɵtemplate(3, FilterComponent_Conditional_16_Conditional_3_Template, 2, 0)(4, FilterComponent_Conditional_16_Conditional_4_Template, 3, 3, "div", 19);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap("dcf-dropdown " + (ctx_r2.options.length > 0 ? " dcf-active" : ""));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.filteredOptions.length > 0 ? 3 : 4);
+} }
+function FilterComponent_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " aa ");
+    i0.ɵɵelementStart(1, "ion-select-option", 26);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const sort_r14 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", sort_r14);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, sort_r14));
+} }
+function FilterComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 24)(2, "div", 4)(3, "ion-select", 25);
+    i0.ɵɵlistener("ionChange", function FilterComponent_Conditional_17_Template_ion_select_ionChange_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleSortChange($event)); });
+    i0.ɵɵrepeaterCreate(4, FilterComponent_Conditional_17_For_5_Template, 4, 4, "ion-select-option", 26, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 27)(7, "ion-button", 28);
+    i0.ɵɵlistener("click", function FilterComponent_Conditional_17_Template_ion_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleSortDirectionChange()); });
+    i0.ɵɵelement(8, "ion-icon", 29);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r2.sortValue);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.sortBy);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("name", ctx_r2.sortDirection === "desc" ? "arrow-down-outline" : "arrow-up-outline");
+} }
 /**
  * @description Advanced filter component for creating dynamic search filters with step-by-step construction.
  * @summary This component provides a comprehensive filtering interface that allows users to build
@@ -4778,42 +5386,124 @@ let FilterComponent = class FilterComponent extends NgxBaseComponent {
     handleSearch(value) {
         this.searchEvent.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "ngx-decaf-filter", inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, viewQueries: [{ propertyName: "optionsFilterElement", first: true, predicate: ["optionsFilterElement"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if(filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if(filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if(filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            [readonly]=\"step !== 3\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if(filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ 'no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ 'no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n            >\n            @for(sort of sortBy; track sort) {\n              aa\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;border:1px solid var(--ion-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter:focus-within{border-color:var(--ion-color-primary);background-color:#fff}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--ion-color-gray-3);color:var(--ion-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.dcf-filter-value{background:var(--ion-color-gray-2);border-color:var(--ion-color-gray-4)!important;color:var(--ion-color-gray-8)!important}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;color:var(--ion-color-gray-7);min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;background-color:#fff;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border:1px solid var(--ion-color-gray-2);border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;color:var(--ion-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--ion-color-primary)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{border-color:var(--ion-color-gray-7)!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--ion-color-gray-1)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: 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: 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"] }] }); }
+    static { this.ɵfac = function FilterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FilterComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FilterComponent, selectors: [["ngx-decaf-filter"]], viewQuery: function FilterComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$5, 5, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.optionsFilterElement = _t.first);
+        } }, inputs: { indexes: "indexes", conditions: "conditions", sortBy: "sortBy", disableSort: "disableSort" }, outputs: { filterEvent: "filterEvent", searchEvent: "searchEvent" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 18, vars: 13, consts: [["component", ""], ["optionsFilterElement", ""], [3, "emitEventToWindow", "debounce"], [1, "dcf-grid", "dcf-grid-small", "dcf-grid-match", "dcf-filter-grid", 3, "ngClass"], [1, "dcf-width-expand"], [1, "dcf-filter"], [1, "dcf-input"], [1, "dcf-width-1-1"], ["fill", "none", "type", "text", 3, "ngModelChange", "keydown.enter", "keydown.backspace", "input", "click", "blur", "ngModel", "readonly", "placeholder"], [3, "class"], [1, "dcf-icon-clear"], [1, "dcf-icon-search"], ["fill", "clear", "size", "small", 3, "click"], ["name", "search-outline", "color", "dark", "slot", "icon-only"], [1, "dcf-width-1-5@m", "dcf-width-1-1", "dcf-sort-container"], [3, "searchEvent", "emitEventToWindow", "debounce"], [3, "outline"], [1, "dcf-filter-value", 3, "outline"], ["name", "close", "size", "small", 3, "click"], ["tabindex", "0", 1, "dcf-empty"], ["tabindex", "0", 1, "dcf-item"], ["tabindex", "0", 1, "dcf-item", 3, "keydown.enter", "click"], ["tabindex", "0", 1, "dcf-empty", 3, "click", "keydown.enter"], ["name", "trash-outline", "color", "dark", "slot", "icon-only"], [1, "dcf-grid", "dcf-grid-collapse", "dcf-flex", "dcf-flex-middle", "dcf-grid-match"], ["toggleIcon", "chevron-down-outline", "expandedIcon", "chevron-up-outline", "interface", "popover", "label-placement", "floating", "fill", "outline", 1, "dcf-sort-select", 3, "ionChange", "value"], [3, "value"], [1, "dcf-width-auto"], ["fill", "clear", 3, "click"], ["slot", "icon-only", 3, "name"]], template: function FilterComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵtemplate(0, FilterComponent_Conditional_0_Template, 1, 2, "ngx-decaf-searchbar", 2);
+            i0.ɵɵelementStart(1, "div", 3)(2, "div", 4)(3, "div", 5)(4, "div", 6);
+            i0.ɵɵrepeaterCreate(5, FilterComponent_For_6_Template, 3, 3, null, null, _forTrack0$1, true);
+            i0.ɵɵelementStart(7, "div", 7)(8, "input", 8, 0);
+            i0.ɵɵpipe(10, "translate");
+            i0.ɵɵtwoWayListener("ngModelChange", function FilterComponent_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("keydown.enter", function FilterComponent_Template_input_keydown_enter_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.addFilter(ctx.value, $event)); })("keydown.backspace", function FilterComponent_Template_input_keydown_backspace_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.clear(ctx.value)); })("input", function FilterComponent_Template_input_input_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleInput($event)); })("click", function FilterComponent_Template_input_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleFocus()); })("blur", function FilterComponent_Template_input_blur_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, FilterComponent_Conditional_11_Template, 5, 3, "div", 9);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(12, FilterComponent_Conditional_12_Template, 3, 0, "div", 10);
+            i0.ɵɵelementStart(13, "div", 11)(14, "ion-button", 12);
+            i0.ɵɵlistener("click", function FilterComponent_Template_ion_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.submit()); });
+            i0.ɵɵelement(15, "ion-icon", 13);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(16, FilterComponent_Conditional_16_Template, 5, 3, "div", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(17, FilterComponent_Conditional_17_Template, 9, 2, "div", 14);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵconditional(!ctx.indexes.length ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$4, !ctx.indexes.length));
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.filterValue);
+            i0.ɵɵadvance(3);
+            i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(10, 9, ctx.locale + (ctx.step === 3 ? ".type" : ".select")));
+            i0.ɵɵtwoWayProperty("ngModel", ctx.value);
+            i0.ɵɵproperty("readonly", ctx.step !== 3);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.windowWidth >= 768 ? 11 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.filterValue.length > 0 ? 12 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.windowWidth < 768 ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.disableSort ? 17 : -1);
+        } }, dependencies: [ForAngularModule, i1.IonButton, i2.NgClass, i2$1.DefaultValueAccessor, i2$1.NgControlStatus, i2$1.NgModel, i3.TranslatePipe, IonChip,
+            IonIcon,
+            IonSelect,
+            SearchbarComponent], styles: [".dcf-filter-grid[_ngcontent-%COMP%]{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select[_ngcontent-%COMP%]{min-height:44px!important}.dcf-hidden[_ngcontent-%COMP%]{display:none!important}.dcf-filter[_ngcontent-%COMP%]{display:flex;width:100%;min-height:40px;border:1px solid var(--ion-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter[_ngcontent-%COMP%]:focus-within{border-color:var(--ion-color-primary);background-color:#fff}.dcf-filter[_ngcontent-%COMP%]   ion-chip[_ngcontent-%COMP%]{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--ion-color-gray-3);color:var(--ion-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter[_ngcontent-%COMP%]   ion-chip.dcf-filter-value[_ngcontent-%COMP%]{background:var(--ion-color-gray-2);border-color:var(--ion-color-gray-4)!important;color:var(--ion-color-gray-8)!important}.dcf-filter[_ngcontent-%COMP%]   ion-chip.sc-ion-chip-md-h[_ngcontent-%COMP%], .dcf-filter[_ngcontent-%COMP%]   ion-chip.sc-ion-chip-ios-h[_ngcontent-%COMP%]{height:24px;min-height:24px}.dcf-filter[_ngcontent-%COMP%]   ion-chip.sc-ion-chip-md-h[_ngcontent-%COMP%]   .chip-native[_ngcontent-%COMP%], .dcf-filter[_ngcontent-%COMP%]   ion-chip.sc-ion-chip-ios-h[_ngcontent-%COMP%]   .chip-native[_ngcontent-%COMP%]{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter[_ngcontent-%COMP%]   ion-chip[_ngcontent-%COMP%]   ion-label[_ngcontent-%COMP%]{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter[_ngcontent-%COMP%]   ion-chip[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{margin:0 2px;font-size:.75rem}.dcf-filter[_ngcontent-%COMP%]   .dcf-input[_ngcontent-%COMP%]{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter[_ngcontent-%COMP%]   .dcf-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{min-height:40px;color:var(--ion-color-gray-7);min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter[_ngcontent-%COMP%]   .dcf-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus{border:0px!important;outline:none!important}.dcf-filter[_ngcontent-%COMP%]   .dcf-icon-clear[_ngcontent-%COMP%], .dcf-filter[_ngcontent-%COMP%]   .dcf-icon-search[_ngcontent-%COMP%]{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter[_ngcontent-%COMP%]   .dcf-icon-search[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{font-size:1.25rem}.dcf-sort-container[_ngcontent-%COMP%]{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container[_ngcontent-%COMP%]{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container[_ngcontent-%COMP%]{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown[_ngcontent-%COMP%]{position:absolute;max-height:200px;overflow-y:auto;background-color:#fff;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active[_ngcontent-%COMP%]{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border:1px solid var(--ion-color-gray-2);border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active[_ngcontent-%COMP%]{margin-top:55px}}.dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;color:var(--ion-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div.dcf-filtering-item[_ngcontent-%COMP%], .dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:only-child{border-color:var(--ion-color-primary)}.dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div.dcf-filtering-item.dcf-empty[_ngcontent-%COMP%], .dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:only-child.dcf-empty{border-color:var(--ion-color-gray-7)!important}.dcf-dropdown.dcf-active[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:hover{background-color:var(--ion-color-gray-1)}"] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], FilterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-filter', imports: [
-                        ForAngularModule,
-                        IonLabel,
-                        IonItem,
-                        IonChip,
-                        IonIcon,
-                        IonSelect,
-                        IonIcon,
-                        SearchbarComponent
-                    ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if(filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if(filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if(filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            [readonly]=\"step !== 3\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if(filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ 'no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ 'no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n            >\n            @for(sort of sortBy; track sort) {\n              aa\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;border:1px solid var(--ion-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter:focus-within{border-color:var(--ion-color-primary);background-color:#fff}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--ion-color-gray-3);color:var(--ion-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.dcf-filter-value{background:var(--ion-color-gray-2);border-color:var(--ion-color-gray-4)!important;color:var(--ion-color-gray-8)!important}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;color:var(--ion-color-gray-7);min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;background-color:#fff;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border:1px solid var(--ion-color-gray-2);border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;color:var(--ion-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--ion-color-primary)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{border-color:var(--ion-color-gray-7)!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--ion-color-gray-1)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
-                type: ViewChild,
-                args: ['optionsFilterElement', { read: ElementRef, static: false }]
-            }], indexes: [{
-                type: Input
-            }], conditions: [{
-                type: Input
-            }], sortBy: [{
-                type: Input
-            }], disableSort: [{
-                type: Input
-            }], filterEvent: [{
-                type: Output
-            }], searchEvent: [{
-                type: Output
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FilterComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-filter', imports: [
+                    ForAngularModule,
+                    IonLabel,
+                    IonItem,
+                    IonChip,
+                    IonIcon,
+                    IonSelect,
+                    IonIcon,
+                    SearchbarComponent
+                ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [ngClass]=\"{'dcf-hidden': !indexes.length}\">\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if(filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if(filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if(filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon name=\"close\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            [readonly]=\"step !== 3\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n            #component\n          />\n          @if(windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if(filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ 'no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ 'no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n            >\n            @for(sort of sortBy; track sort) {\n              aa\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [".dcf-filter-grid{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;border:1px solid var(--ion-color-gray-3);box-shadow:0 1px 2px #0a0d120d;background-color:#fff;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter:focus-within{border-color:var(--ion-color-primary);background-color:#fff}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;border:1px solid var(--ion-color-gray-3);color:var(--ion-color-gray-7);font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.dcf-filter-value{background:var(--ion-color-gray-2);border-color:var(--ion-color-gray-4)!important;color:var(--ion-color-gray-8)!important}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;color:var(--ion-color-gray-7);min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;background-color:#fff;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border:1px solid var(--ion-color-gray-2);border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;color:var(--ion-color-gray-8);border-radius:6px}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--ion-color-primary)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{border-color:var(--ion-color-gray-7)!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--ion-color-gray-1)}\n"] }]
+    }], () => [], { optionsFilterElement: [{
+            type: ViewChild,
+            args: ['optionsFilterElement', { read: ElementRef, static: false }]
+        }], indexes: [{
+            type: Input
+        }], conditions: [{
+            type: Input
+        }], sortBy: [{
+            type: Input
+        }], disableSort: [{
+            type: Input
+        }], filterEvent: [{
+            type: Output
+        }], searchEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FilterComponent, { className: "FilterComponent", filePath: "components/filter/filter.component.ts", lineNumber: 72 }); })();
 
+const _c0$4 = ["inner"];
+const _c1$3 = ["componentOuter"];
+function ModelRendererComponent_ng_template_0_Template(rf, ctx) { }
+function ModelRendererComponent_ng_template_2_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ngx-decaf-component-renderer", 4);
+} if (rf & 2) {
+    const child_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("parent", child_r1);
+} }
+function ModelRendererComponent_ng_template_2_For_2_Conditional_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, null, 2);
+} }
+function ModelRendererComponent_ng_template_2_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ModelRendererComponent_ng_template_2_For_2_Conditional_1_ng_container_0_Template, 2, 0, "ng-container", 5);
+} if (rf & 2) {
+    const child_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngComponentOutlet", child_r1.component)("ngComponentOutletInjector", child_r1.injector)("ngComponentOutletInputs", child_r1.inputs)("ngComponentOutletContent", child_r1.content);
+} }
+function ModelRendererComponent_ng_template_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ModelRendererComponent_ng_template_2_For_2_Conditional_0_Template, 1, 1, "ngx-decaf-component-renderer", 4)(1, ModelRendererComponent_ng_template_2_For_2_Conditional_1_Template, 1, 4, "ng-container");
+} if (rf & 2) {
+    const child_r1 = ctx.$implicit;
+    i0.ɵɵconditional((child_r1 == null ? null : child_r1.children == null ? null : child_r1.children.length) ? 0 : 1);
+} }
+function ModelRendererComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵrepeaterCreate(1, ModelRendererComponent_ng_template_2_For_2_Template, 2, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("id", ctx_r1.rendererId || null);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.output == null ? null : ctx_r1.output.children);
+} }
 /**
  * @description Component for rendering dynamic models
  * @summary This component is responsible for dynamically rendering models,
@@ -4921,29 +5611,103 @@ class ModelRendererComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, viewQueries: [{ propertyName: "inner", first: true, predicate: ["inner"], descendants: true, read: TemplateRef, static: true }, { propertyName: "vcr", first: true, predicate: ["componentOuter"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = function ModelRendererComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModelRendererComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelRendererComponent, selectors: [["ngx-decaf-model-renderer"]], viewQuery: function ModelRendererComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$4, 7, TemplateRef);
+            i0.ɵɵviewQuery(_c1$3, 7, ViewContainerRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.inner = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.vcr = _t.first);
+        } }, inputs: { model: "model", globals: "globals", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 4, vars: 0, consts: [["componentOuter", ""], ["inner", ""], ["childComponents", ""], [3, "id"], [3, "parent"], [4, "ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletInputs", "ngComponentOutletContent"]], template: function ModelRendererComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ModelRendererComponent_ng_template_0_Template, 0, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ModelRendererComponent_ng_template_2_Template, 3, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } }, dependencies: [ForAngularModule, i2.NgComponentOutlet, ComponentRendererComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ModelRendererComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, imports: [ForAngularModule, NgComponentOutlet, ComponentRendererComponent], selector: 'ngx-decaf-model-renderer', template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n" }]
-        }], propDecorators: { model: [{
-                type: Input,
-                args: [{ required: true }]
-            }], globals: [{
-                type: Input
-            }], inner: [{
-                type: ViewChild,
-                args: ['inner', { read: TemplateRef, static: true }]
-            }], rendererId: [{
-                type: Input
-            }], vcr: [{
-                type: ViewChild,
-                args: ['componentOuter', { static: true, read: ViewContainerRef }]
-            }], listenEvent: [{
-                type: Output
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModelRendererComponent, [{
+        type: Component,
+        args: [{ standalone: true, imports: [ForAngularModule, NgComponentOutlet, ComponentRendererComponent], selector: 'ngx-decaf-model-renderer', template: "  <ng-template #componentOuter></ng-template>\n  <ng-template #inner>\n    <div  [id]=\"rendererId || null\">\n      @for (child of output?.children; track child) {\n        @if(child?.children?.length) {\n          <ngx-decaf-component-renderer [parent]=\"child\" />\n        } @else {\n          <ng-container\n            #childComponents\n            *ngComponentOutlet=\"\n              child.component;\n              injector: child.injector;\n              inputs: child.inputs;\n              content:child.content;\n            \"\n          />\n        }\n      }\n    </div>\n  </ng-template>\n" }]
+    }], null, { model: [{
+            type: Input,
+            args: [{ required: true }]
+        }], globals: [{
+            type: Input
+        }], inner: [{
+            type: ViewChild,
+            args: ['inner', { read: TemplateRef, static: true }]
+        }], rendererId: [{
+            type: Input
+        }], vcr: [{
+            type: ViewChild,
+            args: ['componentOuter', { static: true, read: ViewContainerRef }]
+        }], listenEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelRendererComponent, { className: "ModelRendererComponent", filePath: "components/model-renderer/model-renderer.component.ts", lineNumber: 65 }); })();
 
+function _forTrack0($index, $item) { return this.trackItemFn($index, $item.col); }
+const _c0$3 = a0 => ({ props: a0 });
+function LayoutComponent_Conditional_0_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "ion-card", 3);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 1, row_r1.title), " ");
+} }
+function LayoutComponent_Conditional_0_For_1_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-card")(1, "ion-card-content")(2, "ngx-decaf-model-renderer", 5);
+    i0.ɵɵlistener("listenEvent", function LayoutComponent_Conditional_0_For_1_For_3_Conditional_2_Template_ngx_decaf_model_renderer_listenEvent_2_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.handleEvent($event)); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const child_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap("dcf-height-1-1 " + ctx_r2.className);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("model", child_r4.props.name);
+} }
+function LayoutComponent_Conditional_0_For_1_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-component-renderer", 6);
+    i0.ɵɵlistener("listenEvent", function LayoutComponent_Conditional_0_For_1_For_3_Conditional_3_Template_ngx_decaf_component_renderer_listenEvent_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.handleEvent($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("tag", child_r4.tag)("globals", i0.ɵɵpureFunction1(2, _c0$3, child_r4.props));
+} }
+function LayoutComponent_Conditional_0_For_1_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "div");
+    i0.ɵɵtemplate(2, LayoutComponent_Conditional_0_For_1_For_3_Conditional_2_Template, 3, 3, "ion-card", 2)(3, LayoutComponent_Conditional_0_For_1_For_3_Conditional_3_Template, 1, 4, "ngx-decaf-component-renderer", 4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const child_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(child_r4.col === ctx_r2.cols.length ? "dcf-width-1-1" : "dcf-width-" + child_r4.col + "-" + ctx_r2.cols.length + "@" + ctx_r2.breakpoint);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("dcf-grid-child " + child_r4.col);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(child_r4.tag === "ngx-decaf-crud-form" ? 2 : 3);
+} }
+function LayoutComponent_Conditional_0_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 0);
+    i0.ɵɵtemplate(1, LayoutComponent_Conditional_0_For_1_Conditional_1_Template, 4, 3, "div", 1);
+    i0.ɵɵrepeaterCreate(2, LayoutComponent_Conditional_0_For_1_For_3_Template, 4, 5, "div", 2, _forTrack0, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r1 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r1 ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(row_r1.cols);
+} }
+function LayoutComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, LayoutComponent_Conditional_0_For_1_Template, 4, 1, "div", 0, i0.ɵɵcomponentInstance().trackItemFn, true);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r2.rows);
+} }
 /**
  * @description Layout component for creating responsive grid layouts in Angular applications.
  * @summary This component provides a flexible grid system that can be configured with dynamic
@@ -5097,22 +5861,210 @@ class LayoutComponent extends NgxBaseComponent {
         this.rows = this._rows;
         this.initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, usesInheritance: true, ngImport: i0, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = function LayoutComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || LayoutComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: LayoutComponent, selectors: [["ngx-decaf-layout"]], inputs: { cols: "cols", rows: "rows", breakpoint: "breakpoint", children: "children" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [[1, "dcf-grid", "dcf-grid-collapse", "dcf-grid-match"], [1, "dcf-width-1-1", "dcf-grid-title"], [3, "class"], [1, "dcf-grid-title"], [3, "tag", "globals"], [3, "listenEvent", "model"], [3, "listenEvent", "tag", "globals"]], template: function LayoutComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, LayoutComponent_Conditional_0_Template, 2, 0);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.initialized ? 0 : -1);
+        } }, dependencies: [ForAngularModule, i3.TranslatePipe, ModelRendererComponent, ComponentRendererComponent], styles: [".dcf-grid[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]:not(.dcf-grid-title)     ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small[_ngcontent-%COMP%]   .dcf-grid-child[_ngcontent-%COMP%]{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse[_ngcontent-%COMP%]   .dcf-grid-child[_ngcontent-%COMP%]{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse[_ngcontent-%COMP%]   .dcf-grid-child[_ngcontent-%COMP%]   ion-card[_ngcontent-%COMP%]{margin-bottom:1.25rem}.dcf-grid-title[_ngcontent-%COMP%]{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [ForAngularModule, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cols: [{
-                type: Input
-            }], rows: [{
-                type: Input
-            }], breakpoint: [{
-                type: Input
-            }], children: [{
-                type: Input
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LayoutComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-layout', imports: [ForAngularModule, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div class=\"dcf-grid dcf-grid-collapse dcf-grid-match\">\n      @if(row) {\n        <div class=\"dcf-width-1-1 dcf-grid-title\">\n          <ion-card class=\"dcf-grid-title\">\n            {{row.title | translate}}\n          </ion-card>\n        </div>\n      }\n      @for (child of row.cols; track trackItemFn($index, child.col); let colIndex = $index) {\n        <div [class]=\"(child.col === cols.length ? 'dcf-width-1-1' : 'dcf-width-'+child.col+'-'+cols.length+'@'+breakpoint)\">\n            <div [class]=\"'dcf-grid-child '+child.col \">\n              @if(child.tag === 'ngx-decaf-crud-form') {\n                <ion-card [class]=\"'dcf-height-1-1 ' + className\">\n                  <ion-card-content>\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                      />\n                    </ion-card-content>\n                  </ion-card>\n              } @else {\n                <ngx-decaf-component-renderer\n                  [tag]=\"child.tag\"\n                  (listenEvent)=\"handleEvent($event)\"\n                  [globals]=\"{props: child.props}\"\n                />\n              }\n            </div>\n        </div>\n      }\n    </div>\n  }\n}\n", styles: [".dcf-grid>div:not(.dcf-grid-title) ::ng-deep ngx-decaf-component-renderer>*>*{height:100%;display:flex;justify-content:center!important;align-items:center!important}.dcf-grid.dcf-grid-small .dcf-grid-child{margin-bottom:2rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child{margin-bottom:1.25rem}.dcf-grid.dcf-grid-collapse .dcf-grid-child ion-card{margin-bottom:1.25rem}.dcf-grid-title{font-size:1.05rem!important;background:none;box-shadow:none;margin-bottom:0;padding-bottom:0;font-weight:600;color:var(--ion-text-color);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
+    }], () => [], { cols: [{
+            type: Input
+        }], rows: [{
+            type: Input
+        }], breakpoint: [{
+            type: Input
+        }], children: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(LayoutComponent, { className: "LayoutComponent", filePath: "components/layout/layout.component.ts", lineNumber: 29 }); })();
 
+const _c0$2 = ["actionMenuComponent"];
+const _c1$2 = [[["", "slot", "end"]]];
+const _c2$1 = ["[slot='end']"];
+const _c3 = () => ["update", "delete"];
+function ListItemComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3)(1, "ion-button", 15);
+    i0.ɵɵelement(2, "ion-icon", 16);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("slot", ctx_r2.iconSlot);
+} }
+function ListItemComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "ion-button", 15);
+    i0.ɵɵelement(2, "ion-icon", 16);
+    i0.ɵɵelementEnd()();
+} }
+function ListItemComponent_Conditional_0_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 17);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("innerHTML", ctx_r2.description, i0.ɵɵsanitizeHtml);
+} }
+function ListItemComponent_Conditional_0_Conditional_10_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 20);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("innerHTML", ctx_r2.info, i0.ɵɵsanitizeHtml);
+} }
+function ListItemComponent_Conditional_0_Conditional_10_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 21);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("innerHTML", ctx_r2.subinfo, i0.ɵɵsanitizeHtml);
+} }
+function ListItemComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div");
+    i0.ɵɵtemplate(2, ListItemComponent_Conditional_0_Conditional_10_span_2_Template, 1, 1, "span", 18)(3, ListItemComponent_Conditional_0_Conditional_10_div_3_Template, 1, 1, "div", 19);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.info);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.subinfo);
+} }
+function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 31);
+} }
+function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ion-icon", 32);
+} }
+function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item", 29);
+    i0.ɵɵlistener("click", function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Template_ion_item_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const operation_r6 = i0.ɵɵnextContext().$implicit; i0.ɵɵnextContext(3); const component_r2 = i0.ɵɵreference(1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleAction(operation_r6, $event, component_r2)); });
+    i0.ɵɵelementStart(1, "ion-avatar", 30);
+    i0.ɵɵtemplate(2, ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Conditional_2_Template, 1, 0, "ion-icon", 31)(3, ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Conditional_3_Template, 1, 0, "ion-icon", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "ion-label", 33);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const operation_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("button", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(operation_r6 === "update" ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 3, operation_r6));
+} }
+function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Conditional_0_Template, 7, 5, "ion-item", 28);
+} if (rf & 2) {
+    const operation_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r2.operations.includes(operation_r6) ? 0 : -1);
+} }
+function ListItemComponent_Conditional_0_Conditional_12_ng_template_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-content", 25)(1, "ion-list", 26)(2, "ion-list-header");
+    i0.ɵɵelement(3, "h4", 27);
+    i0.ɵɵpipe(4, "translate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(5, ListItemComponent_Conditional_0_Conditional_12_ng_template_5_For_6_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind1(4, 1, "actions"), i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(3, _c3));
+} }
+function ListItemComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 12)(1, "ion-button", 22);
+    i0.ɵɵlistener("click", function ListItemComponent_Conditional_0_Conditional_12_Template_ion_button_click_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.presentActionsMenu($event)); });
+    i0.ɵɵelement(2, "ion-icon", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "ion-popover", 24, 1);
+    i0.ɵɵlistener("didDismiss", function ListItemComponent_Conditional_0_Conditional_12_Template_ion_popover_didDismiss_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.actionMenuOpen = false); });
+    i0.ɵɵtemplate(5, ListItemComponent_Conditional_0_Conditional_12_ng_template_5_Template, 7, 4, "ng-template");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("isOpen", ctx_r2.actionMenuOpen);
+} }
+function ListItemComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵprojection(1);
+    i0.ɵɵelementEnd();
+} }
+function ListItemComponent_Conditional_0_Conditional_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item-option", 37);
+    i0.ɵɵlistener("click", function ListItemComponent_Conditional_0_Conditional_14_Conditional_1_Template_ion_item_option_click_0_listener($event) { i0.ɵɵrestoreView(_r8); i0.ɵɵnextContext(2); const component_r2 = i0.ɵɵreference(1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleAction("update", $event, component_r2)); });
+    i0.ɵɵelement(1, "ion-icon", 38);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("expandable", ctx_r2.operations.length === 1);
+} }
+function ListItemComponent_Conditional_0_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item-option", 39);
+    i0.ɵɵlistener("click", function ListItemComponent_Conditional_0_Conditional_14_Conditional_2_Template_ion_item_option_click_0_listener($event) { i0.ɵɵrestoreView(_r9); i0.ɵɵnextContext(2); const component_r2 = i0.ɵɵreference(1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleAction("delete", $event, component_r2)); });
+    i0.ɵɵelement(1, "ion-icon", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("expandable", ctx_r2.operations.length === 1);
+} }
+function ListItemComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item-options", 34);
+    i0.ɵɵlistener("ionSwipe", function ListItemComponent_Conditional_0_Conditional_14_Template_ion_item_options_ionSwipe_0_listener($event) { i0.ɵɵrestoreView(_r7); i0.ɵɵnextContext(); const component_r2 = i0.ɵɵreference(1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.operations.length === 1 ? ctx_r2.handleAction(ctx_r2.operations[0], $event, component_r2) : ""); });
+    i0.ɵɵtemplate(1, ListItemComponent_Conditional_0_Conditional_14_Conditional_1_Template, 2, 1, "ion-item-option", 35)(2, ListItemComponent_Conditional_0_Conditional_14_Conditional_2_Template, 2, 1, "ion-item-option", 36);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r2.operations == null ? null : ctx_r2.operations.includes("update")) ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r2.operations == null ? null : ctx_r2.operations.includes("delete")) ? 2 : -1);
+} }
+function ListItemComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-item-sliding", null, 0)(2, "ion-item", 2);
+    i0.ɵɵlistener("click", function ListItemComponent_Conditional_0_Template_ion_item_click_2_listener($event) { i0.ɵɵrestoreView(_r1); const component_r2 = i0.ɵɵreference(1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r2.operations == null ? null : ctx_r2.operations.includes("read")) ? ctx_r2.handleAction("read", $event, component_r2) : ""); });
+    i0.ɵɵtemplate(3, ListItemComponent_Conditional_0_Conditional_3_Template, 3, 1, "div", 3);
+    i0.ɵɵelementStart(4, "div", 4)(5, "div", 5);
+    i0.ɵɵtemplate(6, ListItemComponent_Conditional_0_Conditional_6_Template, 3, 0, "div", 6);
+    i0.ɵɵelementStart(7, "div", 7);
+    i0.ɵɵelement(8, "ion-label", 8);
+    i0.ɵɵtemplate(9, ListItemComponent_Conditional_0_div_9_Template, 1, 1, "div", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(10, ListItemComponent_Conditional_0_Conditional_10_Template, 4, 2, "div", 10);
+    i0.ɵɵelementStart(11, "div", 11);
+    i0.ɵɵtemplate(12, ListItemComponent_Conditional_0_Conditional_12_Template, 6, 1, "div", 12)(13, ListItemComponent_Conditional_0_Conditional_13_Template, 2, 0, "div", 13);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(14, ListItemComponent_Conditional_0_Conditional_14_Template, 3, 2, "ion-item-options", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r2.className);
+    i0.ɵɵproperty("lines", ctx_r2.lines)("button", ctx_r2.button);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.icon && ctx_r2.lines !== "inset" ? 3 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.icon && ctx_r2.lines === "inset" ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("innerHTML", ctx_r2.uid + " - " + ctx_r2.title, i0.ɵɵsanitizeHtml);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.description);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.info || ctx_r2.subinfo ? 10 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r2.operations.includes("delete") || ctx_r2.operations.includes("update")) && ctx_r2.uid ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.windowWidth > 768 ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.showSlideItems && ctx_r2.uid ? 14 : -1);
+} }
 /**
  * @description A component for displaying a list item with various customization options.
  * @summary The ListItemComponent is an Angular component that extends NgxBaseComponent. It provides a flexible and customizable list item interface with support for icons, buttons, and various text elements. The component also handles actions and navigation based on user interactions.
@@ -5453,57 +6405,95 @@ let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
         this.actionMenuComponent.event = event;
         this.actionMenuOpen = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ListItemComponent, isStandalone: true, selector: "ngx-decaf-list-item", inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:resize": "enableSlideItems($event)" } }, viewQueries: [{ propertyName: "actionMenuComponent", first: true, predicate: ["actionMenuComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-button shape=\"round\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n          </ion-button>\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-button shape=\"round\" fill=\"clear\">\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n          <ion-item-option class=\"delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--ion-color-gray-2)}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--ion-color-gray-2)}ion-item:hover .dcf-info{background:transparent!important}ion-item .dcf-info{min-width:10vw;color:var(--ion-color-gray-6)}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{color:var(--ion-color-gray-8);font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-color-gray-6);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;background:#fff}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: 768px){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--ion-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: 768px){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: 578px){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--ion-color-gray-1) !important}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{transform:scale(.9);background:var(--ion-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--ion-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--ion-color-danger-rgb),.15)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--ion-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--ion-color-primary-rgb),.25)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding[class*=active-slide]{border-color:var(--ion-color-gray-3)}ion-item-sliding ion-item-option{color:var(--ion-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--ion-color-dark-rgb),.15)!important;background:var(--ion-color-gray-3)}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.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: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { 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: IonPopover, selector: "ion-popover" }] }); }
+    static { this.ɵfac = function ListItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListItemComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListItemComponent, selectors: [["ngx-decaf-list-item"]], viewQuery: function ListItemComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0$2, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.actionMenuComponent = _t.first);
+        } }, hostBindings: function ListItemComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function ListItemComponent_resize_HostBindingHandler($event) { return ctx.enableSlideItems($event); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { lines: "lines", item: "item", icon: "icon", iconSlot: "iconSlot", button: "button", title: "title", description: "description", info: "info", subinfo: "subinfo" }, outputs: { clickEvent: "clickEvent" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c2$1, decls: 1, vars: 1, consts: [["component", ""], ["actionMenuComponent", ""], [3, "click", "lines", "button"], [1, "dcf-icon", 3, "slot"], [1, "dcf-width-expand"], ["dcf-grid", "", 1, "dcf-flex", "dcf-flex-middle", "dcf-grid-collapse"], [1, "dcf-icon", "dcf-grid-icon"], [1, "dcf-width-expand@s", "dcf-width-1-1", "dcf-label"], [1, "dcf-item-title", 3, "innerHTML"], ["class", "dcf-description", 3, "innerHTML", 4, "ngIf"], [1, "dcf-width-auto@s", "dcf-width-expand", "dcf-info", "dcf-flex", "dcf-flex-right@s"], [1, "dcf-width-auto", "dcf-flex", "dcf-flex-middle", "dcf-flex-right"], ["id", "dcf-actions", 1, "dcf-visible@m"], ["id", "end"], ["side", "end"], ["shape", "round", "fill", "clear"], ["aria-hidden", "true", "name", "reader-outline", "color", "dark", "size", "default"], [1, "dcf-description", 3, "innerHTML"], [3, "innerHTML", 4, "ngIf"], ["class", "dcf-subinfo dcf-text-truncate", 3, "innerHTML", 4, "ngIf"], [3, "innerHTML"], [1, "dcf-subinfo", "dcf-text-truncate", 3, "innerHTML"], ["shape", "round", "fill", "clear", "color", "primary", 1, "dcf-hidden@m", 3, "click"], ["slot", "icon-only", "aria-hidden", "true", "name", "ellipsis-vertical-outline"], ["side", "bottom", "alignment", "left", 3, "didDismiss", "isOpen"], [1, "ion-padding"], ["lines", "none"], [1, "dcf-text-capitalize", 3, "innerHTML"], [3, "button"], [3, "click", "button"], ["aria-hidden", "true", "slot", "start", 1, "dcf-flex", "dcf-flex-middle"], ["color", "primary", "aria-hidden", "true", "name", "create-outline"], ["color", "danger", "aria-hidden", "true", "name", "trash"], [1, "dcf-text-capitalize"], ["side", "end", 3, "ionSwipe"], [1, "update", 3, "expandable"], [1, "delete", 3, "expandable"], [1, "update", 3, "click", "expandable"], ["aria-hidden", "true", "slot", "icon-only", "name", "create-outline"], [1, "delete", 3, "click", "expandable"], ["aria-hidden", "true", "slot", "icon-only", "name", "trash"]], template: function ListItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef(_c1$2);
+            i0.ɵɵtemplate(0, ListItemComponent_Conditional_0_Template, 15, 12, "ion-item-sliding");
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.title || ctx.description ? 0 : -1);
+        } }, dependencies: [ForAngularModule, i1.IonButton, i1.IonContent, i2.NgIf, i3.TranslatePipe, IonList,
+            IonListHeader,
+            IonItem,
+            IonItemSliding,
+            IonItemOptions,
+            IonItemOption,
+            IonIcon,
+            IonLabel,
+            IonPopover], styles: ["ion-item[_ngcontent-%COMP%]{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--ion-color-gray-2)}ion-item.item-lines-inset[_ngcontent-%COMP%]{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--ion-color-gray-2)}ion-item[_ngcontent-%COMP%]:hover   .dcf-info[_ngcontent-%COMP%]{background:transparent!important}ion-item[_ngcontent-%COMP%]   .dcf-info[_ngcontent-%COMP%]{min-width:10vw;color:var(--ion-color-gray-6)}ion-item[_ngcontent-%COMP%]   .dcf-grid[_ngcontent-%COMP%]{padding:0!important;margin:0!important;min-width:100%!important}ion-item[_ngcontent-%COMP%]   .dcf-item-title[_ngcontent-%COMP%]{color:var(--ion-color-gray-8);font-style:normal;font-weight:700}ion-item[_ngcontent-%COMP%]   .dcf-description[_ngcontent-%COMP%]{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-color-gray-6);font-style:normal;font-weight:400;font-size:.925rem}ion-item[_ngcontent-%COMP%]::part(native){min-width:100%}ion-item[_ngcontent-%COMP%]   [slot=start][_ngcontent-%COMP%]{margin-right:.5rem!important}ion-item[_ngcontent-%COMP%]   [slot=end][_ngcontent-%COMP%]{margin-left:.5rem!important}ion-item[_ngcontent-%COMP%]   .dcf-info[_ngcontent-%COMP%]{font-size:.9rem;background:#fff}ion-item[_ngcontent-%COMP%]   .dcf-info[_ngcontent-%COMP%]   .dcf-subinfo.dcf-line[_ngcontent-%COMP%]{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item[_ngcontent-%COMP%]   .dcf-info[_ngcontent-%COMP%]   .dcf-subinfo.dcf-line[_ngcontent-%COMP%]{display:block;margin-left:0}}ion-item[_ngcontent-%COMP%]   #dcf-actions[_ngcontent-%COMP%]{padding:5px}@media (max-width: 768px){ion-item[_ngcontent-%COMP%]   #dcf-actions[_ngcontent-%COMP%]{display:none;pointer-events:none!important;cursor:text!important}ion-item[_ngcontent-%COMP%]   #dcf-actions[_ngcontent-%COMP%]   *[_ngcontent-%COMP%]{display:none;pointer-events:none!important;cursor:text!important}}ion-item[_ngcontent-%COMP%]   #dcf-actions[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--ion-color-gray-2) !important}ion-item[_ngcontent-%COMP%]   #dcf-actions[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{position:relative;left:-1px}@media (max-width: 768px){ion-item[_ngcontent-%COMP%]   #dcf-end[_ngcontent-%COMP%], ion-item[_ngcontent-%COMP%]   [slot=end][_ngcontent-%COMP%]{display:none!important}}ion-item[_ngcontent-%COMP%]   #dcf-end[_ngcontent-%COMP%]{padding-top:5px;display:flex;align-items:flex-end}ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item[_ngcontent-%COMP%]   .dcf-icon.dcf-grid-icon[_ngcontent-%COMP%]{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: 578px){ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]{align-items:flex-start!important}}ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--ion-color-gray-1) !important}ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{font-size:20px}ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]   ion-avatar[_ngcontent-%COMP%]{transform:scale(.9);background:var(--ion-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item[_ngcontent-%COMP%]   .dcf-icon[_ngcontent-%COMP%]   ion-avatar[_ngcontent-%COMP%]   .dcf-icon-large[_ngcontent-%COMP%]{transform:translateY(5px)}ion-item-sliding[_ngcontent-%COMP%]{box-sizing:border-box}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-delete), ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-update){background:rgba(var(--ion-color-dark-rgb),.25)!important}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-delete)   .dcf-ti[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-delete)   ion-icon[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-update)   .dcf-ti[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]:not(.dcf-update)   ion-icon[_ngcontent-%COMP%]{color:var(--ion-color-gray-7)!important}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-delete[_ngcontent-%COMP%]{background:rgba(var(--ion-color-danger-rgb),.15)!important}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-delete[_ngcontent-%COMP%]   .dcf-ti[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-delete[_ngcontent-%COMP%]   *[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-delete[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{color:var(--ion-color-danger)!important}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-update[_ngcontent-%COMP%]{background:rgba(var(--ion-color-primary-rgb),.25)!important}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-update[_ngcontent-%COMP%]   .dcf-ti[_ngcontent-%COMP%], ion-item-sliding[_ngcontent-%COMP%]   ion-item-option.dcf-update[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%]{color:var(--ion-color-gray-7)!important}ion-item-sliding[class*=active-slide][_ngcontent-%COMP%]{border-color:var(--ion-color-gray-3)}ion-item-sliding[_ngcontent-%COMP%]   ion-item-option[_ngcontent-%COMP%]{color:var(--ion-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--ion-color-dark-rgb),.15)!important;background:var(--ion-color-gray-3)}"] }); }
 };
 ListItemComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], ListItemComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-list-item', standalone: true, imports: [
-                        ForAngularModule,
-                        IonList,
-                        IonListHeader,
-                        IonItem,
-                        IonItemSliding,
-                        IonItemOptions,
-                        IonItemOption,
-                        IonIcon,
-                        IonLabel,
-                        IonButton,
-                        IonContent,
-                        IonPopover
-                    ], template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-button shape=\"round\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n          </ion-button>\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-button shape=\"round\" fill=\"clear\">\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n          <ion-item-option class=\"delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--ion-color-gray-2)}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--ion-color-gray-2)}ion-item:hover .dcf-info{background:transparent!important}ion-item .dcf-info{min-width:10vw;color:var(--ion-color-gray-6)}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{color:var(--ion-color-gray-8);font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-color-gray-6);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;background:#fff}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: 768px){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--ion-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: 768px){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: 578px){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--ion-color-gray-1) !important}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{transform:scale(.9);background:var(--ion-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--ion-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--ion-color-danger-rgb),.15)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--ion-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--ion-color-primary-rgb),.25)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding[class*=active-slide]{border-color:var(--ion-color-gray-3)}ion-item-sliding ion-item-option{color:var(--ion-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--ion-color-dark-rgb),.15)!important;background:var(--ion-color-gray-3)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { actionMenuComponent: [{
-                type: ViewChild,
-                args: ['actionMenuComponent']
-            }], lines: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], iconSlot: [{
-                type: Input
-            }], button: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], subinfo: [{
-                type: Input
-            }], clickEvent: [{
-                type: Output
-            }], enableSlideItems: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListItemComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-list-item', standalone: true, imports: [
+                    ForAngularModule,
+                    IonList,
+                    IonListHeader,
+                    IonItem,
+                    IonItemSliding,
+                    IonItemOptions,
+                    IonItemOption,
+                    IonIcon,
+                    IonLabel,
+                    IonButton,
+                    IonContent,
+                    IonPopover
+                ], template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-button shape=\"round\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n          </ion-button>\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-button shape=\"round\" fill=\"clear\">\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\" color=\"dark\" size=\"default\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            <div *ngIf =\"description\" class=\"dcf-description\" [innerHTML]=\"description\"></div>\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                  <span *ngIf=\"info\" [innerHTML]=\"info\"></span>\n                  <div *ngIf=\"subinfo\" class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                <ion-button class=\"dcf-hidden@m\" shape=\"round\" fill=\"clear\" color=\"primary\" (click)=\"presentActionsMenu($event)\">\n                  <ion-icon slot=\"icon-only\" aria-hidden=\"true\" name=\"ellipsis-vertical-outline\"></ion-icon>\n                </ion-button>\n                <ion-popover\n                  #actionMenuComponent\n                  side=\"bottom\"\n                  alignment=\"left\"\n\n                  [isOpen]=\"actionMenuOpen\"\n                  (didDismiss)=\"actionMenuOpen = false\">\n                  <ng-template>\n                    <ion-content class=\"ion-padding\">\n                      <ion-list lines=\"none\">\n                        <ion-list-header>\n                          <h4 class=\"dcf-text-capitalize\" [innerHTML]=\"'actions' | translate\"></h4>\n                        </ion-list-header>\n                        @for (operation of ['update', 'delete']; track operation) {\n                          @if(operations.includes(operation)) {\n                          <ion-item [button]=\"true\" (click)=\"handleAction(operation, $event, component)\">\n                              <ion-avatar class=\"dcf-flex dcf-flex-middle\" aria-hidden=\"true\" slot=\"start\">\n                                @if(operation === 'update') {\n                                  <ion-icon color=\"primary\" aria-hidden=\"true\" name=\"create-outline\"></ion-icon>\n                                } @else {\n                                  <ion-icon color=\"danger\" aria-hidden=\"true\" name=\"trash\"></ion-icon>\n                                }\n                              </ion-avatar>\n                              <ion-label class=\"dcf-text-capitalize\">{{ operation | translate }}</ion-label>\n                            </ion-item>\n                          }\n                        }\n                      </ion-list>\n                    </ion-content>\n                  </ng-template>\n                </ion-popover>\n              </div>\n            }\n            <!-- @if(operations?.length && uid) {\n              <div class=\"dcf-visible@m\" id=\"dcf-actions\">\n                @if(operations?.includes('update')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"primary\" (click)=\"handleAction('update',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n                  </ion-button>\n                }\n                @if(operations?.includes('delete')) {\n                  <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleAction('delete',  component)\">\n                    <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n                  </ion-button>\n                }\n              </div>\n            } -->\n            @if(windowWidth > 768) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n          <ion-item-option class=\"delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--ion-color-gray-2)}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important;--border-color: var(--ion-color-gray-2)}ion-item:hover .dcf-info{background:transparent!important}ion-item .dcf-info{min-width:10vw;color:var(--ion-color-gray-6)}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{color:var(--ion-color-gray-8);font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ion-color-gray-6);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;background:#fff}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: 768px){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--ion-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: 768px){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: 578px){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-3);--padding-start: 1rem;--padding-end: .85rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;--background: var(--ion-color-gray-1) !important}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{transform:scale(.9);background:var(--ion-color-gray-1);display:flex;justify-content:center;align-items:center;text-align:center;box-sizing:border-box!important}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--ion-color-dark-rgb),.25)!important}ion-item-sliding ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-delete) ion-icon,ion-item-sliding ion-item-option:not(.dcf-update) .dcf-ti,ion-item-sliding ion-item-option:not(.dcf-update) ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--ion-color-danger-rgb),.15)!important}ion-item-sliding ion-item-option.dcf-delete .dcf-ti,ion-item-sliding ion-item-option.dcf-delete *,ion-item-sliding ion-item-option.dcf-delete ion-icon{color:var(--ion-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--ion-color-primary-rgb),.25)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--ion-color-gray-7)!important}ion-item-sliding[class*=active-slide]{border-color:var(--ion-color-gray-3)}ion-item-sliding ion-item-option{color:var(--ion-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--ion-color-dark-rgb),.15)!important;background:var(--ion-color-gray-3)}\n"] }]
+    }], () => [], { actionMenuComponent: [{
+            type: ViewChild,
+            args: ['actionMenuComponent']
+        }], lines: [{
+            type: Input
+        }], item: [{
+            type: Input
+        }], icon: [{
+            type: Input
+        }], iconSlot: [{
+            type: Input
+        }], button: [{
+            type: Input
+        }], title: [{
+            type: Input
+        }], description: [{
+            type: Input
+        }], info: [{
+            type: Input
+        }], subinfo: [{
+            type: Input
+        }], clickEvent: [{
+            type: Output
+        }], enableSlideItems: [{
+            type: HostListener,
+            args: ['window:resize', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListItemComponent, { className: "ListItemComponent", filePath: "components/list-item/list-item.component.ts", lineNumber: 87 }); })();
 
+const _c0$1 = (a0, a1) => ({ value0: a0, value1: a1 });
+const _c1$1 = a0 => ({ "dcf-disabled": a0 });
+const _c2 = (a0, a1) => ({ "dcf-active": a0, "dcf-disabled": a1 });
+function PaginationComponent_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵlistener("click", function PaginationComponent_For_9_Template_div_click_0_listener() { const page_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.navigate(page_r3["index"])); })("keydown.enter", function PaginationComponent_For_9_Template_div_keydown_enter_0_listener() { const page_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.navigate(page_r3["index"])); });
+    i0.ɵɵelementStart(1, "span", 10);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const page_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(2, _c2, ctx_r3.current === page_r3["index"], page_r3["index"] === ctx_r3.ndivl));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(page_r3["text"]);
+} }
 /**
  * @description A pagination component for navigating through multiple pages of content.
  * @summary This component provides a user interface for paginated content navigation,
@@ -5799,23 +6789,47 @@ class PaginationComponent extends NgxBaseComponent {
         if (page !== null && this.current !== page)
             this.handleClick(page > this.current ? 'next' : 'previous', page);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, usesInheritance: true, ngImport: i0, template: " <div id=\"dcf-paginator-container\" class=\"dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination aeon-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [ngClass]=\"{'dcf-disabled': current === 1}\">\n        <ion-icon name=\"chevron-back-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n      @for(page of pages; track page) {\n        <div tabindex=\"0\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [ngClass]=\"{'dcf-active': current === page['index'], 'dcf-disabled': page['index'] === ndivl}\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [ngClass]=\"{'dcf-disabled': current === last}\">\n        <ion-icon name=\"chevron-forward-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:top;color:var(--ion-color-gray-7);font-weight:600;width:36px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem}.dcf-pagination>*:not(.disabled){cursor:pointer}.dcf-pagination>*:hover .page-item{color:var(--ion-color-primary)}.dcf-pagination>* .page-item{color:var(--ion-color-gray-7);font-weight:600}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--ion-color-primary-rgb),.15)}.dcf-pagination>*>*{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--ion-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination>*>:hover{color:var(--ion-color-gray-6);text-decoration:none}.dcf-pagination .dcf-disabled>*{opacity:.5;color:var(--ion-color-gray-6)}.dcf-pagination-resume{color:var(--ion-color-gray-8);margin:1rem 0px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = function PaginationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationComponent, selectors: [["ngx-decaf-pagination"]], inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], decls: 12, vars: 13, consts: [["paginationComponent", ""], ["id", "dcf-paginator-container", 1, "dcf-flex", "dcf-flex-center"], [1, "dcf-width-1-1"], [1, "dcf-pagination-resume", 3, "innerHTML"], [1, "dcf-pagination", "aeon-pagination", "dcf-flex-center"], ["aria-label", "previous", "tabindex", "0", 3, "click", "keydown.enter", "ngClass"], ["name", "chevron-back-outline", "aria-hidden", "true"], ["tabindex", "0", 3, "ngClass"], ["tabindex", "0", 3, "click", "keydown.enter", "ngClass"], ["name", "chevron-forward-outline", "aria-hidden", "true"], [1, "page-item"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+            i0.ɵɵelement(2, "div", 3);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵelementStart(4, "div", 4, 0)(6, "div", 5);
+            i0.ɵɵlistener("click", function PaginationComponent_Template_div_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.previous()); })("keydown.enter", function PaginationComponent_Template_div_keydown_enter_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.previous()); });
+            i0.ɵɵelement(7, "ion-icon", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(8, PaginationComponent_For_9_Template, 3, 5, "div", 7, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(10, "div", 8);
+            i0.ɵɵlistener("click", function PaginationComponent_Template_div_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.next()); })("keydown.enter", function PaginationComponent_Template_div_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.next()); });
+            i0.ɵɵelement(11, "ion-icon", 9);
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("innerHTML", i0.ɵɵpipeBind2(3, 3, ctx.locale + ".resume", i0.ɵɵpureFunction2(6, _c0$1, ctx.current, ctx.last)), i0.ɵɵsanitizeHtml);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c1$1, ctx.current === 1));
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.pages);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c1$1, ctx.current === ctx.last));
+        } }, dependencies: [ForAngularModule, i2.NgClass, i3.TranslatePipe, IonIcon], styles: ["#dcf-paginator-container[_ngcontent-%COMP%]{margin-bottom:1rem}.dcf-pagination[_ngcontent-%COMP%]{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination[_ngcontent-%COMP%]   .page-item[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:top;color:var(--ion-color-gray-7);font-weight:600;width:36px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{flex:none;padding-left:0;position:relative;margin:0px .15rem}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:not(.disabled){cursor:pointer}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]:hover   .page-item[_ngcontent-%COMP%]{color:var(--ion-color-primary)}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]   .page-item[_ngcontent-%COMP%]{color:var(--ion-color-gray-7);font-weight:600}.dcf-pagination[_ngcontent-%COMP%] > *.dcf-active[_ngcontent-%COMP%]   .page-item[_ngcontent-%COMP%]{background:rgba(var(--ion-color-primary-rgb),.15)}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--ion-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination[_ngcontent-%COMP%] > *[_ngcontent-%COMP%] > [_ngcontent-%COMP%]:hover{color:var(--ion-color-gray-6);text-decoration:none}.dcf-pagination[_ngcontent-%COMP%]   .dcf-disabled[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{opacity:.5;color:var(--ion-color-gray-6)}.dcf-pagination-resume[_ngcontent-%COMP%]{color:var(--ion-color-gray-8);margin:1rem 0px;text-align:center}"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-pagination', imports: [
-                        ForAngularModule,
-                        IonIcon
-                    ], standalone: true, template: " <div id=\"dcf-paginator-container\" class=\"dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination aeon-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [ngClass]=\"{'dcf-disabled': current === 1}\">\n        <ion-icon name=\"chevron-back-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n      @for(page of pages; track page) {\n        <div tabindex=\"0\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [ngClass]=\"{'dcf-active': current === page['index'], 'dcf-disabled': page['index'] === ndivl}\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [ngClass]=\"{'dcf-disabled': current === last}\">\n        <ion-icon name=\"chevron-forward-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:top;color:var(--ion-color-gray-7);font-weight:600;width:36px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem}.dcf-pagination>*:not(.disabled){cursor:pointer}.dcf-pagination>*:hover .page-item{color:var(--ion-color-primary)}.dcf-pagination>* .page-item{color:var(--ion-color-gray-7);font-weight:600}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--ion-color-primary-rgb),.15)}.dcf-pagination>*>*{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--ion-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination>*>:hover{color:var(--ion-color-gray-6);text-decoration:none}.dcf-pagination .dcf-disabled>*{opacity:.5;color:var(--ion-color-gray-6)}.dcf-pagination-resume{color:var(--ion-color-gray-8);margin:1rem 0px;text-align:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { totalPages: [{
-                type: Input,
-                args: [{ required: true }]
-            }], current: [{
-                type: Input
-            }], clickEvent: [{
-                type: Output
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-pagination', imports: [
+                    ForAngularModule,
+                    IonIcon
+                ], standalone: true, template: " <div id=\"dcf-paginator-container\" class=\"dcf-flex dcf-flex-center\">\n  <div class=\"dcf-width-1-1\">\n    <div class=\"dcf-pagination-resume\" [innerHTML]=\"locale + '.resume' | translate: {value0: current, value1: last}\"></div>\n    <div #paginationComponent class=\"dcf-pagination aeon-pagination dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [ngClass]=\"{'dcf-disabled': current === 1}\">\n        <ion-icon name=\"chevron-back-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n      @for(page of pages; track page) {\n        <div tabindex=\"0\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [ngClass]=\"{'dcf-active': current === page['index'], 'dcf-disabled': page['index'] === ndivl}\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [ngClass]=\"{'dcf-disabled': current === last}\">\n        <ion-icon name=\"chevron-forward-outline\" aria-hidden=\"true\"></ion-icon>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["#dcf-paginator-container{margin-bottom:1rem}.dcf-pagination{display:flex;flex-wrap:wrap;align-items:center;margin-left:0;padding:0;list-style:none}.dcf-pagination .page-item{display:flex;justify-content:center;align-items:top;color:var(--ion-color-gray-7);font-weight:600;width:36px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem}.dcf-pagination>*:not(.disabled){cursor:pointer}.dcf-pagination>*:hover .page-item{color:var(--ion-color-primary)}.dcf-pagination>* .page-item{color:var(--ion-color-gray-7);font-weight:600}.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--ion-color-primary-rgb),.15)}.dcf-pagination>*>*{display:flex;align-items:center;column-gap:.25em;padding:5px 10px;color:var(--ion-color-gray-8);transition:color .1s ease-in-out}.dcf-pagination>*>:hover{color:var(--ion-color-gray-6);text-decoration:none}.dcf-pagination .dcf-disabled>*{opacity:.5;color:var(--ion-color-gray-6)}.dcf-pagination-resume{color:var(--ion-color-gray-8);margin:1rem 0px;text-align:center}\n"] }]
+    }], () => [], { totalPages: [{
+            type: Input,
+            args: [{ required: true }]
+        }], current: [{
+            type: Input
+        }], clickEvent: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 62 }); })();
 
 var ListComponentsTypes;
 (function (ListComponentsTypes) {
@@ -5823,6 +6837,150 @@ var ListComponentsTypes;
     ListComponentsTypes["PAGINATED"] = "paginated";
 })(ListComponentsTypes || (ListComponentsTypes = {}));
 
+const _c0 = ["*"];
+const _c1 = (a0, a1, a2) => ({ item: a0, mapper: a1, route: a2 });
+function ListComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-refresher", 2);
+    i0.ɵɵlistener("ionRefresh", function ListComponent_Conditional_0_Template_ion_refresher_ionRefresh_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleRefresh($event)); });
+    i0.ɵɵelement(1, "ion-refresher-content");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("pullFactor", 1)("pullMin", 100)("pullMax", 200);
+} }
+function ListComponent_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-filter", 5);
+    i0.ɵɵlistener("filterEvent", function ListComponent_Conditional_1_Conditional_0_Template_ngx_decaf_filter_filterEvent_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleFilter($event)); })("searchEvent", function ListComponent_Conditional_1_Conditional_0_Template_ngx_decaf_filter_searchEvent_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleSearch($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("model", ctx_r1.model)("sortDirection", ctx_r1.sortDirection)("disableSort", ctx_r1.disableSort);
+} }
+function ListComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-searchbar", 6);
+    i0.ɵɵlistener("searchEvent", function ListComponent_Conditional_1_Conditional_1_Template_ngx_decaf_searchbar_searchEvent_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleSearch($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("emitEventToWindow", false)("debounce", 500);
+} }
+function ListComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListComponent_Conditional_1_Conditional_0_Template, 1, 3, "ngx-decaf-filter", 3)(1, ListComponent_Conditional_1_Conditional_1_Template, 1, 2, "ngx-decaf-searchbar", 4);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.model && ctx_r1.enableFilter ? 0 : 1);
+} }
+function ListComponent_Conditional_2_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-component-renderer", 9);
+    i0.ɵɵlistener("listenEvent", function ListComponent_Conditional_2_Conditional_2_For_1_Template_ngx_decaf_component_renderer_listenEvent_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleEvent($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const child_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("tag", ctx_r1.item.tag)("globals", i0.ɵɵpureFunction3(2, _c1, child_r6, ctx_r1.mapper, ctx_r1.route));
+} }
+function ListComponent_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ListComponent_Conditional_2_Conditional_2_For_1_Template, 1, 6, "ngx-decaf-component-renderer", 8, i0.ɵɵcomponentInstance().trackItemFn, true);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.items);
+} }
+function ListComponent_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵprojection(0);
+} }
+function ListComponent_Conditional_2_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ngx-decaf-pagination", 12);
+    i0.ɵɵlistener("clickEvent", function ListComponent_Conditional_2_Conditional_4_Conditional_0_Template_ngx_decaf_pagination_clickEvent_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handlePaginate($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("totalPages", ctx_r1.pages)("current", ctx_r1.page);
+} }
+function ListComponent_Conditional_2_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-infinite-scroll", 13);
+    i0.ɵɵlistener("ionInfinite", function ListComponent_Conditional_2_Conditional_4_Conditional_1_Template_ion_infinite_scroll_ionInfinite_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleRefresh($event)); });
+    i0.ɵɵelement(1, "ion-infinite-scroll-content", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap((ctx_r1.searchValue == null ? null : ctx_r1.searchValue.length) ? "dcf-hidden" : "");
+    i0.ɵɵproperty("position", ctx_r1.scrollPosition)("threshold", ctx_r1.scrollThreshold);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("loadingSpinner", ctx_r1.loadingSpinner)("loadingText", ctx_r1.loadingText);
+} }
+function ListComponent_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListComponent_Conditional_2_Conditional_4_Conditional_0_Template, 1, 2, "ngx-decaf-pagination", 10)(1, ListComponent_Conditional_2_Conditional_4_Conditional_1_Template, 2, 6, "ion-infinite-scroll", 11);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.pages > 0 && ctx_r1.type === "paginated" && !(ctx_r1.searchValue == null ? null : ctx_r1.searchValue.length) ? 0 : 1);
+} }
+function ListComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-list", 7, 0);
+    i0.ɵɵtemplate(2, ListComponent_Conditional_2_Conditional_2_Template, 2, 0)(3, ListComponent_Conditional_2_Conditional_3_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, ListComponent_Conditional_2_Conditional_4_Template, 2, 1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("inset", ctx_r1.inset)("lines", ctx_r1.lines);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r1.item == null ? null : ctx_r1.item.tag) ? 2 : 3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.loadMoreData ? 4 : -1);
+} }
+function ListComponent_Conditional_3_Conditional_0_ion_item_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ion-item")(1, "ion-thumbnail", 16);
+    i0.ɵɵelement(2, "ion-skeleton-text", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "ion-label");
+    i0.ɵɵelement(4, "ion-skeleton-text", 17);
+    i0.ɵɵelementStart(5, "ion-text", 18);
+    i0.ɵɵelement(6, "ion-skeleton-text", 17);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("animated", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("animated", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("animated", true);
+} }
+function ListComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListComponent_Conditional_3_Conditional_0_ion_item_0_Template, 7, 3, "ion-item", 15);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.skeletonData);
+} }
+function ListComponent_Conditional_3_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ngx-decaf-empty-state", 19);
+    i0.ɵɵpipe(1, "translate");
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵpipe(3, "translate");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("title", i0.ɵɵpipeBind1(1, 4, ctx_r1.locale + "." + ctx_r1.empty.title))("subtitle", i0.ɵɵpipeBind1(2, 6, ctx_r1.locale + "." + ctx_r1.empty.subtitle))("buttonText", ctx_r1.empty.showButton ? i0.ɵɵpipeBind1(3, 8, ctx_r1.locale + "." + ctx_r1.empty.button) : "")("buttonLink", ctx_r1.empty.showButton ? ctx_r1.empty.route : "");
+} }
+function ListComponent_Conditional_3_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ngx-decaf-empty-state", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("translatable", true)("searchValue", ctx_r1.searchValue);
+} }
+function ListComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListComponent_Conditional_3_Conditional_1_Conditional_0_Template, 4, 10, "ngx-decaf-empty-state", 19)(1, ListComponent_Conditional_3_Conditional_1_Conditional_1_Template, 1, 2, "ngx-decaf-empty-state", 20);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(!(ctx_r1.searchValue == null ? null : ctx_r1.searchValue.length) ? 0 : 1);
+} }
+function ListComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListComponent_Conditional_3_Conditional_0_Template, 1, 1, "ion-item")(1, ListComponent_Conditional_3_Conditional_1_Template, 2, 1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.refreshing ? 0 : 1);
+} }
 /**
  * @description A versatile list component that supports various data display modes.
  * @summary This component provides a flexible way to display lists of data with support
@@ -6948,93 +8106,118 @@ let ListComponent = class ListComponent extends NgxBaseComponent {
             return accum;
         }, []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", translatable: "translatable", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", emptyIcon: "emptyIcon", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" } }, usesInheritance: true, ngImport: i0, template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [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    <ion-item *ngFor=\"let skl of skeletonData\">\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  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll-content ion-spinner{--color: var(--ion-color-primary)}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: ForAngularModule }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = function ListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent, selectors: [["ngx-decaf-list"]], hostBindings: function ListComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("ListItemClickEvent", function ListComponent_ListItemClickEvent_HostBindingHandler($event) { return ctx.handleClick($event); }, false, i0.ɵɵresolveWindow)("searchbarEvent", function ListComponent_searchbarEvent_HostBindingHandler($event) { return ctx.handleSearch($event); }, false, i0.ɵɵresolveWindow)("BackButtonNavigationEndEvent", function ListComponent_BackButtonNavigationEndEvent_HostBindingHandler($event) { return ctx.refresh($event); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { type: "type", translatable: "translatable", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", emptyIcon: "emptyIcon", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], ngContentSelectors: _c0, decls: 4, vars: 3, consts: [["component", ""], ["slot", "fixed", 3, "pullFactor", "pullMin", "pullMax"], ["slot", "fixed", 3, "ionRefresh", "pullFactor", "pullMin", "pullMax"], [3, "model", "sortDirection", "disableSort"], [3, "emitEventToWindow", "debounce"], [3, "filterEvent", "searchEvent", "model", "sortDirection", "disableSort"], [3, "searchEvent", "emitEventToWindow", "debounce"], [3, "inset", "lines"], [3, "tag", "globals"], [3, "listenEvent", "tag", "globals"], [3, "totalPages", "current"], [3, "class", "position", "threshold"], [3, "clickEvent", "totalPages", "current"], [3, "ionInfinite", "position", "threshold"], [3, "loadingSpinner", "loadingText"], [4, "ngFor", "ngForOf"], ["slot", "start"], [3, "animated"], [1, "date", 2, "width", "20%"], [3, "title", "subtitle", "buttonText", "buttonLink"], ["icon", "search-outline", "ngClass", "empty-search", "title", "search.title", "subtitle", "search.subtitle", 3, "translatable", "searchValue"]], template: function ListComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵtemplate(0, ListComponent_Conditional_0_Template, 2, 3, "ion-refresher", 1)(1, ListComponent_Conditional_1_Template, 2, 1)(2, ListComponent_Conditional_2_Template, 5, 4)(3, ListComponent_Conditional_3_Template, 2, 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.showRefresher ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showSearchbar ? 1 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((ctx.data == null ? null : ctx.data.length) ? 2 : 3);
+        } }, dependencies: [ForAngularModule, i1.IonText, i2.NgClass, i2.NgForOf, i3.TranslatePipe, IonRefresher,
+            PaginationComponent,
+            IonList,
+            IonItem,
+            IonThumbnail,
+            IonSkeletonText,
+            IonLabel,
+            IonRefresherContent,
+            IonInfiniteScroll,
+            IonInfiniteScrollContent,
+            SearchbarComponent,
+            EmptyStateComponent,
+            FilterComponent,
+            ComponentRendererComponent], styles: ["ion-infinite-scroll-content[_ngcontent-%COMP%]   ion-spinner[_ngcontent-%COMP%]{--color: var(--ion-color-primary)}@media (max-width: 768px){#end[_ngcontent-%COMP%], [slot=end][_ngcontent-%COMP%]{display:none!important}}"] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], ListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-list', standalone: true, imports: [
-                        ForAngularModule,
-                        IonRefresher,
-                        IonLoading,
-                        PaginationComponent,
-                        IonList,
-                        IonItem,
-                        IonThumbnail,
-                        IonSkeletonText,
-                        IonLabel,
-                        IonText,
-                        IonRefresherContent,
-                        IonInfiniteScroll,
-                        IonInfiniteScrollContent,
-                        IonThumbnail,
-                        IonSkeletonText,
-                        SearchbarComponent,
-                        EmptyStateComponent,
-                        ListItemComponent,
-                        FilterComponent,
-                        ComponentRendererComponent
-                    ], template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [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    <ion-item *ngFor=\"let skl of skeletonData\">\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  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll-content ion-spinner{--color: var(--ion-color-primary)}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], showSearchbar: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], limit: [{
-                type: Input
-            }], loadMoreData: [{
-                type: Input
-            }], lines: [{
-                type: Input
-            }], inset: [{
-                type: Input
-            }], scrollThreshold: [{
-                type: Input
-            }], scrollPosition: [{
-                type: Input
-            }], loadingText: [{
-                type: Input
-            }], showRefresher: [{
-                type: Input
-            }], loadingSpinner: [{
-                type: Input
-            }], enableFilter: [{
-                type: Input
-            }], sortDirection: [{
-                type: Input
-            }], sortBy: [{
-                type: Input
-            }], disableSort: [{
-                type: Input
-            }], emptyIcon: [{
-                type: Input
-            }], empty: [{
-                type: Input
-            }], refreshEvent: [{
-                type: Output
-            }], clickEvent: [{
-                type: Output
-            }], handleClick: [{
-                type: HostListener,
-                args: ['window:ListItemClickEvent', ['$event']]
-            }], handleSearch: [{
-                type: HostListener,
-                args: ['window:searchbarEvent', ['$event']]
-            }], refresh: [{
-                type: HostListener,
-                args: ['window:BackButtonNavigationEndEvent', ['$event']]
-            }] } });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
+        type: Component,
+        args: [{ selector: 'ngx-decaf-list', standalone: true, imports: [
+                    ForAngularModule,
+                    IonRefresher,
+                    IonLoading,
+                    PaginationComponent,
+                    IonList,
+                    IonItem,
+                    IonThumbnail,
+                    IonSkeletonText,
+                    IonLabel,
+                    IonText,
+                    IonRefresherContent,
+                    IonInfiniteScroll,
+                    IonInfiniteScrollContent,
+                    IonThumbnail,
+                    IonSkeletonText,
+                    SearchbarComponent,
+                    EmptyStateComponent,
+                    ListItemComponent,
+                    FilterComponent,
+                    ComponentRendererComponent
+                ], template: "\n@if(showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if(showSearchbar) {\n  @if(model && enableFilter) {\n    <ngx-decaf-filter\n      [model]=\"model\"\n      [sortDirection]=\"sortDirection\"\n      [disableSort]=\"disableSort\"\n      (filterEvent)=\"handleFilter($event)\"\n      (searchEvent)=\"handleSearch($event)\"\n    />\n  } @else {\n    <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n  }\n}\n\n@if(data?.length) {\n  <ion-list [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n        [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    <ion-item *ngFor=\"let skl of skeletonData\">\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  } @else {\n    @if(!searchValue?.length) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\"\n        [buttonText]=\"empty.showButton ? (locale + '.'+ empty.button | translate) : ''\"\n        [buttonLink]=\"empty.showButton ? empty.route : ''\"\n      />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        ngClass=\"empty-search\"\n        [translatable]=\"true\"\n        title=\"search.title\"\n        subtitle=\"search.subtitle\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll-content ion-spinner{--color: var(--ion-color-primary)}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
+    }], () => [], { type: [{
+            type: Input
+        }], translatable: [{
+            type: Input
+        }], showSearchbar: [{
+            type: Input
+        }], data: [{
+            type: Input
+        }], source: [{
+            type: Input
+        }], start: [{
+            type: Input
+        }], limit: [{
+            type: Input
+        }], loadMoreData: [{
+            type: Input
+        }], lines: [{
+            type: Input
+        }], inset: [{
+            type: Input
+        }], scrollThreshold: [{
+            type: Input
+        }], scrollPosition: [{
+            type: Input
+        }], loadingText: [{
+            type: Input
+        }], showRefresher: [{
+            type: Input
+        }], loadingSpinner: [{
+            type: Input
+        }], enableFilter: [{
+            type: Input
+        }], sortDirection: [{
+            type: Input
+        }], sortBy: [{
+            type: Input
+        }], disableSort: [{
+            type: Input
+        }], emptyIcon: [{
+            type: Input
+        }], empty: [{
+            type: Input
+        }], refreshEvent: [{
+            type: Output
+        }], clickEvent: [{
+            type: Output
+        }], handleClick: [{
+            type: HostListener,
+            args: ['window:ListItemClickEvent', ['$event']]
+        }], handleSearch: [{
+            type: HostListener,
+            args: ['window:searchbarEvent', ['$event']]
+        }], refresh: [{
+            type: HostListener,
+            args: ['window:BackButtonNavigationEndEvent', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListComponent, { className: "ListComponent", filePath: "components/list/list.component.ts", lineNumber: 146 }); })();
 
 const Directives = [CollapsableDirective];
 const Components = [
@@ -7053,43 +8236,44 @@ const Components = [
     FilterComponent
 ];
 class ForAngularComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ForAngularComponentsModule, imports: [ModelRendererComponent,
-            ComponentRendererComponent,
-            CrudFieldComponent,
-            CrudFormComponent,
-            EmptyStateComponent,
-            ListComponent,
-            ListItemComponent,
-            SearchbarComponent,
-            PaginationComponent,
-            CrudFormComponent,
-            FieldsetComponent,
-            LayoutComponent,
-            FilterComponent, CollapsableDirective], exports: [ModelRendererComponent,
-            ComponentRendererComponent,
-            CrudFieldComponent,
-            CrudFormComponent,
-            EmptyStateComponent,
-            ListComponent,
-            ListItemComponent,
-            SearchbarComponent,
-            PaginationComponent,
-            CrudFormComponent,
-            FieldsetComponent,
-            LayoutComponent,
-            FilterComponent, CollapsableDirective, ForAngularModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularComponentsModule, imports: [Components, ForAngularModule] }); }
+    static { this.ɵfac = function ForAngularComponentsModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ForAngularComponentsModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: ForAngularComponentsModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [Components, ForAngularModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Components, Directives],
-                    declarations: [],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    exports: [Components, Directives, ForAngularModule],
-                }]
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ForAngularComponentsModule, [{
+        type: NgModule,
+        args: [{
+                imports: [Components, Directives],
+                declarations: [],
+                schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                exports: [Components, Directives, ForAngularModule],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ForAngularComponentsModule, { imports: [ModelRendererComponent,
+        ComponentRendererComponent,
+        CrudFieldComponent,
+        CrudFormComponent,
+        EmptyStateComponent,
+        ListComponent,
+        ListItemComponent,
+        SearchbarComponent,
+        PaginationComponent,
+        CrudFormComponent,
+        FieldsetComponent,
+        LayoutComponent,
+        FilterComponent, CollapsableDirective], exports: [ModelRendererComponent,
+        ComponentRendererComponent,
+        CrudFieldComponent,
+        CrudFormComponent,
+        EmptyStateComponent,
+        ListComponent,
+        ListItemComponent,
+        SearchbarComponent,
+        PaginationComponent,
+        CrudFormComponent,
+        FieldsetComponent,
+        LayoutComponent,
+        FilterComponent, CollapsableDirective, ForAngularModule] }); })();
 
 // Component exports