@decaf-ts/for-angular 0.0.47 → 0.0.48

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

@@ -1,15 +1,15 @@
-import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, UIKeys, RenderingError, UIMediaBreakPoints } from '@decaf-ts/ui-decorators';
+import { HTML5InputTypes, parseValueByType, HTML5CheckTypes, escapeHtml, parseToNumber, RenderingEngine, DecafComponent, UIKeys, RenderingError, UIMediaBreakPoints, DecafEventHandler } from '@decaf-ts/ui-decorators';
 import * as i0 from '@angular/core';
 import { InjectionToken, NgModule, isDevMode, reflectComponentType, Injector, createEnvironmentInjector, runInInjectionContext, createComponent, inject, NgZone, Injectable, ChangeDetectorRef, Renderer2, EventEmitter, ElementRef, Input, Output, ViewChild, Inject, Directive, EnvironmentInjector, ViewContainerRef, TemplateRef, Component, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, Location, NgComponentOutlet } from '@angular/common';
 import { VALIDATION_PARENT_KEY, ValidationKeys, DEFAULT_PATTERNS, Validation, Primitives, ComparisonValidationKeys, PathProxyEngine, Model, ModelKeys, isValidDate as isValidDate$1, parseDate, sf, ReservedModels } from '@decaf-ts/decorator-validation';
-import { OperationKeys, InternalError } from '@decaf-ts/db-decorators';
+import { OperationKeys, InternalError, NotFoundError } from '@decaf-ts/db-decorators';
 import * as i1 from '@angular/forms';
 import { FormGroup, FormControl, FormsModule, ReactiveFormsModule, FormArray, AbstractControl, Validators } from '@angular/forms';
 import { InjectableRegistryImp } from '@decaf-ts/injectable-decorators';
 import { TranslateModule, TranslatePipe, TranslateParser, provideTranslateService, TranslateLoader, provideTranslateParser, TranslateService } from '@ngx-translate/core';
-import { Logging, LoggedClass } from '@decaf-ts/logging';
+import { Logging } from '@decaf-ts/logging';
 import { Repository, OrderDirection, Condition } from '@decaf-ts/core';
 import { uses, Metadata, apply, metadata } from '@decaf-ts/decoration';
 import { faker } from '@faker-js/faker';
