@decaf-ts/for-angular 0.0.71 → 0.0.72

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

@@ -7060,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(),
@@ -7068,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: [{
@@ -7860,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;
@@ -8104,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(),
@@ -8126,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: [{
@@ -12719,7 +12721,7 @@ let TableComponent = class TableComponent extends ListComponent {
                 }
             }
             const parserFn = mapper[this.cols[index]]?.valueParserFn || undefined;
-            return { ...accum, [curr]: parserFn ? parserFn(mapped[curr], item, this) : mapped[curr] };
+            return { ...accum, [curr]: parserFn ? parserFn(mapped[curr], this) : mapped[curr] };
         }, { ...props });
     }
     mapResults(data) {
@@ -12732,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);
@@ -12760,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(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>{{ 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;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.AsyncPipe, name: "async" }, { 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()
@@ -12776,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(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>{{ 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;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: [{
@@ -13267,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;
     }
@@ -13330,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)
@@ -13351,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:
@@ -13362,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])
@@ -13409,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)));
@@ -13450,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)];
@@ -13491,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 };