@decaf-ts/for-angular 0.0.70 → 0.0.72

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

@@ -5446,8 +5446,9 @@ class NgxSvgDirective {
     }
     ngOnInit() {
         this.path = this.path?.trim() || this.element?.nativeElement?.getAttribute('src')?.trim() || '';
-        if (this.path)
+        if (this.path) {
             this.mediaService.loadSvgObserver(this.http, this.path, this.element.nativeElement);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NgxSvgDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: NgxSvgDirective, isStandalone: true, selector: "[ngx-decaf-svg]", inputs: { path: ["ngx-decaf-svg", "path"] }, ngImport: i0 }); }
@@ -5496,7 +5497,7 @@ let IconComponent = class IconComponent {
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "ngx-decaf-icon", inputs: { name: "name", color: "color", slot: "slot", button: "button", buttonFill: "buttonFill", buttonShape: "buttonShape", width: "width", size: "size", inline: "inline" }, host: { properties: { "attr.id": "uid", "attr.aria-hidden": "!button" } }, viewQueries: [{ propertyName: "component", first: true, predicate: ["component"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"], dependencies: [{ kind: "directive", type: NgxSvgDirective, selector: "[ngx-decaf-svg]", inputs: ["ngx-decaf-svg"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
 };
 IconComponent = __decorate([
     Dynamic(),
@@ -5504,7 +5505,7 @@ IconComponent = __decorate([
 ], IconComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid', '[attr.aria-hidden]': '!button' }, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)}\n"] }]
+            args: [{ selector: 'ngx-decaf-icon', imports: [NgxSvgDirective, IonIcon, IonButton], standalone: true, host: { '[attr.id]': 'uid', '[attr.aria-hidden]': '!button' }, template: "<div class=\"dcf-icon-component\" #component>\n  @if (initialized) {\n    @if (button) {\n      <ion-button [fill]=\"buttonFill\" [shape]=\"buttonShape\" [color]=\"isDarkMode ? 'light' : color\" [size]=\"size\">\n        @if (type === \"image\") {\n          @if (isSvg) {\n            <span\n              aria-hidden=\"true\"\n              [slot]=\"slot\"\n              [class]=\"color ? 'dcf-color-' + color : ''\"\n              [style.width]=\"width\"\n              [ngx-decaf-svg]=\"name\"\n            ></span>\n          } @else {\n            <img\n              aria-hidden=\"true\"\n              [alt]=\"name\"\n              [title]=\"name\"\n              [slot]=\"slot\"\n              [src]=\"name\"\n              [style.width]=\"width\"\n              title=\"icon\"\n            />\n          }\n        }\n        @if(type === 'ionic') {\n          <ion-icon\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [ios]=\"name\"\n            [md]=\"name\"\n            [color]=\"isDarkMode ? 'light' : color\"\n            [name]=\"name\"\n          />\n        }\n        @if(type === 'icon') {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"'dcf-icon-button ti ' +name + ' ' + size + ' dcf-color-' + color\">\n          </span>\n        }\n      </ion-button>\n    } @else {\n      @if (type === \"image\") {\n        @if (isSvg) {\n          <span\n            aria-hidden=\"true\"\n            [slot]=\"slot\"\n            [class]=\"color ? 'dcf-color-' + color : ''\"\n            [style.width]=\"width\"\n            [ngx-decaf-svg]=\"name\"\n          >\n          </span>\n        } @else {\n          <img\n            aria-hidden=\"true\"\n            [alt]=\"name\"\n            [title]=\"name\"\n            [slot]=\"slot\"\n            [src]=\"name\"\n            [style.width]=\"width\"\n            title=\"icon\"\n          />\n        }\n      }\n      @if (type === \"ionic\") {\n        <ion-icon\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [ios]=\"name\"\n          [md]=\"name\"\n          [size]=\"size\"\n          [color]=\"isDarkMode ? 'light' : color\"\n          [name]=\"name\"\n        />\n      }\n      @if(type === 'icon') {\n        <span\n          aria-hidden=\"true\"\n          [slot]=\"slot\"\n          [class]=\"'ti ' + name + ' ' + size + ' dcf-color-' + color\">\n        </span>\n      }\n    }\n  }\n</div>\n", styles: [":host{overflow:hidden!important}.dcf-icon-component{overflow:hidden!important}::ng-deep .dcf-icon.dcf-palette-dark ion-icon{color:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg{fill:var(--dcf-text-color);fill-opacity:.25!important;stroke:var(--dcf-text-color)!important}::ng-deep .dcf-icon.dcf-palette-dark svg *{fill:var(--dcf-color-primary)!important;stroke:var(--dcf-color-gray-1)!important}ion-button{cursor:pointer!important}.dcf-icon-component ion-icon:not([size]){font-size:1.35rem!important}[class*=\"ti ti-\"]{font-size:1.4rem;line-height:1.4rem;position:relative}[class*=\"ti ti-\"]:not(.dcf-icon-button){margin-right:.125rem}[class*=\"ti ti-\"].large,[class*=\"ti ti-\"][size=large]{font-size:2.2rem!important;top:2.5px!important}[class*=\"ti ti-\"].small,[class*=\"ti ti-\"][size=small]{font-size:1rem;top:1px!important}[class*=\"ti ti-\"][color=primary],[class*=\"ti ti-\"][class*=color-primary]{color:var(--dcf-color-primary)}[class*=\"ti ti-\"][color=danger],[class*=\"ti ti-\"][class*=color-danger]{color:var(--dcf-color-danger)}[class*=\"ti ti-\"][color=warning],[class*=\"ti ti-\"][class*=color-warning]{color:var(--dcf-color-warning)}[class*=\"ti ti-\"][color=success],[class*=\"ti ti-\"][class*=color-success]{color:var(--dcf-color-success)}[class*=\"ti ti-\"][color=secondary],[class*=\"ti ti-\"][class*=color-secondary]{color:var(--dcf-color-secondary)}[class*=\"ti ti-\"][color=tertiary],[class*=\"ti ti-\"][class*=color-tertiary]{color:var(--dcf-color-tertiary)}[class*=\"ti ti-\"][color=light],[class*=\"ti ti-\"][class*=color-light]{color:var(--dcf-color-light)}[class*=\"ti ti-\"][color=medium],[class*=\"ti ti-\"][class*=color-medium]{color:var(--dcf-color-medium-tint)}[class*=\"ti ti-\"][color=dark],[class*=\"ti ti-\"][class*=color-dark]{color:var(--dcf-color-dark)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { component: [{
                 type: ViewChild,
                 args: ['component', { read: ElementRef, static: false }]
@@ -7059,7 +7060,7 @@ let LayoutComponent = class LayoutComponent extends NgxParentComponentDirective
         this.initialized = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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.16", 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-item-readonly]=\"child.props?.readonly ?? false\"\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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(),
@@ -7067,7 +7068,7 @@ LayoutComponent = __decorate([
 ], LayoutComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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-item-readonly]=\"child.props?.readonly ?? false\"\n              [class]=\"'dcf-grid-col ' + child.colClass\"\n              [class.dcf-first-column]=\"$index === 0\"\n              [class.dcf-layout-separator]=\"child.props?.separator ?? false\"\n              [class.dcf-hidden]=\"child.props?.hidden?.includes(operation)\"\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:first-of-type .dcf-grid .dcf-first-column{padding-top:.25rem!important}.dcf-grid:first-of-type .dcf-grid .dcf-first-column+div{padding-top:.25rem!important}.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:last-child{margin-bottom:0}.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: [{
@@ -7859,6 +7860,8 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
             event.stopImmediatePropagation();
         if (!this.activePage) {
             this.activePage = this.getActivePage();
+            if (this.operation === OperationKeys.UPDATE)
+                return this.handleCreateItem(event);
             return;
         }
         const formGroup = this.activeFormGroup;
@@ -8103,7 +8106,7 @@ let FieldsetComponent = class FieldsetComponent extends NgxFormDirective {
         return this.mapper;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "\n  @if (['create', 'update'].includes(operation) || !multiple) {\n    <div\n      [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n      [class]=\"'dcf-fieldset-component ' + operation\"\n      [class.dcf-blank]=\"!borders\"\n      [class.dcf-empty]=\"!items?.length\"\n      [class.dcf-open]=\"isOpen\"\n      #component>\n      <div class=\"dcf-width-1-1\">\n        <div>\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'].includes(operation) && multiple) {\n              <div class=\"dcf-width-auto dcf-delete\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n                  <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n                </ion-button>\n              </div>\n            }\n          </div>\n        </div>\n\n          <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\"  slot=\"content\">\n            @if(activePage) {\n              <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n                <ngx-decaf-layout\n                  [className]=\"''\"\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\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?.['index'] === item.index - 1\" 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                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) { {{item.info}}<br /> }\n                        @if (item.subinfo) { {{item.subinfo}} }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if(editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n                            <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n                          <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n                        </ion-button>\n                      }\n                    </div>\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\">\n            @if (updatingItem) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\"  [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\"  [attr.aria-label]=\"locale +'.update_item' | translate\">\n                  <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | 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()\"  [attr.aria-label]=\"locale +'.create_item' | translate\">\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                     <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{ locale + (\n                        required ?\n                          (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n                      ) | translate }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n      </div>\n    </div>\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      <legend>{{ (title ? title : name) | translate }}</legend>\n      @if(!items.length) {\n        <div class=\"dcf-padding-xsmall\">\n          <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n        </div>\n      } @else {\n        @for(item of items; track trackItemFn($index, item)) {\n\n          <div class=\"dcf-fieldset-read-item\">\n            <div>\n              <ngx-decaf-layout\n                [className]=\"operation\"\n                [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FieldsetComponent, isStandalone: true, selector: "ngx-decaf-fieldset", inputs: { formControl: "formControl", customTypes: "customTypes", title: "title", description: "description", multiple: "multiple", value: "value", borders: "borders", max: "max", required: "required", ordenable: "ordenable", editable: "editable" }, usesInheritance: true, ngImport: i0, template: "\n  @if (['create', 'update'].includes(operation) || !multiple) {\n    <div\n      [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n      [class]=\"'dcf-fieldset-component ' + operation\"\n      [class.dcf-blank]=\"!borders\"\n      [class.dcf-empty]=\"!items?.length\"\n      [class.dcf-open]=\"isOpen\"\n      #component>\n      <div class=\"dcf-width-1-1\">\n        <div>\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'].includes(operation) && multiple) {\n              <div class=\"dcf-width-auto dcf-delete\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n                  <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n                </ion-button>\n              </div>\n            }\n          </div>\n        </div>\n\n          <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\"  slot=\"content\">\n            @if(activePage) {\n              <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n                <ngx-decaf-layout\n                  [className]=\"''\"\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\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?.['index'] === item.index - 1\" 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                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) { {{item.info}}<br /> }\n                        @if (item.subinfo) { {{item.subinfo}} }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if(editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n                            <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n                          <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n                        </ion-button>\n                      }\n                    </div>\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\">\n            @if (updatingItem) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\"  [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\"  [attr.aria-label]=\"locale +'.update_item' | translate\">\n                  <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | 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()\"  [attr.aria-label]=\"locale +'.create_item' | translate\">\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                     <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{ locale + (\n                        required ?\n                          (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n                      ) | translate }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n      </div>\n    </div>\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      <legend>{{ (title ? title : name) | translate }}</legend>\n      @if(!items.length) {\n        <div class=\"dcf-padding-xsmall\">\n          <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n        </div>\n      } @else {\n        @for(item of items; track trackItemFn($index, item)) {\n\n          <div class=\"dcf-fieldset-read-item\">\n            <div>\n              <ngx-decaf-layout\n                [className]=\"operation\"\n                [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\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: 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: "component", type: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 FieldsetComponent = __decorate([
     Dynamic(),
@@ -8125,7 +8128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         LayoutComponent,
                         IonSpinner,
                         IconComponent
-                    ], template: "\n  @if (['create', 'update'].includes(operation) || !multiple) {\n    <div\n      [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n      [class]=\"'dcf-fieldset-component ' + operation\"\n      [class.dcf-blank]=\"!borders\"\n      [class.dcf-empty]=\"!items?.length\"\n      [class.dcf-open]=\"isOpen\"\n      #component>\n      <div class=\"dcf-width-1-1\">\n        <div>\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'].includes(operation) && multiple) {\n              <div class=\"dcf-width-auto dcf-delete\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n                  <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n                </ion-button>\n              </div>\n            }\n          </div>\n        </div>\n\n          <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\"  slot=\"content\">\n            @if(activePage) {\n              <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n                <ngx-decaf-layout\n                  [className]=\"''\"\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\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?.['index'] === item.index - 1\" 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                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) { {{item.info}}<br /> }\n                        @if (item.subinfo) { {{item.subinfo}} }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if(editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n                            <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n                          <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n                        </ion-button>\n                      }\n                    </div>\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\">\n            @if (updatingItem) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\"  [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\"  [attr.aria-label]=\"locale +'.update_item' | translate\">\n                  <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | 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()\"  [attr.aria-label]=\"locale +'.create_item' | translate\">\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                     <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{ locale + (\n                        required ?\n                          (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n                      ) | translate }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n      </div>\n    </div>\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      <legend>{{ (title ? title : name) | translate }}</legend>\n      @if(!items.length) {\n        <div class=\"dcf-padding-xsmall\">\n          <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n        </div>\n      } @else {\n        @for(item of items; track trackItemFn($index, item)) {\n\n          <div class=\"dcf-fieldset-read-item\">\n            <div>\n              <ngx-decaf-layout\n                [className]=\"operation\"\n                [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\n"] }]
+                    ], template: "\n  @if (['create', 'update'].includes(operation) || !multiple) {\n    <div\n      [attr.role]=\"['create', 'update'].includes(operation) ? 'group' : 'region'\"\n\n      [class]=\"'dcf-fieldset-component ' + operation\"\n      [class.dcf-blank]=\"!borders\"\n      [class.dcf-empty]=\"!items?.length\"\n      [class.dcf-open]=\"isOpen\"\n      #component>\n      <div class=\"dcf-width-1-1\">\n        <div>\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'].includes(operation) && multiple) {\n              <div class=\"dcf-width-auto dcf-delete\">\n                <ion-button fill=\"clear\" size=\"small\" (click)=\"handleClear($event)\" [class.dcf-invisible]=\"!isOpen\" [attr.aria-label]=\"(items?.length ? (locale+'.clear_items') : (locale+'.hidden_form')) | translate\">\n                  <ngx-decaf-icon slot=\"icon-only\" [name]=\"'ti-'+(items?.length ? 'trash' : 'eye-off')\" />\n                </ion-button>\n              </div>\n            }\n          </div>\n        </div>\n\n          <div class=\"dcf-fieldset-content\" [class.dcf-empty]=\"!items?.length && !isOpen\"  slot=\"content\">\n            @if(activePage) {\n              <div class=\"dcf-animation dcf-animation-slide-top-small dcf-animation-fast\" [class.dcf-disabled]=\"!activePage\" >\n                <ngx-decaf-layout\n                  [className]=\"''\"\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\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?.['index'] === item.index - 1\" 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                    @if (item.info?.length || item.subinfo?.length) {\n                      <ion-note slot=\"end\">\n                        @if (item.info?.length) { {{item.info}}<br /> }\n                        @if (item.subinfo) { {{item.subinfo}} }\n                      </ion-note>\n                    }\n                    <div slot=\"end\">\n                      @if(editable) {\n                        @if (!updatingItem || updatingItem?.[pk] !== item.title) {\n                          <ion-button fill=\"clear\" size=\"small\" (click)=\"handleUpdateItem($index)\" [attr.aria-label]=\"locale +'.edit_item' | translate\">\n                            <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-cash-edit\" [color]=\"!isDarkMode ? 'dark' : 'light'\"></ngx-decaf-icon>\n                          </ion-button>\n                        }\n                      }\n                      @if (!updatingItem) {\n                        <ion-button fill=\"clear\" size=\"small\" color=\"danger\" (click)=\"handleRemoveItem($index)\" [attr.aria-label]=\"locale +'.remove_item' | translate\">\n                          <ngx-decaf-icon slot=\"icon-only\" size=\"small\" name=\"ti-row-remove\" [color]=\"!isDarkMode ? 'dark' : 'light'\" />\n                        </ion-button>\n                      }\n                    </div>\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\">\n            @if (updatingItem) {\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" color=\"danger\" (click)=\"handleCancelUpdateItem()\"  [attr.aria-label]=\"locale +'.cancel_update' | translate\">\n                  {{ locale + '.cancel' | translate }}\n                </ion-button>\n              </div>\n              <div>\n                <ion-button size=\"small\" fill=\"clear\" (click)=\"handleCreateItem()\"  [attr.aria-label]=\"locale +'.update_item' | translate\">\n                  <ion-icon  aria-hidden=\"true\" name=\"refresh-outline\" slot=\"start\"></ion-icon>\n                  {{ locale + '.update_item' | 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()\"  [attr.aria-label]=\"locale +'.create_item' | translate\">\n                    <!-- <ion-icon aria-hidden=\"true\" name=\"add-outline\" slot=\"start\"></ion-icon> -->\n                     <ngx-decaf-icon slot=\"icon-only\" name=\"ti-code-plus\" slot=\"start\" />\n                    {{ locale + (\n                        required ?\n                          (items.length ? '.add' : '.add_first') : (items.length ? '.add' : isOpen ? '.add_first' : '.show_form')\n                      ) | translate }}\n                  </ion-button>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n      </div>\n    </div>\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      <legend>{{ (title ? title : name) | translate }}</legend>\n      @if(!items.length) {\n        <div class=\"dcf-padding-xsmall\">\n          <ion-text>{{ locale + '.empty' | translate }}</ion-text>\n        </div>\n      } @else {\n        @for(item of items; track trackItemFn($index, item)) {\n\n          <div class=\"dcf-fieldset-read-item\">\n            <div>\n              <ngx-decaf-layout\n                [className]=\"operation\"\n                [operation]=\"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", styles: ["fieldset{margin:0;padding:0;min-inline-size:auto}.dcf-loading-container{height:50%;display:flex;justify-content:center;align-items:center}.dcf-loading-container ion-spinner{width:30px;height:30px}.dcf-fieldset-read-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)!important}.dcf-fieldset-component{border-radius:var(--dcf-border-radius-small);border:1px solid var(--dcf-color-gray-3);padding:var(--dcf-padding-small)}.dcf-fieldset-component ::ng-deep .dcf-item-readonly{display:none!important}.dcf-fieldset-component.dcf-open.dcf-empty .dcf-button-add{margin-top:1rem!important;margin-bottom:.15rem!important}.dcf-fieldset-component.dcf-blank{border-color:transparent;padding:var(--dcf-padding-xsmall) .25rem}.dcf-fieldset-component:not(.dcf-blank):not(.read):not(.delete){padding:var(--dcf-padding)}.dcf-fieldset-component *{overflow-x:hidden!important}.dcf-max-message-container{padding:0 .125rem;margin-bottom:var(--dcf-margin-xsmall)}legend,.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-content{margin-top:.25rem}.dcf-fieldset-content:not(.dcf-empty){padding:var(--dcf-padding-small) .25rem!important;margin-top:var(--dcf-margin-xsmall)}.dcf-fields-list{margin-top:var(--dcf-margin-small);padding-bottom:var(--dcf-padding)!important;max-height:200px}.dcf-fields-list ion-item{--min-height: 30px;--padding-top: 0rem;--padding-bottom: 0rem;--padding-start: .75rem;--padding-end: .5rem;--inner-padding-start: 0px !important;--inner-padding-end: 0px !important;--border-color: transparent;--background: rgba(var(--dcf-color-primary-rgb), .025) !important;border:1px solid var(--dcf-color-gray-3);border-radius:var(--dcf-border-radius-small);box-sizing:border-box}.dcf-fields-list ion-item:not(:last-child){margin-bottom:var(--dcf-margin-small)}.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-6)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formControl: [{
                 type: Input
             }], customTypes: [{
@@ -8934,7 +8937,6 @@ let FilterComponent = class FilterComponent extends NgxComponentDirective {
     getIndexes() {
         if (this.model)
             this.indexes = Object.keys(Model.indexes(this.model) || {});
-        console.log(this);
         if (!this.disableSort) {
             this.sortBy = [...this.sortBy, ...this.indexes];
             if (this.repository) {
@@ -10101,6 +10103,20 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
     async ngOnDestroy() {
         await this.destroy();
     }
+    /**
+     * @description Releases component resources and unregisters repository observers.
+     * @summary Invoked by Angular teardown logic to ensure the base directive and any
+     * attached repositories stop emitting events, preventing memory leaks when the
+     * list component leaves the DOM.
+     *
+     * The method performs the following actions:
+     * - Delegates to the parent directive's `ngOnDestroy` for shared cleanup
+     * - Detaches the repository observer when one is registered
+     * - Catches and logs repository errors to avoid bubbling failures
+     * - Clears internal references to large objects so they can be garbage collected
+     *
+     * @returns {Promise<void>} Resolves when every teardown step completes.
+     */
     async destroy() {
         await super.ngOnDestroy();
         if (this._repository && this.repositoryObserver) {
@@ -10118,6 +10134,24 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         }
         this.data = this.model = this._repository = this.paginator = undefined;
     }
+    /**
+     * @description Produces the sanitized mapper configuration.
+     * @summary Merges the component mapper with the primary key metadata and filters
+     * non-string entries so downstream rendering logic only receives valid bindings.
+     *
+     * @protected
+     * @returns {KeyValue} A mapper object that contains string values mapped to the
+     * component's public keys.
+     */
+    get _mapper() {
+        this.mapper = { ...this.mapper, ...{ uid: this.pk } };
+        return Object.keys(this.mapper).reduce((accum, curr) => {
+            const mapper = this.mapper[curr];
+            if (typeof mapper === 'string')
+                accum[curr] = mapper;
+            return accum;
+        }, {});
+    }
     /**
      * @description Refreshes the list data from the configured source.
      * @summary This method handles both initial data loading and subsequent refresh operations,
@@ -10841,7 +10875,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
         if (!data || !data.length)
             return [];
         // passing uid as prop to mapper
-        this.mapper = { ...this.mapper, ...{ uid: this.pk } };
+        this.mapper = this._mapper;
         const props = Object.assign({
             operations: this.operations,
             route: this.route,
@@ -10870,7 +10904,7 @@ let ListComponent = class ListComponent extends NgxComponentDirective {
             .join(', ');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", 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", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [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@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            model: child\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]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty.model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", 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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@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.16", type: ListComponent, isStandalone: true, selector: "ngx-decaf-list", inputs: { type: "type", showSearchbar: "showSearchbar", searchbarPlaceholder: "searchbarPlaceholder", 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", sortBy: "sortBy", sortDirection: "sortDirection", disableSort: "disableSort", empty: "empty" }, outputs: { clickEvent: "clickEvent" }, host: { listeners: { "window:ListItemClickEvent": "handleClick($event)", "window:searchbarEvent": "handleSearch($event)" }, properties: { "attr.id": "uid" } }, usesInheritance: true, ngImport: i0, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [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@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            model: child\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%;\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }]\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", 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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@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(),
@@ -10898,7 +10932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         FilterComponent,
                         ComponentRendererComponent,
-                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [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@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            model: child\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]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty.model\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", 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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
+                    ], host: { '[attr.id]': 'uid' }, template: "\n@if (showRefresher) {\n  <ion-refresher slot=\"fixed\" [pullFactor]=\"1\" [pullMin]=\"100\" [pullMax]=\"200\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content />\n  </ion-refresher>\n}\n\n@if (showSearchbar) {\n  <div [hidden]=\"!data?.length && !searching\">\n    <div class=\"dcf-grid dcf-grid-small 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              [indexes]=\"indexes ?? []\"\n              [sortDirection]=\"sortDirection\"\n              [disableSort]=\"disableSort\"\n              (filterEvent)=\"handleFilter($event)\"\n              (searchEvent)=\"handleSearch($event)\"\n            />\n          }\n        } @else {\n          <ngx-decaf-searchbar [placeholder]=\"searchbarPlaceholder\" [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@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            model: child\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%;\">\n            <ion-skeleton-text [animated]=\"true\"></ion-skeleton-text>\n          </ion-text>\n        </ion-label>\n      </ion-item>\n    }]\n\n  } @else {\n    @if (!searching) {\n      <ngx-decaf-empty-state\n        [title]=\"empty.title ? ((locale + '.'+ empty.title) | translate) : ''\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [buttonLink]=\"empty?.link ?? undefined\"\n        [borders]=\"borders\"\n        [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n        className=\"dcf-empty-data\"\n        [subtitle]=\"empty.subtitle ? ((locale + '.'+ empty.subtitle) | translate) : ''\" />\n    } @else {\n\n      <ngx-decaf-empty-state\n        icon=\"search-outline\"\n        [model]=\"empty?.showButton ? model : undefined\"\n        [route]=\"route\"\n        [modelId]=\"modelId\"\n        [borders]=\"borders\"\n        [operations]=\"operations\"\n        [body]=\"'small'\"\n        [translatable]=\"true\"\n        [title]=\"locale + '.search.title' | translate\"\n        [subtitle]=\"locale + '.search.subtitle' | translate: {'0': parseSearchValue()}\"\n        [searchValue]=\"searchValue\"\n      />\n    }\n  }\n}\n\n", 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:0px var(--dcf-padding-small);padding-bottom:0}.dcf-grid-actions .dcf-button-container{margin-top:var(--dcf-margin-small)}@media (max-width: 768px){.dcf-grid-actions .dcf-button-container{width:100%!important}.dcf-grid-actions .dcf-button-container *{width:calc(100% - 5px)!important;display:inline-block;margin-top:0!important;margin-bottom:var(--dcf-margin-xsmall)!important}}.dcf-grid-actions>div:only-child{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { type: [{
                 type: Input
             }], showSearchbar: [{
@@ -12591,22 +12625,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 let TableComponent = class TableComponent extends ListComponent {
     constructor() {
         super(...arguments);
+        this.headers = [];
         this.allowOperations = true;
         this.routerService = inject(NgxRouterService);
         this.injector = inject(EnvironmentInjector);
     }
     get _cols() {
+        this.mapper = this._mapper;
         return Object.entries(this.mapper)
             .sort(([, a], [, b]) => Number(a?.['sequence'] ?? 0) - Number(b?.['sequence'] ?? 0))
             .map(([key]) => key);
     }
+    get _headers() {
+        return this.cols.map(col => col);
+    }
+    get _mapper() {
+        return Object.keys(this.mapper).reduce((accum, curr) => {
+            const mapper = this.mapper[curr];
+            if (typeof mapper === 'object' && 'sequence' in mapper)
+                accum[curr] = mapper;
+            return accum;
+        }, {});
+    }
     async ngOnInit() {
+        this.initialized = false;
         this.type = ListComponentsTypes.PAGINATED;
+        this.empty = Object.assign({}, DefaultListEmptyOptions, this.empty);
+        if (!this.initialized)
+            this.parseProps(this);
         this.cols = this._cols;
         this.allowOperations = this.isAllowed(OperationKeys.UPDATE) || this.isAllowed(OperationKeys.DELETE);
         this.searchValue = undefined;
         if (this.allowOperations)
             this.cols.push('actions');
+        this.headers = this._headers;
         const filter = this.routerService.getQueryParamValue('filter');
         if (filter) {
             const value = this.routerService.getQueryParamValue('value');
@@ -12626,6 +12678,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
         if (this.filterModel)
             await this.getFilterOptions();
+        this.initialized = true;
         await this.refresh();
     }
     async getFilterOptions() {
@@ -12646,10 +12699,29 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     itemMapper(item, mapper, props = {}) {
-        item = super.itemMapper(item, this.cols.filter(c => c !== 'actions'), props);
-        return Object.keys(item).reduce((accum, curr, index) => {
+        this.model = item;
+        const mapped = super.itemMapper(item, this.cols.filter(c => c !== 'actions'), props);
+        const { children } = this.props || [];
+        return Object.keys(mapped).reduce((accum, curr, index) => {
+            const child = children?.[index];
+            if (child) {
+                const { events } = child?.['props'] || {};
+                if (events) {
+                    const { render } = events || undefined;
+                    if (render) {
+                        const clazz = new (events.render())();
+                        const renderFn = clazz.render.bind(this);
+                        if (renderFn instanceof Promise) {
+                            (async () => await renderFn)();
+                        }
+                        else {
+                            renderFn();
+                        }
+                    }
+                }
+            }
             const parserFn = mapper[this.cols[index]]?.valueParserFn || undefined;
-            return { ...accum, [curr]: parserFn ? parserFn(item[curr], this) : item[curr] };
+            return { ...accum, [curr]: parserFn ? parserFn(mapped[curr], this) : mapped[curr] };
         }, { ...props });
     }
     mapResults(data) {
@@ -12662,7 +12734,11 @@ let TableComponent = class TableComponent extends ListComponent {
     }
     async handleAction(event, action, uid) {
         event.stopImmediatePropagation();
-        await this.router.navigate([`/${this.route}/${action}/${uid}`]);
+        if (this.isAllowed(action))
+            await this.router.navigate([`/${this.route}/${action}/${uid}`]);
+        const data = this.items.find(item => item['uid'] === uid);
+        if (data)
+            this.listenEvent.emit({ name: ComponentEventNames.CLICK, data });
     }
     async openFilterSelectOptions(event) {
         const type = (this.filterOptions.length > 10 ? SelectFieldInterfaces.MODAL : SelectFieldInterfaces.POPOVER);
@@ -12690,7 +12766,7 @@ let TableComponent = class TableComponent extends ListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterBy: "filterBy", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper" }, usesInheritance: true, ngImport: i0, template: "\n@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if(filterOptions?.length) {\n        <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container  dcf-flex dcf-flex-middle\">\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? '' \"\n            [labelPlacement]=\"'floating'\"\n            [label]=\" locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\" locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for(option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"dcf-table-container\">\n  @if(initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for(col of cols; track $index) {\n            <th>{{ locale + '.' + col + '.label' | translate}}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for(item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n            @for(col of item  | keyvalue; track $index) {\n              @if(!['actions', 'uid'].includes(col.key)) {\n                <td>{{ col.value }}</td>\n              } @else {\n                @if(allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"primary\"\n                        name=\"ti-pencil\"\n                      />\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"danger\"\n                        name=\"ti-trash\"\n                      />\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n    } @else {\n      @if (!searching) {\n        <ngx-decaf-empty-state\n          [title]=\"'component.list.empty.title' | translate\"\n          [subtitle]=\"'component.list.empty.subtitle' | translate\"\n          [model]=\"model\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [buttonLink]=\"empty?.link ?? undefined\"\n          [borders]=\"borders\"\n          [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n          className=\"dcf-empty-data\"\n          />\n      } @else {\n\n        <ngx-decaf-empty-state\n          icon=\"search-outline\"\n          [model]=\"model\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [borders]=\"borders\"\n          [operations]=\"operations\"\n          [body]=\"'small'\"\n          [translatable]=\"true\"\n          [title]=\"'component.list.search.title' | translate\"\n          [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n          [searchValue]=\"searchValue\"\n        />\n      }\n    }\n</div>\n  @if (loadMoreData) {\n    <div class=\"dcf-table-pagination\">\n      @if (pages > 0 && !searchValue?.length) {\n        <ngx-decaf-pagination\n          [totalPages]=\"pages\"\n          [current]=\"page\"\n          (clickEvent)=\"handlePaginate($event)\"\n        />\n\n      }\n  </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;box-shadow:var(--dcf-box-shadow-small);border:1px solid var(--dcf-color-gray-2);border-radius:var(--dcf-border-radius-small)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "ngx-decaf-table", inputs: { filterModel: "filterModel", filterOptions: "filterOptions", filterBy: "filterBy", filterLabel: "filterLabel", filterOptionsMapper: "filterOptionsMapper" }, usesInheritance: true, ngImport: i0, template: "\n@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if(filterOptions?.length) {\n        <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container  dcf-flex dcf-flex-middle\">\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? '' \"\n            [labelPlacement]=\"'floating'\"\n            [label]=\" locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\" locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for(option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if(initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for(header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate}}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for(item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n            @for(col of item  | keyvalue; track $index) {\n              @if(!['actions', 'uid'].includes(col.key)) {\n                <td [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async) \"></td>\n              } @else {\n                @if(allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"primary\"\n                        name=\"ti-pencil\"\n                      />\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"danger\"\n                        name=\"ti-trash\"\n                      />\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n    } @else {\n      @if (!searching) {\n        <ngx-decaf-empty-state\n          [title]=\"'component.list.empty.title' | translate\"\n          [subtitle]=\"'component.list.empty.subtitle' | translate\"\n          [model]=\"empty?.showButton ? model : undefined\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [buttonLink]=\"empty?.link ?? undefined\"\n          [borders]=\"borders\"\n          [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n          className=\"dcf-empty-data\"\n          />\n      } @else {\n\n        <ngx-decaf-empty-state\n          icon=\"search-outline\"\n          [model]=\"empty?.showButton ? model : undefined\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [borders]=\"borders\"\n          [operations]=\"operations\"\n          [body]=\"'small'\"\n          [translatable]=\"true\"\n          [title]=\"'component.list.search.title' | translate\"\n          [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n          [searchValue]=\"searchValue\"\n        />\n      }\n    }\n</div>\n  @if (loadMoreData) {\n    <div class=\"dcf-table-pagination\">\n      @if (pages > 0 && !searchValue?.length) {\n        <ngx-decaf-pagination\n          [totalPages]=\"pages\"\n          [current]=\"page\"\n          (clickEvent)=\"handlePaginate($event)\"\n        />\n\n      }\n  </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: SearchbarComponent, selector: "ngx-decaf-searchbar", inputs: ["autocomplete", "autocorrect", "animated", "buttonCancelText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value", "queryKeys", "isVisible", "wrapper", "wrapperColor", "emitEventToWindow"], outputs: ["searchEvent"] }, { kind: "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: IconComponent, selector: "ngx-decaf-icon", inputs: ["name", "color", "slot", "button", "buttonFill", "buttonShape", "width", "size", "inline"] }, { kind: "component", type: PaginationComponent, selector: "ngx-decaf-pagination", inputs: ["totalPages", "current"], outputs: ["clickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 TableComponent = __decorate([
     Dynamic()
@@ -12706,7 +12782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         EmptyStateComponent,
                         IconComponent,
                         PaginationComponent
-                    ], template: "\n@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if(filterOptions?.length) {\n        <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container  dcf-flex dcf-flex-middle\">\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? '' \"\n            [labelPlacement]=\"'floating'\"\n            [label]=\" locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\" locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for(option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"dcf-table-container\">\n  @if(initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for(col of cols; track $index) {\n            <th>{{ locale + '.' + col + '.label' | translate}}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for(item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n            @for(col of item  | keyvalue; track $index) {\n              @if(!['actions', 'uid'].includes(col.key)) {\n                <td>{{ col.value }}</td>\n              } @else {\n                @if(allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"primary\"\n                        name=\"ti-pencil\"\n                      />\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"danger\"\n                        name=\"ti-trash\"\n                      />\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n    } @else {\n      @if (!searching) {\n        <ngx-decaf-empty-state\n          [title]=\"'component.list.empty.title' | translate\"\n          [subtitle]=\"'component.list.empty.subtitle' | translate\"\n          [model]=\"model\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [buttonLink]=\"empty?.link ?? undefined\"\n          [borders]=\"borders\"\n          [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n          className=\"dcf-empty-data\"\n          />\n      } @else {\n\n        <ngx-decaf-empty-state\n          icon=\"search-outline\"\n          [model]=\"model\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [borders]=\"borders\"\n          [operations]=\"operations\"\n          [body]=\"'small'\"\n          [translatable]=\"true\"\n          [title]=\"'component.list.search.title' | translate\"\n          [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n          [searchValue]=\"searchValue\"\n        />\n      }\n    }\n</div>\n  @if (loadMoreData) {\n    <div class=\"dcf-table-pagination\">\n      @if (pages > 0 && !searchValue?.length) {\n        <ngx-decaf-pagination\n          [totalPages]=\"pages\"\n          [current]=\"page\"\n          (clickEvent)=\"handlePaginate($event)\"\n        />\n\n      }\n  </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;box-shadow:var(--dcf-box-shadow-small);border:1px solid var(--dcf-color-gray-2);border-radius:var(--dcf-border-radius-small)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
+                    ], template: "\n@if (showSearchbar && (data?.length || searching)) {\n  <div class=\"dcf-grid-actions\">\n    <div class=\"dcf-grid dcf-grid-small\">\n      <div class=\"dcf-width-expand@s\">\n        <ngx-decaf-searchbar\n          [emitEventToWindow]=\"false\"\n          [debounce]=\"500\"\n          (searchEvent)=\"handleSearch($event)\"\n        />\n      </div>\n      @if(filterOptions?.length) {\n        <div class=\"dcf-width-1-3@s dcf-width-1-4@m dcf-select-filter-container  dcf-flex dcf-flex-middle\">\n          <ion-select\n            [id]=\"name\"\n            toggleIcon=\"chevron-down-outline\"\n            expandedIcon=\"chevron-up-outline\"\n            [mode]=\"'md'\"\n            fill=\"outline\"\n            [value]=\"filterValue ?? '' \"\n            [labelPlacement]=\"'floating'\"\n            [label]=\" locale + '.filter.label' | translate\"\n            (click)=\"openFilterSelectOptions($event)\"\n            [placeholder]=\" locale + '.filter.label' | translate\"\n            interface=\"popover\"\n          >\n            <ion-select-option value=\"\">{{ locale + '.filter.all' | translate }}</ion-select-option>\n            @for(option of filterOptions; track $index) {\n              <ion-select-option value=\"{{ option.value }}\">{{ option.text }}</ion-select-option>\n            }\n            <ion-button fill=\"clear\" (click)=\"handleFilterSelectClear($event)\" slot=\"end\" size=\"small\" [disabled]=\"!filterValue\">\n              <ngx-decaf-icon fill=\"clear\" slot=\"icon-only\" [name]=\"'ti-input-x'\" />\n            </ion-button>\n          </ion-select>\n        </div>\n      }\n    </div>\n  </div>\n}\n\n<div class=\"dcf-table-container\" [class.dcf-empty]=\"!data?.length\">\n  @if(initialized && data?.length) {\n    <table class=\"dcf-table\">\n      <thead>\n        <tr>\n          @for(header of headers; track $index) {\n            <th>{{ locale + '.' + header + '.label' | translate}}</th>\n          }\n        </tr>\n      </thead>\n      <tbody>\n        @for(item of items; track trackItemFn($index, item)) {\n          <tr (click)=\"handleAction($event, OperationKeys.READ, item.uid)\">\n            @for(col of item  | keyvalue; track $index) {\n              @if(!['actions', 'uid'].includes(col.key)) {\n                <td [innerHTML]=\"typeof col.value === 'string' ? col.value : (col.value | async) \"></td>\n              } @else {\n                @if(allowOperations) {\n                  <td class=\"dcf-col-actions\">\n                    <div class=\"dcf-flex dcf-flex-center\">\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event, OperationKeys.UPDATE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"primary\"\n                        name=\"ti-pencil\"\n                      />\n                      <ngx-decaf-icon\n                        [button]=\"true\"\n                        (click)=\"handleAction($event,OperationKeys.DELETE, item.uid)\"\n                        fill=\"clear\"\n                        slot=\"icon-only\"\n                        color=\"danger\"\n                        name=\"ti-trash\"\n                      />\n                    </div>\n                  </td>\n                }\n              }\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n    } @else {\n      @if (!searching) {\n        <ngx-decaf-empty-state\n          [title]=\"'component.list.empty.title' | translate\"\n          [subtitle]=\"'component.list.empty.subtitle' | translate\"\n          [model]=\"empty?.showButton ? model : undefined\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [buttonLink]=\"empty?.link ?? undefined\"\n          [borders]=\"borders\"\n          [icon]=\"(item?.icon ?? 'folder-open-outline') || empty.icon\"\n          className=\"dcf-empty-data\"\n          />\n      } @else {\n\n        <ngx-decaf-empty-state\n          icon=\"search-outline\"\n          [model]=\"empty?.showButton ? model : undefined\"\n          [route]=\"route\"\n          [modelId]=\"modelId\"\n          [borders]=\"borders\"\n          [operations]=\"operations\"\n          [body]=\"'small'\"\n          [translatable]=\"true\"\n          [title]=\"'component.list.search.title' | translate\"\n          [subtitle]=\"'component.list.search.subtitle' | translate: {'0': parseSearchValue()}\"\n          [searchValue]=\"searchValue\"\n        />\n      }\n    }\n</div>\n  @if (loadMoreData) {\n    <div class=\"dcf-table-pagination\">\n      @if (pages > 0 && !searchValue?.length) {\n        <ngx-decaf-pagination\n          [totalPages]=\"pages\"\n          [current]=\"page\"\n          (clickEvent)=\"handlePaginate($event)\"\n        />\n\n      }\n  </div>\n}\n\n", styles: [".dcf-table-container{display:block;overflow-x:auto!important;box-sizing:border-box;overflow-y:hidden;scrollbar-width:thin;border-radius:var(--dcf-border-radius-small);box-shadow:var(--dcf-box-shadow-small)!important;background-color:var(--dcf-card-background);border:1px solid var(--dcf-color-gray-2)}.dcf-table-container::-webkit-scrollbar{width:5px}.dcf-table-container table{min-width:680px}.dcf-table{width:100%;border-collapse:collapse;border-radius:var(--dcf-border-radius-xsmall);overflow:hidden;background:var(--dcf-card-background);color:var(--dcf-text-color);font-size:.8rem}.dcf-table thead{background:rgba(var(--dcf-color-primary-rgb),.075);text-transform:uppercase;color:var(--dcf-color-dark);letter-spacing:.06em;font-size:.825rem;white-space:nowrap;width:auto}.dcf-table thead th{text-align:left;padding:.875rem 1rem;font-weight:600;max-width:max-content}.dcf-table tbody tr{transition:background .12s ease,box-shadow .12s ease}.dcf-table tbody tr:hover{background:rgba(var(--dcf-color-primary-rgb),.05);cursor:pointer}.dcf-table tbody tr:not(:last-child){border-bottom:1px solid var(--dcf-color-gray-2)}.dcf-table tbody td{padding:1rem 1.125rem;font-size:.875rem}.dcf-table tbody td:first-child{font-weight:600}.dcf-table tbody td.dcf-col-actions{padding-top:0!important;padding-bottom:0!important}.dcf-table tfoot{font-size:.85rem}.dcf-table tfoot td{padding:.875rem 1.125rem;border-top:1px solid 1px solid var(--dcf-color-gray-2)}.dcf-select-filter-container{min-width:200px}.dcf-buttons-grid{margin-top:var(--dcf-margin-medium);margin-bottom:var(--dcf-margin)}@media (max-width: 480px){.dcf-buttons-grid{flex-direction:row-reverse!important}.dcf-buttons-grid>div{width:100%}.dcf-buttons-grid>div+div{margin-top:1rem}.dcf-buttons-grid ion-button{width:100%}}ion-select{margin-top:.5rem;max-height:40px!important}ion-select ion-button{transform:scale(.75)!important;margin:0!important}\n"] }]
         }], propDecorators: { filterModel: [{
                 type: Input
             }], filterOptions: [{
@@ -12851,6 +12927,7 @@ class NgxEventHandler extends DecafEventHandler {
     // eslint-disable-next-line @typescript-eslint/no-useless-constructor
     constructor() {
         super();
+        //TODO: pass to ui decorator decaf componnet
         this.readonly = false;
     }
     async refresh(...args) {
@@ -13107,9 +13184,10 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @throws {InternalError} When the model is not found in the registry
      */
     get repository() {
+        const modelName = this.modelName || this.model?.constructor?.name;
         try {
-            if (!this._repository) {
-                const constructor = Model.get(this.modelName);
+            if (!this._repository && modelName) {
+                const constructor = Model.get(modelName);
                 if (!constructor)
                     throw new InternalError('Cannot find model. was it registered with @model?');
                 this._repository = Repository.forModel(constructor);
@@ -13119,7 +13197,7 @@ class NgxModelPageDirective extends NgxPageDirective {
             }
         }
         catch (error) {
-            this.log.warn(`Error getting repository for model: ${this.modelName || this.model?.constructor?.name}. ${error.message}`);
+            this.log.warn(`Error getting repository for model: ${modelName}. ${error.message}`);
             this._repository = undefined;
             // throw new InternalError((error as Error)?.message || (error as string));
         }
@@ -13195,8 +13273,8 @@ class NgxModelPageDirective extends NgxPageDirective {
             const relation = pk === this.pk ?
                 {} : (properties.includes(this.pk) && !data[this.pk]) ?
                 { [this.pk]: modelId } : {};
-            return Model.build(Object.assign(data || {}, relation, (modelId && !data[pk] ?
-                { [pk]: uid } : {})), repository.class.name);
+            return Model.build(Object.assign(data || {}, relation, (modelId && !data[this.pk] ?
+                { [this.pk]: modelId } : {})), repository.class.name);
         }
         return uid;
     }
@@ -13258,20 +13336,21 @@ class NgxModelPageDirective extends NgxPageDirective {
      * @param {IBaseCustomEvent} event - The submit event containing form data
      * @return {Promise<IModelComponentSubmitEvent|void>} Promise that resolves on success or throws on error
      */
-    async submit(event, redirect = false, repository) {
+    async submit(event, redirect = false, repo) {
         let success = false;
         let message = '';
         try {
-            if (!repository)
-                repository = this._repository;
-            // const pk = this.pk || Model.pk(repository.class as Constructor<Model>);
+            if (!repo)
+                repo = this._repository;
             const operation = this.operation;
             const { data } = event;
             if (data) {
+                const repository = repo;
                 const model = this.parseData(data || {}, operation, repository);
                 if (!this.modelId && model?.[this.pk])
                     this.modelId = model[this.pk];
                 let result;
+                const pk = Model.pk(repository.class);
                 switch (operation) {
                     case OperationKeys.CREATE:
                         result = await (!Array.isArray(model)
@@ -13279,9 +13358,11 @@ class NgxModelPageDirective extends NgxPageDirective {
                             : repository.createAll(model));
                         break;
                     case OperationKeys.UPDATE: {
-                        result = await (!Array.isArray(model)
-                            ? repository.update(model)
-                            : repository.updateAll(model));
+                        const models = (!Array.isArray(model) ? [model] : model);
+                        for (const m of models) {
+                            const check = m[pk] ? await repository.read((m)[pk]) : false;
+                            result = await (!check ? repository.create(m) : repository.update(m));
+                        }
                         break;
                     }
                     case OperationKeys.DELETE:
@@ -13290,11 +13371,8 @@ class NgxModelPageDirective extends NgxPageDirective {
                             : repository.deleteAll(model));
                         break;
                 }
-                const pk = Model.pk(repository.class);
                 const pkValue = model[pk] || model[this.pk] || model || "";
-                message = await this.translate(!Array.isArray(result)
-                    ? `operations.${operation}.${result ? 'success' : 'error'}`
-                    : `operations.multiple`, { "0": repository.class.name || pk, "1": pkValue });
+                message = await this.translate(`operations.${operation}.${result ? 'success' : 'error'}`, { "0": repository.class.name || pk, "1": pkValue });
                 success = result ? true : false;
                 if (success) {
                     if (result?.[this.pk])
@@ -13337,26 +13415,18 @@ class NgxModelPageDirective extends NgxPageDirective {
             const constructor = Model.get(modelName);
             if (constructor) {
                 const properties = this.getModelProperties(constructor);
-                // if (!model) model = {} as KeyValue;
                 for (const prop of properties) {
-                    const propType = this.getModelPropertyType(constructor, prop);
-                    const context = getModelAndRepository(propType);
+                    const type = this.getModelPropertyType(constructor, prop);
+                    const context = getModelAndRepository(type);
                     if (!context)
-                        return getRepository(propType, prop, model);
+                        return getRepository(type, prop, model);
                     const { repository } = context;
                     if (modelName === this.modelName) {
                         const data = await this.handleRead(uid, repository, modelName);
                         if (data)
                             this.model = Model.build({ [prop]: data }, modelName);
                     }
-                    // else {
-                    //   model[prop as string] = Model.build({}, type);
-                    // }
                 }
-                // (this.model as KeyValue)[parent as string] = Model.build(
-                //   model,
-                //   modelName
-                // );
             }
         };
         repository = (repository || (await getRepository(modelName)));
@@ -13378,7 +13448,8 @@ class NgxModelPageDirective extends NgxPageDirective {
                 const properties = Metadata.properties(constructor);
                 const promises = properties.map(async (prop) => {
                     const type = Metadata.type(constructor, prop).name;
-                    let data = evt.data[prop] || (parent ? event.data[parent][prop] : event.data[prop]);
+                    let data = evt.data[prop] || (parent ?
+                        event.data[parent][prop] : event.data[prop]);
                     if (data) {
                         if (parent || Array.isArray(data))
                             data = [...Object.values(data)];
@@ -13419,13 +13490,13 @@ class NgxModelPageDirective extends NgxPageDirective {
         let resultMessage = '';
         const promises = Object.keys(models).map(async (m) => {
             const { model, repository } = models[m];
-            const { success, message } = await this.submit({ data: model }, false, repository);
+            const { success } = await this.submit({ data: model }, false, repository);
             if (success)
-                resultMessage = message;
+                resultMessage = await this.translate('operations.multiple.success');
             result.push(success);
         });
         await Promise.all(promises);
-        const success = result.every((res) => res);
+        const success = result.every((r) => r);
         if (success && redirect)
             this.location.back();
         return { ...{ data: models }, success, message: resultMessage };