@@ -572,9 +572,10 @@ function getModelAndRepository(model) {
             uses(dbAdapterFlavour)(constructor);
         const repository = Repository.forModel(constructor);
         model = new constructor();
-        if (!repository.pk)
+        const pk = Model.pk(repository.class);
+        if (!pk)
             return undefined;
-        return { repository, model };
+        return { repository, model, pk };
     }
     catch (error) {
         getLogger(getModelAndRepository).warn(error?.message || error);
@@ -603,13 +604,12 @@ function getModelAndRepository(model) {
  *   provideDbAdapter(PostgresAdapter, { host: 'localhost', port: 5432 })
  * ]
  */
-function provideDbAdapter(adapterClass, options = {}, flavour) {
-    const adapter = new adapterClass(options);
+function provideDbAdapter(clazz, options = {}, flavour) {
+    const adapter = new clazz(options);
     if (flavour)
         flavour = adapter.flavour;
-    // Log and expose adapter flavour globally
     getLogger(provideDbAdapter).info(`Using ${adapter.constructor.name} ${flavour} as Db Provider`);
-    getWindow()[DB_ADAPTER_PROVIDER] = flavour;
+    setOnWindow(DB_ADAPTER_PROVIDER, flavour);
     return {
         provide: DB_ADAPTER_PROVIDER_TOKEN,
         useValue: adapter,
@@ -1423,6 +1423,7 @@ class NgxFormService {
                 partFormGroup[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] = {
                     childOf: childOf || '',
                     isMultiple: isMultiple,
+                    required: parentProps?.required ?? false,
                     name: part,
                     pk,
                     [ModelKeys.MODEL]: {},
@@ -1970,13 +1971,27 @@ class NgxFormService {
         if (control instanceof FormArray) {
             const totalGroups = control.length;
             const hasValid = control.controls.some(control => control.valid);
-            if (totalGroups > 1 && hasValid) {
+            const parentProps = control[BaseComponentProps.FORM_GROUP_COMPONENT_PROPS] || {};
+            const childControl = control.at(0);
+            if (totalGroups === 1) {
+                const parent = childControl.parent;
+                if (!parentProps.required) {
+                    parent.setErrors(null);
+                    parent.updateValueAndValidity({ emitEvent: true });
+                    childControl.disable();
+                }
+                else {
+                    this.validateFields(childControl);
+                }
+            }
+            else if (totalGroups > 1 && hasValid) {
                 for (let i = control.length - 1; i >= 0; i--) {
                     const childControl = control.at(i);
                     // disable no valid groups on array
                     if (!childControl.valid) {
-                        childControl.parent.setErrors(null);
-                        childControl.parent.updateValueAndValidity({ emitEvent: true });
+                        const parent = childControl.parent;
+                        parent.setErrors(null);
+                        parent.updateValueAndValidity({ emitEvent: true });
                         childControl.disable();
                     }
                     else {
@@ -2199,25 +2214,23 @@ class DecafFakerRepository {
         if (!this._repository)
             this._repository = this.repository;
     }
-    async generateData(pkValues, pk, pkType) {
-        const limit = pkValues
-            ? Object.values(pkValues || {}).length - 1
-            : this.limit;
-        if (!pk)
-            pk = this._repository?.pk;
-        if (!pkType)
-            pkType = Metadata.type(this.repository.class, pk).name.toLowerCase();
+    async generateData(values, key, keyType) {
+        const limit = values ? Object.values(values || {}).length : this.limit;
+        if (!key)
+            key = Model.pk(this.repository.class);
+        if (!keyType)
+            keyType = Metadata.type(this.repository.class, key).name.toLowerCase();
         const props = Object.keys(this.model).filter((k) => {
-            if (pkType === Primitives.STRING)
+            if (keyType === Primitives.STRING)
                 return !['updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
-            return ![pk, 'updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
+            return ![key, 'updatedBy', 'createdAt', 'createdBy', 'updatedAt'].includes(k);
         });
         const dataProps = {};
         for (const prop of props) {
-            const type = Metadata.type(this.repository.class, prop).name.toLowerCase();
-            switch ((type?.name || '').toLowerCase()) {
+            const type = Metadata.type(this.repository.class, prop);
+            switch (type.name.toLowerCase()) {
                 case 'string':
-                    dataProps[prop] = () => `${faker.lorem.word()} ${pk === prop ? ' - ' + faker.number.int({ min: 1, max: 200 }) : ''}`;
+                    dataProps[prop] = () => `${faker.lorem.word()} ${key === prop ? ' - ' + faker.number.int({ min: 1, max: 200 }) : ''}`;
                     break;
                 case 'step':
                     dataProps[prop] = () => faker.lorem.word();
@@ -2243,25 +2256,25 @@ class DecafFakerRepository {
             }
         }
         const data = getFakerData(limit, dataProps, typeof this.model === 'string' ? this.model : this.model?.constructor.name);
-        if (!pkValues)
+        if (!values)
             return data;
-        const values = Object.values(pkValues);
+        const _values = Object.values(values);
         const iterated = [];
         function getPkValue(item) {
-            if (values.length > 0) {
-                const randomIndex = Math.floor(Math.random() * values.length);
-                const selected = values.splice(randomIndex, 1)[0];
-                const value = pkType === Primitives.STRING
+            if (_values.length > 0) {
+                const randomIndex = Math.floor(Math.random() * _values.length);
+                const selected = _values.splice(randomIndex, 1)[0];
+                const value = keyType === Primitives.STRING
                     ? selected
-                    : pkType === Primitives.NUMBER
+                    : keyType === Primitives.NUMBER
                         ? parseToNumber(selected)
-                        : pkType === Array.name
+                        : keyType === Array.name
                             ? [selected]
                             : selected;
-                item[pk] = value;
+                item[key] = value;
             }
-            if (!iterated.includes(item[pk])) {
-                iterated.push(item[pk]);
+            if (!iterated.includes(item[key])) {
+                iterated.push(item[key]);
                 return item;
             }
             return undefined;
@@ -2270,9 +2283,9 @@ class DecafFakerRepository {
         return data
             .map((d) => getPkValue(d))
             .filter((item) => {
-            if (!item || uids.has(item[pk]) || !item[pk] || item[pk] === undefined)
+            if (!item || uids.has(item[key]) || !item[key] || item[key] === undefined)
                 return false;
-            uids.add(item[pk]);
+            uids.add(item[key]);
             return true;
         })
             .filter(Boolean);
@@ -2290,6 +2303,8 @@ function getFakerData(limit = 100, data, model) {
         //   (item as any).code = `${index}`;
         // item.id = index;
         // item.createdAt = faker.date.past({ refDate: '2025-01-01' });
+        if (item['productCode'])
+            item['productCode'] = `${index}`;
         index = index + 1;
         return (!model ? item : Model.build(item, model));
     });
@@ -2810,6 +2825,10 @@ var operations = {
 	"delete": {
 		success: "Successfully deleted item with {0} {1}.",
 		error: "Error deleting item with {0} {1}."
+	},
+	multiple: {
+		success: "Successfully processed all operations.",
+		error: "Error processing operations."
 	}
 };
 var component = {
@@ -2819,7 +2838,8 @@ var component = {
 		cancel: "Cancel",
 		not_unique: "The value entered already exists. Value {0}",
 		max_items: "You can create up to {0} items.",
-		max_items_reached: "Maximum of {0} items reached."
+		max_items_reached: "Maximum of {0} items reached.",
+		empty: "No items found."
 	},
 	list: {
 		pagination: "Showing page <span class=\"text-bold\">{0} of {1}</span>",
@@ -3552,9 +3572,9 @@ class NgxComponentDirective extends DecafComponent {
          * The operation affects form validation, field availability, and the specific repository
          * method called during data submission.
          *
-         * @type {OperationKeys.CREATE | OperationKeys.READ | OperationKeys.UPDATE | OperationKeys.DELETE}
+         * @type {OperationKeys}
          * @default OperationKeys.READ
-         *  @memberOf ModelPage
+         * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.operation = OperationKeys.READ;
         /**
@@ -3642,6 +3662,16 @@ class NgxComponentDirective extends DecafComponent {
          * @memberOf module:lib/engine/NgxComponentDirective
          */
         this.listenEvent = new EventEmitter();
+        /**
+         * @description Event emitter for custom component events.
+         * @summary Emits custom events that occur within child components or the component itself.
+         * This allows parent components to listen for and respond to user interactions or
+         * state changes. Events are passed up the component hierarchy to enable coordinated
+         * behavior across the application.
+         * @type {EventEmitter<IBaseCustomEvent>}
+         * @memberOf module:lib/engine/NgxComponentDirective
+         */
+        this.refreshEvent = new EventEmitter();
         /**
          * @description Angular Router instance for programmatic navigation.
          * @summary Injected Router service used for programmatic navigation between routes
@@ -3723,7 +3753,17 @@ class NgxComponentDirective extends DecafComponent {
         this.isModalChild = false;
         this.handlers = {};
         this.events = {};
-        this.componentName = componentName || "NgxComponentDirective";
+        /**
+         * @description Indicates whether a refresh operation is in progress.
+         * @summary When true, the component is currently fetching new data. This is used
+         * to control loading indicators and prevent duplicate refresh operations from
+         * being triggered simultaneously.
+         *
+         * @type {boolean}
+         * @default false
+         */
+        this.refreshing = false;
+        this.componentName = componentName || 'NgxComponentDirective';
         this.localeRoot = localeRoot;
         if (!this.localeRoot && this.componentName)
             this.localeRoot = this.componentName;
@@ -3742,6 +3782,11 @@ class NgxComponentDirective extends DecafComponent {
     ngOnDestroy() {
         this.mediaService.destroy();
     }
+    //TODO: Pass to ui decoretators
+    async refresh(...args) {
+        this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
+        this.refreshEvent.emit(true);
+    }
     /**
      * @description Getter for the current locale context identifier.
      * @summary Returns the current locale identifier by calling the getLocale method.
@@ -3767,8 +3812,7 @@ class NgxComponentDirective extends DecafComponent {
             if (!this._repository) {
                 this._repository = getModelAndRepository(this.model)?.repository;
                 if (this.model && !this.pk)
-                    this.pk =
-                        this._repository.pk || 'id';
+                    this.pk = Model.pk(this._repository?.class);
             }
         }
         catch (error) {
@@ -3776,6 +3820,9 @@ class NgxComponentDirective extends DecafComponent {
         }
         return this._repository;
     }
+    set repository(repository) {
+        this._repository = repository;
+    }
     /**
      * @description Angular lifecycle hook for handling input property changes.
      * @summary Responds to changes in component input properties, specifically monitoring changes
@@ -3795,21 +3842,39 @@ class NgxComponentDirective extends DecafComponent {
             if (!this.initialized)
                 this.initialized = true;
         }
+        // if (changes[UIKeys.HANDLERS]) {
+        //   const { currentValue, previousValue } = changes[UIKeys.HANDLERS];
+        //   if (currentValue && typeof currentValue !== previousValue) {
+        //     for(const key in currentValue) {
+        //       const event = currentValue[key]();
+        //       if (event && typeof event === 'function') {
+        //         const clazz = new event();
+        //         this.handlers[key] = clazz[key].bind(this);
+        //         console.log(this.handlers);
+        //       }
+        //     }
+        //   }
+        // }
         if (changes[UIKeys.EVENTS]) {
             const { currentValue, previousValue } = changes[UIKeys.EVENTS];
-            if (currentValue && typeof currentValue !== previousValue) {
+            if (currentValue && currentValue !== previousValue) {
                 if (!this._repository)
                     this._repository = this.repository;
                 for (const key in currentValue) {
                     const event = currentValue[key]();
                     if (event && typeof event === 'function') {
-                        const clazz = new event();
-                        this.events[key] = clazz[key].bind(this);
-                        if (event[key] instanceof Promise) {
-                            await clazz[key].bind(this)();
+                        try {
+                            const clazz = new event();
+                            this.events[key] = clazz[key].bind(this);
+                            if (event[key] instanceof Promise) {
+                                await clazz[key].bind(this)();
+                            }
+                            else {
+                                clazz[key].bind(this)();
+                            }
                         }
-                        else {
-                            clazz[key].bind(this)();
+                        catch (error) {
+                            this.log.for(this.ngOnChanges).warn(`Error occurred while processing event "${key}": ${error?.message || error}`);
                         }
                     }
                 }
@@ -3839,7 +3904,7 @@ class NgxComponentDirective extends DecafComponent {
         ;
     }
     checkDarkMode() {
-        this.mediaService.isDarkMode().subscribe(isDark => {
+        this.mediaService.isDarkMode().subscribe((isDark) => {
             this.isDarkMode = isDark;
             this.mediaService.toggleClass([this.component], AngularEngineKeys.DARK_PALETTE_CLASS, this.isDarkMode);
         });
@@ -4016,7 +4081,7 @@ class NgxComponentDirective extends DecafComponent {
      *   end
      * @memberOf module:lib/engine/NgxComponentDirective
      */
-    async handleEvent(event) {
+    async handleEvent(event, repository) {
         let name = "";
         const log = this.log.for(this.handleEvent);
         if (event instanceof CustomEvent) {
@@ -4031,8 +4096,11 @@ class NgxComponentDirective extends DecafComponent {
             if (!handlers[name])
                 return log.debug(`No handler found for event ${name}`);
             try {
-                const clazz = new handlers[name](this.router);
-                const result = clazz.handle(event);
+                const clazz = new handlers[name]();
+                const handler = clazz.handle.bind(this);
+                //const clazz = new event();
+                // this.events[key] = clazz[key].bind(this);
+                const result = handler(event);
                 return (result instanceof Promise) ?
                     await result : result;
             }
@@ -4042,6 +4110,10 @@ class NgxComponentDirective extends DecafComponent {
         }
         this.listenEvent.emit(event);
     }
+    // passed for ui decorators
+    // async submit(...args: unknown[]): Promise<any> {
+    //   this.log.for(this.submit).info(`submit for ${this.componentName} with ${JSON.stringify(args)}`);
+    // }
     /**
      * @description Determines if a specific operation is allowed in the current context.
      * @summary This method checks if an operation is included in the list of available
@@ -4068,7 +4140,9 @@ class NgxComponentDirective extends DecafComponent {
     isAllowed(operation) {
         if (!this.operations)
             return false;
-        return this.operations.includes(operation) && (this.operation !== OperationKeys.CREATE && ((this.operation || "").toLowerCase() !== operation || !this.operation));
+        return (this.operations.includes(operation) &&
+            this.operation !== OperationKeys.CREATE &&
+            ((this.operation || '').toLowerCase() !== operation || !this.operation));
     }
     /**
      * @description Navigates to a different operation for the current model.
@@ -4105,7 +4179,7 @@ class NgxComponentDirective extends DecafComponent {
         return this.router.navigateByUrl(page);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxComponentDirective, deps: [{ token: CPTKN }, { token: CPTKN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events" }, outputs: { listenEvent: "listenEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: NgxComponentDirective, isStandalone: true, inputs: { enableDarkMode: "enableDarkMode", isDarkMode: "isDarkMode", name: "name", childOf: "childOf", uid: "uid", model: "model", modelId: "modelId", value: "value", pk: "pk", mapper: "mapper", operations: "operations", operation: "operation", row: "row", col: "col", className: "className", locale: "locale", item: "item", props: "props", route: "route", borders: "borders", isModalChild: "isModalChild", handlers: "handlers", events: "events" }, outputs: { listenEvent: "listenEvent", refreshEvent: "refreshEvent" }, host: { properties: { "attr.id": "uid" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxComponentDirective, decorators: [{
             type: Directive,
@@ -4133,6 +4207,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], modelId: [{
                 type: Input
+            }], value: [{
+                type: Input
             }], pk: [{
                 type: Input
             }], mapper: [{
@@ -4149,6 +4225,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], listenEvent: [{
                 type: Output
+            }], refreshEvent: [{
+                type: Output
             }], locale: [{
                 type: Input
             }], item: [{
@@ -4913,7 +4991,7 @@ class ModelRendererComponent extends NgxRenderableComponentDirective {
      * @description Refreshes the rendered model
      * @param {string | M} model - The model to be rendered
      */
-    refresh(model) {
+    async refresh(model) {
         model =
             typeof model === 'string'
                 ? Model.build({}, model)
@@ -5094,7 +5172,7 @@ class NgxParentComponentDirective extends NgxComponentDirective {
         const content = this.children[page];
         this.activePage = undefined;
         this.preloadCards = [...new Array(1)];
-        this.timerSubscription = timer(1).subscribe(() => this.activePage = { ...this.children[page] });
+        this.timerSubscription = timer(25).subscribe(() => this.activePage = { ...this.children[page] });
         this.activeIndex = page;
         if (content)
             return content;
@@ -6060,7 +6138,7 @@ class NgxFormDirective extends NgxParentComponentDirective {
             return NgxFormService.reset(this.formGroup);
         this.location.back();
     }
-    async handleSubmit(event, eventName, componentName) {
+    async submit(event, eventName, componentName) {
         if (event) {
             event.preventDefault();
             event.stopImmediatePropagation();
@@ -6530,7 +6608,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.changeDetectorRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LayoutComponent, isStandalone: true, selector: "ngx-decaf-layout", inputs: { gap: "gap", grid: "grid", flexMode: "flexMode", rowCard: "rowCard", maxColsLength: "maxColsLength" }, usesInheritance: true, ngImport: i0, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ngx-decaf-card", inputs: ["type", "title", "body", "subtitle", "color", "separator", "borders", "inlineContent", "inlineContentPosition"] }, { kind: "component", type: ModelRendererComponent, selector: "ngx-decaf-model-renderer", inputs: ["projectable"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 LayoutComponent = __decorate([
     Dynamic(),
@@ -6538,7 +6616,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
+            args: [{ selector: 'ngx-decaf-layout', imports: [TranslatePipe, CardComponent, ModelRendererComponent, ComponentRendererComponent], standalone: true, template: "<section class=\"dcf-layout-container\">\n  @if (initialized) {\n    @for (row of rows; track trackItemFn($index, row); let rowIndex = $index) {\n      @if (row?.cols?.length) {\n        <div\n          [id]=\"uid\"\n          [class]=\"\n            (!grid\n              ? 'dcf-layout-row '\n              : 'dcf-layout-row dcf-grid ' + 'dcf-grid-' + gap) +\n            ' ' +\n            (className || '')\n          \"\n          [class.dcf-grid-match]=\"match\"\n          [class.dcf-grid-bordered]=\"borders\"\n        >\n          @if (row?.title?.length) {\n            <div class=\"dcf-width-1-1 dcf-grid-title\">\n              <h3 class=\"\">{{ row.title | translate }}</h3>\n            </div>\n          }\n          @for (\n            child of row.cols;\n            track trackItemFn($index, child.col);\n            let colIndex = $index\n          ) {\n\n            <div\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n            >\n              <div>\n\n                @if (child.tag === \"ngx-decaf-crud-form\") {\n\n                  <ngx-decaf-card\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [body]=\"cardBody\"\n                    [type]=\"cardType\"\n                  >\n                    <ngx-decaf-model-renderer\n                      [model]=\"child.props.name\"\n                      (listenEvent)=\"handleEvent($event)\"\n                    />\n                  </ngx-decaf-card>\n                } @else {\n\n                   <ngx-decaf-component-renderer\n                    [tag]=\"child.tag\"\n                    [className]=\"\n                      (match ? 'dcf-height-1-1 dcf-card-layout' : '') +\n                      className\n                    \"\n                    [parentForm]=\"parentForm || child.parentForm || child?.formGroup\"\n                    [children]=\"child?.children || []\"\n                    (listenEvent)=\"handleEvent($event)\"\n                    [globals]=\"{ props: child.props }\"\n                  />\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  }\n</section>\n", styles: [".dcf-grid.dcf-grid-collapse.read>div{margin:var(--dcf-margin-small) 0!important}.dcf-grid.dcf-grid-bordered>div>div{padding:var(--dcf-padding-small) var(--dcf-padding);border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-2);background:var(--dcf-card-background)!important}.dcf-grid .dcf-grid-title{padding:unset;margin:unset}.dcf-grid .dcf-grid-title>*{padding:unset;margin:unset;padding-left:var(--dcf-padding-small);font-size:1.05rem!important;font-weight:600;background:none;box-shadow:none;display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dcf-grid.dcf-grid-match ::ng-deep ngx-decaf-component-renderer>*>*{height:100%!important}.dcf-grid.dcf-grid-small.dcf-grid-nested{padding:0 .5rem!important}.dcf-grid.dcf-grid-small>div{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small>div.dcf-layout-separator{margin-bottom:1rem}.dcf-grid.dcf-grid-small>div.dcf-grid-bordered:last-child{margin-bottom:0}.dcf-grid.dcf-grid-small+.dcf-grid-small{margin-bottom:1.75rem}.dcf-grid.dcf-grid-small+.dcf-grid-small.dcf-layout-separator{margin-bottom:1rem}::ng-deep ngx-decaf-component-renderer>*>div{margin-bottom:0!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gap: [{
                 type: Input
             }], grid: [{
@@ -6587,7 +6665,7 @@ let CrudFormComponent = class CrudFormComponent extends NgxFormDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CrudFormComponent, isStandalone: true, selector: "ngx-decaf-crud-form", host: { properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 };
 CrudFormComponent = __decorate([
     Dynamic(),
@@ -6595,7 +6673,7 @@ CrudFormComponent = __decorate([
 ], CrudFormComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CrudFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"handleSubmit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
+            args: [{ standalone: true, selector: 'ngx-decaf-crud-form', imports: [ReactiveFormsModule, LayoutComponent, ComponentRendererComponent, IonButton, IonIcon], host: { '[attr.id]': 'uid' }, template: "@if (operation !== 'read' && operation !== 'delete') {\n  <form\n    [class]=\"'dcf-form-grid ' + operation\" #component\n    [id]=\"rendererId\"\n    [formGroup]=\"formGroup\"\n    (ngSubmit)=\"submit($event)\"\n    novalidate\n    [target]=\"target\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n        <ngx-decaf-layout\n          [className]=\"'dcf-crud-form-grid dcf-grid-nested '\"\n          [children]=\"children || []\"\n          [parentForm]=\"formGroup || parentForm\"\n          [match]=\"match ?? false\"\n          [gap]=\"'small'\"\n          [flexMode]=\"props.flexMode || false\"\n          [rows]=\"rows\"\n          [borders]=\"borders ?? false\"\n          [breakpoint]=\"breakpoint ?? 'large'\"\n          [cols]=\"cols\" />\n    }\n    @if (initialized) {\n      <div class=\"dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left\">\n        <div>\n          <ion-button type=\"submit\" [expand]=\"action ? 'block' : 'default'\">\n            @if (options.buttons.submit.icon) {\n              <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n            }\n            {{ action ? action : options.buttons.submit.text}}\n          </ion-button>\n        </div>\n        @if (!action) {\n          <div>\n            <ion-button fill=\"clear\" (click)=\"handleReset()\">\n              @if (options.buttons.clear?.icon) {\n                <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n              }\n              Back\n            </ion-button>\n          </div>\n        }\n      </div>\n    }\n\n  </form>\n} @else {\n  <section [class]=\"'dcf-grid dcf-grid-small dcf-child-width-1-1 dcf-form-grid ' + operation\" #component [id]=\"uid\">\n    @if (!children?.length) {\n      <ng-content #formContent></ng-content>\n    } @else {\n      @for (child of children; track $index) {\n        <div class=\"dcf-form-item\">\n            <ngx-decaf-component-renderer\n              [tag]=\"child?.tag\"\n              [projectable]=\"false\"\n              [children]=\"child?.children || []\"\n              [globals]=\"{props: child.props}\"\n            />\n        </div>\n      }\n    }\n  </section>\n  <section [class]=\"'dcf-buttons-grid dcf-grid dcf-grid-small dcf-flex dcf-flex-left ' + operation\" [id]=\"uid\">\n    @if ([OperationKeys.READ, OperationKeys.DELETE].includes(operation) && modelId) {\n      <div>\n        <ion-button\n          (click)=\"handleDelete()\"\n          color=\"danger\"\n          type=\"button\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          Delete\n        </ion-button>\n      </div>\n\n    }\n    @if (operation === OperationKeys.CREATE || operation === OperationKeys.UPDATE) {\n\n      <div>\n        <ion-button\n          type=\"submit\">\n          @if (options.buttons.submit.icon) {\n            <ion-icon aria-hidden=\"true\" [slot]=\"options.buttons.submit.iconSlot\" [name]=\"options.buttons.submit.icon\"></ion-icon>\n          }\n          {{options.buttons.submit.text}}\n        </ion-button>\n      </div>\n    }\n\n    @if (options.buttons.clear) {\n      <div>\n       <ion-button fill=\"clear\" (click)=\"handleReset()\">\n          @if (options.buttons.clear?.icon) {\n            <ion-icon  aria-hidden=\"true\" [slot]=\"options.buttons.clear?.iconSlot\" [name]=\"options.buttons.clear?.icon\"></ion-icon>\n          }\n          {{ [OperationKeys.DELETE, OperationKeys.READ, OperationKeys.UPDATE].includes(operation) ? 'Back' : options.buttons.clear?.text}}\n        </ion-button>\n      </div>\n\n    }\n  </section>\n}\n\n", styles: [".dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (min-width: 577px){.dcf-buttons-grid.dcf-flex{flex-direction:row-reverse}}@media (max-width: 576px){.dcf-buttons-grid.dcf-flex>div{width:100%}.dcf-buttons-grid.dcf-flex>div+div{margin-top:1rem}.dcf-buttons-grid.dcf-flex ion-button{width:100%}}.dcf-form-grid.create,.dcf-form-grid.update{margin-top:var(--dcf-margin-small)}.dcf-form-grid .dcf-form-item{margin-top:0!important}.dcf-form-grid.read .dcf-form-item{margin-bottom:var(--dcf-margin-small)}\n"] }]
         }], ctorParameters: () => [] });
 
 class NgxSvgDirective {
@@ -7230,6 +7308,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
      * @memberOf FieldsetComponent
      */
     async ngOnInit() {
+        console.log(this.title);
         await super.ngOnInit(this.model);
         if (this.max && this.max === 1)
             this.multiple = false;
@@ -7323,6 +7402,29 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         //   this.formGroup = (this.formGroup as FormGroup)
         // this.changeDetectorRef.detectChanges();
     }
+    async refresh() {
+        this.refreshing = true;
+        this.changeDetectorRef.detectChanges();
+        if ([OperationKeys.READ, OperationKeys.DELETE].includes(this.operation)) {
+            // if(!this.multiple) {
+            //   this.required = this.collapsable = false;
+            // }
+            this.items = [...this.value.map((v) => {
+                    return this.children.map((child) => {
+                        const { props, tag } = child;
+                        return {
+                            tag,
+                            props: {
+                                ...props,
+                                value: v[props.name] || ""
+                            }
+                        };
+                    });
+                })];
+        }
+        this.refreshing = false;
+        this.changeDetectorRef.detectChanges();
+    }
     /**
      * @description Handles removal of the fieldset with slide animation.
      * @summary Initiates the removal process for the fieldset with a smooth slide-up animation.
@@ -7586,7 +7688,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
                 return child;
             });
         });
-        if (this.multiple)
+        if (this.multiple && [OperationKeys.CREATE, OperationKeys.UPDATE].includes(this.operation))
             this.getFormArrayIndex(this.activeFormGroupIndex);
         return this.children;
     }
@@ -7643,7 +7745,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.dcf-not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable || required) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion\n        value=\"open\"\n        [class.dcf-disabled]=\"!activePage\"\n        [class.dcf-empty]=\"!items?.length\"\n      >\n        @if (collapsable && !required) {\n          <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                    <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n         @if (activePage) {\n            <div>\n              <ngx-decaf-layout\n                [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                [flexMode]=\"props.flexMode ?? false\"\n                [match]=\"false\"\n                [gap]=\"'small'\"\n                [children]=\"activePage || []\"\n                [parentForm]=\"formGroup || parentForm\"\n                [rows]=\"rows\"\n                [cols]=\"cols\"\n                [borders]=\"activePage?.borders  ?? false\"\n                [breakpoint]=\"breakpoint ?? 'large'\"\n                [hidden]=\"items.length === max && !updatingItem\"\n              />\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n\n      @if (multiple && items.length) {\n      <ion-list class=\"dcf-fields-list\">\n        <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n          @for(item of items; track item.index) {\n            <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n              @if(ordenable) {\n                @if (items?.length > 1 && !updatingItem) {\n                  <ion-reorder slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                  </ion-reorder>\n                } @else {\n                  <div slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                  </div>\n                }\n              }\n\n              <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                @if (item.description?.length > 0) {\n                  <br />\n                  <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                }\n              </ion-label>\n\n              @if(editable) {\n                @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                    <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                  </ion-button>\n                }\n              }\n\n\n              @if (!updatingItem) {\n                <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                  <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                </ion-button>\n              }\n            </ion-item>\n          }\n        </ion-reorder-group>\n      </ion-list>\n    }\n\n    @if (multiple && ['create', 'update'].includes(operation)) {\n      @if (isUniqueError) {\n        <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n          <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n            <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n              <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n            </div>\n            <div class=\"dcf-width-expand\">\n              <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n            </div>\n          </div>\n        </div>\n      }\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion:not(.dcf-empty){background:var(--dcf-card-background)!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", collapsable: "collapsable", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, viewQueries: [{ propertyName: "accordionComponent", first: true, predicate: ["accordionComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonReorder, selector: "ion-reorder" }, { kind: "component", type: IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: LayoutComponent, selector: "ngx-decaf-layout", inputs: ["gap", "grid", "flexMode", "rowCard", "maxColsLength"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -7665,7 +7767,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonButton,
                         IonIcon,
                         LayoutComponent,
-                    ], template: "\n\n<fieldset\n  (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n  [class]=\"'dcf-fieldset-component ' + operation\"\n  [class.dcf-blank]=\"!borders\"\n  [class.open]=\"isOpen\"\n  [class.dcf-not-collapsable]=\"!collapsable\"\n  #component>\n  <div class=\"dcf-width-1-1\">\n    @if (!collapsable || required) {\n      <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n    }\n    <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n      <ion-accordion\n        value=\"open\"\n        [class.dcf-disabled]=\"!activePage\"\n        [class.dcf-empty]=\"!items?.length\"\n      >\n        @if (collapsable && !required) {\n          <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n            <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n              <div class=\"dcf-width-expand\">\n                <legend>{{ (title ? title : name) | translate }}</legend>\n              </div>\n              @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                <div class=\"dcf-width-auto dcf-delete\">\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                    <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                  </ion-button>\n                </div>\n              }\n            </div>\n          </ion-item>\n        }\n\n        <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n         @if (activePage) {\n            <div>\n              <ngx-decaf-layout\n                [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                [flexMode]=\"props.flexMode ?? false\"\n                [match]=\"false\"\n                [gap]=\"'small'\"\n                [children]=\"activePage || []\"\n                [parentForm]=\"formGroup || parentForm\"\n                [rows]=\"rows\"\n                [cols]=\"cols\"\n                [borders]=\"activePage?.borders  ?? false\"\n                [breakpoint]=\"breakpoint ?? 'large'\"\n                [hidden]=\"items.length === max && !updatingItem\"\n              />\n            </div>\n          }\n        </div>\n      </ion-accordion>\n    </ion-accordion-group>\n\n      @if (multiple && items.length) {\n      <ion-list class=\"dcf-fields-list\">\n        <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n          @for(item of items; track item.index) {\n            <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n              @if(ordenable) {\n                @if (items?.length > 1 && !updatingItem) {\n                  <ion-reorder slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                  </ion-reorder>\n                } @else {\n                  <div slot=\"start\">\n                    <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                  </div>\n                }\n              }\n\n              <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                @if (item.description?.length > 0) {\n                  <br />\n                  <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                }\n              </ion-label>\n\n              @if(editable) {\n                @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                  <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                    <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                  </ion-button>\n                }\n              }\n\n\n              @if (!updatingItem) {\n                <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                  <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                </ion-button>\n              }\n            </ion-item>\n          }\n        </ion-reorder-group>\n      </ion-list>\n    }\n\n    @if (multiple && ['create', 'update'].includes(operation)) {\n      @if (isUniqueError) {\n        <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n          <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n            <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n              <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n            </div>\n            <div class=\"dcf-width-expand\">\n              <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n            </div>\n          </div>\n        </div>\n      }\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n  </div>\n</fieldset>\n\n", styles: ["ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion:not(.dcf-empty){background:var(--dcf-card-background)!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
+                        IonSpinner
+                    ], template: "\n\n  <fieldset\n    (fieldsetAddGroupEvent)=\"handleCreateItem($event)\"\n    [class]=\"'dcf-fieldset-component ' + operation\"\n    [class.dcf-blank]=\"!borders\"\n    [class.open]=\"isOpen\"\n    [class.dcf-not-collapsable]=\"!collapsable\"\n    #component>\n    <div class=\"dcf-width-1-1\">\n      @if (!collapsable || required) {\n        <legend class=\"dcf-title\">{{ (title ? title : name) | translate }}</legend>\n      }\n      <ion-accordion-group class=\"dcf-width-1-1\" [class.open]=\"isOpen\" [class.hasValidationErrors]=\"hasValidationErrors\" [value]=\"(operation === 'read' || !collapsable) ? 'open' : ''\" #accordionComponent>\n        <ion-accordion\n          value=\"open\"\n          [class.dcf-disabled]=\"!activePage\"\n          [class.dcf-empty]=\"!items?.length\"\n        >\n          @if (collapsable && !required) {\n            <ion-item slot=\"header\" [button]=\"collapsable\" (click)=\"handleAccordionToggle($event)\">\n              <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-width-1-1\">\n                <div class=\"dcf-width-expand\">\n                  <legend>{{ (title ? title : name) | translate }}</legend>\n                </div>\n                @if (!isRequired && ['create', 'update'].includes(operation) && collapsable && multiple) {\n                  <div class=\"dcf-width-auto dcf-delete\">\n                    <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\">\n                      <ion-icon aria-hidden=\"true\" name=\"trash-outline\" color=\"dark\" slot=\"icon-only\"></ion-icon>\n                    </ion-button>\n                  </div>\n                }\n              </div>\n            </ion-item>\n          }\n\n          <div slot=\"content\" [attr.aria-hidden]=\"!isOpen\">\n           @if (['create', 'update'].includes(operation) || !multiple) {\n              @if(activePage) {\n                <div>\n                  <ngx-decaf-layout\n                    [className]=\"'dcf-fieldset-grid dcf-grid-nested'\"\n                    [flexMode]=\"props.flexMode ?? false\"\n                    [match]=\"false\"\n                    [gap]=\"'small'\"\n                    [children]=\"activePage || []\"\n                    [parentForm]=\"formGroup || parentForm\"\n                    [rows]=\"rows\"\n                    [cols]=\"cols\"\n                    [borders]=\"activePage?.borders  ?? false\"\n                    [breakpoint]=\"breakpoint ?? 'large'\"\n                    [hidden]=\"items.length === max && !updatingItem\"\n                  />\n                </div>\n              }\n            } @else {\n              @if(refreshing) {\n                <div class=\"dcf-loading-container\">\n                  <ion-spinner name=\"crescent\" color=\"primary\"></ion-spinner>\n                </div>\n              } @else {\n                @if(!items.length) {\n                  <div class=\"dcf-padding-xsmall\">\n                    <ion-text class=\"dcf-text-small\">{{ locale + '.empty' | translate }}</ion-text>\n                  </div>\n                } @else {\n                  @for(item of items; track trackItemFn($index, item)) {\n                    <div class=\"dcf-fieldset-item\">\n                      <div>\n                        <ngx-decaf-layout\n                          [className]=\"'dcf-fieldset-grid dcf-grid-nested ' + operation\"\n                          [flexMode]=\"item?.props?.flexMode ?? false\"\n                          [match]=\"false\"\n                          [gap]=\"'collapse'\"\n                          [children]=\"item || []\"\n                          [rows]=\"rows\"\n                          [cols]=\"cols\"\n                          [borders]=\"item?.props?.borders  ?? false\"\n                          [breakpoint]=\"breakpoint ?? 'large'\"\n                        />\n                      </div>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        </ion-accordion>\n      </ion-accordion-group>\n      @if (multiple && ['create', 'update'].includes(operation)) {\n        @if (multiple && items.length) {\n          <ion-list class=\"dcf-fields-list\">\n            <ion-reorder-group [formGroup]=\"formGroup.parent\" [disabled]=\"updatingItem\" (ionItemReorder)=\"handleReorderItems($any($event))\" #accordionComponent>\n              @for(item of items; track item.index) {\n                <ion-item [class.not-unique]=\"item.title === isUniqueError\"  [class.updating]=\"updatingItem?.[pk] === item.title\" lines=\"full\" [button]=\"false\">\n                  @if(ordenable) {\n                    @if (items?.length > 1 && !updatingItem) {\n                      <ion-reorder slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" name=\"swap-vertical-outline\"></ion-icon>\n                      </ion-reorder>\n                    } @else {\n                      <div slot=\"start\">\n                        <ion-icon aria-hidden=\"true\" class=\"dcf-reorder-disabled\" size=\"small\" name=\"swap-vertical-outline\" disabled></ion-icon>\n                      </div>\n                    }\n                  }\n\n                  <ion-label [color]=\"(item.title === isUniqueError && !updatingItem?.[pk] === item.title) ? 'danger' : ''\">{{ item.index }}. {{ item.title }}\n                    @if (item.description?.length > 0) {\n                      <br />\n                      <ion-text class=\"dcf-subtitle\">{{item.description}}</ion-text>\n                    }\n                  </ion-label>\n\n                  @if(editable) {\n                    @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                      <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\">\n                        <ion-icon aria-hidden=\"true\" name=\"create-outline\" color=\"dark\" ></ion-icon>\n                      </ion-button>\n                    }\n                  }\n\n\n                  @if (!updatingItem) {\n                    <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\">\n                      <ion-icon aria-hidden=\"true\" name=\"close-outline\" color=\"dark\"></ion-icon>\n                    </ion-button>\n                  }\n                </ion-item>\n              }\n            </ion-reorder-group>\n          </ion-list>\n        }\n\n        @if (isUniqueError) {\n          <div class=\"dcf-not-unique-container dcf-animation dcf-animation-bottom-small dcf-animation-fast\">\n            <div class=\" dcf-grid dcf-grid-collapse dcf-width-1-1 \">\n              <div class=\"dcf-auto\" [attr.style]=\"'max-width: 50px'\">\n                <ion-icon aria-hidden=\"true\" name=\"alert-circle-outline\"></ion-icon>\n              </div>\n              <div class=\"dcf-width-expand\">\n                <ion-text color=\"danger\" class=\"dcf-text-small\">{{ locale + '.not_unique' | translate : { value: isUniqueError } }}</ion-text>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if(max) {\n          <div class=\"dcf-width-1-1 dcf-max-message-container\">\n            <ion-text class=\"dcf-text-small\"\n              [color]=\"items.length !== max ? (!isDarkMode ? 'medium' : '') : 'primary'\"\n            >\n              {{ locale + (items.length !== max ?  '.max_items' : '.max_items_reached') | translate : { '0': max } }}\n            </ion-text>\n          </div>\n        }\n\n        <div class=\"dcf-grid dcf-grid-small dcf-flex dcf-buttons-container\" [class.dcf-not-collapsable]=\"!collapsable\"  [class.dcf-empty]=\"!activePage\" [class.dcf-blank]=\"!borders\">\n          @if (updatingItem) {\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\">\n                {{ locale + '.cancel' | translate }}\n              </ion-button>\n            </div>\n            <div>\n              <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\">\n                <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                {{ locale + '.update' | translate }}\n              </ion-button>\n            </div>\n          } @else {\n            @if (items.length < max || !max) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" class=\"dcf-button-add\" [color]=\"isDarkMode ? 'light' : 'dark'\" (click)=\"handleCreateItem()\">\n                  <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.add' | translate }}\n                </ion-button>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  </fieldset>\n\n\n", styles: [".dcf-fieldset-item{border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);padding:var(--dcf-padding-small) var(--dcf-padding-xsmall);padding-bottom:0;margin-bottom:var(--dcf-margin-small)}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}ion-accordion{background:transparent!important;--background: transparent !important}ion-accordion ion-item[slot=header] .dcf-delete{width:30px}ion-accordion ion-item[slot=header] .dcf-delete ion-button{transform:translateY(-2px)}ion-accordion ion-item[slot=header] .dcf-delete ion-icon{font-size:1.15rem}ion-accordion.dcf-disabled [slot=content]{padding-bottom:0rem!important}ion-accordion.dcf-empty,ion-accordion.dcf-disabled{opacity:1!important}ion-accordion.dcf-empty ::ng-deep .ion-accordion-toggle-icon,ion-accordion.dcf-disabled ::ng-deep .ion-accordion-toggle-icon{display:none!important}ion-accordion.dcf-empty .dcf-delete,ion-accordion.dcf-disabled .dcf-delete{display:none!important}ion-accordion.dcf-empty ion-item[slot=header],ion-accordion.dcf-disabled ion-item[slot=header]{pointer-events:none;cursor:default!important}.dcf-not-collapsable .dcf-max-message-container{margin:.75rem;margin-top:0rem!important}.dcf-not-collapsable .dcf-max-message-container+.dcf-buttons-container{margin-top:var(--dcf-margin-small)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3)}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:0rem!important;margin:0!important}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-fieldset-component ion-accordion ion-item{--background-hover: transparent !important}.dcf-fieldset-component.read,.dcf-fieldset-component.delete{margin:var(--dcf-margin-small) 0rem!important}.dcf-fieldset-component.read [slot=header],.dcf-fieldset-component.delete [slot=header]{margin-bottom:0rem!important}.dcf-fieldset-component [slot=header]{--border-color: transparent;--border-radius: 6px;--inner-border-width: 0;--padding-start: .65rem;--color: var(--ion-color-text) !important;margin:unset}.dcf-fieldset-component legend,.dcf-fieldset-component .dcf-title{font-weight:500;font-size:1rem;line-height:1.5rem;font-weight:600;margin:0;color:var(--ion-color-text)!important}.dcf-fieldset-component .dcf-title{padding:.8rem!important}.dcf-fieldset-component [slot=content]{padding:var(--dcf-padding-small) .25rem!important;background:transparent!important;--background: transparent !important}.dcf-fieldset-component [slot=content]>div{padding-top:.25rem!important}.dcf-fieldset-component:not(.dcf-blank) ion-accordion [slot=header]{margin-top:.125rem}.dcf-fieldset-component .dcf-max-message-container{margin:var(--dcf-padding-small) .75rem}.dcf-not-unique-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--dcf-spacement);flex:1 1 auto}.dcf-not-unique-container>div{display:flex;justify-content:center;align-items:center}.dcf-not-unique-container ion-icon{transform:translatey(2px);margin-right:5px}.dcf-fields-list{padding:.25rem var(--dcf-margin-small);margin-bottom:var(--dcf-margin-small)!important}.dcf-fields-list ion-item{--min-height: 50px;--padding-top: .25rem;--padding-bottom: .25rem;--padding-start: .75rem;--padding-end: .75rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: var(--dcf-color-gray-2) !important}.dcf-fields-list ion-item ion-icon.dcf-reorder-disabled{width:var(--dcf-spacement);transform:translatey(2px);color:var(--dcf-color-gray-4)}.dcf-fields-list ion-item.updating{--background: rgba(var(--dcf-color-primary-rgb), .1) !important}.dcf-fields-list ion-item.not-unique{--background: rgba(var(--dcf-color-danger-rgb), .05) !important}.dcf-fields-list ion-item .dcf-subtitle{font-size:.925rem;color:var(--ion-color-gray-4)}.dcf-buttons-container{margin-bottom:0!important;margin-top:-.5rem;padding:0rem .125rem}.dcf-buttons-container:not(.dcf-blank){padding-bottom:var(--dcf-padding-small)!important}.dcf-buttons-container.dcf-not-collapsable.dcf-empty{position:relative;top:-1rem!important}@media (max-width: 480px){.dcf-buttons-container{flex-direction:column-reverse;gap:.5rem;align-items:stretch}.dcf-buttons-container ion-button{width:100%;justify-content:center;height:40px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { accordionComponent: [{
                 type: ViewChild,
                 args: ['accordionComponent', { static: false }]
@@ -8238,7 +8341,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     constructor() {
-        super("FilterComponent");
+        super('FilterComponent');
         /**
          * @description Available field indexes for filtering operations.
          * @summary Defines the list of field names that users can filter by. These represent
@@ -8261,7 +8364,14 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
          * @default []
          * @memberOf FilterComponent
          */
-        this.conditions = ['Equal', 'Contains', 'Not Contains', 'Greater Than', 'Less Than', 'Not Equal'];
+        this.conditions = [
+            'Equal',
+            'Contains',
+            'Not Contains',
+            'Greater Than',
+            'Less Than',
+            'Not Equal',
+        ];
         /**
          * @description Available sorting options for the filtered data.
          * @summary Defines the list of field names that can be used for sorting the filtered results.
@@ -8394,7 +8504,15 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
          * @memberOf FilterComponent
          */
         this.searchEvent = new EventEmitter();
-        addIcons({ chevronDownOutline, trashOutline, closeOutline, searchOutline, arrowDownOutline, arrowUpOutline, chevronUpOutline });
+        addIcons({
+            chevronDownOutline,
+            trashOutline,
+            closeOutline,
+            searchOutline,
+            arrowDownOutline,
+            arrowUpOutline,
+            chevronUpOutline,
+        });
     }
     /**
      * @description Initializes the component after Angular first displays the data-bound properties.
@@ -8443,11 +8561,13 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      */
     getIndexes() {
         if (this.model)
-            this.indexes = Object.keys(Repository.indexes(this.model) || {});
+            this.indexes = Object.keys(Model.indexes(this.model) || {});
         if (!this.disableSort) {
             this.sortBy = [...this.sortBy, ...this.indexes];
-            if (this.repository)
-                this.sortValue = this.repository.pk || this.sortValue;
+            if (this.repository) {
+                const pk = Model.pk(this.repository.class);
+                this.sortValue = pk || this.sortValue;
+            }
         }
     }
     /**
@@ -8579,13 +8699,13 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      *
      * @memberOf FilterComponent
      */
-    addFilter(value, event) {
+    async addFilter(value, event) {
         value = value.trim();
         if (event instanceof KeyboardEvent && !value) {
             this.submit();
         }
         else {
-            if ((value && (!(event instanceof KeyboardEvent)) || this.step === 3)) {
+            if ((value && !(event instanceof KeyboardEvent)) || this.step === 3) {
                 const filter = this.lastFilter;
                 switch (this.step) {
                     case 1:
@@ -8613,7 +8733,7 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
                     this.filterValue[this.filterValue.length - 1] = filter;
                     this.lastFilter = {};
                     if (!this.multiple)
-                        return this.submit();
+                        return await this.submit();
                 }
                 this.step++;
                 this.value = '';
@@ -8647,7 +8767,8 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     allowClear(option) {
-        return this.indexes.indexOf(option) === -1 && this.conditions.indexOf(option) === -1;
+        return (this.indexes.indexOf(option) === -1 &&
+            this.conditions.indexOf(option) === -1);
     }
     /**
      * @description Removes a complete filter from the collection based on filter value.
@@ -8676,11 +8797,11 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         function cleanString(filter) {
             return filter
                 .toLowerCase() // convert all characters to lowercase
-                .normalize("NFD") // separate accent marks from characters
-                .replace(/[\u0300-\u036f]/g, "") // remove accent marks
-                .replace(/\s+/g, ""); // remove all whitespace
+                .normalize('NFD') // separate accent marks from characters
+                .replace(/[\u0300-\u036f]/g, '') // remove accent marks
+                .replace(/\s+/g, ''); // remove all whitespace
         }
-        this.value = "";
+        this.value = '';
         this.filterValue = this.filterValue.filter((item) => item?.['value'] && cleanString(item?.['value']) !== cleanString(filter));
         if (this.filterValue.length === 0) {
             this.step = 1;
@@ -8725,16 +8846,16 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @summary Emits the current filter array to parent components when filters are ready
      * to be applied. Only emits if there are active filters. Clears options after submission.
      *
-     * @returns {void}
+     * @returns {Promise<void>}
      * @memberOf FilterComponent
      */
-    submit() {
+    async submit() {
         this.filterEvent.emit({
             query: this.filterValue.length > 0 ? this.filterValue : undefined,
             sort: {
                 value: this.sortValue,
-                direction: this.sortDirection
-            }
+                direction: this.sortDirection,
+            },
         });
         if (this.filterValue.length === 0)
             this.options = [];
@@ -8749,7 +8870,9 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
      * @memberOf FilterComponent
      */
     handleSortDirectionChange() {
-        const direction = this.sortDirection === OrderDirection.ASC ? OrderDirection.DSC : OrderDirection.ASC;
+        const direction = this.sortDirection === OrderDirection.ASC
+            ? OrderDirection.DSC
+            : OrderDirection.ASC;
         if (direction !== this.sortDirection) {
             this.sortDirection = direction;
             this.submit();
@@ -8811,7 +8934,9 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
         }
         const options = optionsElement.querySelectorAll('.dcf-item');
         for (const option of options) {
-            const isActive = option.textContent?.toLowerCase().includes(value.toLowerCase());
+            const isActive = option.textContent
+                ?.toLowerCase()
+                .includes(value.toLowerCase());
             if (isActive) {
                 option.classList.add('dcf-filtering-item');
                 break;
@@ -8850,7 +8975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         IonSelect,
                         IonSelectOption,
                         IonIcon,
-                        SearchbarComponent
+                        SearchbarComponent,
                     ], standalone: true, host: { '[attr.id]': 'uid' }, template: "\n@if (!indexes.length) {\n  <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n}\n\n<div [id]=\"uid\" class=\"dcf-grid dcf-grid-small dcf-grid-match dcf-filter-component\" [class.dcf-hidden]=\"!indexes.length\" #component>\n  <div class=\"dcf-width-expand\">\n    <div class=\"dcf-filter\">\n      <div class=\"dcf-input\">\n        @for(filter of filterValue; track trackItemFn($index, filter?.['index'])) {\n          @if (filter?.['index']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['index'] }}</ion-chip>\n          }\n          @if (filter?.['condition']) {\n            <ion-chip [outline]=\"true\">{{ filter?.['condition'] }}</ion-chip>\n          }\n          @if (filter?.['value']) {\n            <ion-chip [outline]=\"true\" class=\"dcf-filter-value\">\n              {{ filter?.['value'] }}\n              <ion-icon tabindex=\"0\" name=\"close-outline\" (click)=\"removeFilter(filter?.['value'])\" size=\"small\"></ion-icon>\n            </ion-chip>\n          }\n        }\n        <div class=\"dcf-width-1-1\">\n             <!-- [readonly]=\"step !== 3\" -->\n          <input\n            fill=\"none\"\n            [(ngModel)]=\"value\"\n            (keydown.enter)=\"addFilter(value, $event)\"\n            (keydown.backspace)=\"clear(value)\"\n            (input)=\"handleInput($event)\"\n            (click)=\"handleFocus()\"\n            (blur)=\"handleBlur()\"\n            type=\"text\"\n            id=\"dcf-filter-field\"\n            placeholder=\"{{ locale + (step === 3 ? '.type' : '.select') | translate }}\"\n\n          />\n          @if (windowWidth >= 768) {\n            <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n              <div>\n                @if (filteredOptions.length > 0) {\n                  @for(key of filteredOptions; track key) {\n                    <div\n                      class=\"dcf-item\"\n                      tabindex=\"0\"\n                      (keydown.enter)=\"selectOption(key)\"\n                      (click)=\"selectOption(key)\">\n                      {{ key }}\n                    </div>\n                  }\n                } @else {\n                  <div class=\"dcf-empty\"\n                    (click)=\"filteredOptions = options; value = ''\"\n                    tabindex=\"0\"\n                    (keydown.enter)=\"filteredOptions = options; value = ''\"\n                  >\n                    {{ locale + '.no_suggestions' | translate }}\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n      @if (filterValue.length > 0) {\n        <div class=\"dcf-icon-clear\">\n          <ion-button fill=\"clear\" size=\"small\" (click)=\"clear()\">\n            <ion-icon aria-hidden=\"true\" name=\"trash-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </div>\n      }\n      <div class=\"dcf-icon-search\">\n        <ion-button fill=\"clear\" size=\"small\" (click)=\"submit()\">\n          <ion-icon aria-hidden=\"true\" name=\"search-outline\" [color]=\"!isDarkMode ? 'dark' : 'light'\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n      </div>\n    </div>\n    @if (windowWidth < 768) {\n      <div [class]=\"'dcf-dropdown ' + (options.length > 0 ? ' dcf-active' : '')\" #optionsFilterElement>\n        <div>\n          @if (filteredOptions.length > 0) {\n            @for(key of filteredOptions; track key) {\n              <div\n                class=\"dcf-item\"\n                tabindex=\"0\"\n                (keydown.enter)=\"selectOption(key)\"\n                (click)=\"selectOption(key)\">\n                {{ key }}\n              </div>\n            }\n          } @else {\n            <div class=\"dcf-empty\"\n            (click)=\"filteredOptions = options; value = ''\"\n            tabindex=\"0\"\n            (keydown.enter)=\"filteredOptions = options; value = ''\"\n            >\n              {{ locale + '.no_suggestions' | translate }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n  @if (!disableSort) {\n    <div class=\"dcf-width-1-5@m dcf-width-1-1 dcf-sort-container\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-flex dcf-flex-middle dcf-grid-match\">\n        <div class=\"dcf-width-expand\">\n          <ion-select\n              toggleIcon=\"chevron-down-outline\"\n              expandedIcon=\"chevron-up-outline\"\n              class=\"dcf-sort-select\"\n              (ionChange)=\"handleSortChange($event)\"\n              interface=\"popover\"\n              [value]=\"sortValue\"\n              label-placement=\"floating\"\n              fill=\"outline\"\n              [label]=\"locale + '.sort' | translate\"\n            >\n            @for(sort of sortBy; track sort) {\n\n              <ion-select-option [value]=\"sort\">{{ sort | translate }}</ion-select-option>\n            }\n          </ion-select>\n        </div>\n        <div class=\"dcf-width-auto\">\n          <ion-button (click)=\"handleSortDirectionChange()\" fill=\"clear\">\n            <ion-icon aria-hidden=\"true\" slot=\"icon-only\" [color]=\"!isDarkMode ? 'primary' : 'light'\" [name]=\"sortDirection === 'desc' ? 'arrow-down-outline' : 'arrow-up-outline'\"></ion-icon>\n          </ion-button>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n\n", styles: [":host{position:relative;z-index:1000!important}:host *{z-index:1000!important}.dcf-filter-component{padding:0 .5rem;margin-top:.75rem;margin-bottom:.75rem}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter{border:1px solid var(--dcf-color-gray-3);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-filter:focus-within{border-color:var(--dcf-color-primary);background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) ion-chip{border:1px solid var(--dcf-color-gray-3);color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) ion-chip.dcf-filter-value{background:var(--dcf-color-gray-2);border-color:var(--dcf-color-gray-4)!important;color:var(--dcf-color-gray-8)!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-input input{color:var(--dcf-color-gray-7)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown{background-color:#fff}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-gray-2)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-8)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-3)}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{pointer-events:none;touch-action:none;cursor:text!important;border-color:transparent!important}.dcf-filter-component:not(.dcf-palette-dark) .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-filter{border:1px solid var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-filter ::-webkit-input-placeholder,.dcf-filter-component.dcf-palette-dark .dcf-filter ::placeholder{color:var(--dcf-color-gray-4)!important}.dcf-filter-component.dcf-palette-dark .dcf-filter:hover{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark .dcf-filter:focus-within{border-color:var(--dcf-color-gray-2)}.dcf-filter-component.dcf-palette-dark ion-chip{border-color:var(--dcf-color-step-300);background:rgba(var(--dcf-color-medium-rgb),.1)}.dcf-filter-component.dcf-palette-dark ion-chip.dcf-filter-value{background:rgba(var(--dcf-color-medium-rgb),.3)!important;border-color:var(--dcf-color-step-500)}.dcf-filter-component.dcf-palette-dark .dcf-input input{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown{background-color:var(--dcf-item-background)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active{border:1px solid var(--dcf-color-step-600)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div{color:var(--dcf-color-gray-1)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child{border-color:var(--dcf-color-gray-5)}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div.dcf-filtering-item.dcf-empty,.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:only-child.dcf-empty{cursor:text!important;pointer-events:none;touch-action:none;border-color:transparent!important}.dcf-filter-component.dcf-palette-dark .dcf-dropdown.dcf-active>div>div:hover{background-color:var(--dcf-color-gray-8)}ion-select{min-height:44px!important}.dcf-hidden{display:none!important}.dcf-filter{display:flex;width:100%;min-height:40px;box-shadow:0 1px 2px #0a0d120d;border-radius:var(--dcf-border-radius);box-sizing:border-box}.dcf-filter ion-chip{border-radius:6px;padding:0 8px!important;height:24px;min-height:24px;font-size:.75rem;font-style:normal;font-weight:500;flex-shrink:0;margin-right:2px;white-space:nowrap}.dcf-filter ion-chip.sc-ion-chip-md-h,.dcf-filter ion-chip.sc-ion-chip-ios-h{height:24px;min-height:24px}.dcf-filter ion-chip.sc-ion-chip-md-h .chip-native,.dcf-filter ion-chip.sc-ion-chip-ios-h .chip-native{padding:0 8px!important;height:24px;min-height:24px}.dcf-filter ion-chip ion-label{padding:0 4px;margin:0;font-size:.75rem;white-space:nowrap}.dcf-filter ion-chip ion-icon{margin:0 2px;font-size:.75rem}.dcf-filter .dcf-input{width:100%;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-left:.5rem}.dcf-filter .dcf-input input{min-height:40px;min-width:100px;width:100%;font-size:1rem;border:none;outline:none;background:transparent;border:0px!important;outline:none!important}.dcf-filter .dcf-input input:focus{border:0px!important;outline:none!important}.dcf-filter .dcf-icon-clear,.dcf-filter .dcf-icon-search{display:flex;justify-content:center;text-align:center;align-items:center;min-width:40px}.dcf-filter .dcf-icon-search ion-icon{font-size:1.25rem}.dcf-sort-container{min-width:200px!important;width:auto}@media (min-width: 990px){.dcf-sort-container{max-width:20%!important}}@media (max-width: 680px){.dcf-sort-container{min-width:100%!important;margin:.75rem 0rem}}.dcf-dropdown{position:absolute;max-height:200px;overflow-y:auto;border-radius:4px;z-index:1000!important;min-width:200px;max-width:300px;display:none}.dcf-dropdown.dcf-active{display:block;margin-top:-3px;box-shadow:0 12px 16px -4px #0a0d1214,0 4px 6px -2px #0a0d1208,0 2px 2px -1px #0a0d120a!important;border-radius:var(--dcf-border-radius);padding:.5rem .25rem}@media (max-width: 768px){.dcf-dropdown.dcf-active{margin-top:55px}}.dcf-dropdown.dcf-active>div>div{cursor:pointer;height:35px;padding:.5rem 1rem;border:1px solid transparent;font-size:1rem;display:flex;align-items:center;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { optionsFilterElement: [{
                 type: ViewChild,
@@ -9269,7 +9394,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     constructor() {
-        super("ListComponent");
+        super('ListComponent');
         /**
          * @description The display mode for the list component.
          * @summary Determines how the list data is loaded and displayed. Options include:
@@ -9345,7 +9470,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "full"
          * @memberOf ListComponent
          */
-        this.lines = "full";
+        this.lines = 'full';
         /**
          * @description Controls whether the list has inset styling.
          * @summary When set to true, the list will have inset styling with rounded corners
@@ -9366,7 +9491,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "15%"
          * @memberOf ListComponent
          */
-        this.scrollThreshold = "15%";
+        this.scrollThreshold = '15%';
         /**
          * @description The position where new items are added during infinite scrolling.
          * @summary Determines whether new items are added to the top or bottom of the list
@@ -9376,7 +9501,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "bottom"
          * @memberOf ListComponent
          */
-        this.scrollPosition = "bottom";
+        this.scrollPosition = 'bottom';
         /**
          * @description Controls the visibility of the pull-to-refresh feature.
          * @summary When set to true, enables the pull-to-refresh functionality that allows
@@ -9405,7 +9530,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @default "circular"
          * @memberOf ListComponent
          */
-        this.loadingSpinner = "circular";
+        this.loadingSpinner = 'circular';
         // /**
         //  * @description Query parameters for data fetching.
         //  * @summary Specifies additional query parameters to use when fetching data from
@@ -9474,17 +9599,6 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.page = 1;
-        /**
-         * @description Indicates whether a refresh operation is in progress.
-         * @summary When true, the component is currently fetching new data. This is used
-         * to control loading indicators and prevent duplicate refresh operations from
-         * being triggered simultaneously.
-         *
-         * @type {boolean}
-         * @default false
-         * @memberOf ListComponent
-         */
-        this.refreshing = false;
         /**
          * @description Array used for rendering skeleton loading placeholders.
          * @summary Contains placeholder items that are displayed during data loading.
@@ -9506,15 +9620,6 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
          * @memberOf ListComponent
          */
         this.lastPage = 1;
-        /**
-         * @description Event emitter for refresh operations.
-         * @summary Emits an event when the list data is refreshed, either through pull-to-refresh
-         * or programmatic refresh. The event includes the refreshed data and component information.
-         *
-         * @type {EventEmitter<IBaseCustomEvent>}
-         * @memberOf ListComponent
-         */
-        this.refreshEvent = new EventEmitter();
         /**
          * @description Event emitter for item click interactions.
          * @summary Emits an event when a list item is clicked. The event includes the data
@@ -9575,9 +9680,15 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @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.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.limit = Number(this.limit);
         this.start = Number(this.start);
         this.enableFilter = stringToBoolean(this.enableFilter);
@@ -9685,7 +9796,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     async handleCreate(uid) {
         const result = await this._repository?.read(uid);
         const item = this.mapResults([result])[0];
-        this.items = this.data = [item, ...this.items || []];
+        this.items = this.data = [item, ...(this.items || [])];
     }
     /**
      * @description Handles the update event from the repository.
@@ -9697,7 +9808,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async handleUpdate(uid) {
-        const item = this.itemMapper(await this._repository?.read(uid) || {}, this.mapper);
+        const item = this.itemMapper((await this._repository?.read(uid)) || {}, this.mapper);
         this.data = [];
         for (const key in this.items) {
             const child = this.items[key];
@@ -9724,7 +9835,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     handleDelete(uid, pk) {
         if (!pk)
             pk = this.pk;
-        this.items = this.data?.filter((item) => item['uid'] !== uid) || [];
+        this.items =
+            this.data?.filter((item) => item['uid'] !== uid) || [];
     }
     /**
      * @description Handles click events from list items.
@@ -9828,7 +9940,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         this.refreshEvent.emit({
             name: ComponentEventNames.REFRESH,
             data: data || [],
-            component: this.componentName
+            component: this.componentName,
         });
     }
     /**
@@ -9904,10 +10016,10 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         //  }
         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);
+        const limit = this.page * (this.limit > 12 ? 12 : this.limit);
+        this.data = !this.model
+            ? await this.getFromRequest(!!event, start, limit)
+            : (await this.getFromModel(!!event));
         if (this.type === ListComponentsTypes.INFINITE) {
             if (this.page === this.pages) {
                 if (event?.target)
@@ -9918,7 +10030,9 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this.page += 1;
                 this.refreshing = false;
                 setTimeout(() => {
-                    if (event?.target && event?.type !== ComponentEventNames.BACK_BUTTON_NAVIGATION)
+                    if (event?.target &&
+                        event?.type !==
+                            ComponentEventNames.BACK_BUTTON_NAVIGATION)
                         event.target.complete();
                 }, 200);
             }
@@ -9930,16 +10044,16 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         }
     }
     /**
-   * @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 {IPaginationCustomEvent} event - The pagination event containing page information
-   * @returns {void}
-   *
-   * @memberOf ListComponent
-   */
+     * @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 {IPaginationCustomEvent} event - The pagination event containing page information
+     * @returns {void}
+     *
+     * @memberOf ListComponent
+     */
     handlePaginate(event) {
         const { page } = event.data;
         this.page = page;
@@ -9977,8 +10091,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     parseSearchResults(results, search) {
-        const filtered = results.filter((item) => Object.values(item).some(v => {
-            if (v.toString().toLowerCase().includes(search?.toLowerCase()))
+        const filtered = results.filter((item) => Object.values(item).some((v) => {
+            if (v
+                .toString()
+                .toLowerCase()
+                .includes(search?.toLowerCase()))
                 return v;
         }));
         return filtered;
@@ -9997,25 +10114,31 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async getFromRequest(force = false, start, limit) {
-        let data = [...this.data || []];
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+        let data = [...(this.data || [])];
+        if (!this.data?.length ||
+            force ||
+            this.searchValue?.length ||
+            !!this.searchValue) {
             // (self.data as ListItem[]) = [];
-            if (!this.searchValue?.length && !this.searchValue) {
+            if (!this.searchValue?.length &&
+                !this.searchValue) {
                 if (!this.source && !this.data?.length) {
                     this.log.info('No data and source passed to infinite list');
                     return [];
                 }
                 if (this.source instanceof Function) {
-                    data = await this.source();
+                    data = (await this.source());
                     if (!Array.isArray(data))
                         data = data?.['response']?.['data'] || data?.['results'] || [];
                 }
                 if (!data?.length && this.data?.length)
                     data = this.data;
-                this.data = [...await this.parseResult(data)];
+                this.data = [...(await this.parseResult(data))];
                 if (this.data?.length)
-                    this.items = this.type === ListComponentsTypes.INFINITE ?
-                        (this.items || []).concat([...this.data.slice(start, limit)]) : [...data.slice(start, limit)];
+                    this.items =
+                        this.type === ListComponentsTypes.INFINITE
+                            ? (this.items || []).concat([...this.data.slice(start, limit)])
+                            : [...data.slice(start, limit)];
             }
             else {
                 const data = await this.parseResult(this.parseSearchResults(this.data, this.searchValue));
@@ -10025,8 +10148,11 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
         }
         else {
-            const data = [...await this.parseResult(this.data)];
-            this.items = this.type === ListComponentsTypes.INFINITE ? [...(this.items || []), ...(data || [])] : [...(data || [])];
+            const data = [...(await this.parseResult(this.data))];
+            this.items =
+                this.type === ListComponentsTypes.INFINITE
+                    ? [...(this.items || []), ...(data || [])]
+                    : [...(data || [])];
             if (this.isModalChild)
                 this.changeDetectorRef.detectChanges();
         }
@@ -10048,7 +10174,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async getFromModel(force = false) {
-        let data = [...this.data || []];
+        let data = [...(this.data || [])];
         let request = [];
         // getting model repository
         if (!this._repository) {
@@ -10057,9 +10183,13 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 this._repository.observe(this.observer);
         }
         const repo = this._repository;
-        if (!this.data?.length || force || this.searchValue?.length || !!this.searchValue) {
+        if (!this.data?.length ||
+            force ||
+            this.searchValue?.length ||
+            !!this.searchValue) {
             try {
-                if (!this.searchValue?.length && !this.searchValue) {
+                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));
@@ -10073,17 +10203,21 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                 }
                 else {
                     if (!this.indexes)
-                        this.indexes = (Object.values(this.mapper) || [this.pk]);
+                        this.indexes = Object.values(this.mapper) || [this.pk];
                     const condition = this.parseConditions(this.searchValue);
                     this.changeDetectorRef.detectChanges();
                     request = await this.parseResult(await repo.query(condition, (this.sortBy || this.pk), this.sortDirection));
                     data = [];
                     this.changeDetectorRef.detectChanges();
                 }
-                data = this.type === ListComponentsTypes.INFINITE ? [...(data).concat(request)] : [...request];
+                data =
+                    this.type === ListComponentsTypes.INFINITE
+                        ? [...data.concat(request)]
+                        : [...request];
             }
             catch (error) {
-                this.log.error(error?.message || `Unable to find ${this.model} on registry. Return empty array from component`);
+                this.log.error(error?.message ||
+                    `Unable to find ${this.model} on registry. Return empty array from component`);
             }
         }
         if (data?.length) {
@@ -10123,7 +10257,8 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      */
     parseConditions(value) {
         let _condition;
-        if (typeof value === Primitives.STRING || typeof value === Primitives.NUMBER) {
+        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)
@@ -10150,27 +10285,28 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
                     val = Number(val);
                 let orCondition;
                 switch (condition) {
-                    case "Equal":
+                    case 'Equal':
                         orCondition = Condition.attribute(index).eq(val);
                         break;
-                    case "Not Equal":
+                    case 'Not Equal':
                         orCondition = Condition.attribute(index).dif(val);
                         break;
-                    case "Not Contains":
+                    case 'Not Contains':
                         orCondition = !Condition.attribute(index).regexp(new RegExp(`^(?!.*${val}).*$`));
                         break;
-                    case "Contains":
+                    case 'Contains':
                         orCondition = Condition.attribute(index).regexp(val);
                         break;
-                    case "Greater Than":
+                    case 'Greater Than':
                         orCondition = Condition.attribute(index).gte(val);
                         break;
-                    case "Less Than":
+                    case 'Less Than':
                         orCondition = Condition.attribute(index).lte(val);
                         break;
                 }
-                _condition = (!_condition ?
-                    orCondition : _condition.and(orCondition));
+                _condition = (!_condition
+                    ? orCondition
+                    : _condition.and(orCondition));
             });
             this.sortBy = sort?.value || this.pk;
             this.sortDirection = sort?.direction || this.sortDirection;
@@ -10190,22 +10326,24 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
      * @memberOf ListComponent
      */
     async parseResult(result) {
-        if (!Array.isArray(result) && ('page' in result && 'total' in result)) {
+        if (!Array.isArray(result) && 'page' in result && 'total' in result) {
             const paginator = result;
             try {
                 result = await paginator.page(this.page);
                 this.getMoreData(paginator.total);
             }
             catch (error) {
-                this.log.info(error?.message || 'Unable to get page from paginator. Return empty array from component');
+                this.log.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;
+        return Object.keys(this.mapper || {}).length
+            ? this.mapResults(result)
+            : result;
     }
     /**
      * @description Updates pagination state based on data length.
@@ -10227,7 +10365,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
             else {
                 this.pages = Math.floor(length / this.limit);
-                if ((this.pages * this.limit) < length)
+                if (this.pages * this.limit < length)
                     this.pages += 1;
                 if (this.pages === 1)
                     this.loadMoreData = false;
@@ -10261,7 +10399,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             }
             else {
                 if (arrayValue.length === 1) {
-                    value = item?.[value] ? item[value] : "";
+                    value = item?.[value] ? item[value] : '';
                     // value = item?.[value] ? item[value] : value !== key ? value : "";
                     if (isValidDate(value))
                         value = `${formatDate(value)}`;
@@ -10310,18 +10448,23 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             // }, {}))
         });
         return data.reduce((accum, curr) => {
-            accum.push({ ...this.itemMapper(curr, this.mapper, props), ...{ pk: this.pk } });
+            accum.push({
+                ...this.itemMapper(curr, this.mapper, props),
+                ...{ pk: this.pk },
+            });
             return accum;
         }, []);
     }
     parseSearchValue() {
         if (typeof this.searchValue === Primitives.STRING)
-            return this.searchValue || "";
+            return this.searchValue || '';
         const searchValue = this.searchValue;
-        return (searchValue?.query).map(item => `${item.index} ${item.condition} ${item.value}`).join(", ");
+        return (searchValue?.query)
+            .map((item) => `${item.index} ${item.condition} ${item.value}`)
+            .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { refreshEvent: "refreshEvent", clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", data: "data", source: "source", start: "start", limit: "limit", loadMoreData: "loadMoreData", lines: "lines", inset: "inset", scrollThreshold: "scrollThreshold", scrollPosition: "scrollPosition", loadingText: "loadingText", showRefresher: "showRefresher", createButton: "createButton", loadingSpinner: "loadingSpinner", enableFilter: "enableFilter", sortDirection: "sortDirection", sortBy: "sortBy", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)", "window:BackButtonNavigationEndEvent": "refresh($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"], dependencies: [{ kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "component", type: IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: IonThumbnail, selector: "ion-thumbnail" }, { kind: "component", type: IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "component", type: EmptyStateComponent, selector: "ngx-decaf-empty-state", inputs: ["title", "titleColor", "subtitle", "subtitleColor", "showIcon", "icon", "iconSize", "iconColor", "buttonLink", "buttonText", "buttonFill", "buttonColor", "buttonSize", "searchValue"] }, { kind: "component", type: FilterComponent, selector: "ngx-decaf-filter", inputs: ["indexes", "multiple", "conditions", "sortBy", "disableSort"], outputs: ["filterEvent", "searchEvent"] }, { kind: "component", type: ComponentRendererComponent, selector: "ngx-decaf-component-renderer", inputs: ["tag", "children", "projectable", "parent"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 ListComponent = __decorate([
     Dynamic(),
@@ -10348,7 +10491,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         SearchbarComponent,
                         EmptyStateComponent,
                         FilterComponent,
-                        ComponentRendererComponent
+                        ComponentRendererComponent,
                     ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n\n@if (showSearchbar) {\n    <div [hidden]=\"!data?.length\">\n      <div class=\"dcf-grid dcf-grid-collapse dcf-grid-actions\">\n        <div class=\"dcf-width-expand@m  dcf-width-1-1\">\n          @if (model && enableFilter) {\n            @if (data?.length || searching) {\n              <ngx-decaf-filter\n                [model]=\"model\"\n                [sortDirection]=\"sortDirection\"\n                [disableSort]=\"disableSort\"\n                (filterEvent)=\"handleFilter($event)\"\n                (searchEvent)=\"handleSearch($event)\"\n              />\n            }\n          } @else {\n            <ngx-decaf-searchbar [emitEventToWindow]=\"false\" [debounce]=\"500\" (searchEvent)=\"handleSearch($event)\" />\n          }\n        </div>\n        @if(createButton) {\n          <div class=\"dcf-width-auto@m dcf-button-container dcf-width-1-1 dcf-flex-middle dcf-flex dcf-flex-center dcf-flex-right@m\">\n            <div>\n              <ion-button expand=\"block\" (click)=\"changeOperation(OperationKeys.CREATE)\">Create</ion-button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n}\n\n@if (initialized && data?.length) {\n  <ion-list [id]=\"uid\" [inset]=\"inset\" [lines]=\"lines\">\n    @if (item?.tag) {\n      @for(child of items; track trackItemFn($index, child)) {\n        <ngx-decaf-component-renderer\n          [tag]=\"item.tag\"\n          (listenEvent)=\"handleEvent($event)\"\n          [globals]='{\n            item: child,\n            mapper: mapper,\n            route: route\n          }'>\n          </ngx-decaf-component-renderer>\n        }\n    } @else {\n      <ng-content></ng-content>\n    }\n  </ion-list>\n\n  @if (loadMoreData) {\n    @if (pages > 0 && type === 'paginated' && !searchValue?.length) {\n      <ngx-decaf-pagination\n        [totalPages]=\"pages\"\n        [current]=\"page\"\n        (clickEvent)=\"handlePaginate($event)\"\n      />\n\n    } @else {\n      <ion-infinite-scroll\n        [class]=\"searchValue?.length ? 'dcf-hidden' : ''\"\n\n        [position]=\"scrollPosition\"\n        [threshold]=\"scrollThreshold\"\n        (ionInfinite)=\"handleRefresh($event)\">\n        <ion-infinite-scroll-content [loadingSpinner]=\"loadingSpinner\" [loadingText]=\"loadingText\" />\n      </ion-infinite-scroll>\n    }\n  }\n} @else {\n  @if (refreshing) {\n    @for(skl of skeletonData; track $index) {\n      <ion-item>\n        <ion-thumbnail slot=\"start\">\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n        </ion-thumbnail>\n        <ion-label>\n          <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          <ion-text class=\"date\" style=\"width: 20%;\"><ion-skeleton-text [animated]=\"true\"></ion-skeleton-text></ion-text>\n        </ion-label>\n      </ion-item>\n    }\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"(locale + '.'+ empty.title) | translate\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        [icon]=\"empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"(locale + '.'+ empty.subtitle) | translate\" />\n    } @else {\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"model\"\n        [route]=\"route\"\n        [borders]=\"borders\"\n        className=\"empty-search\"\n        [translatable]=\"true\"\n        className=\"dcf-empty-data\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", styles: ["ion-infinite-scroll{max-height:50px}ion-infinite-scroll:not(.infinite-scroll-loading) ::ng-deep{max-height:1.5rem}ion-infinite-scroll ::ng-deep ion-spinner{--color: var(--dcf-color-primary);padding-top:1rem}@media (max-width: 768px){#end,[slot=end]{display:none!important}}.dcf-grid-actions{padding:var(--dcf-padding-small);padding-bottom:0}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
@@ -10390,8 +10533,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], empty: [{
                 type: Input
-            }], refreshEvent: [{
-                type: Output
             }], clickEvent: [{
                 type: Output
             }], handleClick: [{
@@ -11771,15 +11912,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 class DynamicModule {
 }
 
-/**
- * @module module:lib/engine/NgxEventHandler
- * @description Event handler base class used by Decaf components.
- * @summary Defines NgxEventHandler which standardizes event handling logic and provides
- * logging support for handlers that process custom events emitted by components.
- *
- * @link {@link NgxEventHandler}
- */
-class NgxEventHandler extends LoggedClass {
+class NgxEventHandler extends DecafEventHandler {
+    async refresh(args) {
+        this.log.for(this.refresh).debug(`Refresh called with args: ${args}`);
+    }
 }
 
 /**
@@ -11885,7 +12021,6 @@ class NgxPageDirective extends NgxComponentDirective {
         this.mediaService.colorSchemeObserver(this.component);
         this.currentRoute = this.router.url.replace('/', '');
         this.setPageTitle(this.currentRoute);
-        this.initialized = true;
     }
     /**
      * @description Ionic lifecycle hook called when the page is about to enter view.
@@ -11975,17 +12110,20 @@ class NgxModelPageDirective extends NgxPageDirective {
          * @default [OperationKeys.CREATE, OperationKeys.READ]
          * @memberOf ModelPage
          */
-        this.allowedOperations = [OperationKeys.CREATE, OperationKeys.READ];
-        /**
-       * @description Current model data loaded from the repository.
-       * @summary Stores the raw data object representing the current model instance retrieved
-       * from the repository. This property holds the actual data values for the model being
-       * displayed or edited, and is set to undefined when no data is available or when an
-       * error occurs during data loading.
-       * @type {KeyValue | undefined}
-       * @default undefined
-       * @memberOf NgxModelPageDirective
-       */
+        this.allowedOperations = [
+            OperationKeys.CREATE,
+            OperationKeys.READ,
+        ];
+        /**
+         * @description Current model data loaded from the repository.
+         * @summary Stores the raw data object representing the current model instance retrieved
+         * from the repository. This property holds the actual data values for the model being
+         * displayed or edited, and is set to undefined when no data is available or when an
+         * error occurs during data loading.
+         * @type {KeyValue | undefined}
+         * @default undefined
+         * @memberOf NgxModelPageDirective
+         */
         this.modelData = undefined;
         /**
          * @description Error message from failed operations.
@@ -12003,12 +12141,12 @@ class NgxModelPageDirective extends NgxPageDirective {
     // }
     get pageTitle() {
         if (!this.modelName && this.model instanceof Model)
-            this.modelName = this.model?.constructor?.name || "";
+            this.modelName = this.model?.constructor?.name || '';
         if (!this.operation)
             return this.title ? this.title : `Listing ${this.modelName}`;
-        const operation = this.operation.charAt(0).toUpperCase() + this.operation.slice(1).toLowerCase();
-        return this.modelName ?
-            `${operation} ${this.modelName}` : this.title;
+        const operation = this.operation.charAt(0).toUpperCase() +
+            this.operation.slice(1).toLowerCase();
+        return this.modelName ? `${operation} ${this.modelName}` : this.title;
     }
     /**
      * @description Lazy-initialized repository getter with model resolution.
@@ -12029,7 +12167,7 @@ class NgxModelPageDirective extends NgxPageDirective {
                     throw new InternalError('Cannot find model. was it registered with @model?');
                 this._repository = Repository.forModel(constructor);
                 if (!this.pk)
-                    this.pk = this._repository.pk;
+                    this.pk = Model.pk(constructor);
                 this.model = new constructor();
             }
         }
@@ -12049,7 +12187,10 @@ class NgxModelPageDirective extends NgxPageDirective {
     async ionViewWillEnter() {
         // await super.ionViewWillEnter();
         if (this.modelId)
-            this.allowedOperations = this.allowedOperations.concat([OperationKeys.UPDATE, OperationKeys.DELETE]);
+            this.allowedOperations = this.allowedOperations.concat([
+                OperationKeys.UPDATE,
+                OperationKeys.DELETE,
+            ]);
         this.getLocale(this.modelName);
         await this.refresh(this.modelId);
         this.initialized = true;
@@ -12066,29 +12207,37 @@ class NgxModelPageDirective extends NgxPageDirective {
     async refresh(uid) {
         if (!uid)
             uid = this.modelId;
-        this._repository = this.repository;
-        switch (this.operation) {
-            case OperationKeys.READ:
-            case OperationKeys.UPDATE:
-            case OperationKeys.DELETE:
-                this.model = await this.handleGet(uid || this.modelId, this._repository, this.modelName);
-                break;
+        try {
+            this._repository = this.repository;
+            switch (this.operation) {
+                case OperationKeys.READ:
+                case OperationKeys.UPDATE:
+                case OperationKeys.DELETE:
+                    this.model = (await this.handleGet(uid || this.modelId));
+                    break;
+            }
+        }
+        catch (error) {
+            if (error instanceof NotFoundError) {
+                this.errorMessage = error.message;
+            }
+            this.log.error(error);
         }
     }
     /**
      * @description Generic event handler for component events.
      * @summary Processes incoming events from child components and routes them to appropriate
      * handlers based on the event name. Currently handles SUBMIT events by delegating to
-     * the handleSubmit method. This centralized event handling approach allows for easy
+     * the submit method. This centralized event handling approach allows for easy
      * extension and consistent event processing.
      *
      * @param {IBaseCustomEvent} event - The event object containing event data and metadata
      */
-    async handleEvent(event) {
+    async handleEvent(event, repository) {
         const { name } = event;
         switch (name) {
             case ComponentEventNames.SUBMIT:
-                await this.handleSubmit(event);
+                await this.submit(event, repository);
                 break;
         }
     }
@@ -12103,38 +12252,61 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {IBaseCustomEvent} event - The submit event containing form data
      * @return {Promise<IModelPageCustomEvent|void>} Promise that resolves on success or throws on error
      */
-    async handleSubmit(event, redirect = false) {
+    async submit(event, repository, redirect = false) {
         try {
-            const repo = this._repository;
-            const operation = this.operation === OperationKeys.READ ? 'delete' : this.operation.toLowerCase();
-            const data = this.parseData(event.data, operation);
-            const result = this.operation === OperationKeys.CREATE ?
-                await repo.create(data) : this.operation === OperationKeys.UPDATE ?
-                await repo.update(data) : repo.delete(data);
-            const message = await this.translate(`operations.${operation}.${result ? 'success' : 'error'}`, {
-                "0": this.pk,
-                "1": this.modelId || result[this.pk],
-            });
-            if (result) {
-                repo.refresh(this.modelName, this.operation, this.modelId);
-                if (redirect)
-                    this.location.back();
+            if (!repository)
+                repository = this._repository;
+            // const pk = this.pk || Model.pk(repository.class as Constructor<Model>);
+            const operation = this.operation;
+            const { data } = event;
+            if (data) {
+                const model = this.parseData(data || {}, operation, repository);
+                let result;
+                switch (operation) {
+                    case OperationKeys.CREATE:
+                        result = await (!Array.isArray(model)
+                            ? repository.create(model)
+                            : repository.createAll(model));
+                        break;
+                    case OperationKeys.UPDATE:
+                        result = await (!Array.isArray(model)
+                            ? repository.update(model)
+                            : repository.updateAll(model));
+                        break;
+                    case OperationKeys.DELETE:
+                        result = await (!Array.isArray(model)
+                            ? repository.delete(model)
+                            : repository.deleteAll(model));
+                        break;
+                }
+                const message = await this.translate(!Array.isArray(result)
+                    ? `operations.${operation}.${result ? 'success' : 'error'}`
+                    : `operations.multiple`);
+                if (result) {
+                    // repository.refresh(this.modelName, this.operation, this.modelId as EventIds);
+                    if (redirect)
+                        this.location.back();
+                }
+                return {
+                    ...event,
+                    success: result ? true : false,
+                    message,
+                };
             }
-            return {
-                ...event,
-                success: result ? true : false,
-                message
-            };
         }
         catch (error) {
-            this.log.error(error);
             return {
                 ...event,
                 success: false,
-                message: error instanceof Error ? error.message : error
+                message: error instanceof Error ? error.message : error,
             };
         }
     }
+    async create(data, repository) {
+        alert('create');
+        console.log(repository);
+        console.log(data);
+    }
     /**
      * @description Retrieves a model instance from the repository by unique identifier.
      * @summary Fetches a specific model instance using the repository's read method.
@@ -12151,14 +12323,15 @@ class NgxModelPageDirective extends NgxPageDirective {
             this.location.back();
             return undefined;
         }
+        if (!modelName)
+            modelName = this.modelName;
         const getRepository = async (modelName, parent, model) => {
             if (this._repository)
                 return this._repository;
             const constructor = Model.get(modelName);
             if (constructor) {
                 const properties = Metadata.properties(constructor);
-                if (!model)
-                    model = {};
+                // if (!model) model = {} as KeyValue;
                 for (const prop of properties) {
                     const type = Metadata.type(constructor, prop).name;
                     const context = getModelAndRepository(type);
@@ -12169,23 +12342,31 @@ class NgxModelPageDirective extends NgxPageDirective {
                         const data = await this.handleGet(uid, repository, modelName);
                         this.model = Model.build({ [prop]: data }, modelName);
                     }
-                    else {
-                        model[prop] = Model.build({}, type);
-                    }
+                    // else {
+                    //   model[prop as string] = Model.build({}, type);
+                    // }
                 }
-                this.model[parent] = Model.build(model, modelName);
+                // (this.model as KeyValue)[parent as string] = Model.build(
+                //   model,
+                //   modelName
+                // );
             }
         };
-        repository = (repository || await getRepository(modelName));
+        repository = (repository ||
+            (await getRepository(modelName)));
         if (!repository)
             return this.model;
-        const type = Metadata.type(repository.class, repository.pk).name;
+        const type = Metadata.type(repository.class, Model.pk(repository.class)).name;
         try {
-            const result = await repository.read(([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase()) ? Number(uid) : uid));
+            const result = await (repository).read(([Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase())
+                ? Number(uid)
+                : uid));
             return result;
         }
         catch (error) {
-            this.log.for(this.handleGet).info(`Error getting model instance with id ${uid}: ${error.message}`);
+            this.log
+                .for(this.handleGet)
+                .info(`Error getting model instance with id ${uid}: ${error.message}`);
             return undefined;
         }
     }
@@ -12200,13 +12381,22 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @return {Model | string | number} Processed data ready for repository operations
      * @private
      */
-    parseData(data, operation) {
-        const repo = this._repository;
+    parseData(data, operation, repository) {
+        operation = (operation === OperationKeys.READ
+            ? OperationKeys.DELETE
+            : operation.toLowerCase());
+        if (Array.isArray(data)) {
+            data = data.map((item) => this.parseData(item, operation, repository));
+            return data;
+        }
         let uid = this.modelId;
-        if (repo.pk === 'id')
-            uid = Number(uid);
+        const pk = Model.pk(repository.class);
+        const type = Metadata.type(repository.class, pk).name;
+        uid = [Primitives.NUMBER, Primitives.BIGINT].includes(type.toLowerCase())
+            ? Number(uid)
+            : uid;
         if (operation !== OperationKeys.DELETE)
-            return Model.build(this.modelId ? Object.assign(data, { [repo.pk]: uid }) : data, this.modelName);
+            return Model.build(this.modelId ? Object.assign(data, { [pk]: uid }) : data, repository.class.name);
         return uid;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: NgxModelPageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }