@decaf-ts/for-angular 0.0.25 → 0.0.27

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

@@ -11,11 +11,10 @@ import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate
 import { Logging } from '@decaf-ts/logging';
 import { __decorate, __metadata } from 'tslib';
 import { apply, metadata } from '@decaf-ts/reflection';
-import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonIcon, IonButton, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonContent, IonPopover, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonLoading } from '@ionic/angular/standalone';
+import { IonInput, IonItem, IonCheckbox, IonRadioGroup, IonRadio, IonSelect, IonSelectOption, IonLabel, IonText, IonTextarea, IonButton, IonIcon, IonCard, IonCardContent, IonAccordionGroup, IonAccordion, IonList, IonReorder, IonReorderGroup, IonSearchbar, IonChip, IonRefresher, IonThumbnail, IonSkeletonText, IonRefresherContent, IonInfiniteScroll, IonInfiniteScrollContent, IonListHeader, IonItemSliding, IonItemOptions, IonItemOption, IonContent, IonPopover } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import * as allIcons from 'ionicons/icons';
 import { chevronUpOutline, chevronDownOutline, createOutline, alertCircleOutline, chevronForwardOutline, chevronBackOutline, arrowBackOutline, arrowForwardOutline } from 'ionicons/icons';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { forkJoin, fromEvent, debounceTime, Subject, timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
@@ -292,8 +291,19 @@ class ValidatorFactory {
     }
 }
 
+/** */
 const DB_ADAPTER_PROVIDER_TOKEN = new InjectionToken('DB_ADAPTER_PROVIDER');
 const I18N_CONFIG_TOKEN = new InjectionToken('I18N_CONFIG_TOKEN');
+function provideDbAdapter(adapterClass, options = {}) {
+    const adapter = new adapterClass(options);
+    // Log and expose adapter flavour globally
+    getLogger(provideDbAdapter).info(`Using ${adapter.flavour} as Db Provider`);
+    // getWindow()['dbAdapterFlavour'] = adapter.flavour;
+    return {
+        provide: DB_ADAPTER_PROVIDER_TOKEN,
+        useValue: adapter,
+    };
+}
 const ComponentsAndModules = [
     CommonModule,
     FormsModule,
@@ -341,8 +351,8 @@ class ForAngularCommonModule {
             ngModule: ForAngularCommonModule,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -351,7 +361,7 @@ class ForAngularCommonModule {
             ReactiveFormsModule,
             TranslateModule,
             TranslatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularCommonModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
@@ -360,7 +370,7 @@ class ForAngularCommonModule {
             ReactiveFormsModule,
             TranslateModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: ComponentsAndModules,
@@ -875,7 +885,6 @@ class NgxFormService {
      * @memberOf NgxFormService
      */
     static { this.formRegistry = new Map(); }
-    static { this.pageMapper = {}; }
     /**
      * @description Creates a new form group or form array with the specified identifier.
      * @summary Generates a FormGroup or FormArray based on the provided properties. If pages are specified
@@ -2382,10 +2391,10 @@ class ComponentRendererComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", children: "children", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, 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: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\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  @if(children?.length) {\n    @for(child of children; track child) {\n      @if(child.children?.length) {\n      <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n      } @else {\n        <ngx-decaf-component-renderer\n          [tag]=\"child?.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{props: child.props}\" />\n      }\n    }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ComponentRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ComponentRendererComponent, isStandalone: true, selector: "ngx-decaf-component-renderer", inputs: { tag: "tag", globals: "globals", children: "children", model: "model", parent: "parent" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, 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: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\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  @if(children?.length) {\n    @for(child of children; track child) {\n      @if(child.children?.length) {\n      <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n      } @else {\n        <ngx-decaf-component-renderer\n          [tag]=\"child?.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{props: child.props}\" />\n      }\n    }\n  }\n</ng-template>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ComponentRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ComponentRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-component-renderer', imports: [NgComponentOutlet], standalone: true, host: { '[attr.id]': 'uid' }, template: "<!-- Keep to avoid id conflicts -->\n<div [id]=\"uid\"></div>\n\n<ng-template #componentViewContainer></ng-template>\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  @if(children?.length) {\n    @for(child of children; track child) {\n      @if(child.children?.length) {\n      <ngx-decaf-component-renderer [parent]=\"child\"> </ngx-decaf-component-renderer>\n      } @else {\n        <ngx-decaf-component-renderer\n          [tag]=\"child?.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]=\"{props: child.props}\" />\n      }\n    }\n  }\n</ng-template>\n\n\n" }]
         }], ctorParameters: () => [], propDecorators: { vcr: [{
@@ -2660,20 +2669,6 @@ var en = {
 	component: component
 };
 
-class I18nLoader {
-    static loadFromHttp(http) {
-        function getSuffix() {
-            const today = new Date();
-            return `.json?version=${today.getFullYear()}${today.getMonth()}${today.getDay()}`;
-        }
-        return new (class extends TranslateHttpLoader {
-            getTranslation(lang) {
-                const res = super.getTranslation(lang);
-                return res;
-            }
-        })(http, './assets/i18n/', getSuffix());
-    }
-}
 function getLocaleContext(clazz, suffix) {
     return getLocaleFromClassName(clazz, suffix);
 }
@@ -2700,22 +2695,21 @@ function getLocaleContextByKey(locale, phrase) {
     return `${locale}.${cleanSpaces(parts.join('.'), true)}`;
 }
 function I18nLoaderFactory(http) {
-    const { resources, versionedSuffix } = inject(I18N_CONFIG_TOKEN, { optional: true }) ?? getI18nLoaderFactoryProviderConfig().useValue;
-    return new MultiI18nLoader(http, resources, versionedSuffix);
+    const { resources, versionedSuffix } = inject(I18N_CONFIG_TOKEN, { optional: true }) ?? provideI18nLoader().useValue;
+    return new I18nLoader(http, resources?.length ? resources : [{ prefix: './app/assets/i18n/', suffix: '.json' }], versionedSuffix);
 }
-function getI18nLoaderFactoryProviderConfig(resources = [], versionedSuffix = false) {
+function provideI18nLoader(resources = [], versionedSuffix = false) {
     if (!Array.isArray(resources))
         resources = [resources];
     return {
         provide: I18N_CONFIG_TOKEN,
         useValue: { resources: [
-                // { prefix: './assets/i18n/', suffix: '.json' },
                 ...resources
             ], versionedSuffix }
     };
 }
 const libLanguage = { en };
-class MultiI18nLoader {
+class I18nLoader {
     constructor(http, resources = [], versionedSuffix = false) {
         this.http = http;
         this.resources = resources;
@@ -3101,13 +3095,13 @@ let CrudFieldComponent = class CrudFieldComponent extends NgxCrudFormField {
         });
         component.dispatchEvent(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "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 [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\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              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [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              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\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}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-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(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}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(--dcf-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(--dcf-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)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CrudFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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", multiple: "multiple", uid: "uid", page: "page", translatable: "translatable", activeFormGroup: "activeFormGroup", pk: "pk" }, host: { listeners: { "window:fieldsetAddGroupEvent": "handleFieldsetCreateGroupEvent($event)", "window:fieldsetUpdateGroupEvent": "handleFieldsetUpdateGroupEvent($event)", "window:fieldsetRemoveGroupEvent": "handleFieldsetRemoveGroupEvent($event)" }, properties: { "attr.id": "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 [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [id]=\"name\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              [id]=\"name\"\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              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [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                  [id]=\"name\"\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              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [id]=\"name\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.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}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.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(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;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(--dcf-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(--dcf-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)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "compareWith", "errorText", "helperText", "name", "value"] }, { kind: "component", type: IonRadio, selector: "ion-radio", inputs: ["alignment", "color", "disabled", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 CrudFieldComponent = __decorate([
     Dynamic()
 ], CrudFieldComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CrudFieldComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         ReactiveFormsModule,
@@ -3121,9 +3115,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonSelectOption,
                         IonLabel,
                         IonText,
-                        IonTextarea,
-                        IonIcon
-                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, 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 [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              #checkboxElement\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              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [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              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\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}@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}@media (prefers-color-scheme: light){.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-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(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;padding:3px}@media (prefers-color-scheme: light){ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}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(--dcf-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(--dcf-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)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
+                        IonTextarea
+                    ], selector: 'ngx-decaf-crud-field', schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { '[attr.id]': 'uid' }, 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 [formGroup]=\"getActiveFormGroup\">\n    <div #container [class]=\"'dcf-input-item ' + (operation || 'create')\" (createGroupEvent)=\"multiple ? handleFieldsetCreateGroupEvent($event) : ''\">\n        @if(type === 'textarea') {\n          <ion-textarea\n            [id]=\"name\"\n            [mode]=\"mode\"\n            [hidden]=\"hidden\"\n            [autoGrow]=\"true\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [label]=\"label | translate\"\n           #component>\n          </ion-textarea>\n        }\n        @else if(type === 'checkbox') {\n          <ion-item>\n            <ion-checkbox\n              [id]=\"name\"\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              #component>\n              <span [innerHTML]=\"label | translate\"></span>\n            </ion-checkbox>\n          </ion-item>\n        }\n        @else if(type === 'radio') {\n          <ion-radio-group [formControlName]=\"name\" [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                  [id]=\"name\"\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              [id]=\"name\"\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              [mode]=\"mode\"\n              [hidden]=\"hidden\"\n              [labelPlacement]=\"labelPlacement\"\n              [label]=\"translatable ? (label | translate) : label\"\n              [value]=\"value\"\n              [fill]=\"fill\"\n              [placeholder]=\"placeholder | translate\"\n              [formControlName]=\"name\"\n              [errorText]=\"getErrors(container)\"\n              [interface]=\"interface\" #component>\n              @for(option of options; track option.value) {\n                <ion-select-option [value]=\"option.value\">\n                  {{ option.text | translate }}\n                </ion-select-option>\n              }\n            </ion-select>\n        }\n        @else {\n          <ion-input\n            [id]=\"name\"\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]=\"placeholder | translate\"\n            [formControlName]=\"name\"\n            [errorText]=\"getErrors(container)\"\n            [label]=\"label | translate\" #component />\n        }\n    </div>\n  </ng-container>\n}\n\n", styles: ["@media (prefers-color-scheme: light){.dcf-input-item.read ion-label,.dcf-input-item.delete ion-label{color:var(--dcf-color-gray-7)}.dcf-input-item ion-item{--background-hover: var(--dcf-color-primary);--background-focused: var(--dcf-color-primary);--border-color: var(--dcf-color-gray-2)}ion-checkbox::part(container){border:2px solid var(--dcf-color-primary)}}@media (prefers-color-scheme: dark){.dcf-input-item ion-item{--border-color: var(--dcf-color-gray-6)}}.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}.dcf-input-item.read ion-text,.dcf-input-item.delete ion-text{display:block;margin-top:.5rem!important}.dcf-input-item ion-item{--padding-end: 0rem;--padding-start: 0px !important;--padding-top: 0px !important;--background: transparent;--background-hover-opacity: .1;--background-activated-opacity: .15;--background-focused-opacity: .15}.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(--dcf-color-primary);--checkmark-width: 2px}ion-item{--inner-padding-start: .75rem}ion-checkbox::part(container){border-radius:50%;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(--dcf-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(--dcf-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)}}::ng-deep ion-textarea{min-height:80px!important;scrollbar-color:#888 #f0f0f0;scrollbar-width:thin}\n"] }]
         }], propDecorators: { operation: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3743,10 +3736,10 @@ class NgxBaseComponent {
         if (!this.initialized)
             this.initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<div></div>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgxBaseComponent, deps: [{ token: 'instanceToken' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", 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" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: '<div></div>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NgxBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NgxBaseComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -4015,13 +4008,13 @@ let CrudFormComponent = class CrudFormComponent {
             name: EventConstants.SUBMIT,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", modelId: "modelId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, 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 class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", inputs: { model: "model", modelId: "modelId", updateOn: "updateOn", target: "target", method: "method", options: "options", action: "action", operation: "operation", handlers: "handlers", formGroup: "formGroup", childOf: "childOf", rendererId: "rendererId", uid: "uid", allowClear: "allowClear" }, outputs: { submitEvent: "submitEvent" }, host: { properties: { "attr.id": "uid" } }, 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 class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic()
 ], CrudFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CrudFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, 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 class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n      <div>\n        <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{ action ? action : options.buttons.submit.text}}\n        </ion-button>\n      </div>\n      @if(!action) {\n        <div>\n          <ion-button fill=\"clear\" (click)=\"handleReset()\">\n            @if(options.buttons.clear?.icon) {\n              <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n            }\n            Back\n          </ion-button>\n        </div>\n      }\n    </div>\n  </form>\n} @else {\n  <div [class]=\"'dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if(operation === OperationKeys.READ && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if(operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if(options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if(options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if(options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </div>\n}\n\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 768px){.dcf-buttons-container.dcf-flex{flex-direction:row-reverse}}@media (max-width: 767px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}form{padding:2rem 1rem}\n"] }]
         }], propDecorators: { model: [{
@@ -4347,17 +4340,16 @@ 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.14", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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]=\"uid\" [class]=\"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(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: 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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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]=\"uid\" [class]=\"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(--dcf-color-gray-6)!important}ion-card .dcf-isubtitle{font-weight:500!important}\n"], dependencies: [{ kind: "component", type: IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: 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"] }] }); }
 };
 EmptyStateComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], EmptyStateComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-empty-state', standalone: true, imports: [
-                        TranslatePipe,
                         IonCard,
                         IonCardContent,
                         IonIcon
@@ -5001,14 +4993,14 @@ let FieldsetComponent = class FieldsetComponent extends NgxBaseComponent {
         }
         return this.mapper;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", page: "page", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.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;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { name: "name", childOf: "childOf", page: "page", uid: "uid", customTypes: "customTypes", operation: "operation", formGroup: "formGroup", title: "title", description: "description", target: "target", multiple: "multiple", value: "value", handlers: "handlers" }, host: { properties: { "attr.id": "overriode " } }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.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;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], FieldsetComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FieldsetComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'ngx-decaf-fieldset', schemas: [], imports: [
                         TranslatePipe,
@@ -5023,7 +5015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonReorderGroup,
                         IonButton,
                         IonIcon,
-                    ], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}@media (prefers-color-scheme: dark){.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.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;margin:0}@media (prefers-color-scheme: light){.dcf-fieldset ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
+                    ], host: { '[attr.id]': 'overriode ' }, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  (fieldsetRemoveGroupEvent)=\"handleRemoveItem(undefined, $event)\"\n  [class]=\"'dcf-fieldset ' + operation\"\n  #component>\n  <ion-accordion-group [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" (validationErrorEvent)=\"handleValidationError($event)\" #accordionComponent>\n    <ion-accordion value=\"open\">\n      <ion-item slot=\"header\" (click)=\"handleAccordionToggle($event)\">\n        <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n          <div class=\"dcf-width-expand\">\n            <legend>{{ name | translate }}</legend>\n          </div>\n          @if(!isRequired && ['create', 'update'].includes(operation)) {\n            <div class=\"dcf-width-auto dcf-delete\">\n              <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveComponent($event)\">\n                <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n              </ion-button>\n            </div>\n          }\n        </div>\n      </ion-item>\n      <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n        @if(multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(items?.length > 1 && !updatingItem) {\n                    <ion-reorder slot=\"start\">\n                      <ion-icon name=\"swap-vertical-outline\"></ion-icon>\n                    </ion-reorder>\n                  } @else {\n                    <div slot=\"start\">\n                      <ion-icon class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                    </div>\n                  }\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if(item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n                  @if(!updatingItem || updatingItem?.[pk] !== item.title) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem(item.title, $index)\">\n                      <ion-icon name=\"create-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n\n                  @if(!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleRemoveItem(item.title)\">\n                      <ion-icon name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        <ng-content select=\"[slot=content]\"></ng-content>\n\n        @if(multiple && ['create', 'update'].includes(operation)) {\n          @if(isUniqueError) {\n            <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n              <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n                <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                  <ion-icon name=\"alert-circle-outline\"></ion-icon>\n                </div>\n                <div class=\"dcf-width-expand\">\n                  <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n                </div>\n              </div>\n            </div>\n          }\n          <div class=\"dcf-margin-bottom dcf-grid dcf-grid-collapse dcf-flex\">\n            @if(updatingItem) {\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ buttonCancelLabel }}\n              </ion-button>\n            }\n            <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" (click)=\"handleCreateItem()\">\n              <ion-icon name=\"add-outline\" slot=\"start\"></ion-icon>\n              {{buttonLabel}}\n            </ion-button>\n\n          </div>\n        }\n\n      </div>\n    </ion-accordion>\n  </ion-accordion-group>\n</fieldset>\n\n", styles: ["ion-accordion-group ion-item[slot=header] .dcf-delete{width:30px}ion-accordion-group ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion-group ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}::ng-deep ion-accordion ngx-decaf-crud-field:last-child ion-item{--inner-border-width: 0px !important;--border-width: 0px !important}@media (prefers-color-scheme: light){.dcf-fieldset{border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-dark)!important}ion-accordion ion-item[slot=header] legend{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-fieldset{border:1px solid var(--dcf-color-step-400)}.dcf-fieldset .dcf-button-add{color:var(--ion-color-gray-2)}.dcf-fieldset.read,.dcf-fieldset.delete{border:1px solid var(--dcf-color-gray-6)}}.dcf-fieldset{margin-bottom:1.8rem;margin-top:1rem;padding-bottom:0;padding-top:1rem;background:var(--dcf-card-background);border-radius:6px;height:100%}.dcf-fieldset.read,.dcf-fieldset.delete{margin-top:1.25rem;padding-bottom:1rem}.dcf-fieldset.read [slot=content],.dcf-fieldset.delete [slot=content]{padding-top:0!important}.dcf-fieldset.read ion-accordion,.dcf-fieldset.delete ion-accordion{margin-bottom:0rem!important}.dcf-fieldset ion-accordion{background:var(--dcf-card-background);margin-bottom:1rem}.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;margin:0}.dcf-fieldset ion-accordion [slot=content]{padding-top:2rem!important;padding-inline:.75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:1rem;flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{margin-top:-1rem;margin-bottom:1rem;padding:0!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important;border:1px solid transparent;box-sizing:border-box}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:1rem;transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.8rem;color:var(--dcf-color-gray-7)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -5481,10 +5473,10 @@ class SearchbarComponent extends NgxBaseComponent {
     preventChange(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionChange)=\"handleChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SearchbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SearchbarComponent, isStandalone: true, selector: "ngx-decaf-searchbar", inputs: { autocomplete: "autocomplete", autocorrect: "autocorrect", animated: "animated", buttonCancelText: "buttonCancelText", clearIcon: "clearIcon", color: "color", debounce: "debounce", disabled: "disabled", enterkeyhint: "enterkeyhint", inputmode: "inputmode", placeholder: "placeholder", searchIcon: "searchIcon", showCancelButton: "showCancelButton", showClearButton: "showClearButton", spellcheck: "spellcheck", type: "type", value: "value", queryKeys: "queryKeys", isVisible: "isVisible", wrapper: "wrapper", wrapperColor: "wrapperColor", emitEventToWindow: "emitEventToWindow" }, outputs: { searchEvent: "searchEvent" }, host: { listeners: { "window:toggleSearchbarVisibility": "handleToggleVisibility($event)" } }, usesInheritance: true, ngImport: i0, template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionChange)=\"handleChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n", styles: [""], dependencies: [{ kind: "component", type: IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SearchbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-searchbar', standalone: true, imports: [IonSearchbar], template: "<ion-searchbar\n  [id]=\"uid\"\n  ngClass=\"dcf-searchbar\"\n  name=\"search\"\n  mode=\"ios\"\n  (keyup.enter)=\"preventChange($event)\"\n  (ionChange)=\"handleChange($event)\"\n  (ionInput)=\"handleInput($event)\"\n  (ionClear)=\"handleClear()\"\n  [autocomplete]=\"autocomplete\"\n  [showCancelButton]=\"showCancelButton\"\n  [cancelButtonText]=\"buttonCancelText\"\n  [clearIcon]=\"clearIcon\"\n  [color]=\"color\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n  [enterkeyhint]=\"enterkeyhint\"\n  [inputmode]=\"inputmode\"\n  [placeholder]=\"placeholder\"\n  [searchIcon]=\"searchIcon\"\n  [showClearButton]=\"showClearButton\"\n  [spellcheck]=\"spellcheck\"\n  [type]=\"type\"\n  #component\n />\n" }]
         }], ctorParameters: () => [], propDecorators: { autocomplete: [{
@@ -6183,20 +6175,18 @@ let FilterComponent = class FilterComponent extends NgxBaseComponent {
     handleSearch(value) {
         this.searchEvent.emit(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [class.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             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n\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                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [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;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}@media (prefers-color-scheme: light){.dcf-filter ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}}@media (prefers-color-scheme: dark){.dcf-filter ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}@media (prefers-color-scheme: light){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-1)}}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}@media (prefers-color-scheme: light){.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}}@media (prefers-color-scheme: dark){.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}@media (prefers-color-scheme: light){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [class.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             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n\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                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [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: ["@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-input input{color:var(--dcf-color-gray-7)}.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-input input{color:var(--dcf-color-gray-1)}.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}.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;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FilterComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], FilterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-filter', imports: [
                         FormsModule,
                         TranslatePipe,
-                        IonLabel,
-                        IonItem,
                         IonChip,
                         IonIcon,
                         IonButton,
@@ -6204,7 +6194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonSelectOption,
                         IonIcon,
                         SearchbarComponent
-                    ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [class.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             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n\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                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [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;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}@media (prefers-color-scheme: light){.dcf-filter ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}}@media (prefers-color-scheme: dark){.dcf-filter ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}@media (prefers-color-scheme: light){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-7)}}@media (prefers-color-scheme: dark){.dcf-filter .dcf-input input{color:var(--dcf-color-gray-1)}}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}@media (prefers-color-scheme: light){.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}}@media (prefers-color-scheme: dark){.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}@media (prefers-color-scheme: light){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}\n"] }]
+                    ], standalone: true, template: "\n@if(!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-grid\" [class.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             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n\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                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if(filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'medium'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if(windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if(filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if(!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'medium'\" [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: ["@media (prefers-color-scheme: light){.dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-input input{color:var(--dcf-color-gray-7)}.dcf-dropdown{background-color:#fff}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}}@media (prefers-color-scheme: dark){.dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter ::-webkit-input-placeholder,.dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-input input{color:var(--dcf-color-gray-1)}.dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}}.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;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
                 args: ['optionsFilterElement', { read: ElementRef, static: false }]
@@ -6335,10 +6325,10 @@ class ModelRendererComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModelRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", projectable: "projectable", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "rendererId" } }, 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: "  <!-- Keep to avoid id conflicts -->\n  <div [id]=\"rendererId\"></div>\n\n  <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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ModelRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ModelRendererComponent, isStandalone: true, selector: "ngx-decaf-model-renderer", inputs: { model: "model", globals: "globals", projectable: "projectable", rendererId: "rendererId" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "rendererId" } }, 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: "  <!-- Keep to avoid id conflicts -->\n  <div [id]=\"rendererId\"></div>\n\n  <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: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModelRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ModelRendererComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [NgComponentOutlet, ComponentRendererComponent], selector: 'ngx-decaf-model-renderer', host: { '[attr.id]': 'rendererId' }, template: "  <!-- Keep to avoid id conflicts -->\n  <div [id]=\"rendererId\"></div>\n\n  <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: [{
@@ -6488,10 +6478,10 @@ class LayoutComponent extends NgxBaseComponent {
         this.rows = this._rows;
         this.initialized = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 [id]=\"uid\" 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 ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.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(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "projectable", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 [id]=\"uid\" 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 ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.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(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"], dependencies: [{ kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["model", "globals", "projectable", "rendererId"], outputs: ["listenEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "\n@if(initialized) {\n  @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n    <div [id]=\"uid\" 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 ion-card.dcf-height-1-1>ion-card-content{margin-top:2rem}.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(--dcf-color-dark);display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cols: [{
@@ -6505,857 +6495,466 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * @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.
- *
- * @class
- * @extends NgxBaseComponent
- *
- * @param {string} [lines='none'] - Determines the line style of the item. Can be 'inset', 'inseet', or 'none'.
- * @param {Record<string, any>} item - The data item to be displayed in the list item.
- * @param {string} icon - The name of the icon to be displayed.
- * @param {'start' | 'end'} [iconSlot='start'] - The position of the icon within the item.
- * @param {StringOrBoolean} [button=true] - Determines if the item should behave as a button.
- * @param {string} [title] - The main title of the list item.
- * @param {string} [description] - A description for the list item.
- * @param {string} [info] - Additional information for the list item.
- * @param {string} [subinfo] - Sub-information for the list item.
+ * @description A pagination component for navigating through multiple pages of content.
+ * @summary This component provides a user interface for paginated content navigation,
+ * displaying page numbers and navigation controls. It supports customizable page counts,
+ * current page tracking, and emits events when users navigate between pages.
  *
- * @example
- * <ngx-decaf-list-item
- *   [item]="dataItem"
- *   icon="star"
- *   title="Item Title"
- *   description="Item Description"
- *   (clickEvent)="handleItemClick($event)">
- * </ngx-decaf-list-item>
+ * The component intelligently handles large numbers of pages by showing a subset of page
+ * numbers with ellipses to indicate skipped pages, ensuring the UI remains clean and usable
+ * even with many pages.
  *
  * @mermaid
  * sequenceDiagram
- *   participant C as Component
- *   participant V as View
  *   participant U as User
- *   C->>V: Initialize component
- *   V->>U: Display list item
- *   U->>V: Click on item or action
- *   V->>C: Trigger handleAction()
- *   C->>C: Process action
- *   C->>V: Update view or navigate
+ *   participant P as PaginationComponent
+ *   participant E as External Component
+ *
+ *   U->>P: Click page number
+ *   P->>P: navigate(page)
+ *   P->>P: handleClick(direction, page)
+ *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *
+ *   U->>P: Click next button
+ *   P->>P: next()
+ *   P->>P: handleClick('next')
+ *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *
+ *   U->>P: Click previous button
+ *   P->>P: previous()
+ *   P->>P: handleClick('previous')
+ *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *
+ * @example
+ * <ngx-decaf-pagination
+ *   [pages]="10"
+ *   [current]="3"
+ *   (clickEvent)="handlePageChange($event)">
+ * </ngx-decaf-pagination>
+ *
+ * @extends {NgxBaseComponent}
+ * @implements {OnInit}
  */
-let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
+class PaginationComponent extends NgxBaseComponent {
     /**
-     * @description Creates an instance of ListItemComponent.
-     * @summary Initializes a new ListItemComponent by calling the parent class constructor
-     * with the component name for logging and identification purposes. Also registers
-     * all available Ionic icons to ensure they can be displayed in the component.
-     *
-     * @memberOf ListItemComponent
+     * @constructor
+     * @description Initializes a new instance of the PaginationComponent.
+     * Calls the parent constructor with the component name for generate base locale string.
      */
     constructor() {
-        super("ListItemComponent");
-        /**
-         * @description Controls the display of lines around the list item.
-         * @summary Determines how lines are displayed around the list item borders.
-         * 'inset' shows lines with padding, 'full' shows full-width lines, and 'none'
-         * removes all lines. This affects the visual separation between list items.
-         *
-         * @type {'inset' | 'full' | 'none'}
-         * @default 'inset'
-         * @memberOf ListItemComponent
-         */
-        this.lines = 'full';
-        /**
-         * @description Position of the icon within the list item.
-         * @summary Determines whether the icon appears at the start (left in LTR languages)
-         * or end (right in LTR languages) of the list item. This affects the overall
-         * layout and visual hierarchy of the item content.
-         *
-         * @type {'start' | 'end'}
-         * @default 'start'
-         * @memberOf ListItemComponent
-         */
-        this.iconSlot = 'start';
+        super("PaginationComponent");
         /**
-         * @description Controls whether the list item behaves as a clickable button.
-         * @summary When set to true, the list item will have button-like behavior including
-         * hover effects, click handling, and appropriate accessibility attributes.
-         * When false, the item is displayed as static content without interactive behavior.
+         * @description Controls whether the component uses translation services.
+         * @summary When set to true, the component will attempt to use translation services
+         * for any text content. This allows for internationalization of the pagination component.
          *
          * @type {StringOrBoolean}
          * @default true
-         * @memberOf ListItemComponent
-         */
-        this.button = true;
-        /**
-         * @description Event emitter for list item click interactions.
-         * @summary Emits custom events when the list item is clicked or when actions
-         * are performed on it. The emitted event contains information about the action,
-         * the item data, and other relevant context for parent components to handle.
-         *
-         * @type {EventEmitter<ListItemCustomEvent>}
-         * @memberOf ListItemComponent
-         */
-        this.clickEvent = new EventEmitter();
-        /**
-         * @description Flag indicating whether slide items are currently enabled.
-         * @summary Controls the visibility of slide actions based on screen size and
-         * available operations. When true, users can swipe on the item to reveal
-         * action buttons for operations like edit and delete.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberOf ListItemComponent
+         * @memberOf PaginationComponent
          */
-        this.showSlideItems = false;
+        this.translatable = true;
         /**
-         * @description Flag indicating whether the action menu popover is currently open.
-         * @summary Tracks the state of the action menu to prevent multiple instances
-         * from being opened simultaneously and to ensure proper cleanup when actions
-         * are performed. Used for managing the popover lifecycle.
+         * @description The currently active page number.
+         * @summary Specifies which page is currently active or selected. This value is used
+         * to highlight the current page in the UI and as a reference point for navigation.
          *
-         * @type {boolean}
-         * @default false
-         * @memberOf ListItemComponent
+         * @type {number}
+         * @default 1
+         * @memberOf PaginationComponent
          */
-        this.actionMenuOpen = false;
+        this.current = 1;
         /**
-         * @description Angular NavController service for handling navigation.
-         * @summary Injected service that provides methods for programmatic navigation
-         * within the Ionic application. Used for navigating to different routes when
-         * list item actions are performed or when the item itself is clicked.
+         * @description Event emitter for pagination navigation events.
+         * @summary Emits a custom event when users navigate between pages, either by clicking
+         * on page numbers or using the next/previous buttons. The event contains information
+         * about the navigation direction and the target page number.
          *
-         * @private
-         * @type {NavController}
-         * @memberOf ListItemComponent
+         * @type {EventEmitter<PaginationCustomEvent>}
+         * @memberOf PaginationComponent
          */
-        this.navController = inject(NavController);
-        addIcons(allIcons);
+        this.clickEvent = new EventEmitter();
+        addIcons({ chevronBackOutline, chevronForwardOutline });
     }
     /**
-     * @description Initializes the component after Angular first displays the data-bound properties.
-     * @summary Sets up the component by determining slide item visibility, processing boolean inputs,
-     * building CSS class names based on properties, and capturing the current window width.
-     * This method prepares the component for user interaction by ensuring all properties are
-     * properly initialized and responsive behavior is configured.
+     * @description Initializes the component after Angular sets the input properties.
+     * @summary Sets up the component by initializing the locale settings based on the
+     * translatable property, generating the page numbers based on the total pages and
+     * current page, and storing the last page number for boundary checking.
      *
      * @mermaid
      * sequenceDiagram
      *   participant A as Angular Lifecycle
-     *   participant L as ListItemComponent
-     *   participant W as Window
+     *   participant P as PaginationComponent
      *
-     *   A->>L: ngOnInit()
-     *   L->>L: enableSlideItems()
-     *   L->>L: Process button boolean
-     *   L->>L: Build className with flex classes
-     *   alt operations exist
-     *     L->>L: Add 'action' class
-     *   end
-     *   L->>W: getWindowWidth()
-     *   W-->>L: Return current width
-     *   L->>L: Store windowWidth
+     *   A->>P: ngOnInit()
+     *   P->>P: getLocale(translatable)
+     *   P->>P: Set locale
+     *   P->>P: getPages(data, current)
+     *   P->>P: Set pages array
+     *   P->>P: Set last page number
      *
-     * @return {Promise<void>}
-     * @memberOf ListItemComponent
+     * @returns {void}
+     * @memberOf PaginationComponent
      */
-    async ngOnInit() {
-        this.showSlideItems = this.enableSlideItems();
-        this.button = stringToBoolean(this.button);
-        this.className = `${this.className}  dcf-flex dcf-flex-middle grid-item`;
-        if (this.operations?.length)
-            this.className += ` action`;
-        this.windowWidth = getWindowWidth();
+    ngOnInit() {
+        this.locale = this.getLocale(this.translatable);
+        this.pages = this.getPages(this.totalPages, this.current);
+        this.last = this.totalPages;
     }
     /**
-     * @description Handles user interactions and actions performed on the list item.
-     * @summary This method is the central action handler for list item interactions. It manages
-     * event propagation, dismisses open action menus, removes focus traps, and either emits
-     * events for parent components to handle or performs navigation based on the component's
-     * route configuration. This method supports both event-driven and navigation-driven architectures.
+     * @description Handles click events on pagination controls.
+     * @summary Processes user interactions with the pagination component, updating the
+     * current page if specified and emitting an event with navigation details. This method
+     * is called when users click on page numbers or navigation buttons.
      *
-     * @param {CrudOperations} action - The type of CRUD operation being performed
-     * @param {Event} event - The browser event that triggered the action
-     * @param {HTMLElement} [target] - Optional target element for the event
-     * @return {Promise<boolean|void>} A promise that resolves to navigation success or void for events
+     * @param {('next' | 'previous')} direction - The direction of navigation
+     * @param {number} [page] - Optional page number to navigate to directly
+     * @returns {void}
      *
      * @mermaid
      * sequenceDiagram
      *   participant U as User
-     *   participant L as ListItemComponent
-     *   participant P as Parent Component
-     *   participant N as NavController
-     *   participant E as Event System
+     *   participant P as PaginationComponent
+     *   participant E as External Component
      *
-     *   U->>L: Perform action (click/swipe)
-     *   L->>L: stopImmediatePropagation()
-     *   alt actionMenuOpen
-     *     L->>L: Dismiss action menu
-     *   end
-     *   L->>L: removeFocusTrap()
-     *   alt No route configured
-     *     L->>E: windowEventEmitter()
-     *     L->>P: clickEvent.emit()
-     *   else Route configured
-     *     L->>N: redirect(action, uid)
-     *     N-->>L: Return navigation result
+     *   U->>P: Click pagination control
+     *   P->>P: handleClick(direction, page?)
+     *   alt page is provided
+     *     P->>P: Update current page
      *   end
+     *   P->>E: Emit clickEvent with direction and page
      *
-     * @memberOf ListItemComponent
+     * @memberOf PaginationComponent
      */
-    async handleAction(action, event, target) {
-        event.stopImmediatePropagation();
-        if (this.actionMenuOpen)
-            await this.actionMenuComponent.dismiss();
-        // forcing trap focus
-        removeFocusTrap();
-        if (!this.route) {
-            const event = { target: target, action, pk: this.pk, data: this.uid, name: EventConstants.CLICK, component: this.componentName };
-            windowEventEmitter(`ListItem${EventConstants.CLICK}`, event);
-            return this.clickEvent.emit(event);
-        }
-        return await this.redirect(action, (typeof this.uid === 'number' ? `${this.uid}` : this.uid));
+    handleClick(direction, page) {
+        if (page)
+            this.current = page;
+        this.clickEvent.emit({
+            name: EventConstants.CLICK,
+            data: {
+                direction,
+                page: this.current
+            },
+            component: this.componentName
+        });
     }
     /**
-     * @description Responsive handler that enables or disables slide items based on screen size and operations.
-     * @summary This method is automatically called when the window is resized and also during component
-     * initialization. It determines whether slide actions should be available based on the current
-     * window width and the presence of UPDATE or DELETE operations. Slide items are typically hidden
-     * on larger screens where there's space for dedicated action buttons.
+     * @description Generates the array of page objects for display.
+     * @summary Creates an array of page objects based on the total number of pages and
+     * the current page. For small page counts (≤5), all pages are shown. For larger page
+     * counts, a subset is shown with ellipses to indicate skipped pages. This ensures
+     * the pagination UI remains clean and usable even with many pages.
      *
-     * @return {boolean} True if slide items should be shown, false otherwise
+     * @param {number} total - The total number of pages
+     * @param {number} [current] - The current active page (defaults to this.current)
+     * @returns {KeyValue[]} Array of page objects with index and text properties
      *
      * @mermaid
-     * sequenceDiagram
-     *   participant W as Window
-     *   participant L as ListItemComponent
-     *   participant U as UI
+     * flowchart TD
+     *   A[Start] --> B{total <= 5?}
+     *   B -->|Yes| C[Show all pages]
+     *   B -->|No| D[Show first page]
+     *   D --> E[Show last pages]
+     *   E --> F[Add ellipses for skipped pages]
+     *   C --> G[Return pages array]
+     *   F --> G
      *
-     *   W->>L: resize event
-     *   L->>W: getWindowWidth()
-     *   W-->>L: Return current width
-     *   L->>L: Store windowWidth
-     *   alt No operations OR width > 639px
-     *     L->>U: showSlideItems = false
-     *   else Operations include UPDATE/DELETE
-     *     L->>U: showSlideItems = true
-     *   end
-     *   L-->>U: Return showSlideItems value
+     * @memberOf PaginationComponent
+     */
+    getPages(total, current) {
+        if (!current)
+            current = this.current;
+        const pages = [];
+        function getPage(index, text = '', clazz = 'button') {
+            if (pages.some(item => item['index'] === index))
+                return;
+            pages.push({ index, text: index != null ? index.toString().padStart(2, '0') : text, class: clazz });
+        }
+        if (total <= 5) {
+            for (let i = 1; i <= total; i++)
+                getPage(i);
+        }
+        else {
+            // Adiciona os dois primeiros
+            getPage(1);
+            getPage(2);
+            // Adiciona "..." entre os blocos
+            if (current && current > 3)
+                getPage(null, '...');
+            // Adiciona a página atual (se estiver no meio)
+            if (current && current > 2 && current < total - 1)
+                getPage(current);
+            // Adiciona "..." entre os blocos
+            if (current && current < total - 2)
+                getPage(null, '...', 'separator');
+            // Adiciona os dois últimos
+            getPage(total - 1);
+            getPage(total);
+        }
+        return pages;
+    }
+    /**
+     * @description Gets the current active page number.
+     * @summary Returns the current page number that is active in the pagination component.
+     * This method provides a way to access the current page state from outside the component.
      *
-     * @memberOf ListItemComponent
+     * @returns {number} The current page number
+     * @memberOf PaginationComponent
      */
-    enableSlideItems() {
-        this.windowWidth = getWindowWidth();
-        if (!this.operations?.length || this.windowWidth > 639)
-            return this.showSlideItems = false;
-        this.showSlideItems = this.operations.includes(OperationKeys.UPDATE) || this.operations.includes(OperationKeys.DELETE);
-        return this.showSlideItems;
+    getCurrent() {
+        return this.current;
     }
     /**
-     * @description Animates and removes an element from the DOM.
-     * @summary This method applies CSS animation classes to create a smooth fade-out effect
-     * before removing the element from the DOM. The animation enhances user experience by
-     * providing visual feedback when items are deleted or removed from lists. The timing
-     * is coordinated with the CSS animation duration to ensure the element is removed
-     * after the animation completes.
+     * @description Navigates to the next page.
+     * @summary Increments the current page number if not at the last page and triggers
+     * the click event handler with 'next' direction. This method is typically called
+     * when the user clicks on the "next" button in the pagination UI.
      *
-     * @param {HTMLElement} element - The DOM element to animate and remove
-     * @return {void}
+     * @returns {void}
      *
      * @mermaid
      * sequenceDiagram
-     *   participant L as ListItemComponent
-     *   participant E as HTMLElement
-     *   participant D as DOM
+     *   participant U as User
+     *   participant P as PaginationComponent
      *
-     *   L->>E: Add animation classes
-     *   Note over E: uk-animation-fade, uk-animation-medium, uk-animation-reverse
-     *   E->>E: Start fade animation
-     *   L->>L: setTimeout(600ms)
-     *   Note over L: Wait for animation to complete
-     *   L->>D: element.remove()
-     *   D->>D: Remove element from DOM
+     *   U->>P: Click next button
+     *   P->>P: next()
+     *   alt page <= max pages
+     *     P->>P: Increment current page
+     *     P->>P: handleClick('next')
+     *   end
      *
-     * @memberOf ListItemComponent
+     * @memberOf PaginationComponent
      */
-    removeElement(element) {
-        element.classList.add('uk-animation-fade', 'uk-animation-medium', 'uk-animation-reverse');
-        setTimeout(() => { element.remove(); }, 600);
+    next() {
+        const page = this.current + 1;
+        if (page <= Object.keys(this.pages)?.length || 0) {
+            this.current = page;
+            this.handleClick('next');
+        }
     }
     /**
-     * @description Navigates to a new route based on the specified action and item ID.
-     * @summary This method constructs a navigation URL using the component's route configuration,
-     * the specified action, and an item identifier. It uses Ionic's NavController to perform
-     * forward navigation with appropriate animations. This method is typically used for
-     * CRUD operations where each action (create, read, update, delete) has its own route.
+     * @description Navigates to the previous page.
+     * @summary Decrements the current page number if not at the first page and triggers
+     * the click event handler with 'previous' direction. This method is typically called
+     * when the user clicks on the "previous" button in the pagination UI.
      *
-     * @param {string} action - The action to be performed (e.g., 'edit', 'view', 'delete')
-     * @param {string} [id] - The unique identifier of the item to be acted upon
-     * @return {Promise<boolean>} A promise that resolves to true if navigation was successful
+     * @returns {void}
      *
      * @mermaid
      * sequenceDiagram
-     *   participant L as ListItemComponent
-     *   participant N as NavController
-     *   participant R as Router
+     *   participant U as User
+     *   participant P as PaginationComponent
      *
-     *   L->>L: redirect(action, id)
-     *   L->>L: Construct URL: /{route}/{action}/{id}
-     *   L->>N: navigateForward(url)
-     *   N->>R: Navigate to constructed URL
-     *   R-->>N: Return navigation result
-     *   N-->>L: Return boolean success
+     *   U->>P: Click previous button
+     *   P->>P: previous()
+     *   alt page > 0
+     *     P->>P: Decrement current page
+     *     P->>P: handleClick('previous')
+     *   end
      *
-     * @memberOf ListItemComponent
+     * @memberOf PaginationComponent
      */
-    async redirect(action, id) {
-        return await this.navController.navigateForward(`/${this.route}/${action}/${id || this.uid}`);
+    previous() {
+        const page = this.current - 1;
+        if (page > 0) {
+            this.current = page;
+            this.handleClick('previous');
+        }
     }
     /**
-     * @description Presents the actions menu popover for the list item.
-     * @summary This method handles the display of a contextual action menu when triggered by user
-     * interaction (typically a long press or right-click). It stops event propagation to prevent
-     * unwanted side effects, removes any existing focus traps for accessibility, configures the
-     * popover with the triggering event, and opens the action menu. The menu typically contains
-     * available CRUD operations for the item.
+     * @description Navigates to a specific page number.
+     * @summary Updates the current page to the specified page number and triggers
+     * the click event handler with the appropriate direction. This method is typically
+     * called when the user clicks directly on a page number in the pagination UI.
      *
-     * @param {Event} event - The event that triggered the action menu request
-     * @return {void}
+     * @param {number | null} page - The page number to navigate to
+     * @returns {void}
      *
      * @mermaid
      * sequenceDiagram
      *   participant U as User
-     *   participant L as ListItemComponent
-     *   participant P as Popover
-     *   participant A as Accessibility
+     *   participant P as PaginationComponent
      *
-     *   U->>L: Trigger action menu (long press/right-click)
-     *   L->>L: stopImmediatePropagation()
-     *   L->>A: removeFocusTrap()
-     *   L->>P: Set event reference
-     *   L->>L: actionMenuOpen = true
-     *   L->>P: Display popover with actions
+     *   U->>P: Click page number
+     *   P->>P: navigate(page)
+     *   alt page is not null and different from current
+     *     P->>P: Determine direction (next/previous)
+     *     P->>P: handleClick(direction, page)
+     *   end
      *
-     * @memberOf ListItemComponent
+     * @memberOf PaginationComponent
      */
-    presentActionsMenu(event) {
-        event.stopImmediatePropagation();
-        // forcing trap focus
-        removeFocusTrap();
-        this.actionMenuComponent.event = event;
-        this.actionMenuOpen = true;
+    navigate(page) {
+        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.14", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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      [id]=\"uid\"\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-avatar>\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\"></ion-icon>\n          </ion-avatar>\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if(icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            @if(description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if(info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if(info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if(subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <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 > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25}}@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1}}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}@media (prefers-color-scheme: light){ion-item{--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}}@media (prefers-color-scheme: dark){ion-item{--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}@media (prefers-color-scheme: light){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-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(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!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(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!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(--dcf-color-gray-2)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!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(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}\n"], dependencies: [{ kind: "pipe", type: 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: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }] }); }
-};
-ListItemComponent = __decorate([
-    Dynamic(),
-    __metadata("design:paramtypes", [])
-], ListItemComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, usesInheritance: true, ngImport: i0, template: " <div [id]=\"uid\" class=\"dcf-paginator-container 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 dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.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\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.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:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}@media (prefers-color-scheme: light){.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-list-item', standalone: true, imports: [
+            args: [{ selector: 'ngx-decaf-pagination', imports: [
                         TranslatePipe,
-                        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      [id]=\"uid\"\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-avatar>\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\"></ion-icon>\n          </ion-avatar>\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if(icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            @if(description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if(info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if(info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if(subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <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 > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25}}@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1}}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}@media (prefers-color-scheme: light){ion-item{--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}}@media (prefers-color-scheme: dark){ion-item{--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}@media (prefers-color-scheme: light){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}}@media (prefers-color-scheme: dark){ion-item .dcf-icon ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}ion-item-sliding{box-sizing:border-box}@media (prefers-color-scheme: light){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-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(--dcf-color-gray-7)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!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(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item-sliding ion-item-option:not(.dcf-delete),ion-item-sliding ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!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(--dcf-color-gray-2)!important}ion-item-sliding ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!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(--dcf-color-danger)!important}ion-item-sliding ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-sliding ion-item-option.dcf-update .dcf-ti,ion-item-sliding ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}\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: [{
+                        IonIcon
+                    ], standalone: true, template: " <div [id]=\"uid\" class=\"dcf-paginator-container 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 dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.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\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.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:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}@media (prefers-color-scheme: light){.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { totalPages: [{
+                type: Input,
+                args: [{ required: true }]
+            }], current: [{
                 type: Input
             }], clickEvent: [{
                 type: Output
-            }], enableSlideItems: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
             }] } });
 
 /**
- * @description A pagination component for navigating through multiple pages of content.
- * @summary This component provides a user interface for paginated content navigation,
- * displaying page numbers and navigation controls. It supports customizable page counts,
- * current page tracking, and emits events when users navigate between pages.
+ * @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
+ * for infinite scrolling, pagination, searching, and custom item rendering. It can fetch
+ * data from various sources including models, functions, or direct data input.
  *
- * The component intelligently handles large numbers of pages by showing a subset of page
- * numbers with ellipses to indicate skipped pages, ensuring the UI remains clean and usable
- * even with many pages.
+ * The component supports two main display types:
+ * 1. Infinite scrolling - Loads more data as the user scrolls
+ * 2. Pagination - Displays data in pages with navigation controls
+ *
+ * Additional features include:
+ * - Pull-to-refresh functionality
+ * - Search filtering
+ * - Empty state customization
+ * - Custom item rendering
+ * - Event emission for interactions
  *
  * @mermaid
  * sequenceDiagram
  *   participant U as User
- *   participant P as PaginationComponent
- *   participant E as External Component
+ *   participant L as ListComponent
+ *   participant D as Data Source
+ *   participant E as External Components
  *
- *   U->>P: Click page number
- *   P->>P: navigate(page)
- *   P->>P: handleClick(direction, page)
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   U->>L: Initialize component
+ *   L->>L: ngOnInit()
+ *   L->>D: Request initial data
+ *   D-->>L: Return data
+ *   L->>L: Process and display data
  *
- *   U->>P: Click next button
- *   P->>P: next()
- *   P->>P: handleClick('next')
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   alt User scrolls (Infinite mode)
+ *     U->>L: Scroll to bottom
+ *     L->>D: Request more data
+ *     D-->>L: Return additional data
+ *     L->>L: Append to existing data
+ *   else User changes page (Paginated mode)
+ *     U->>L: Click page number
+ *     L->>L: handlePaginate()
+ *     L->>D: Request data for page
+ *     D-->>L: Return page data
+ *     L->>L: Replace displayed data
+ *   end
  *
- *   U->>P: Click previous button
- *   P->>P: previous()
- *   P->>P: handleClick('previous')
- *   P->>E: Emit clickEvent with PaginationCustomEvent
+ *   alt User searches
+ *     U->>L: Enter search term
+ *     L->>L: handleSearch()
+ *     L->>D: Filter data by search term
+ *     D-->>L: Return filtered data
+ *     L->>L: Update displayed data
+ *   end
+ *
+ *   alt User clicks item
+ *     U->>L: Click list item
+ *     L->>L: handleClick()
+ *     L->>E: Emit clickEvent
+ *   end
  *
  * @example
- * <ngx-decaf-pagination
- *   [pages]="10"
- *   [current]="3"
- *   (clickEvent)="handlePageChange($event)">
- * </ngx-decaf-pagination>
+ * <ngx-decaf-list
+ *   [source]="dataSource"
+ *   [limit]="10"
+ *   [type]="'infinite'"
+ *   [showSearchbar]="true"
+ *   (clickEvent)="handleItemClick($event)"
+ *   (refreshEvent)="handleRefresh($event)">
+ * </ngx-decaf-list>
  *
  * @extends {NgxBaseComponent}
  * @implements {OnInit}
  */
-class PaginationComponent extends NgxBaseComponent {
+let ListComponent = class ListComponent extends NgxBaseComponent {
     /**
-     * @constructor
-     * @description Initializes a new instance of the PaginationComponent.
-     * Calls the parent constructor with the component name for generate base locale string.
+     * @description Initializes a new instance of the ListComponent.
+     * @summary Creates a new ListComponent and sets up the base component with the appropriate
+     * component name. This constructor is called when Angular instantiates the component and
+     * before any input properties are set. It passes the component name to the parent class
+     * constructor to enable proper localization and component identification.
+     *
+     * The constructor is intentionally minimal, with most initialization logic deferred to
+     * the ngOnInit lifecycle hook. This follows Angular best practices by keeping the constructor
+     * focused on dependency injection and basic setup, while complex initialization that depends
+     * on input properties is handled in ngOnInit.
+     *
+     * @memberOf ListComponent
      */
     constructor() {
-        super("PaginationComponent");
+        super("ListComponent");
+        /**
+         * @description The display mode for the list component.
+         * @summary Determines how the list data is loaded and displayed. Options include:
+         * - INFINITE: Loads more data as the user scrolls (infinite scrolling)
+         * - PAGINATED: Displays data in pages with navigation controls
+         *
+         * @type {ListComponentsTypes}
+         * @default ListComponentsTypes.INFINITE
+         * @memberOf ListComponent
+         */
+        this.type = ListComponentsTypes.INFINITE;
         /**
          * @description Controls whether the component uses translation services.
          * @summary When set to true, the component will attempt to use translation services
-         * for any text content. This allows for internationalization of the pagination component.
+         * for any text content. This allows for internationalization of the list component.
          *
          * @type {StringOrBoolean}
          * @default true
-         * @memberOf PaginationComponent
+         * @memberOf ListComponent
          */
         this.translatable = true;
         /**
-         * @description The currently active page number.
-         * @summary Specifies which page is currently active or selected. This value is used
-         * to highlight the current page in the UI and as a reference point for navigation.
+         * @description Controls the visibility of the search bar.
+         * @summary When set to true, displays a search bar at the top of the list that allows
+         * users to filter the list items. The search functionality works by filtering the
+         * existing data or by triggering a new data fetch with search parameters.
+         *
+         * @type {StringOrBoolean}
+         * @default true
+         * @memberOf ListComponent
+         */
+        this.showSearchbar = true;
+        /**
+         * @description Direct data input for the list component.
+         * @summary Provides a way to directly pass data to the list component instead of
+         * fetching it from a source. When both data and source are provided, the component
+         * will use the source to fetch data only if the data array is empty.
+         *
+         * @type {KeyValue[] | undefined}
+         * @default undefined
+         * @memberOf ListComponent
+         */
+        this.data = undefined;
+        /**
+         * @description The starting index for data fetching.
+         * @summary Specifies the index from which to start fetching data. This is used
+         * for pagination and infinite scrolling to determine which subset of data to load.
          *
          * @type {number}
-         * @default 1
-         * @memberOf PaginationComponent
+         * @default 0
+         * @memberOf ListComponent
          */
-        this.current = 1;
+        this.start = 0;
         /**
-         * @description Event emitter for pagination navigation events.
-         * @summary Emits a custom event when users navigate between pages, either by clicking
-         * on page numbers or using the next/previous buttons. The event contains information
-         * about the navigation direction and the target page number.
+         * @description The number of items to fetch per page or load operation.
+         * @summary Determines how many items are loaded at once during pagination or
+         * infinite scrolling. This affects the size of data chunks requested from the source.
          *
-         * @type {EventEmitter<PaginationCustomEvent>}
-         * @memberOf PaginationComponent
-         */
-        this.clickEvent = new EventEmitter();
-        addIcons({ chevronBackOutline, chevronForwardOutline });
-    }
-    /**
-     * @description Initializes the component after Angular sets the input properties.
-     * @summary Sets up the component by initializing the locale settings based on the
-     * translatable property, generating the page numbers based on the total pages and
-     * current page, and storing the last page number for boundary checking.
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant P as PaginationComponent
-     *
-     *   A->>P: ngOnInit()
-     *   P->>P: getLocale(translatable)
-     *   P->>P: Set locale
-     *   P->>P: getPages(data, current)
-     *   P->>P: Set pages array
-     *   P->>P: Set last page number
-     *
-     * @returns {void}
-     * @memberOf PaginationComponent
-     */
-    ngOnInit() {
-        this.locale = this.getLocale(this.translatable);
-        this.pages = this.getPages(this.totalPages, this.current);
-        this.last = this.totalPages;
-    }
-    /**
-     * @description Handles click events on pagination controls.
-     * @summary Processes user interactions with the pagination component, updating the
-     * current page if specified and emitting an event with navigation details. This method
-     * is called when users click on page numbers or navigation buttons.
-     *
-     * @param {('next' | 'previous')} direction - The direction of navigation
-     * @param {number} [page] - Optional page number to navigate to directly
-     * @returns {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant U as User
-     *   participant P as PaginationComponent
-     *   participant E as External Component
-     *
-     *   U->>P: Click pagination control
-     *   P->>P: handleClick(direction, page?)
-     *   alt page is provided
-     *     P->>P: Update current page
-     *   end
-     *   P->>E: Emit clickEvent with direction and page
-     *
-     * @memberOf PaginationComponent
-     */
-    handleClick(direction, page) {
-        if (page)
-            this.current = page;
-        this.clickEvent.emit({
-            name: EventConstants.CLICK,
-            data: {
-                direction,
-                page: this.current
-            },
-            component: this.componentName
-        });
-    }
-    /**
-     * @description Generates the array of page objects for display.
-     * @summary Creates an array of page objects based on the total number of pages and
-     * the current page. For small page counts (≤5), all pages are shown. For larger page
-     * counts, a subset is shown with ellipses to indicate skipped pages. This ensures
-     * the pagination UI remains clean and usable even with many pages.
-     *
-     * @param {number} total - The total number of pages
-     * @param {number} [current] - The current active page (defaults to this.current)
-     * @returns {KeyValue[]} Array of page objects with index and text properties
-     *
-     * @mermaid
-     * flowchart TD
-     *   A[Start] --> B{total <= 5?}
-     *   B -->|Yes| C[Show all pages]
-     *   B -->|No| D[Show first page]
-     *   D --> E[Show last pages]
-     *   E --> F[Add ellipses for skipped pages]
-     *   C --> G[Return pages array]
-     *   F --> G
-     *
-     * @memberOf PaginationComponent
-     */
-    getPages(total, current) {
-        if (!current)
-            current = this.current;
-        const pages = [];
-        function getPage(index, text = '', clazz = 'button') {
-            if (pages.some(item => item['index'] === index))
-                return;
-            pages.push({ index, text: index != null ? index.toString().padStart(2, '0') : text, class: clazz });
-        }
-        if (total <= 5) {
-            for (let i = 1; i <= total; i++)
-                getPage(i);
-        }
-        else {
-            // Adiciona os dois primeiros
-            getPage(1);
-            getPage(2);
-            // Adiciona "..." entre os blocos
-            if (current && current > 3)
-                getPage(null, '...');
-            // Adiciona a página atual (se estiver no meio)
-            if (current && current > 2 && current < total - 1)
-                getPage(current);
-            // Adiciona "..." entre os blocos
-            if (current && current < total - 2)
-                getPage(null, '...', 'separator');
-            // Adiciona os dois últimos
-            getPage(total - 1);
-            getPage(total);
-        }
-        return pages;
-    }
-    /**
-     * @description Gets the current active page number.
-     * @summary Returns the current page number that is active in the pagination component.
-     * This method provides a way to access the current page state from outside the component.
-     *
-     * @returns {number} The current page number
-     * @memberOf PaginationComponent
-     */
-    getCurrent() {
-        return this.current;
-    }
-    /**
-     * @description Navigates to the next page.
-     * @summary Increments the current page number if not at the last page and triggers
-     * the click event handler with 'next' direction. This method is typically called
-     * when the user clicks on the "next" button in the pagination UI.
-     *
-     * @returns {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant U as User
-     *   participant P as PaginationComponent
-     *
-     *   U->>P: Click next button
-     *   P->>P: next()
-     *   alt page <= max pages
-     *     P->>P: Increment current page
-     *     P->>P: handleClick('next')
-     *   end
-     *
-     * @memberOf PaginationComponent
-     */
-    next() {
-        const page = this.current + 1;
-        if (page <= Object.keys(this.pages)?.length || 0) {
-            this.current = page;
-            this.handleClick('next');
-        }
-    }
-    /**
-     * @description Navigates to the previous page.
-     * @summary Decrements the current page number if not at the first page and triggers
-     * the click event handler with 'previous' direction. This method is typically called
-     * when the user clicks on the "previous" button in the pagination UI.
-     *
-     * @returns {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant U as User
-     *   participant P as PaginationComponent
-     *
-     *   U->>P: Click previous button
-     *   P->>P: previous()
-     *   alt page > 0
-     *     P->>P: Decrement current page
-     *     P->>P: handleClick('previous')
-     *   end
-     *
-     * @memberOf PaginationComponent
-     */
-    previous() {
-        const page = this.current - 1;
-        if (page > 0) {
-            this.current = page;
-            this.handleClick('previous');
-        }
-    }
-    /**
-     * @description Navigates to a specific page number.
-     * @summary Updates the current page to the specified page number and triggers
-     * the click event handler with the appropriate direction. This method is typically
-     * called when the user clicks directly on a page number in the pagination UI.
-     *
-     * @param {number | null} page - The page number to navigate to
-     * @returns {void}
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant U as User
-     *   participant P as PaginationComponent
-     *
-     *   U->>P: Click page number
-     *   P->>P: navigate(page)
-     *   alt page is not null and different from current
-     *     P->>P: Determine direction (next/previous)
-     *     P->>P: handleClick(direction, page)
-     *   end
-     *
-     * @memberOf PaginationComponent
-     */
-    navigate(page) {
-        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.14", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PaginationComponent, isStandalone: true, selector: "ngx-decaf-pagination", inputs: { totalPages: "totalPages", current: "current" }, outputs: { clickEvent: "clickEvent" }, usesInheritance: true, ngImport: i0, template: " <div [id]=\"uid\" class=\"dcf-paginator-container 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 dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.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\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.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:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}@media (prefers-color-scheme: light){.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PaginationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ngx-decaf-pagination', imports: [
-                        TranslatePipe,
-                        IonIcon
-                    ], standalone: true, template: " <div [id]=\"uid\" class=\"dcf-paginator-container 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 dcf-flex-center\">\n      <div\n        aria-label=\"previous\"\n        tabindex=\"0\"\n        (click)=\"previous()\"\n        (keydown.enter)=\"previous()\" [class.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\" [class]=\"page['class']\" (click)=\"navigate(page['index'])\"\n          (keydown.enter)=\"navigate(page['index'])\"\n          [class.dcf-active]=\"current === page['index']\">\n          <span class=\"page-item\">{{ page['text'] }}</span>\n        </div>\n      }\n      <div\n        tabindex=\"0\" (click)=\"next()\"\n        (keydown.enter)=\"next()\"\n        [class.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:center;text-align:center;font-weight:600;width:34px;line-height:34px;padding:0!important;border-radius:50%;box-sizing:border-box}@media (prefers-color-scheme: dark){.dcf-pagination .page-item{color:var(--dcf-color-gray-3)!important}}@media (prefers-color-scheme: light){.dcf-pagination .page-item{color:var(--dcf-color-gray-7)!important}}.dcf-pagination>*{flex:none;padding-left:0;position:relative;margin:0px .15rem;cursor:pointer}.dcf-pagination>*.dcf-disabled{pointer-events:none;touch-action:none;cursor:text}.dcf-pagination>*.dcf-active{pointer-events:none;touch-action:none}@media (prefers-color-scheme: light){.dcf-pagination>*.dcf-active .page-item{background:rgba(var(--dcf-color-primary-rgb),.15)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){.dcf-pagination>*.dcf-active .page-item{background:var(--dcf-color-gray-7)}.dcf-pagination>*:hover:not(.dcf-active) *{color:var(--dcf-color-primary)!important}}.dcf-pagination-resume{margin:1rem 0px;text-align:center}@media (prefers-color-scheme: light){.dcf-pagination-resume{color:var(--dcf-color-gray-8)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { totalPages: [{
-                type: Input,
-                args: [{ required: true }]
-            }], current: [{
-                type: Input
-            }], clickEvent: [{
-                type: Output
-            }] } });
-
-/**
- * @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
- * for infinite scrolling, pagination, searching, and custom item rendering. It can fetch
- * data from various sources including models, functions, or direct data input.
- *
- * The component supports two main display types:
- * 1. Infinite scrolling - Loads more data as the user scrolls
- * 2. Pagination - Displays data in pages with navigation controls
- *
- * Additional features include:
- * - Pull-to-refresh functionality
- * - Search filtering
- * - Empty state customization
- * - Custom item rendering
- * - Event emission for interactions
- *
- * @mermaid
- * sequenceDiagram
- *   participant U as User
- *   participant L as ListComponent
- *   participant D as Data Source
- *   participant E as External Components
- *
- *   U->>L: Initialize component
- *   L->>L: ngOnInit()
- *   L->>D: Request initial data
- *   D-->>L: Return data
- *   L->>L: Process and display data
- *
- *   alt User scrolls (Infinite mode)
- *     U->>L: Scroll to bottom
- *     L->>D: Request more data
- *     D-->>L: Return additional data
- *     L->>L: Append to existing data
- *   else User changes page (Paginated mode)
- *     U->>L: Click page number
- *     L->>L: handlePaginate()
- *     L->>D: Request data for page
- *     D-->>L: Return page data
- *     L->>L: Replace displayed data
- *   end
- *
- *   alt User searches
- *     U->>L: Enter search term
- *     L->>L: handleSearch()
- *     L->>D: Filter data by search term
- *     D-->>L: Return filtered data
- *     L->>L: Update displayed data
- *   end
- *
- *   alt User clicks item
- *     U->>L: Click list item
- *     L->>L: handleClick()
- *     L->>E: Emit clickEvent
- *   end
- *
- * @example
- * <ngx-decaf-list
- *   [source]="dataSource"
- *   [limit]="10"
- *   [type]="'infinite'"
- *   [showSearchbar]="true"
- *   (clickEvent)="handleItemClick($event)"
- *   (refreshEvent)="handleRefresh($event)">
- * </ngx-decaf-list>
- *
- * @extends {NgxBaseComponent}
- * @implements {OnInit}
- */
-let ListComponent = class ListComponent extends NgxBaseComponent {
-    /**
-     * @description Initializes a new instance of the ListComponent.
-     * @summary Creates a new ListComponent and sets up the base component with the appropriate
-     * component name. This constructor is called when Angular instantiates the component and
-     * before any input properties are set. It passes the component name to the parent class
-     * constructor to enable proper localization and component identification.
-     *
-     * The constructor is intentionally minimal, with most initialization logic deferred to
-     * the ngOnInit lifecycle hook. This follows Angular best practices by keeping the constructor
-     * focused on dependency injection and basic setup, while complex initialization that depends
-     * on input properties is handled in ngOnInit.
-     *
-     * @memberOf ListComponent
-     */
-    constructor() {
-        super("ListComponent");
-        /**
-         * @description The display mode for the list component.
-         * @summary Determines how the list data is loaded and displayed. Options include:
-         * - INFINITE: Loads more data as the user scrolls (infinite scrolling)
-         * - PAGINATED: Displays data in pages with navigation controls
-         *
-         * @type {ListComponentsTypes}
-         * @default ListComponentsTypes.INFINITE
-         * @memberOf ListComponent
-         */
-        this.type = ListComponentsTypes.INFINITE;
-        /**
-         * @description Controls whether the component uses translation services.
-         * @summary When set to true, the component will attempt to use translation services
-         * for any text content. This allows for internationalization of the list component.
-         *
-         * @type {StringOrBoolean}
-         * @default true
-         * @memberOf ListComponent
-         */
-        this.translatable = true;
-        /**
-         * @description Controls the visibility of the search bar.
-         * @summary When set to true, displays a search bar at the top of the list that allows
-         * users to filter the list items. The search functionality works by filtering the
-         * existing data or by triggering a new data fetch with search parameters.
-         *
-         * @type {StringOrBoolean}
-         * @default true
-         * @memberOf ListComponent
-         */
-        this.showSearchbar = true;
-        /**
-         * @description Direct data input for the list component.
-         * @summary Provides a way to directly pass data to the list component instead of
-         * fetching it from a source. When both data and source are provided, the component
-         * will use the source to fetch data only if the data array is empty.
-         *
-         * @type {KeyValue[] | undefined}
-         * @default undefined
-         * @memberOf ListComponent
-         */
-        this.data = undefined;
-        /**
-         * @description The starting index for data fetching.
-         * @summary Specifies the index from which to start fetching data. This is used
-         * for pagination and infinite scrolling to determine which subset of data to load.
-         *
-         * @type {number}
-         * @default 0
-         * @memberOf ListComponent
-         */
-        this.start = 0;
-        /**
-         * @description The number of items to fetch per page or load operation.
-         * @summary Determines how many items are loaded at once during pagination or
-         * infinite scrolling. This affects the size of data chunks requested from the source.
-         *
-         * @type {number}
-         * @default 10
-         * @memberOf ListComponent
+         * @type {number}
+         * @default 10
+         * @memberOf ListComponent
          */
         this.limit = 10;
         /**
@@ -7588,842 +7187,1221 @@ let ListComponent = class ListComponent extends NgxBaseComponent {
          */
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.observerSubjet = new Subject();
-        /**
-         * @description Observer object for repository change notifications.
-         * @summary Implements the Observer interface to receive notifications when the
-         * underlying data repository changes. This enables automatic list updates when
-         * data is created, updated, or deleted through the repository.
-         *
-         * @private
-         * @type {Observer}
-         * @memberOf ListComponent
-         */
+    }
+    /**
+     * @description Initializes the component after Angular sets the input properties.
+     * @summary Sets up the component by initializing event subscriptions, processing boolean
+     * inputs, and loading the initial data. This method prepares the component for user
+     * interaction by ensuring all properties are properly initialized and data is loaded.
+     *
+     * @returns {Promise<void>}
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant L as ListComponent
+     *   participant D as Data Source
+     *
+     *   A->>L: ngOnInit()
+     *   L->>L: Set up click event debouncing
+     *   L->>L: Process boolean inputs
+     *   L->>L: Configure component based on inputs
+     *   L->>L: refresh()
+     *   L->>D: Request initial data
+     *   D-->>L: Return data
+     *   L->>L: Process and display data
+     *   L->>L: Configure empty state if needed
+     *   L->>L: initialize()
+     *
+     * @memberOf ListComponent
+     */
+    async ngOnInit() {
         this.observer = { refresh: async (...args) => this.observeRepository(...args) };
+        this.clickItemSubject.pipe(debounceTime(100)).subscribe(event => this.clickEventEmit(event));
+        this.observerSubjet.pipe(debounceTime(100)).subscribe(args => this.handleObserveEvent(args[0], args[1], args[2]));
+        this.enableFilter = stringToBoolean(this.enableFilter);
+        this.limit = Number(this.limit);
+        this.start = Number(this.start);
+        this.inset = stringToBoolean(this.inset);
+        this.showRefresher = stringToBoolean(this.showRefresher);
+        this.loadMoreData = stringToBoolean(this.loadMoreData);
+        this.showSearchbar = stringToBoolean(this.showSearchbar);
+        this.disableSort = stringToBoolean(this.disableSort);
+        if (typeof this.item?.['tag'] === 'boolean' && this.item?.['tag'] === true)
+            this.item['tag'] = ComponentsTagNames.LIST_ITEM;
+        await this.refresh();
+        if (this.operations.includes(OperationKeys.CREATE) && this.route)
+            this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
+        await this.initialize();
+        if (this.model instanceof Model && this._repository)
+            this._repository.observe(this.observer);
+    }
+    /**
+     * @description Cleans up resources when the component is destroyed.
+     * @summary Performs cleanup operations when the component is being removed from the DOM.
+     * This includes clearing references to models and data to prevent memory leaks.
+     *
+     * @returns {void}
+     * @memberOf ListComponent
+     */
+    ngOnDestroy() {
+        if (this._repository)
+            this._repository.unObserve(this.observer);
+        this.data = this.model = this._repository = this.paginator = undefined;
+    }
+    /**
+     * @description Handles repository observation events with debouncing.
+     * @summary Processes repository change notifications and routes them appropriately.
+     * For CREATE events with a UID, handles them immediately. For other events,
+     * passes them to the debounced observer subject to prevent excessive updates.
+     *
+     * @param {...unknown[]} args - The repository event arguments including table, event type, and UID
+     * @returns {Promise<void>}
+     * @memberOf ListComponent
+     */
+    async observeRepository(...args) {
+        const [table, event, uid] = args;
+        if (event === OperationKeys.CREATE && !!uid)
+            return this.handleObserveEvent(table, event, uid);
+        return this.observerSubjet.next(args);
+    }
+    /**
+     * @description Handles specific repository events and updates the list accordingly.
+     * @summary Processes repository change events (CREATE, UPDATE, DELETE) and performs
+     * the appropriate list operations. This includes adding new items, updating existing
+     * ones, or removing deleted items from the list display.
+     *
+     * @param {string} table - The table/model name that changed
+     * @param {OperationKeys} event - The type of operation (CREATE, UPDATE, DELETE)
+     * @param {string | number} uid - The unique identifier of the affected item
+     * @returns {Promise<void>}
+     * @memberOf ListComponent
+     */
+    async handleObserveEvent(table, event, uid) {
+        if (event === OperationKeys.CREATE) {
+            if (uid) {
+                await this.handleCreate(uid);
+            }
+            else {
+                await this.refresh(true);
+            }
+        }
+        else {
+            if (event === OperationKeys.UPDATE)
+                await this.handleUpdate(uid);
+            if (event === OperationKeys.DELETE)
+                this.handleDelete(uid);
+            this.refreshEventEmit();
+        }
+    }
+    /**
+     * @description Function for tracking items in the list.
+     * @summary Provides a tracking function for the `*ngFor` directive in the component template.
+     * This function is used to identify and control the rendering of items in the list,
+     * preventing duplicate or unnecessary rendering.
+     *
+     * The `trackItemFn` function takes two parameters: `index` (the index of the item in the list)
+     * and `item` (the actual item from the list). It returns the tracking key, which in this case
+     * is the union of the `uid` of the item with the model name.
+     *
+     * @param {number} index - The index of the item in the list.
+  
+     * @param {KeyValue | string | number} item - The actual item from the list.
+     * @returns {string | number} The tracking key for the item.
+     * @memberOf ListComponent
+     */
+    trackItemFn(index, item) {
+        return `${item?.['uid'] || item?.[this.pk]}-${index}`;
+    }
+    /**
+     * Handles the create event from the repository.
+     *
+     * @param {string | number} uid - The ID of the item to create.
+     * @returns {Promise<void>} A promise that resolves when the item is created and added to the list.
+     */
+    async handleCreate(uid) {
+        const result = await this._repository?.read(uid);
+        const item = this.mapResults([result])[0];
+        this.items = this.data = [item, ...this.items || []];
+    }
+    /**
+     * @description Handles the update event from the repository.
+     * @summary Updates the list item with the specified ID based on the new data.
+     *
+     * @param {string | number} uid - The ID of the item to update
+     * @returns {Promise<void>}
+     * @private
+     * @memberOf ListComponent
+     */
+    async handleUpdate(uid) {
+        const item = this.itemMapper(await this._repository?.read(uid) || {}, this.mapper);
+        this.data = [];
+        for (const key in this.items) {
+            const child = this.items[key];
+            if (child['uid'] === item['uid']) {
+                this.items[key] = Object.assign({}, child, item);
+                break;
+            }
+        }
+        setTimeout(() => {
+            this.data = [...this.items];
+        }, 0);
+    }
+    /**
+     * @description Removes an item from the list by ID.
+     * @summary Filters out an item with the specified ID from the data array and
+     * refreshes the list display. This is typically used after a delete operation.
+     *
+     * @param {string} uid - The ID of the item to delete
+     * @param {string} pk - The primary key field name
+     * @returns {Promise<void>}
+     *
+     * @memberOf ListComponent
+     */
+    handleDelete(uid, pk) {
+        if (!pk)
+            pk = this.pk;
+        this.items = this.data?.filter((item) => item['uid'] !== uid) || [];
+    }
+    /**
+     * @description Handles click events from list items.
+     * @summary Listens for global ListItemClickEvent events and passes them to the
+     * debounced click subject. This allows the component to respond to clicks on
+     * list items regardless of where they originate from.
+     *
+     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
+     * @returns {void}
+     *
+     * @memberOf ListComponent
+     */
+    handleClick(event) {
+        this.clickItemSubject.next(event);
     }
     /**
-     * @description Initializes the component after Angular sets the input properties.
-     * @summary Sets up the component by initializing event subscriptions, processing boolean
-     * inputs, and loading the initial data. This method prepares the component for user
-     * interaction by ensuring all properties are properly initialized and data is loaded.
+     * @description Handles search events from the search bar.
+     * @summary Processes search queries from the search bar component, updating the
+     * displayed data based on the search term. The behavior differs between infinite
+     * and paginated modes to provide the best user experience for each mode.
      *
+     * @param {string | undefined} value - The search term or undefined to clear search
      * @returns {Promise<void>}
      *
      * @mermaid
-     * sequenceDiagram
-     *   participant A as Angular Lifecycle
-     *   participant L as ListComponent
-     *   participant D as Data Source
+     * flowchart TD
+     *   A[Search Event] --> B{Type is Infinite?}
+     *   B -->|Yes| C[Disable loadMoreData]
+     *   B -->|No| D[Enable loadMoreData]
+     *   C --> E{Search value undefined?}
+     *   E -->|Yes| F[Enable loadMoreData]
+     *   E -->|No| G[Store search value]
+     *   D --> G
+     *   F --> H[Reset page to 1]
+     *   G --> I[Refresh data]
+     *   H --> I
      *
-     *   A->>L: ngOnInit()
-     *   L->>L: Set up click event debouncing
-     *   L->>L: Process boolean inputs
-     *   L->>L: Configure component based on inputs
-     *   L->>L: refresh()
-     *   L->>D: Request initial data
-     *   D-->>L: Return data
-     *   L->>L: Process and display data
-     *   L->>L: Configure empty state if needed
-     *   L->>L: initialize()
+     * @memberOf ListComponent
+     */
+    async handleSearch(value) {
+        if (this.type === ListComponentsTypes.INFINITE) {
+            this.loadMoreData = false;
+            if (value === undefined) {
+                this.loadMoreData = true;
+                this.page = 1;
+            }
+            this.searchValue = value;
+            await this.refresh(true);
+        }
+        else {
+            this.loadMoreData = true;
+            this.searchValue = value;
+            if (value === undefined)
+                this.page = this.lastPage;
+            await this.refresh(true);
+        }
+    }
+    /**
+     * @description Handles filter events from the filter component.
+     * @summary Processes filter queries from the filter component and applies them
+     * to the list data. This method acts as a bridge between the filter component
+     * and the search functionality, converting filter queries into search operations.
+     *
+     * @param {IFilterQuery | undefined} value - The filter query object or undefined to clear filters
+     * @returns {Promise<void>}
+     * @memberOf ListComponent
+     */
+    async handleFilter(value) {
+        await this.handleSearch(value);
+    }
+    /**
+     * @description Clears the current search and resets the list.
+     * @summary Convenience method that clears the search by calling handleSearch
+     * with undefined. This resets the list to show all data without filtering.
      *
+     * @returns {Promise<void>}
      * @memberOf ListComponent
      */
-    async ngOnInit() {
-        this.clickItemSubject.pipe(debounceTime(100)).subscribe(event => this.clickEventEmit(event));
-        this.observerSubjet.pipe(debounceTime(100)).subscribe(args => this.handleObserveEvent(args[0], args[1], args[2]));
-        this.enableFilter = stringToBoolean(this.enableFilter);
-        this.limit = Number(this.limit);
-        this.start = Number(this.start);
-        this.inset = stringToBoolean(this.inset);
-        this.showRefresher = stringToBoolean(this.showRefresher);
-        this.loadMoreData = stringToBoolean(this.loadMoreData);
-        this.showSearchbar = stringToBoolean(this.showSearchbar);
-        this.disableSort = stringToBoolean(this.disableSort);
-        if (typeof this.item?.['tag'] === 'boolean' && this.item?.['tag'] === true)
-            this.item['tag'] = ComponentsTagNames.LIST_ITEM;
-        await this.refresh();
-        if (this.operations.includes(OperationKeys.CREATE) && this.route)
-            this.empty.link = `${this.route}/${OperationKeys.CREATE}`;
-        await this.initialize();
-        if (this.model instanceof Model && this._repository)
-            this._repository.observe(this.observer);
+    async clearSearch() {
+        await this.handleSearch(undefined);
     }
     /**
-     * @description Cleans up resources when the component is destroyed.
-     * @summary Performs cleanup operations when the component is being removed from the DOM.
-     * This includes clearing references to models and data to prevent memory leaks.
+     * @description Emits a refresh event with the current data.
+     * @summary Creates and emits a refresh event containing the current list data.
+     * This notifies parent components that the list data has been refreshed.
      *
+     * @param {KeyValue[]} [data] - Optional data to include in the event
      * @returns {void}
+     *
      * @memberOf ListComponent
      */
-    ngOnDestroy() {
-        if (this._repository)
-            this._repository.unObserve(this.observer);
-        this.data = this.model = this._repository = this.paginator = undefined;
+    refreshEventEmit(data) {
+        if (!data)
+            data = this.items;
+        this.skeletonData = new Array(data?.length || 2);
+        this.refreshEvent.emit({
+            name: EventConstants.REFRESH,
+            data: data || [],
+            component: this.componentName
+        });
     }
     /**
-     * @description Handles repository observation events with debouncing.
-     * @summary Processes repository change notifications and routes them appropriately.
-     * For CREATE events with a UID, handles them immediately. For other events,
-     * passes them to the debounced observer subject to prevent excessive updates.
+     * @description Emits a click event for a list item.
+     * @summary Processes and emits a click event when a list item is clicked.
+     * This extracts the relevant data from the event and passes it to parent components.
+     *
+     * @private
+     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
+     * @returns {void}
      *
-     * @param {...unknown[]} args - The repository event arguments including table, event type, and UID
-     * @returns {Promise<void>}
      * @memberOf ListComponent
      */
-    async observeRepository(...args) {
-        const [table, event, uid] = args;
-        if (event === OperationKeys.CREATE && !!uid)
-            return this.handleObserveEvent(table, event, uid);
-        return this.observerSubjet.next(args);
+    clickEventEmit(event) {
+        this.clickEvent.emit(event);
     }
     /**
-     * @description Handles specific repository events and updates the list accordingly.
-     * @summary Processes repository change events (CREATE, UPDATE, DELETE) and performs
-     * the appropriate list operations. This includes adding new items, updating existing
-     * ones, or removing deleted items from the list display.
+     * @description Refreshes the list data from the configured source.
+     * @summary This method handles both initial data loading and subsequent refresh operations,
+     * including pull-to-refresh and infinite scrolling. It manages the data fetching process,
+     * updates the component's state, and handles pagination or infinite scrolling logic based
+     * on the component's configuration.
+     *
+     * The method performs the following steps:
+     * 1. Sets the refreshing flag to indicate a data fetch is in progress
+     * 2. Calculates the appropriate start and limit values based on pagination settings
+     * 3. Fetches data from the appropriate source (model or request)
+     * 4. Updates the component's data and emits a refresh event
+     * 5. Handles pagination or infinite scrolling state updates
+     * 6. Completes any provided event (like InfiniteScrollCustomEvent)
+     *
+     * @param {InfiniteScrollCustomEvent | RefresherCustomEvent | boolean} event - The event that triggered the refresh,
+     * or a boolean flag indicating if this is a forced refresh
+     * @returns {Promise<void>} A promise that resolves when the refresh operation is complete
+     *
+     * @mermaid
+     * sequenceDiagram
+     *   participant L as ListComponent
+     *   participant D as Data Source
+     *   participant E as Event System
+     *
+     *   L->>L: refresh(event)
+     *   L->>L: Set refreshing flag
+     *   L->>L: Calculate start and limit
+     *   alt Using model
+     *     L->>D: getFromModel(force, start, limit)
+     *     D-->>L: Return data
+     *   else Using request
+     *     L->>D: getFromRequest(force, start, limit)
+     *     D-->>L: Return data
+     *   end
+     *   L->>E: refreshEventEmit()
+     *   alt Infinite scrolling mode
+     *     L->>L: Check if reached last page
+     *     alt Last page reached
+     *       L->>L: Complete scroll event
+     *       L->>L: Disable loadMoreData
+     *     else More pages available
+     *       L->>L: Increment page number
+     *       L->>L: Complete scroll event after delay
+     *     end
+     *   else Paginated mode
+     *     L->>L: Clear refreshing flag after delay
+     *   end
      *
-     * @param {string} table - The table/model name that changed
-     * @param {OperationKeys} event - The type of operation (CREATE, UPDATE, DELETE)
-     * @param {string | number} uid - The unique identifier of the affected item
-     * @returns {Promise<void>}
      * @memberOf ListComponent
      */
-    async handleObserveEvent(table, event, uid) {
-        if (event === OperationKeys.CREATE) {
-            if (uid) {
-                await this.handleCreate(uid);
+    async refresh(event = false) {
+        //  if(typeof force !== 'boolean' && force.type === EventConstants.BACK_BUTTON_NAVIGATION) {
+        //    const {refresh} = (force as CustomEvent).detail;
+        //    if(!refresh)
+        //      return false;
+        //  }
+        this.refreshing = true;
+        const start = this.page > 1 ? (this.page - 1) * this.limit : this.start;
+        const limit = (this.page * (this.limit > 12 ? 12 : this.limit));
+        this.data = !this.model ?
+            await this.getFromRequest(!!event, start, limit)
+            : await this.getFromModel(!!event);
+        this.refreshEventEmit();
+        if (this.type === ListComponentsTypes.INFINITE) {
+            if (this.page === this.pages) {
+                if (event?.target)
+                    event.target.complete();
+                this.loadMoreData = false;
             }
             else {
-                await this.refresh(true);
+                this.page += 1;
+                this.refreshing = false;
+                setTimeout(() => {
+                    if (event?.target && event?.type !== EventConstants.BACK_BUTTON_NAVIGATION)
+                        event.target.complete();
+                }, 200);
             }
         }
         else {
-            if (event === OperationKeys.UPDATE)
-                await this.handleUpdate(uid);
-            if (event === OperationKeys.DELETE)
-                this.handleDelete(uid);
-            this.refreshEventEmit();
+            setTimeout(() => {
+                this.refreshing = false;
+            }, 200);
         }
     }
     /**
-     * @description Function for tracking items in the list.
-     * @summary Provides a tracking function for the `*ngFor` directive in the component template.
-     * This function is used to identify and control the rendering of items in the list,
-     * preventing duplicate or unnecessary rendering.
-     *
-     * The `trackItemFn` function takes two parameters: `index` (the index of the item in the list)
-     * and `item` (the actual item from the list). It returns the tracking key, which in this case
-     * is the union of the `uid` of the item with the model name.
-     *
-     * @param {number} index - The index of the item in the list.
-  
-     * @param {KeyValue | string | number} item - The actual item from the list.
-     * @returns {string | number} The tracking key for the item.
-     * @memberOf ListComponent
-     */
-    trackItemFn(index, item) {
-        return `${item?.['uid'] || item?.[this.pk]}-${index}`;
+   * @description Handles pagination events from the pagination component.
+   * @summary Processes pagination events by updating the current page number and
+   * refreshing the list data to display the selected page. This method is called
+   * when a user interacts with the pagination controls to navigate between pages.
+   *
+   * @param {PaginationCustomEvent} event - The pagination event containing page information
+   * @returns {void}
+   *
+   * @memberOf ListComponent
+   */
+    handlePaginate(event) {
+        const { page } = event.data;
+        this.page = page;
+        this.refresh(true);
     }
     /**
-     * Handles the create event from the repository.
+     * @description Handles pull-to-refresh events from the refresher component.
+     * @summary Processes refresh events triggered by the user pulling down on the list
+     * or by programmatic refresh requests. This method refreshes the list data and
+     * completes the refresher animation when the data is loaded.
      *
-     * @param {string | number} uid - The ID of the item to create.
-     * @returns {Promise<void>} A promise that resolves when the item is created and added to the list.
-     */
-    async handleCreate(uid) {
-        const result = await this._repository?.read(uid);
-        const item = this.mapResults([result])[0];
-        this.items = this.data = [item, ...this.items || []];
-    }
-    /**
-     * @description Handles the update event from the repository.
-     * @summary Updates the list item with the specified ID based on the new data.
+     * @param {InfiniteScrollCustomEvent | CustomEvent} [event] - The refresh event
+     * @returns {Promise<void>} A promise that resolves when the refresh operation is complete
      *
-     * @param {string | number} uid - The ID of the item to update
-     * @returns {Promise<void>}
-     * @private
      * @memberOf ListComponent
      */
-    async handleUpdate(uid) {
-        const item = this.itemMapper(await this._repository?.read(uid) || {}, this.mapper);
-        this.data = [];
-        for (const key in this.items) {
-            const child = this.items[key];
-            if (child['uid'] === item['uid']) {
-                this.items[key] = Object.assign({}, child, item);
-                break;
-            }
-        }
-        setTimeout(() => {
-            this.data = [...this.items];
-        }, 0);
+    async handleRefresh(event) {
+        await this.refresh(event || true);
+        if (event instanceof CustomEvent)
+            setTimeout(() => {
+                // Any calls to load data go here
+                event.target.complete();
+            }, 400);
     }
     /**
-     * @description Removes an item from the list by ID.
-     * @summary Filters out an item with the specified ID from the data array and
-     * refreshes the list display. This is typically used after a delete operation.
+     * @description Filters data based on a search string.
+     * @summary Processes the current data array to find items that match the provided
+     * search string. This uses the arrayQueryByString utility to perform the filtering
+     * across all properties of the items.
      *
-     * @param {string} uid - The ID of the item to delete
-     * @param {string} pk - The primary key field name
-     * @returns {Promise<void>}
+     * @param {KeyValue[]} results - The array of items to search through
+     * @param {string} search - The search string to filter by
+     * @returns {KeyValue[]} A promise that resolves to the filtered array of items
      *
      * @memberOf ListComponent
      */
-    handleDelete(uid, pk) {
-        if (!pk)
-            pk = this.pk;
-        this.items = this.data?.filter((item) => item['uid'] !== uid) || [];
+    parseSearchResults(results, search) {
+        return results.filter((item) => Object.values(item).some(value => value.toString().toLowerCase().includes(search?.toLowerCase())));
     }
     /**
-     * @description Handles click events from list items.
-     * @summary Listens for global ListItemClickEvent events and passes them to the
-     * debounced click subject. This allows the component to respond to clicks on
-     * list items regardless of where they originate from.
+     * @description Fetches data from a request source.
+     * @summary Retrieves data from the configured source function or URL, processes it,
+     * and updates the component's data state. This method handles both initial data loading
+     * and subsequent refresh operations when using an external data source rather than a model.
      *
-     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
-     * @returns {void}
+     * @param {boolean} force - Whether to force a refresh even if data already exists
+     * @param {number} start - The starting index for pagination
+     * @param {number} limit - The maximum number of items to retrieve
+     * @returns {Promise<KeyValue[]>} A promise that resolves to the fetched data
      *
      * @memberOf ListComponent
      */
-    handleClick(event) {
-        this.clickItemSubject.next(event);
+    async getFromRequest(force = false, start, limit) {
+        let request = [];
+        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+            // (self.data as ListItem[]) = [];
+            if (!this.searchValue?.length && !this.searchValue) {
+                if (!this.source && !this.data?.length) {
+                    this.logger.info('No data and source passed to infinite list');
+                    return [];
+                }
+                if (this.source instanceof Function)
+                    request = await this.source();
+                if (!Array.isArray(request))
+                    request = request?.['response']?.['data'] || request?.['results'] || [];
+                this.data = [...await this.parseResult(request)];
+                if (this.data?.length)
+                    this.items = this.type === ListComponentsTypes.INFINITE ?
+                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...request.slice(start, limit)];
+            }
+            else {
+                this.data = this.parseSearchResults(this.data, this.searchValue);
+                this.items = this.data;
+            }
+        }
+        if (this.loadMoreData && this.type === ListComponentsTypes.PAGINATED)
+            this.getMoreData(this.data?.length || 0);
+        return this.data || [];
     }
     /**
-     * @description Handles search events from the search bar.
-     * @summary Processes search queries from the search bar component, updating the
-     * displayed data based on the search term. The behavior differs between infinite
-     * and paginated modes to provide the best user experience for each mode.
-     *
-     * @param {string | undefined} value - The search term or undefined to clear search
-     * @returns {Promise<void>}
+     * @description Fetches data from a model source.
+     * @summary Retrieves data from the configured model using its pagination or find methods,
+     * processes it, and updates the component's data state. This method handles both initial
+     * data loading and subsequent refresh operations when using a model as the data source.
      *
-     * @mermaid
-     * flowchart TD
-     *   A[Search Event] --> B{Type is Infinite?}
-     *   B -->|Yes| C[Disable loadMoreData]
-     *   B -->|No| D[Enable loadMoreData]
-     *   C --> E{Search value undefined?}
-     *   E -->|Yes| F[Enable loadMoreData]
-     *   E -->|No| G[Store search value]
-     *   D --> G
-     *   F --> H[Reset page to 1]
-     *   G --> I[Refresh data]
-     *   H --> I
+     * @param {boolean} force - Whether to force a refresh even if data already exists
+     * @param {number} start - The starting index for pagination
+     * @param {number} limit - The maximum number of items to retrieve
+     * @returns {Promise<KeyValue[]>} A promise that resolves to the fetched data
      *
      * @memberOf ListComponent
      */
-    async handleSearch(value) {
-        if (this.type === ListComponentsTypes.INFINITE) {
-            this.loadMoreData = false;
-            if (value === undefined) {
-                this.loadMoreData = true;
-                this.page = 1;
+    async getFromModel(force = false) {
+        let data = [...this.data || []];
+        let request = [];
+        // getting model repository
+        if (!this._repository)
+            this._repository = this.repository;
+        const repo = this._repository;
+        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+            try {
+                if (!this.searchValue?.length && !this.searchValue) {
+                    this.data = [];
+                    // const rawQuery = this.parseQuery(self.model as Repository<Model>, start, limit);
+                    // request = this.parseResult(await (this.model as any)?.paginate(start, limit));
+                    if (!this.paginator) {
+                        this.paginator = await repo
+                            .select()
+                            .orderBy([this.pk, this.sortDirection])
+                            .paginate(this.limit);
+                    }
+                    request = await this.parseResult(this.paginator);
+                }
+                else {
+                    if (!this.indexes)
+                        this.indexes = (Object.values(this.mapper) || [this.pk]);
+                    const condition = this.parseConditions(this.searchValue);
+                    request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
+                    data = [];
+                }
+                data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
+            }
+            catch (error) {
+                this.logger.error(error?.message || `Unable to find ${this.model} on registry. Return empty array from component`);
             }
-            this.searchValue = value;
-            await this.refresh(true);
         }
-        else {
-            this.loadMoreData = true;
-            this.searchValue = value;
-            if (value === undefined)
-                this.page = this.lastPage;
-            await this.refresh(true);
+        if (data?.length) {
+            if (this.searchValue) {
+                this.items = [...data];
+                if (this.items?.length <= this.limit)
+                    this.loadMoreData = false;
+            }
+            else {
+                this.items = [...data];
+            }
         }
+        if (this.type === ListComponentsTypes.PAGINATED && this.paginator)
+            this.getMoreData(this.paginator.total);
+        return data || [];
     }
     /**
-     * @description Handles filter events from the filter component.
-     * @summary Processes filter queries from the filter component and applies them
-     * to the list data. This method acts as a bridge between the filter component
-     * and the search functionality, converting filter queries into search operations.
+     * @description Converts search values or filter queries into database conditions.
+     * @summary Transforms search input or complex filter queries into Condition objects
+     * that can be used for database querying. Handles both simple string/number searches
+     * across indexed fields and complex filter queries with multiple criteria.
      *
-     * @param {IFilterQuery | undefined} value - The filter query object or undefined to clear filters
-     * @returns {Promise<void>}
-     * @memberOf ListComponent
-     */
-    async handleFilter(value) {
-        await this.handleSearch(value);
-    }
-    /**
-     * @description Clears the current search and resets the list.
-     * @summary Convenience method that clears the search by calling handleSearch
-     * with undefined. This resets the list to show all data without filtering.
+     * For simple searches (string/number):
+     * - Creates conditions that search across all indexed fields
+     * - Uses equality for numeric values and regex for string values
+     * - Combines conditions with OR logic to search multiple fields
      *
-     * @returns {Promise<void>}
+     * For complex filter queries:
+     * - Processes each filter item with its specific condition type
+     * - Supports Equal, Not Equal, Contains, Not Contains, Greater Than, Less Than
+     * - Updates sort configuration based on the filter query
+     * - Combines multiple filter conditions with OR logic
+     *
+     * @param {string | number | IFilterQuery} value - The search value or filter query object
+     * @returns {Condition<Model>} A Condition object for database querying
      * @memberOf ListComponent
      */
-    async clearSearch() {
-        await this.handleSearch(undefined);
+    parseConditions(value) {
+        let _condition;
+        if (typeof value === Primitives.STRING || typeof value === Primitives.NUMBER) {
+            _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
+            for (const index of this.indexes) {
+                if (index === this.pk)
+                    continue;
+                let orCondition;
+                if (!isNaN(value)) {
+                    orCondition = Condition.attribute(index).eq(Number(value));
+                }
+                else {
+                    orCondition = Condition.attribute(index).regexp(value);
+                }
+                _condition = _condition.or(orCondition);
+            }
+        }
+        else {
+            const { query, sort } = value;
+            _condition = Condition.attribute(this.pk).dif('null');
+            if (query?.length)
+                _condition = undefined;
+            (query || []).forEach((item) => {
+                const { value, condition, index } = item;
+                let val = value;
+                if (index === this.pk || !isNaN(val))
+                    val = Number(val);
+                let orCondition;
+                switch (condition) {
+                    case "Equal":
+                        orCondition = Condition.attribute(index).eq(val);
+                        break;
+                    case "Not Equal":
+                        orCondition = Condition.attribute(index).dif(val);
+                        break;
+                    case "Not Contains":
+                        orCondition = !Condition.attribute(index).regexp(new RegExp(`^(?!.*${val}).*$`));
+                        break;
+                    case "Contains":
+                        orCondition = Condition.attribute(index).regexp(val);
+                        break;
+                    case "Greater Than":
+                        orCondition = Condition.attribute(index).gte(val);
+                        break;
+                    case "Less Than":
+                        orCondition = Condition.attribute(index).lte(val);
+                        break;
+                }
+                _condition = (!_condition ?
+                    orCondition : _condition.and(orCondition));
+            });
+            this.sortBy = sort?.value || this.pk;
+            this.sortDirection = sort?.direction || this.sortDirection;
+        }
+        return _condition;
     }
     /**
-     * @description Emits a refresh event with the current data.
-     * @summary Creates and emits a refresh event containing the current list data.
-     * This notifies parent components that the list data has been refreshed.
+     * @description Processes query results into a standardized format.
+     * @summary Handles different result formats from various data sources, extracting
+     * pagination information when available and applying any configured data mapping.
+     * This ensures consistent data structure regardless of the source.
      *
-     * @param {KeyValue[]} [data] - Optional data to include in the event
-     * @returns {void}
+     * @protected
+     * @param {KeyValue[] | Paginator} result - The raw query result
+     * @returns {KeyValue[]} The processed array of items
      *
      * @memberOf ListComponent
      */
-    refreshEventEmit(data) {
-        if (!data)
-            data = this.items;
-        this.skeletonData = new Array(data?.length || 2);
-        this.refreshEvent.emit({
-            name: EventConstants.REFRESH,
-            data: data || [],
-            component: this.componentName
-        });
+    async parseResult(result) {
+        if (!Array.isArray(result) && ('page' in result && 'total' in result)) {
+            const paginator = result;
+            try {
+                result = await paginator.page(this.page);
+                // TODO: Chage for result.total;
+                this.getMoreData(paginator.total);
+            }
+            catch (error) {
+                this.logger.info(error?.message || 'Unable to get page from paginator. Return empty array from component');
+                result = [];
+            }
+        }
+        else {
+            this.getMoreData(result?.length || 0);
+        }
+        return (Object.keys(this.mapper || {}).length) ?
+            this.mapResults(result) : result;
     }
     /**
-     * @description Emits a click event for a list item.
-     * @summary Processes and emits a click event when a list item is clicked.
-     * This extracts the relevant data from the event and passes it to parent components.
+     * @description Updates pagination state based on data length.
+     * @summary Calculates whether more data is available and how many pages exist
+     * based on the total number of items and the configured limit per page.
+     * This information is used to control pagination UI and infinite scrolling behavior.
      *
-     * @private
-     * @param {ListItemCustomEvent | RendererCustomEvent} event - The click event
+     * @param {number} length - The total number of items available
      * @returns {void}
      *
      * @memberOf ListComponent
      */
-    clickEventEmit(event) {
-        this.clickEvent.emit(event);
-    }
-    /**
-     * @description Refreshes the list data from the configured source.
-     * @summary This method handles both initial data loading and subsequent refresh operations,
-     * including pull-to-refresh and infinite scrolling. It manages the data fetching process,
-     * updates the component's state, and handles pagination or infinite scrolling logic based
-     * on the component's configuration.
-     *
-     * The method performs the following steps:
-     * 1. Sets the refreshing flag to indicate a data fetch is in progress
-     * 2. Calculates the appropriate start and limit values based on pagination settings
-     * 3. Fetches data from the appropriate source (model or request)
-     * 4. Updates the component's data and emits a refresh event
-     * 5. Handles pagination or infinite scrolling state updates
-     * 6. Completes any provided event (like InfiniteScrollCustomEvent)
-     *
-     * @param {InfiniteScrollCustomEvent | RefresherCustomEvent | boolean} event - The event that triggered the refresh,
-     * or a boolean flag indicating if this is a forced refresh
-     * @returns {Promise<void>} A promise that resolves when the refresh operation is complete
-     *
-     * @mermaid
-     * sequenceDiagram
-     *   participant L as ListComponent
-     *   participant D as Data Source
-     *   participant E as Event System
-     *
-     *   L->>L: refresh(event)
-     *   L->>L: Set refreshing flag
-     *   L->>L: Calculate start and limit
-     *   alt Using model
-     *     L->>D: getFromModel(force, start, limit)
-     *     D-->>L: Return data
-     *   else Using request
-     *     L->>D: getFromRequest(force, start, limit)
-     *     D-->>L: Return data
-     *   end
-     *   L->>E: refreshEventEmit()
-     *   alt Infinite scrolling mode
-     *     L->>L: Check if reached last page
-     *     alt Last page reached
-     *       L->>L: Complete scroll event
-     *       L->>L: Disable loadMoreData
-     *     else More pages available
-     *       L->>L: Increment page number
-     *       L->>L: Complete scroll event after delay
-     *     end
-     *   else Paginated mode
-     *     L->>L: Clear refreshing flag after delay
-     *   end
-     *
-     * @memberOf ListComponent
-     */
-    async refresh(event = false) {
-        //  if(typeof force !== 'boolean' && force.type === EventConstants.BACK_BUTTON_NAVIGATION) {
-        //    const {refresh} = (force as CustomEvent).detail;
-        //    if(!refresh)
-        //      return false;
-        //  }
-        this.refreshing = true;
-        const start = this.page > 1 ? (this.page - 1) * this.limit : this.start;
-        const limit = (this.page * (this.limit > 12 ? 12 : this.limit));
-        this.data = !this.model ?
-            await this.getFromRequest(!!event, start, limit)
-            : await this.getFromModel(!!event);
-        this.refreshEventEmit();
+    getMoreData(length) {
         if (this.type === ListComponentsTypes.INFINITE) {
-            if (this.page === this.pages) {
-                if (event?.target)
-                    event.target.complete();
+            if (this.paginator)
+                length = length * this.limit;
+            if (length <= this.limit) {
                 this.loadMoreData = false;
             }
             else {
-                this.page += 1;
-                this.refreshing = false;
-                setTimeout(() => {
-                    if (event?.target && event?.type !== EventConstants.BACK_BUTTON_NAVIGATION)
-                        event.target.complete();
-                }, 200);
+                this.pages = Math.floor(length / this.limit);
+                if ((this.pages * this.limit) < length)
+                    this.pages += 1;
+                if (this.pages === 1)
+                    this.loadMoreData = false;
             }
         }
         else {
-            setTimeout(() => {
-                this.refreshing = false;
-            }, 200);
+            this.pages = length;
+            if (this.pages === 1)
+                this.loadMoreData = false;
         }
     }
     /**
-   * @description Handles pagination events from the pagination component.
-   * @summary Processes pagination events by updating the current page number and
-   * refreshing the list data to display the selected page. This method is called
-   * when a user interacts with the pagination controls to navigate between pages.
-   *
-   * @param {PaginationCustomEvent} event - The pagination event containing page information
-   * @returns {void}
-   *
-   * @memberOf ListComponent
-   */
-    handlePaginate(event) {
-        const { page } = event.data;
-        this.page = page;
-        this.refresh(true);
-    }
-    /**
-     * @description Handles pull-to-refresh events from the refresher component.
-     * @summary Processes refresh events triggered by the user pulling down on the list
-     * or by programmatic refresh requests. This method refreshes the list data and
-     * completes the refresher animation when the data is loaded.
+     * @description Maps a single item using the configured mapper.
+     * @summary Transforms a data item according to the mapping configuration,
+     * extracting nested properties and formatting values as needed. This allows
+     * the component to display data in a format different from how it's stored.
      *
-     * @param {InfiniteScrollCustomEvent | CustomEvent} [event] - The refresh event
-     * @returns {Promise<void>} A promise that resolves when the refresh operation is complete
+     * @protected
+     * @param {KeyValue} item - The item to map
+     * @param {KeyValue} mapper - The mapping configuration
+     * @param {KeyValue} [props] - Additional properties to include
+     * @returns {KeyValue} The mapped item
      *
      * @memberOf ListComponent
      */
-    async handleRefresh(event) {
-        await this.refresh(event || true);
-        if (event instanceof CustomEvent)
-            setTimeout(() => {
-                // Any calls to load data go here
-                event.target.complete();
-            }, 400);
+    itemMapper(item, mapper, props) {
+        return Object.entries(mapper).reduce((accum, [key, value]) => {
+            const arrayValue = value.split('.');
+            if (!value) {
+                accum[key] = value;
+            }
+            else {
+                if (arrayValue.length === 1) {
+                    value = item?.[value] ? item[value] : value !== key ? value : "";
+                    if (isValidDate(value))
+                        value = `${formatDate(value)}`;
+                    accum[key] = value;
+                }
+                else {
+                    let val;
+                    for (const _value of arrayValue)
+                        val = !val
+                            ? item[_value]
+                            : (typeof val === 'string' ? JSON.parse(val) : val)[_value];
+                    if (isValidDate(new Date(val)))
+                        val = `${formatDate(val)}`;
+                    accum[key] = val === null || val === undefined ? value : val;
+                }
+            }
+            return Object.assign({}, props || {}, accum);
+        }, {});
     }
     /**
-     * @description Filters data based on a search string.
-     * @summary Processes the current data array to find items that match the provided
-     * search string. This uses the arrayQueryByString utility to perform the filtering
-     * across all properties of the items.
+     * @description Maps all result items using the configured mapper.
+     * @summary Applies the itemMapper to each item in the result set, adding
+     * common properties like operations and route information. This transforms
+     * the raw data into the format expected by the list item components.
      *
-     * @param {KeyValue[]} results - The array of items to search through
-     * @param {string} search - The search string to filter by
-     * @returns {KeyValue[]} A promise that resolves to the filtered array of items
+     * @param {KeyValue[]} data - The array of items to map
+     * @returns {KeyValue[]} The array of mapped items
      *
      * @memberOf ListComponent
      */
-    parseSearchResults(results, search) {
-        return results.filter((item) => Object.values(item).some(value => value.toString().toLowerCase().includes(search?.toLowerCase())));
+    mapResults(data) {
+        if (!data || !data.length)
+            return [];
+        // passing uid as prop to mapper
+        this.mapper = { ...this.mapper, ...{ uid: this.pk } };
+        const props = Object.assign({
+            operations: this.operations,
+            route: this.route,
+            ...Object.keys(this.item).reduce((acc, key) => {
+                acc[key] = this.item[key];
+                return acc;
+            }, {}),
+            // ... (!this.item.render ? {} :  Object.keys(this.item).reduce((acc: KeyValue, key: string) => {
+            //   acc[key] = this.item[key as keyof IListItemProp];
+            //   return acc;
+            // }, {}))
+        });
+        return data.reduce((accum, curr) => {
+            accum.push({ ...this.itemMapper(curr, this.mapper, props), ...{ pk: this.pk } });
+            return accum;
+        }, []);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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 && data?.length) {\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 [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!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{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+};
+ListComponent = __decorate([
+    Dynamic(),
+    __metadata("design:paramtypes", [])
+], ListComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-decaf-list', standalone: true, imports: [
+                        TranslatePipe,
+                        IonRefresher,
+                        PaginationComponent,
+                        IonList,
+                        IonItem,
+                        IonThumbnail,
+                        IonSkeletonText,
+                        IonLabel,
+                        IonText,
+                        IonRefresherContent,
+                        IonInfiniteScroll,
+                        IonInfiniteScrollContent,
+                        IonThumbnail,
+                        IonSkeletonText,
+                        SearchbarComponent,
+                        EmptyStateComponent,
+                        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 && data?.length) {\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 [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!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{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{
+                type: Input
+            }], 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']]
+            }] } });
+
+/**
+ * @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.
+ *
+ * @class
+ * @extends NgxBaseComponent
+ *
+ * @param {string} [lines='none'] - Determines the line style of the item. Can be 'inset', 'inseet', or 'none'.
+ * @param {Record<string, any>} item - The data item to be displayed in the list item.
+ * @param {string} icon - The name of the icon to be displayed.
+ * @param {'start' | 'end'} [iconSlot='start'] - The position of the icon within the item.
+ * @param {StringOrBoolean} [button=true] - Determines if the item should behave as a button.
+ * @param {string} [title] - The main title of the list item.
+ * @param {string} [description] - A description for the list item.
+ * @param {string} [info] - Additional information for the list item.
+ * @param {string} [subinfo] - Sub-information for the list item.
+ *
+ * @example
+ * <ngx-decaf-list-item
+ *   [item]="dataItem"
+ *   icon="star"
+ *   title="Item Title"
+ *   description="Item Description"
+ *   (clickEvent)="handleItemClick($event)">
+ * </ngx-decaf-list-item>
+ *
+ * @mermaid
+ * sequenceDiagram
+ *   participant C as Component
+ *   participant V as View
+ *   participant U as User
+ *   C->>V: Initialize component
+ *   V->>U: Display list item
+ *   U->>V: Click on item or action
+ *   V->>C: Trigger handleAction()
+ *   C->>C: Process action
+ *   C->>V: Update view or navigate
+ */
+let ListItemComponent = class ListItemComponent extends NgxBaseComponent {
     /**
-     * @description Fetches data from a request source.
-     * @summary Retrieves data from the configured source function or URL, processes it,
-     * and updates the component's data state. This method handles both initial data loading
-     * and subsequent refresh operations when using an external data source rather than a model.
-     *
-     * @param {boolean} force - Whether to force a refresh even if data already exists
-     * @param {number} start - The starting index for pagination
-     * @param {number} limit - The maximum number of items to retrieve
-     * @returns {Promise<KeyValue[]>} A promise that resolves to the fetched data
+     * @description Creates an instance of ListItemComponent.
+     * @summary Initializes a new ListItemComponent by calling the parent class constructor
+     * with the component name for logging and identification purposes. Also registers
+     * all available Ionic icons to ensure they can be displayed in the component.
      *
-     * @memberOf ListComponent
+     * @memberOf ListItemComponent
      */
-    async getFromRequest(force = false, start, limit) {
-        let request = [];
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
-            // (self.data as ListItem[]) = [];
-            if (!this.searchValue?.length && !this.searchValue) {
-                if (!this.source && !this.data?.length) {
-                    this.logger.info('No data and source passed to infinite list');
-                    return [];
-                }
-                if (this.source instanceof Function)
-                    request = await this.source();
-                if (!Array.isArray(request))
-                    request = request?.['response']?.['data'] || request?.['results'] || [];
-                this.data = [...await this.parseResult(request)];
-                if (this.data?.length)
-                    this.items = this.type === ListComponentsTypes.INFINITE ?
-                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...request.slice(start, limit)];
-            }
-            else {
-                this.data = this.parseSearchResults(this.data, this.searchValue);
-                this.items = this.data;
-            }
-        }
-        if (this.loadMoreData && this.type === ListComponentsTypes.PAGINATED)
-            this.getMoreData(this.data?.length || 0);
-        return this.data || [];
-    }
-    /**
-     * @description Fetches data from a model source.
-     * @summary Retrieves data from the configured model using its pagination or find methods,
-     * processes it, and updates the component's data state. This method handles both initial
-     * data loading and subsequent refresh operations when using a model as the data source.
+    constructor() {
+        super("ListItemComponent");
+        /**
+         * @description Controls the display of lines around the list item.
+         * @summary Determines how lines are displayed around the list item borders.
+         * 'inset' shows lines with padding, 'full' shows full-width lines, and 'none'
+         * removes all lines. This affects the visual separation between list items.
+         *
+         * @type {'inset' | 'full' | 'none'}
+         * @default 'inset'
+         * @memberOf ListItemComponent
+         */
+        this.lines = 'full';
+        /**
+         * @description Position of the icon within the list item.
+         * @summary Determines whether the icon appears at the start (left in LTR languages)
+         * or end (right in LTR languages) of the list item. This affects the overall
+         * layout and visual hierarchy of the item content.
+         *
+         * @type {'start' | 'end'}
+         * @default 'start'
+         * @memberOf ListItemComponent
+         */
+        this.iconSlot = 'start';
+        /**
+         * @description Controls whether the list item behaves as a clickable button.
+         * @summary When set to true, the list item will have button-like behavior including
+         * hover effects, click handling, and appropriate accessibility attributes.
+         * When false, the item is displayed as static content without interactive behavior.
+         *
+         * @type {StringOrBoolean}
+         * @default true
+         * @memberOf ListItemComponent
+         */
+        this.button = true;
+        /**
+         * @description Event emitter for list item click interactions.
+         * @summary Emits custom events when the list item is clicked or when actions
+         * are performed on it. The emitted event contains information about the action,
+         * the item data, and other relevant context for parent components to handle.
+         *
+         * @type {EventEmitter<ListItemCustomEvent>}
+         * @memberOf ListItemComponent
+         */
+        this.clickEvent = new EventEmitter();
+        /**
+         * @description Flag indicating whether slide items are currently enabled.
+         * @summary Controls the visibility of slide actions based on screen size and
+         * available operations. When true, users can swipe on the item to reveal
+         * action buttons for operations like edit and delete.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf ListItemComponent
+         */
+        this.showSlideItems = false;
+        /**
+         * @description Flag indicating whether the action menu popover is currently open.
+         * @summary Tracks the state of the action menu to prevent multiple instances
+         * from being opened simultaneously and to ensure proper cleanup when actions
+         * are performed. Used for managing the popover lifecycle.
+         *
+         * @type {boolean}
+         * @default false
+         * @memberOf ListItemComponent
+         */
+        this.actionMenuOpen = false;
+        /**
+         * @description Angular NavController service for handling navigation.
+         * @summary Injected service that provides methods for programmatic navigation
+         * within the Ionic application. Used for navigating to different routes when
+         * list item actions are performed or when the item itself is clicked.
+         *
+         * @private
+         * @type {NavController}
+         * @memberOf ListItemComponent
+         */
+        this.navController = inject(NavController);
+        addIcons(allIcons);
+    }
+    /**
+     * @description Initializes the component after Angular first displays the data-bound properties.
+     * @summary Sets up the component by determining slide item visibility, processing boolean inputs,
+     * building CSS class names based on properties, and capturing the current window width.
+     * This method prepares the component for user interaction by ensuring all properties are
+     * properly initialized and responsive behavior is configured.
      *
-     * @param {boolean} force - Whether to force a refresh even if data already exists
-     * @param {number} start - The starting index for pagination
-     * @param {number} limit - The maximum number of items to retrieve
-     * @returns {Promise<KeyValue[]>} A promise that resolves to the fetched data
+     * @mermaid
+     * sequenceDiagram
+     *   participant A as Angular Lifecycle
+     *   participant L as ListItemComponent
+     *   participant W as Window
      *
-     * @memberOf ListComponent
+     *   A->>L: ngOnInit()
+     *   L->>L: enableSlideItems()
+     *   L->>L: Process button boolean
+     *   L->>L: Build className with flex classes
+     *   alt operations exist
+     *     L->>L: Add 'action' class
+     *   end
+     *   L->>W: getWindowWidth()
+     *   W-->>L: Return current width
+     *   L->>L: Store windowWidth
+     *
+     * @return {Promise<void>}
+     * @memberOf ListItemComponent
      */
-    async getFromModel(force = false) {
-        let data = [...this.data || []];
-        let request = [];
-        // getting model repository
-        if (!this._repository)
-            this._repository = this.repository;
-        const repo = this._repository;
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
-            try {
-                if (!this.searchValue?.length && !this.searchValue) {
-                    this.data = [];
-                    // const rawQuery = this.parseQuery(self.model as Repository<Model>, start, limit);
-                    // request = this.parseResult(await (this.model as any)?.paginate(start, limit));
-                    if (!this.paginator) {
-                        this.paginator = await repo
-                            .select()
-                            .orderBy([this.pk, this.sortDirection])
-                            .paginate(this.limit);
-                    }
-                    request = await this.parseResult(this.paginator);
-                }
-                else {
-                    if (!this.indexes)
-                        this.indexes = (Object.values(this.mapper) || [this.pk]);
-                    const condition = this.parseConditions(this.searchValue);
-                    request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
-                    data = [];
-                }
-                data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
-            }
-            catch (error) {
-                this.logger.error(error?.message || `Unable to find ${this.model} on registry. Return empty array from component`);
-            }
-        }
-        if (data?.length) {
-            if (this.searchValue) {
-                this.items = [...data];
-                if (this.items?.length <= this.limit)
-                    this.loadMoreData = false;
-            }
-            else {
-                this.items = [...data];
-            }
-        }
-        if (this.type === ListComponentsTypes.PAGINATED && this.paginator)
-            this.getMoreData(this.paginator.total);
-        return data || [];
+    async ngOnInit() {
+        this.showSlideItems = this.enableSlideItems();
+        this.button = stringToBoolean(this.button);
+        this.className = `${this.className}  dcf-flex dcf-flex-middle grid-item`;
+        if (this.operations?.length)
+            this.className += ` action`;
+        this.windowWidth = getWindowWidth();
     }
     /**
-     * @description Converts search values or filter queries into database conditions.
-     * @summary Transforms search input or complex filter queries into Condition objects
-     * that can be used for database querying. Handles both simple string/number searches
-     * across indexed fields and complex filter queries with multiple criteria.
+     * @description Handles user interactions and actions performed on the list item.
+     * @summary This method is the central action handler for list item interactions. It manages
+     * event propagation, dismisses open action menus, removes focus traps, and either emits
+     * events for parent components to handle or performs navigation based on the component's
+     * route configuration. This method supports both event-driven and navigation-driven architectures.
      *
-     * For simple searches (string/number):
-     * - Creates conditions that search across all indexed fields
-     * - Uses equality for numeric values and regex for string values
-     * - Combines conditions with OR logic to search multiple fields
+     * @param {CrudOperations} action - The type of CRUD operation being performed
+     * @param {Event} event - The browser event that triggered the action
+     * @param {HTMLElement} [target] - Optional target element for the event
+     * @return {Promise<boolean|void>} A promise that resolves to navigation success or void for events
      *
-     * For complex filter queries:
-     * - Processes each filter item with its specific condition type
-     * - Supports Equal, Not Equal, Contains, Not Contains, Greater Than, Less Than
-     * - Updates sort configuration based on the filter query
-     * - Combines multiple filter conditions with OR logic
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant L as ListItemComponent
+     *   participant P as Parent Component
+     *   participant N as NavController
+     *   participant E as Event System
      *
-     * @param {string | number | IFilterQuery} value - The search value or filter query object
-     * @returns {Condition<Model>} A Condition object for database querying
-     * @memberOf ListComponent
+     *   U->>L: Perform action (click/swipe)
+     *   L->>L: stopImmediatePropagation()
+     *   alt actionMenuOpen
+     *     L->>L: Dismiss action menu
+     *   end
+     *   L->>L: removeFocusTrap()
+     *   alt No route configured
+     *     L->>E: windowEventEmitter()
+     *     L->>P: clickEvent.emit()
+     *   else Route configured
+     *     L->>N: redirect(action, uid)
+     *     N-->>L: Return navigation result
+     *   end
+     *
+     * @memberOf ListItemComponent
      */
-    parseConditions(value) {
-        let _condition;
-        if (typeof value === Primitives.STRING || typeof value === Primitives.NUMBER) {
-            _condition = Condition.attribute(this.pk).eq(!isNaN(value) ? Number(value) : value);
-            for (const index of this.indexes) {
-                if (index === this.pk)
-                    continue;
-                let orCondition;
-                if (!isNaN(value)) {
-                    orCondition = Condition.attribute(index).eq(Number(value));
-                }
-                else {
-                    orCondition = Condition.attribute(index).regexp(value);
-                }
-                _condition = _condition.or(orCondition);
-            }
-        }
-        else {
-            const { query, sort } = value;
-            _condition = Condition.attribute(this.pk).dif('null');
-            if (query?.length)
-                _condition = undefined;
-            (query || []).forEach((item) => {
-                const { value, condition, index } = item;
-                let val = value;
-                if (index === this.pk || !isNaN(val))
-                    val = Number(val);
-                let orCondition;
-                switch (condition) {
-                    case "Equal":
-                        orCondition = Condition.attribute(index).eq(val);
-                        break;
-                    case "Not Equal":
-                        orCondition = Condition.attribute(index).dif(val);
-                        break;
-                    case "Not Contains":
-                        orCondition = !Condition.attribute(index).regexp(new RegExp(`^(?!.*${val}).*$`));
-                        break;
-                    case "Contains":
-                        orCondition = Condition.attribute(index).regexp(val);
-                        break;
-                    case "Greater Than":
-                        orCondition = Condition.attribute(index).gte(val);
-                        break;
-                    case "Less Than":
-                        orCondition = Condition.attribute(index).lte(val);
-                        break;
-                }
-                _condition = (!_condition ?
-                    orCondition : _condition.and(orCondition));
-            });
-            this.sortBy = sort?.value || this.pk;
-            this.sortDirection = sort?.direction || this.sortDirection;
+    async handleAction(action, event, target) {
+        event.stopImmediatePropagation();
+        if (this.actionMenuOpen)
+            await this.actionMenuComponent.dismiss();
+        // forcing trap focus
+        removeFocusTrap();
+        if (!this.route) {
+            const event = { target: target, action, pk: this.pk, data: this.uid, name: EventConstants.CLICK, component: this.componentName };
+            windowEventEmitter(`ListItem${EventConstants.CLICK}`, event);
+            return this.clickEvent.emit(event);
         }
-        return _condition;
+        return await this.redirect(action, (typeof this.uid === 'number' ? `${this.uid}` : this.uid));
     }
     /**
-     * @description Processes query results into a standardized format.
-     * @summary Handles different result formats from various data sources, extracting
-     * pagination information when available and applying any configured data mapping.
-     * This ensures consistent data structure regardless of the source.
+     * @description Responsive handler that enables or disables slide items based on screen size and operations.
+     * @summary This method is automatically called when the window is resized and also during component
+     * initialization. It determines whether slide actions should be available based on the current
+     * window width and the presence of UPDATE or DELETE operations. Slide items are typically hidden
+     * on larger screens where there's space for dedicated action buttons.
      *
-     * @protected
-     * @param {KeyValue[] | Paginator} result - The raw query result
-     * @returns {KeyValue[]} The processed array of items
+     * @return {boolean} True if slide items should be shown, false otherwise
      *
-     * @memberOf ListComponent
+     * @mermaid
+     * sequenceDiagram
+     *   participant W as Window
+     *   participant L as ListItemComponent
+     *   participant U as UI
+     *
+     *   W->>L: resize event
+     *   L->>W: getWindowWidth()
+     *   W-->>L: Return current width
+     *   L->>L: Store windowWidth
+     *   alt No operations OR width > 639px
+     *     L->>U: showSlideItems = false
+     *   else Operations include UPDATE/DELETE
+     *     L->>U: showSlideItems = true
+     *   end
+     *   L-->>U: Return showSlideItems value
+     *
+     * @memberOf ListItemComponent
      */
-    async parseResult(result) {
-        if (!Array.isArray(result) && ('page' in result && 'total' in result)) {
-            const paginator = result;
-            try {
-                result = await paginator.page(this.page);
-                // TODO: Chage for result.total;
-                this.getMoreData(paginator.total);
-            }
-            catch (error) {
-                this.logger.info(error?.message || 'Unable to get page from paginator. Return empty array from component');
-                result = [];
-            }
-        }
-        else {
-            this.getMoreData(result?.length || 0);
-        }
-        return (Object.keys(this.mapper || {}).length) ?
-            this.mapResults(result) : result;
+    enableSlideItems() {
+        this.windowWidth = getWindowWidth();
+        if (!this.operations?.length || this.windowWidth > 639)
+            return this.showSlideItems = false;
+        this.showSlideItems = this.operations.includes(OperationKeys.UPDATE) || this.operations.includes(OperationKeys.DELETE);
+        return this.showSlideItems;
     }
     /**
-     * @description Updates pagination state based on data length.
-     * @summary Calculates whether more data is available and how many pages exist
-     * based on the total number of items and the configured limit per page.
-     * This information is used to control pagination UI and infinite scrolling behavior.
+     * @description Animates and removes an element from the DOM.
+     * @summary This method applies CSS animation classes to create a smooth fade-out effect
+     * before removing the element from the DOM. The animation enhances user experience by
+     * providing visual feedback when items are deleted or removed from lists. The timing
+     * is coordinated with the CSS animation duration to ensure the element is removed
+     * after the animation completes.
      *
-     * @param {number} length - The total number of items available
-     * @returns {void}
+     * @param {HTMLElement} element - The DOM element to animate and remove
+     * @return {void}
      *
-     * @memberOf ListComponent
+     * @mermaid
+     * sequenceDiagram
+     *   participant L as ListItemComponent
+     *   participant E as HTMLElement
+     *   participant D as DOM
+     *
+     *   L->>E: Add animation classes
+     *   Note over E: uk-animation-fade, uk-animation-medium, uk-animation-reverse
+     *   E->>E: Start fade animation
+     *   L->>L: setTimeout(600ms)
+     *   Note over L: Wait for animation to complete
+     *   L->>D: element.remove()
+     *   D->>D: Remove element from DOM
+     *
+     * @memberOf ListItemComponent
      */
-    getMoreData(length) {
-        if (this.type === ListComponentsTypes.INFINITE) {
-            if (this.paginator)
-                length = length * this.limit;
-            if (length <= this.limit) {
-                this.loadMoreData = false;
-            }
-            else {
-                this.pages = Math.floor(length / this.limit);
-                if ((this.pages * this.limit) < length)
-                    this.pages += 1;
-                if (this.pages === 1)
-                    this.loadMoreData = false;
-            }
-        }
-        else {
-            this.pages = length;
-            if (this.pages === 1)
-                this.loadMoreData = false;
-        }
+    removeElement(element) {
+        element.classList.add('uk-animation-fade', 'uk-animation-medium', 'uk-animation-reverse');
+        setTimeout(() => { element.remove(); }, 600);
     }
     /**
-     * @description Maps a single item using the configured mapper.
-     * @summary Transforms a data item according to the mapping configuration,
-     * extracting nested properties and formatting values as needed. This allows
-     * the component to display data in a format different from how it's stored.
+     * @description Navigates to a new route based on the specified action and item ID.
+     * @summary This method constructs a navigation URL using the component's route configuration,
+     * the specified action, and an item identifier. It uses Ionic's NavController to perform
+     * forward navigation with appropriate animations. This method is typically used for
+     * CRUD operations where each action (create, read, update, delete) has its own route.
      *
-     * @protected
-     * @param {KeyValue} item - The item to map
-     * @param {KeyValue} mapper - The mapping configuration
-     * @param {KeyValue} [props] - Additional properties to include
-     * @returns {KeyValue} The mapped item
+     * @param {string} action - The action to be performed (e.g., 'edit', 'view', 'delete')
+     * @param {string} [id] - The unique identifier of the item to be acted upon
+     * @return {Promise<boolean>} A promise that resolves to true if navigation was successful
      *
-     * @memberOf ListComponent
+     * @mermaid
+     * sequenceDiagram
+     *   participant L as ListItemComponent
+     *   participant N as NavController
+     *   participant R as Router
+     *
+     *   L->>L: redirect(action, id)
+     *   L->>L: Construct URL: /{route}/{action}/{id}
+     *   L->>N: navigateForward(url)
+     *   N->>R: Navigate to constructed URL
+     *   R-->>N: Return navigation result
+     *   N-->>L: Return boolean success
+     *
+     * @memberOf ListItemComponent
      */
-    itemMapper(item, mapper, props) {
-        return Object.entries(mapper).reduce((accum, [key, value]) => {
-            const arrayValue = value.split('.');
-            if (!value) {
-                accum[key] = value;
-            }
-            else {
-                if (arrayValue.length === 1) {
-                    value = item?.[value] ? item[value] : value !== key ? value : "";
-                    if (isValidDate(value))
-                        value = `${formatDate(value)}`;
-                    accum[key] = value;
-                }
-                else {
-                    let val;
-                    for (const _value of arrayValue)
-                        val = !val
-                            ? item[_value]
-                            : (typeof val === 'string' ? JSON.parse(val) : val)[_value];
-                    if (isValidDate(new Date(val)))
-                        val = `${formatDate(val)}`;
-                    accum[key] = val === null || val === undefined ? value : val;
-                }
-            }
-            return Object.assign({}, props || {}, accum);
-        }, {});
+    async redirect(action, id) {
+        return await this.navController.navigateForward(`/${this.route}/${action}/${id || this.uid}`);
     }
     /**
-     * @description Maps all result items using the configured mapper.
-     * @summary Applies the itemMapper to each item in the result set, adding
-     * common properties like operations and route information. This transforms
-     * the raw data into the format expected by the list item components.
+     * @description Presents the actions menu popover for the list item.
+     * @summary This method handles the display of a contextual action menu when triggered by user
+     * interaction (typically a long press or right-click). It stops event propagation to prevent
+     * unwanted side effects, removes any existing focus traps for accessibility, configures the
+     * popover with the triggering event, and opens the action menu. The menu typically contains
+     * available CRUD operations for the item.
      *
-     * @param {KeyValue[]} data - The array of items to map
-     * @returns {KeyValue[]} The array of mapped items
+     * @param {Event} event - The event that triggered the action menu request
+     * @return {void}
      *
-     * @memberOf ListComponent
+     * @mermaid
+     * sequenceDiagram
+     *   participant U as User
+     *   participant L as ListItemComponent
+     *   participant P as Popover
+     *   participant A as Accessibility
+     *
+     *   U->>L: Trigger action menu (long press/right-click)
+     *   L->>L: stopImmediatePropagation()
+     *   L->>A: removeFocusTrap()
+     *   L->>P: Set event reference
+     *   L->>L: actionMenuOpen = true
+     *   L->>P: Display popover with actions
+     *
+     * @memberOf ListItemComponent
      */
-    mapResults(data) {
-        if (!data || !data.length)
-            return [];
-        // passing uid as prop to mapper
-        this.mapper = { ...this.mapper, ...{ uid: this.pk } };
-        const props = Object.assign({
-            operations: this.operations,
-            route: this.route,
-            ...Object.keys(this.item).reduce((acc, key) => {
-                acc[key] = this.item[key];
-                return acc;
-            }, {}),
-            // ... (!this.item.render ? {} :  Object.keys(this.item).reduce((acc: KeyValue, key: string) => {
-            //   acc[key] = this.item[key as keyof IListItemProp];
-            //   return acc;
-            // }, {}))
-        });
-        return data.reduce((accum, curr) => {
-            accum.push({ ...this.itemMapper(curr, this.mapper, props), ...{ pk: this.pk } });
-            return accum;
-        }, []);
+    presentActionsMenu(event) {
+        event.stopImmediatePropagation();
+        // forcing trap focus
+        removeFocusTrap();
+        this.actionMenuComponent.event = event;
+        this.actionMenuOpen = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 && data?.length) {\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 [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!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{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"], dependencies: [{ kind: "pipe", type: 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: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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      [id]=\"uid\"\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-avatar>\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\"></ion-icon>\n          </ion-avatar>\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if(icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            @if(description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if(info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if(info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if(subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <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 > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item-option:not(.dcf-delete),ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-option:not(.dcf-delete) ion-icon,ion-item-option:not(.dcf-update) .dcf-ti,ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-option.dcf-delete .dcf-ti,ion-item-option.dcf-delete *,ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-option.dcf-update .dcf-ti,ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item-option:not(.dcf-delete),ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-option:not(.dcf-delete) ion-icon,ion-item-option:not(.dcf-update) .dcf-ti,ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-option.dcf-delete .dcf-ti,ion-item-option.dcf-delete *,ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-option.dcf-update .dcf-ti,ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}\n"], dependencies: [{ kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
-ListComponent = __decorate([
+ListItemComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
-], ListComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
+], ListItemComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ListItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-list', standalone: true, imports: [
+            args: [{ selector: 'ngx-decaf-list-item', standalone: true, imports: [
                         TranslatePipe,
-                        IonRefresher,
-                        IonLoading,
-                        PaginationComponent,
                         IonList,
+                        IonListHeader,
                         IonItem,
-                        IonThumbnail,
-                        IonSkeletonText,
+                        IonItemSliding,
+                        IonItemOptions,
+                        IonItemOption,
+                        IonIcon,
                         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 && data?.length) {\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 [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\" #component>\n    @if(item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if(loadMoreData) {\n    @if(pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if(refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if(!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{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{
-                type: Input
-            }], translatable: [{
-                type: Input
-            }], showSearchbar: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], start: [{
-                type: Input
-            }], limit: [{
-                type: Input
-            }], loadMoreData: [{
-                type: Input
+                        IonButton,
+                        IonContent,
+                        IonPopover
+                    ], template: "\n@if(title || description) {\n  <ion-item-sliding #component>\n    <ion-item\n      [id]=\"uid\"\n      [lines]=\"lines\"\n      [button]=\"button\"\n      [class]=\"className\"\n      (click)=\"operations?.includes('read') ? handleAction('read', $event, component) : ''\n    \">\n      @if(icon && lines !== 'inset') {\n        <div class=\"dcf-icon\" [slot]=\"iconSlot\">\n          <ion-avatar>\n            <ion-icon aria-hidden=\"true\" name=\"reader-outline\" size=\"default\"></ion-icon>\n          </ion-avatar>\n        </div>\n      }\n      <div class=\"dcf-width-expand\">\n        <div class=\"dcf-flex dcf-flex-middle dcf-grid-collapse\" dcf-grid>\n          @if(icon && lines === 'inset') {\n            <div class=\"dcf-icon dcf-grid-icon\">\n              <ion-avatar>\n                <ion-icon aria-hidden=\"true\" name=\"reader-outline\"  size=\"default\"></ion-icon>\n              </ion-avatar>\n            </div>\n          }\n          <div class=\"dcf-width-expand@s dcf-width-1-1 dcf-label\">\n            <ion-label class=\"dcf-item-title\" [innerHTML]=\"uid + ' - ' + title\" ></ion-label>\n            @if(description) {\n              <div class=\"dcf-description\" [innerHTML]=\"description\"></div>\n            }\n          </div>\n          @if(info || subinfo) {\n            <div class=\"dcf-width-auto@s dcf-width-expand dcf-info dcf-flex dcf-flex-right@s\">\n              <div>\n                @if(info) {\n                <span  [innerHTML]=\"info\"></span>\n                }\n                @if(subinfo) {\n                  <div class=\"dcf-subinfo dcf-text-truncate\" [innerHTML]=\"subinfo\" ></div>\n                }\n              </div>\n            </div>\n          }\n\n          <div class=\"dcf-width-auto dcf-flex dcf-flex-middle dcf-flex-right\">\n            @if((operations.includes('delete') || operations.includes('update')) && uid) {\n              <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 > 639) {\n              <div id=\"end\">\n                <ng-content select=\"[slot='end']\"></ng-content>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </ion-item>\n    @if(showSlideItems && uid) {\n      <ion-item-options side=\"end\" (ionSwipe)=\"operations.length === 1 ? handleAction(operations[0],  $event, component) : ''\">\n        @if(operations?.includes('update')) {\n          <ion-item-option class=\"dcf-update\" (click)=\"handleAction('update', $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"create-outline\"></ion-icon>\n          </ion-item-option>\n        }\n        @if(operations?.includes('delete')) {\n        <ion-item-option class=\"dcf-          delete\" (click)=\"handleAction('delete',  $event, component)\" [expandable]=\"operations.length === 1\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" name=\"trash\"></ion-icon>\n          </ion-item-option>\n        }\n      </ion-item-options>\n    }\n  </ion-item-sliding>\n}\n", styles: ["@media (prefers-color-scheme: light){ion-item{--background-hover-opacity: .1;--background-focused-opacity: .1;--border-color: var(--dcf-color-gray-2)}ion-item .dcf-info{color:var(--dcf-color-gray-6)}ion-item .dcf-item-title{color:var(--dcf-color-gray-8)}ion-item .dcf-description{color:var(--dcf-color-gray-6)}ion-button{color:var(--dcf-color-gray-7);--background: var(--dcf-color-gray-1) !important}ion-avatar{color:var(--dcf-color-gray-7);background:var(--dcf-color-gray-1)!important}ion-item-option:not(.dcf-delete),ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),.25)!important}ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-option:not(.dcf-delete) ion-icon,ion-item-option:not(.dcf-update) .dcf-ti,ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-7)!important}ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-option.dcf-delete .dcf-ti,ion-item-option.dcf-delete *,ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-option.dcf-update .dcf-ti,ion-item-option.dcf-update ion-icon{color:var(--dcf-color-primary)!important}}@media (prefers-color-scheme: dark){ion-item{--background-hover-opacity: .25;--background-focused-opacity: .25;--border-color: var(--dcf-color-gray-6)}ion-item .dcf-description{color:var(--dcf-color-gray-4)}ion-button{color:var(--dcf-color-gray-1)!important;--background: var(--dcf-color-gray-7) !important}ion-avatar{color:var(--dcf-color-gray-1)!important;background:var(--dcf-background-color)!important}ion-item-option:not(.dcf-delete),ion-item-option:not(.dcf-update){background:rgba(var(--dcf-color-dark-rgb),1)!important}ion-item-option:not(.dcf-delete) .dcf-ti,ion-item-option:not(.dcf-delete) ion-icon,ion-item-option:not(.dcf-update) .dcf-ti,ion-item-option:not(.dcf-update) ion-icon{color:var(--dcf-color-gray-2)!important}ion-item-option.dcf-delete{background:rgba(var(--dcf-color-danger-rgb),.05)!important}ion-item-option.dcf-delete .dcf-ti,ion-item-option.dcf-delete *,ion-item-option.dcf-delete ion-icon{color:var(--dcf-color-danger)!important}ion-item-option.dcf-update{background:rgba(var(--dcf-color-primary-rgb),.05)!important}ion-item-option.dcf-update .dcf-ti,ion-item-option.dcf-update ion-icon{color:var(--dcf-color-gray-2)!important}}ion-item-sliding{box-sizing:border-box}ion-item-sliding[class*=active-slide]{border-color:var(--dcf-color-gray-3)}ion-item-sliding ion-item-option{color:var(--dcf-color-gray-5);box-shadow:inset 0 0 5px rgba(var(--dcf-color-dark-rgb),.15)!important;background:var(--dcf-color-gray-3)}ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--background-hover: var(--dcf-color-gray-8);--background-focused: var(--dcf-color-gray-8)}ion-item.item-lines-full{--padding-top: .5rem;--padding-bottom: .5rem;--padding-start: .25rem;-padding-end:.25rem;padding:0 .65rem}ion-item.item-lines-inset{--padding-top: 0rem !important;--padding-bottom: 0rem !important;--inner-padding-top: .5rem !important;--inner-padding-bottom: .65rem !important}ion-item .dcf-info{min-width:10vw;background:transparent!important}ion-item .dcf-grid{padding:0!important;margin:0!important;min-width:100%!important}ion-item .dcf-item-title{font-style:normal;font-weight:700}ion-item .dcf-description{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-weight:400;font-size:.925rem}ion-item::part(native){min-width:100%}ion-item [slot=start]{margin-right:.5rem!important}ion-item [slot=end]{margin-left:.5rem!important}ion-item .dcf-info{font-size:.9rem}ion-item .dcf-info .dcf-subinfo.dcf-line{margin-left:.5rem}@media (min-width: var(--dcf-width-sm)){ion-item .dcf-info .dcf-subinfo.dcf-line{display:block;margin-left:0}}ion-item #dcf-actions{padding:5px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-actions{display:none;pointer-events:none!important;cursor:text!important}ion-item #dcf-actions *{display:none;pointer-events:none!important;cursor:text!important}}ion-item #dcf-actions ion-button{--padding-start: 1rem;--padding-end: .75rem;--padding-top: .85rem !important;--padding-bottom: .85rem !important;color:#ccc;margin-right:.5rem!important;--background: var(--dcf-color-gray-2) !important}ion-item #dcf-actions ion-button ion-icon{position:relative;left:-1px}@media (max-width: var(--dcf-width-m)){ion-item #dcf-end,ion-item [slot=end]{display:none!important}}ion-item #dcf-end{padding-top:5px;display:flex;align-items:flex-end}ion-item .dcf-icon{display:flex;justify-content:center;align-items:center;text-align:center;margin-right:.5rem!important}ion-item .dcf-icon.dcf-grid-icon{min-width:50px;text-align:left;display:flex;justify-content:flex-start}@media (max-width: var(--dcf-width-s)){ion-item .dcf-icon{align-items:flex-start!important}}ion-item .dcf-icon ion-button ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar{width:48px;height:48px;display:flex;justify-content:center;align-items:center;text-align:center}ion-item .dcf-icon ion-avatar ion-icon{font-size:20px}ion-item .dcf-icon ion-avatar .dcf-icon-large{transform:translateY(5px)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionMenuComponent: [{
+                type: ViewChild,
+                args: ['actionMenuComponent']
             }], lines: [{
                 type: Input
-            }], inset: [{
-                type: Input
-            }], scrollThreshold: [{
-                type: Input
-            }], scrollPosition: [{
-                type: Input
-            }], loadingText: [{
-                type: Input
-            }], showRefresher: [{
+            }], item: [{
                 type: Input
-            }], loadingSpinner: [{
+            }], icon: [{
                 type: Input
-            }], enableFilter: [{
+            }], iconSlot: [{
                 type: Input
-            }], sortDirection: [{
+            }], button: [{
                 type: Input
-            }], sortBy: [{
+            }], title: [{
                 type: Input
-            }], disableSort: [{
+            }], description: [{
                 type: Input
-            }], emptyIcon: [{
+            }], info: [{
                 type: Input
-            }], empty: [{
+            }], subinfo: [{
                 type: Input
-            }], refreshEvent: [{
-                type: Output
             }], clickEvent: [{
                 type: Output
-            }], handleClick: [{
-                type: HostListener,
-                args: ['window:ListItemClickEvent', ['$event']]
-            }], handleSearch: [{
-                type: HostListener,
-                args: ['window:searchbarEvent', ['$event']]
-            }], refresh: [{
+            }], enableSlideItems: [{
                 type: HostListener,
-                args: ['window:BackButtonNavigationEndEvent', ['$event']]
+                args: ['window:resize', ['$event']]
             }] } });
 
 let SteppedFormComponent = class SteppedFormComponent {
@@ -8446,6 +8424,17 @@ let SteppedFormComponent = class SteppedFormComponent {
          * @memberOf SteppedFormComponent
          */
         this.pages = 1;
+        /**
+         * List of titles and descriptions for each page of the stepped form.
+         * Each object in the array represents a page, containing a title and a description.
+         *
+         * @example
+         * pageTitles = [
+         *   { title: 'Personal Information', description: 'Fill in your personal details.' },
+         *   { title: 'Address', description: 'Provide your residential address.' }
+         * ];
+         */
+        this.pageTitles = [];
         /**
          * @description The CRUD operation type for this form.
          * @summary Defines the type of operation being performed (CREATE, READ, UPDATE, DELETE).
@@ -8534,7 +8523,6 @@ let SteppedFormComponent = class SteppedFormComponent {
      *
      *   A->>S: ngOnInit()
      *   S->>S: Set activePage = startPage
-     *   S->>S: Process children into pagesArray
      *   S->>S: Calculate total pages
      *   S->>S: Assign page props to children
      *   S->>S: getCurrentFormGroup(activePage)
@@ -8547,14 +8535,9 @@ let SteppedFormComponent = class SteppedFormComponent {
         if (!this.locale)
             this.locale = getLocaleContext("SteppedFormComponent");
         this.activePage = this.startPage;
-        this.pagesArray = this.children.reduce((acc, curr, index) => {
-            const page = curr.props?.['page'] || index + 1;
-            if (!acc[page])
-                acc[page] = [];
-            acc[page].push({ index: page });
-            return acc;
-        }, []).filter(Boolean);
-        this.pages = this.pagesArray.length;
+        if (!this.pageTitles.length)
+            this.pageTitles = Array.from({ length: this.pages }, () => ({ title: '', description: '' }));
+        this.pages = this.pageTitles.length;
         this.children = [...this.children.map((c) => {
                 if (!c.props)
                     c.props = {};
@@ -8563,6 +8546,7 @@ let SteppedFormComponent = class SteppedFormComponent {
                 c.props['page'] = page > this.pages ? this.pages : page;
                 return c;
             })];
+        console.log(this.pageTitles);
         this.getCurrentFormGroup(this.activePage);
     }
     /**
@@ -8676,19 +8660,16 @@ let SteppedFormComponent = class SteppedFormComponent {
     getCurrentFormGroup(page) {
         this.activeFormGroup = this.formGroup.at(page - 1);
         this.activeChildren = undefined;
-        this.timerSubscription = timer(10).subscribe(() => {
-            this.activeChildren = this.children.filter(c => c.props?.['page'] === page);
-            console.log(this.activeChildren);
-        });
+        this.timerSubscription = timer(10).subscribe(() => this.activeChildren = this.children.filter(c => c.props?.['page'] === page));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { locale: "locale", pages: "pages", operation: "operation", startPage: "startPage", children: "children", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div>\n        @for(page of pagesArray; track $index;) {\n        <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n      }\n    </div>\n  </div>\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SteppedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SteppedFormComponent, isStandalone: true, selector: "ngx-decaf-stepped-form", inputs: { locale: "locale", pages: "pages", pageTitles: "pageTitles", operation: "operation", startPage: "startPage", children: "children", formGroup: "formGroup" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div class=\"dcf-grid dcf-grid-collapse skip\">\n      @for(page of pageTitles; track $index;) {\n        <div class=\"dcf-flex dcf-flex-middle\">\n          <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n          @if((page?.title || page?.description)) {\n            <div class=\"dcf-information dcf-visible@s\">\n              @if(page?.title) {\n                <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n              }\n              @if(page?.description) {\n                <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n              }\n              <div class=\"dcf-separator\"></div>\n            </div>\n          }\n          @if($index < pageTitles.length - 1) {\n            <div class=\"dcf-arrow-container\">\n              <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M1.5 1L6.5 6L1.5 11\" />\n              </svg>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n    <div class=\"dcf-current-step\">\n      <div>\n        @if(pageTitles[activePage - 1]?.title) {\n          <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n        }\n        @if(pageTitles[activePage - 1]?.description) {\n          <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n        }\n      </div>\n    </div>\n  }\n\n\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "globals", "children", "model", "parent"], outputs: ["listenEvent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SteppedFormComponent = __decorate([
     Dynamic(),
     __metadata("design:paramtypes", [])
 ], SteppedFormComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SteppedFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SteppedFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-decaf-stepped-form', imports: [
                         TranslatePipe,
@@ -8696,14 +8677,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonSkeletonText,
                         IonText,
                         IonButton,
-                        IonIcon,
-                        ModelRendererComponent,
                         ComponentRendererComponent
-                    ], standalone: true, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div>\n        @for(page of pagesArray; track $index;) {\n        <div [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n      }\n    </div>\n  </div>\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"clear\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon>\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button [fill]=\"activePage === pages ? 'solid' : 'outline'\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon>\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;margin-bottom:2rem}.dcf-page-steps>div{justify-content:center;min-width:200px;max-width:200px;column-gap:.25em;display:flex}.dcf-page-steps>div>div{width:30px;text-align:center;border-bottom:solid var(--dcf-color-gray-3);box-sizing:border-box;border-width:3px;font-size:0px;font-weight:600}.dcf-page-steps>div>div.dcf-active{border-width:5px;font-size:1rem;color:var(--ion-color-gray-7);border-color:var(--ion-color-primary);line-height:1rem}.dcf-page-steps>div>div.dcf-passed{border-width:4px;font-size:.5rem;line-height:1.2rem;border-color:var(--dcf-color-gray-5);color:var(--ion-color-primary)}\n"] }]
+                    ], standalone: true, template: "<form class=\"dcf-steped-form\" novalidate>\n  <div class=\"dcf-page-steps\">\n    <div class=\"dcf-grid dcf-grid-collapse skip\">\n      @for(page of pageTitles; track $index;) {\n        <div class=\"dcf-flex dcf-flex-middle\">\n          <div class=\"dcf-step\" [class.dcf-active]=\"activePage === $index + 1\" [class.dcf-passed]=\"($index + 1) < activePage\">{{ $index + 1 }}</div>\n          @if((page?.title || page?.description)) {\n            <div class=\"dcf-information dcf-visible@s\">\n              @if(page?.title) {\n                <div class=\"dcf-title\">{{ page?.title | translate }}</div>\n              }\n              @if(page?.description) {\n                <div class=\"dcf-description\">{{ page?.description | translate }}</div>\n              }\n              <div class=\"dcf-separator\"></div>\n            </div>\n          }\n          @if($index < pageTitles.length - 1) {\n            <div class=\"dcf-arrow-container\">\n              <svg width=\"8\" height=\"12\" viewBox=\"0 0 8 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M1.5 1L6.5 6L1.5 11\" />\n              </svg>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  </div>\n\n  @if(pageTitles[activePage - 1]?.title || pageTitles[activePage - 1]?.description) {\n    <div class=\"dcf-current-step\">\n      <div>\n        @if(pageTitles[activePage - 1]?.title) {\n          <div class=\"dcf-title\">{{  pageTitles[activePage - 1]?.title  | translate }}</div>\n        }\n        @if(pageTitles[activePage - 1]?.description) {\n          <div class=\"dcf-description\">{{ pageTitles[activePage - 1]?.description | translate }}</div>\n        }\n      </div>\n    </div>\n  }\n\n\n  @if(formGroup) {\n    @for(child of activeChildren;  track $index) {\n      <ngx-decaf-component-renderer\n        [tag]=\"child?.tag\"\n        (listenEvent)=\"handleEvent($event)\"\n        [children]=\"child?.children || []\"\n        [globals]=\"{props: child.props}\"\n      />\n    }\n  } @else {\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n    <br />\n    <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n    <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n  }\n\n  <div class=\"dcf-buttons-container dcf-grid dcf-grid-collapse dcf-flex dcf-flex-left\">\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button  color=\"light\" (click)=\"handleBack()\" [disabled]=\"activePage <= 1\">\n        <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-back-outline\"></ion-icon> -->\n          {{locale + '.previous' | translate}}\n      </ion-button>\n    </div>\n\n    <div class=\"dcf-width-1-2@s\">\n      <ion-button fill=\"solid\"  (click)=\"handleNext(activePage === pages ? true : false)\">\n        @if(activePage === pages) {\n          {{locale + '.submit' | translate}}\n        } @else {\n          {{locale + '.next' | translate}}\n          <!-- <ion-icon aria-hidden=\"true\" name=\"arrow-forward-outline\"></ion-icon> -->\n        }\n      </ion-button>\n    </div>\n  </div>\n</form>\n", styles: [".dcf-buttons-container{margin-top:1.8rem;margin-bottom:0}@media (min-width: 639px){.dcf-buttons-container.dcf-flex div:nth-child(2){display:flex;justify-content:flex-end}}@media (max-width: 638px){.dcf-buttons-container.dcf-flex div{width:100%}.dcf-buttons-container.dcf-flex ion-button{width:100%;margin-bottom:1rem}}.dcf-steped-form{padding:2rem 1rem}.dcf-page-steps{display:flex;justify-content:center;align-items:center;margin-bottom:2rem;overflow-x:auto;flex-wrap:nowrap}.dcf-page-steps .dcf-grid{display:flex!important;flex-wrap:nowrap!important;align-items:center}.dcf-step{height:38px;min-width:38px;width:38px;background:var(--dcf-color-gray-2);margin:0;display:flex;color:var(--dcf-color-gray-7);justify-content:center;align-items:center;font-size:1rem;font-weight:600;border-radius:var(--dcf-border-radius)}.dcf-step.dcf-active{color:var(--dcf-color-light);background:var(--ion-color-primary);box-shadow:0 2px 6px #144c714d}.dcf-step.dcf-passed{color:var(--dcf-color-primary-shade);background:var(--dcf-color-gray-3)}.dcf-information{padding-left:.5rem}.dcf-title{font-size:.875rem;font-weight:600;margin:0;color:var(--dcf-color-gray-7)}.dcf-description{font-size:.8rem;font-weight:500;margin:0;margin-top:.25rem;color:var(--dcf-color-gray-4)}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 .5rem;height:38px}.dcf-arrow-container{display:flex;align-items:center;justify-content:center;padding:0 1rem;height:40px}.dcf-arrow-container svg{width:1rem;height:1rem;stroke:var(--dcf-color-gray-8);stroke-opacity:.7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}ion-button[color=light]{--background: var(--dcf-color-gray-7) !important}.dcf-current-step{margin-top:-.5rem!important;margin-bottom:1.75rem!important;display:flex;align-items:center;justify-content:center}@media (min-width: 639px){.dcf-current-step{display:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { locale: [{
                 type: Input
             }], pages: [{
                 type: Input
+            }], pageTitles: [{
+                type: Input
             }], operation: [{
                 type: Input
             }], startPage: [{
@@ -8732,10 +8713,10 @@ class CollapsableDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: CollapsableDirective, isStandalone: true, selector: "[decafCollapsable]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CollapsableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.2", type: CollapsableDirective, isStandalone: true, selector: "[decafCollapsable]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CollapsableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: CollapsableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[decafCollapsable]',
@@ -8761,8 +8742,8 @@ const Components = [
     SteppedFormComponent
 ];
 class ForAngularComponentsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, imports: [ModelRendererComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: ForAngularComponentsModule, imports: [ModelRendererComponent,
             ComponentRendererComponent,
             CrudFieldComponent,
             CrudFormComponent,
@@ -8789,7 +8770,7 @@ class ForAngularComponentsModule {
             LayoutComponent,
             FilterComponent,
             SteppedFormComponent, CollapsableDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularComponentsModule, imports: [CrudFieldComponent,
             CrudFormComponent,
             EmptyStateComponent,
             ListComponent,
@@ -8801,7 +8782,7 @@ class ForAngularComponentsModule {
             FilterComponent,
             SteppedFormComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ForAngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...Components, ...Directives],
@@ -8825,5 +8806,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, MultiI18nLoader, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getI18nLoaderFactoryProviderConfig, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
+export { AngularEngineKeys, BaseComponentProps, CollapsableDirective, ComponentRendererComponent, ComponentsTagNames, CrudFieldComponent, CrudFormComponent, CssClasses, DB_ADAPTER_PROVIDER_TOKEN, DefaultFormReactiveOptions, Dynamic, DynamicModule, EmptyStateComponent, EventConstants, FieldsetComponent, FilterComponent, ForAngularCommonModule, ForAngularComponentsModule, FormConstants, I18N_CONFIG_TOKEN, I18nLoader, I18nLoaderFactory, LayoutComponent, ListComponent, ListComponentsTypes, ListItemComponent, LoggerLevels, ModelRendererComponent, NgxBaseComponent, NgxCrudFormField, NgxFormService, NgxRenderingEngine, PaginationComponent, RouteDirections, SearchbarComponent, SteppedFormComponent, cleanSpaces, dataMapper, formatDate, generateRandomValue, getInjectablesRegistry, getLocaleContext, getLocaleContextByKey, getLocaleFromClassName, getLocaleLanguage, getLogger, getOnWindow, getOnWindowDocument, getWindow, getWindowDocument, getWindowWidth, isDarkMode, isDevelopmentMode, isNotUndefined, isValidDate, itemMapper, parseToValidDate, provideDbAdapter, provideI18nLoader, removeFocusTrap, setOnWindow, stringToBoolean, windowEventEmitter };
 //# sourceMappingURL=decaf-ts-for-angular.mjs.map