@rosoftlab/ionic 1.0.5-alpha-7 → 1.0.5-alpha-9

package/fesm2022/rosoftlab-ionic.mjs

@@ -10,10 +10,10 @@ import * as i6$1 from '@ngx-formly/core/json-schema';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';
-import { Observable, from, map } from 'rxjs';
+import { Observable, from, Subject, map } from 'rxjs';
 import * as i4 from '@ionic/angular';
 import { IonicModule } from '@ionic/angular';
-import * as i7 from '@ngx-formly/core';
+import * as i8 from '@ngx-formly/core';
 import { FormlyModule, FORMLY_CONFIG, FieldType, FieldArrayType, FieldWrapper } from '@ngx-formly/core';
 import { FormlyIonicModule } from '@ngx-formly/ionic';
 import * as i6 from '@swimlane/ngx-datatable';
@@ -23,11 +23,13 @@ import { SmActionService } from '@rosoftlab/statemachine';
 import * as i3$1 from 'ngx-filesaver';
 import * as XLSX from 'xlsx';
 import * as i1$3 from '@rosoftlab/core';
-import { readFileAsync, getValueFromJsonData, MetadataStorage, GridLayoutFormat } from '@rosoftlab/core';
+import { readFileAsync, getValueFromJsonData, MetadataStorage, BaseTableImplementation, BaseService, GridLayoutFormat } from '@rosoftlab/core';
 import { addIcons } from 'ionicons';
 import { add } from 'ionicons/icons';
 import * as jsonLogic from 'json-logic-js/logic.js';
 import * as i4$1 from '@rosoftlab/rdict';
+import { ReactiveDictionary } from '@rosoftlab/rdict';
+import { takeUntil } from 'rxjs/operators';
 
 class IonicDialogService {
     constructor(alertController) {
@@ -383,7 +385,7 @@ class RepeatDatatableComponent extends FieldArrayType {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RepeatDatatableComponent, deps: [{ token: IonicDialogService }, { token: i2.TranslateService }, { token: i3$1.FileSaverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RepeatDatatableComponent, isStandalone: true, selector: "app-repeat-datatable", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "defaultColumn", first: true, predicate: ["defaultColumn"], descendants: true, static: true }, { propertyName: "actionsTmpl", first: true, predicate: ["actionsTmpl"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-left\">{{props.label}}</ion-title>\r\n\r\n  <ion-button slot=\"end\" (click)=\"exportData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"exportDataProp\">\r\n    <ion-icon name=\"cloud-download-outline\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <ion-button slot=\"end\" (click)=\"importData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"importDataProp\">\r\n    <ion-icon name=\"cloud-upload-outline\"></ion-icon>\r\n  </ion-button>\r\n  <input #fileInput type=\"file\" style=\"display: none\" accept=\".xlsx,.xls,.csv\" (change)=\"handleImportFile($event)\">\r\n\r\n  <ion-button slot=\"end\" (click)=\"add()\" fill=\"clear\" [disabled]=\"props.disabled\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ngx-datatable #table class=\"material fullscreen rls-server-scrolling\" [rows]=\"model\" [columns]=\"props['columns']\" [columnMode]=\"props['columnMode']\"\r\n  [rowHeight]=\"props['rowHeight']\" [headerHeight]=\"props['headerHeight']\" [footerHeight]=\"props['footerHeight']\" [limit]=\"props['limit']\"\r\n  [scrollbarH]=\"props['scrollbarH']\" [reorderable]=\"props['reorderable']\" [externalSorting]=\"true\">\r\n  <ng-template #defaultColumn ngx-datatable-cell-template let-rowIndex=\"rowIndex\" let-value=\"value\" let-row=\"row\"\r\n    let-column=\"column\">\r\n    <formly-field   class=\"formly-ion-list-item\"  [field]=\"getField(field, column, rowIndex)\"></formly-field>\r\n  </ng-template>\r\n</ngx-datatable>\r\n\r\n<ng-template #actionsTmpl let-row=\"row\" let-value=\"value\"  let-rowIndex=\"rowIndex\">\r\n  <ion-button style=\"height: 100%;\" fill=\"clear\"[disabled]=\"props.disabled\" (click)='remove(rowIndex)'>\r\n    <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='remove(rowIndex)'></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".rls-server-scrolling{height:calc(100vh - 110px);position:relative!important}::ng-deep .datatable-body-cell{padding:0!important}::ng-deep .datatable-body-cell-label{height:100%!important}::ng-deep .progress-linear{position:fixed!important;bottom:0}::ng-deep .actions-cell{padding:5px 0 0 .9rem!important}::ng-deep .align-right{text-align:right!important}\n"], dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: i7.LegacyFormlyField, selector: "formly-field" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RepeatDatatableComponent, isStandalone: true, selector: "app-repeat-datatable", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "defaultColumn", first: true, predicate: ["defaultColumn"], descendants: true, static: true }, { propertyName: "actionsTmpl", first: true, predicate: ["actionsTmpl"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-left\">{{props.label}}</ion-title>\r\n\r\n  <ion-button slot=\"end\" (click)=\"exportData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"exportDataProp\">\r\n    <ion-icon name=\"cloud-download-outline\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <ion-button slot=\"end\" (click)=\"importData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"importDataProp\">\r\n    <ion-icon name=\"cloud-upload-outline\"></ion-icon>\r\n  </ion-button>\r\n  <input #fileInput type=\"file\" style=\"display: none\" accept=\".xlsx,.xls,.csv\" (change)=\"handleImportFile($event)\">\r\n\r\n  <ion-button slot=\"end\" (click)=\"add()\" fill=\"clear\" [disabled]=\"props.disabled\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ngx-datatable #table class=\"material fullscreen rls-server-scrolling\" [rows]=\"model\" [columns]=\"props['columns']\" [columnMode]=\"props['columnMode']\"\r\n  [rowHeight]=\"props['rowHeight']\" [headerHeight]=\"props['headerHeight']\" [footerHeight]=\"props['footerHeight']\" [limit]=\"props['limit']\"\r\n  [scrollbarH]=\"props['scrollbarH']\" [reorderable]=\"props['reorderable']\" [externalSorting]=\"true\">\r\n  <ng-template #defaultColumn ngx-datatable-cell-template let-rowIndex=\"rowIndex\" let-value=\"value\" let-row=\"row\"\r\n    let-column=\"column\">\r\n    <formly-field   class=\"formly-ion-list-item\"  [field]=\"getField(field, column, rowIndex)\"></formly-field>\r\n  </ng-template>\r\n</ngx-datatable>\r\n\r\n<ng-template #actionsTmpl let-row=\"row\" let-value=\"value\"  let-rowIndex=\"rowIndex\">\r\n  <ion-button style=\"height: 100%;\" fill=\"clear\"[disabled]=\"props.disabled\" (click)='remove(rowIndex)'>\r\n    <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='remove(rowIndex)'></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".rls-server-scrolling{height:calc(100vh - 110px);position:relative!important}::ng-deep .datatable-body-cell{padding:0!important}::ng-deep .datatable-body-cell-label{height:100%!important}::ng-deep .progress-linear{position:fixed!important;bottom:0}::ng-deep .actions-cell{padding:5px 0 0 .9rem!important}::ng-deep .align-right{text-align:right!important}\n"], dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: i8.LegacyFormlyField, selector: "formly-field" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RepeatDatatableComponent, decorators: [{
             type: Component,
@@ -509,7 +511,7 @@ class RepeatTypeComponent extends FieldArrayType {
         this.fileSaverService.save(blob, this.exportDataProp.fileName);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RepeatTypeComponent, deps: [{ token: IonicDialogService }, { token: i2.TranslateService }, { token: i3$1.FileSaverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RepeatTypeComponent, isStandalone: true, selector: "formly-repeat-section", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-left\">{{props.label}}</ion-title>\r\n\r\n  <ion-button slot=\"end\" (click)=\"exportData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"exportDataProp\">\r\n    <ion-icon name=\"cloud-download-outline\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <ion-button slot=\"end\" (click)=\"importData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"importDataProp\">\r\n    <ion-icon name=\"cloud-upload-outline\"></ion-icon>\r\n  </ion-button>\r\n  <input #fileInput type=\"file\" style=\"display: none\" accept=\".xlsx,.xls,.csv\" (change)=\"handleImportFile($event)\">\r\n\r\n  <ion-button slot=\"end\" (click)=\"add()\" fill=\"clear\" [disabled]=\"props.disabled\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n\r\n<ion-list lines=\"full\">\r\n  <ion-item *ngFor=\"let field of field.fieldGroup; let i = index\" class=\"row align-items-baseline\">\r\n    <formly-field class=\"formly-ion-list-item\" [field]=\"field\"></formly-field>\r\n    <ion-button [disabled]=\"props.disabled\" color=\"danger\" slot=\"end\" (click)='remove(i)'>\r\n      <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\r\n    </ion-button>\r\n  </ion-item>\r\n</ion-list>\r\n\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".formly-ion-list-item{display:inline;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: i7.LegacyFormlyField, selector: "formly-field" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RepeatTypeComponent, isStandalone: true, selector: "formly-repeat-section", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-left\">{{props.label}}</ion-title>\r\n\r\n  <ion-button slot=\"end\" (click)=\"exportData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"exportDataProp\">\r\n    <ion-icon name=\"cloud-download-outline\"></ion-icon>\r\n  </ion-button>\r\n\r\n  <ion-button slot=\"end\" (click)=\"importData()\" fill=\"clear\" [disabled]=\"props.disabled\" *ngIf=\"importDataProp\">\r\n    <ion-icon name=\"cloud-upload-outline\"></ion-icon>\r\n  </ion-button>\r\n  <input #fileInput type=\"file\" style=\"display: none\" accept=\".xlsx,.xls,.csv\" (change)=\"handleImportFile($event)\">\r\n\r\n  <ion-button slot=\"end\" (click)=\"add()\" fill=\"clear\" [disabled]=\"props.disabled\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n\r\n<ion-list lines=\"full\">\r\n  <ion-item *ngFor=\"let field of field.fieldGroup; let i = index\" class=\"row align-items-baseline\">\r\n    <formly-field class=\"formly-ion-list-item\" [field]=\"field\"></formly-field>\r\n    <ion-button [disabled]=\"props.disabled\" color=\"danger\" slot=\"end\" (click)='remove(i)'>\r\n      <ion-icon slot=\"icon-only\" name=\"trash\"></ion-icon>\r\n    </ion-button>\r\n  </ion-item>\r\n</ion-list>\r\n\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".formly-ion-list-item{display:inline;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: i8.LegacyFormlyField, selector: "formly-field" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RepeatTypeComponent, decorators: [{
             type: Component,
@@ -621,7 +623,7 @@ class RslIonicModuleModule {
             IonicModule,
             ReactiveFormsModule,
             FormlyIonicModule,
-            NgxDatatableModule, TranslateModule, i7.FormlyModule], exports: [CommonModule,
+            NgxDatatableModule, TranslateModule, i8.FormlyModule], exports: [CommonModule,
             IonicModule,
             ReactiveFormsModule,
             FormlyIonicModule,
@@ -926,7 +928,7 @@ class GenericIonicCrudComponent {
         return rvalue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicCrudComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: IonicDialogService }, { token: i2.TranslateService }, { token: i3.Location }, { token: i0.Injector }, { token: i6$1.FormlyJsonschema }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: GenericIonicCrudComponent, isStandalone: true, selector: "rslc-ionic-crud", ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </ng-container>\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\r\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\r\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\r\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i7.LegacyFormlyForm, selector: "formly-form" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: GenericIonicCrudComponent, isStandalone: true, selector: "rslc-ionic-crud", ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </ng-container>\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\r\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\r\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\r\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.LegacyFormlyForm, selector: "formly-form" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicCrudComponent, decorators: [{
             type: Component,
@@ -1216,6 +1218,667 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }] } });
 
+class GenericIonicCrudPageComponent {
+    //#endregion
+    constructor(fb, router, route, dialogService, translate, location, injector, formlyJsonschema) {
+        this.fb = fb;
+        this.router = router;
+        this.route = route;
+        this.dialogService = dialogService;
+        this.translate = translate;
+        this.location = location;
+        this.injector = injector;
+        this.formlyJsonschema = formlyJsonschema;
+        this.isLoading = true;
+        this.changeUrlRoute = true;
+        this.options = {};
+        const SERVICE_TOKEN = route.snapshot.data['requiredService'];
+        this.modelService = this.injector.get(SERVICE_TOKEN);
+        this.modelService = this.injector.get(SERVICE_TOKEN);
+        this.confirmQuestion = this.translate.instant('General.Discard.Question');
+        this.confirmButton = this.translate.instant('General.Discard.ConfirmButton');
+        this.saveMessage = this.translate.instant('General.Save.Message');
+    }
+    ionViewWillLeave() {
+        this.options.resetModel();
+        this.baseForm.reset();
+    }
+    afterSave(model) {
+        return new Observable((observer) => {
+            observer.next(model);
+            observer.complete();
+        });
+    }
+    beforeSave(model) {
+        return new Observable((observer) => {
+            observer.next(model);
+            observer.complete();
+        });
+    }
+    ngOnInit() {
+        this.initForm();
+    }
+    initForm(customInclude = '', newModelId = null, model = null) {
+        if (model === null) {
+            this.modelId = this.route.snapshot.paramMap.get('id') ?? newModelId;
+            this.isEdit = false;
+            if (this.modelId) {
+                this.modelService.get(this.modelId, customInclude).subscribe((value) => {
+                    this.isEdit = true;
+                    this.generateForm(value);
+                });
+            }
+            else {
+                if (this.changeUrlRoute) {
+                    const addUrl = this.router.createUrlTree([]).toString();
+                    this.editRoute = this.router.createUrlTree([addUrl.replace('add', 'edit')]).toString();
+                }
+                // }
+                this.generateForm(this.modelService.newModel());
+            }
+        }
+        else {
+            this.modelId = model.id;
+            this.isEdit = true;
+            this.generateForm(model);
+        }
+    }
+    generateForm(model) {
+        this.isLoading = false;
+        this.modelId = model.id;
+        this.model = model;
+        this.origModel = _.cloneDeep(model);
+        ;
+        this.title = this.model.modelConfig.formTitle;
+        this.baseForm = new UntypedFormGroup({}); //= this.modelService.toFormGroup(this.fb, model);
+        this.afterFormGenerated();
+        this.fields = this.modelService.getFormlyFields(this.model);
+    }
+    afterFormGenerated() {
+    }
+    getFromGroup(formGroup = null) {
+        if (!formGroup)
+            return this.baseForm;
+        if (formGroup instanceof UntypedFormGroup)
+            return formGroup;
+        return this.baseForm.controls[formGroup];
+    }
+    validateAllFormFields(formGroup = null) {
+        const fg = this.getFromGroup(formGroup);
+        Object.keys(fg.controls).forEach(field => {
+            // console.log(field);
+            const control = fg.get(field);
+            if (control instanceof UntypedFormControl) {
+                control.markAsTouched({ onlySelf: true });
+            }
+            else if (control instanceof UntypedFormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+    isFieldValid(field, formGroup = null) {
+        const fg = this.getFromGroup(formGroup);
+        const filedControl = fg.get(field);
+        return !filedControl.valid && filedControl.touched;
+    }
+    isFieldValidFromArray(arrayIndex, field, arrayName = 'formArray') {
+        const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
+        return !fieldControl.valid && fieldControl.touched;
+    }
+    displayFieldCss(field) {
+        return {
+            'has-error': this.isFieldValid(field),
+            'has-feedback': this.isFieldValid(field)
+        };
+    }
+    onCancel() {
+        this.router.navigate([this.cancelRoute]);
+    }
+    onSave() {
+        this.saveModel(this.baseForm);
+    }
+    onSubmit(model) {
+        this.saveModel(this.baseForm);
+    }
+    saveModel(formGroup = null) {
+        const fg = this.getFromGroup(formGroup);
+        const that = this;
+        if (fg) {
+            if (fg.valid) {
+                this.beforeSave(this.model).subscribe(_ => {
+                    this.modelService.save(this.model, this.modelId, this.origModel).subscribe((newModel) => {
+                        this.model = newModel;
+                        this.modelId = newModel.id;
+                        if (this.editRoute) {
+                            this.isEdit = true;
+                            if (this.changeUrlRoute) {
+                                const url = this.router.createUrlTree([this.editRoute, this.modelId]).toString();
+                                this.location.replaceState(url);
+                            }
+                        }
+                        this.afterSave(newModel).subscribe((val) => {
+                            from(this.dialogService.showSaveMessage(this.saveMessage)).subscribe(d => {
+                                this.options.updateInitialValue();
+                                fg.markAsPristine();
+                            });
+                        });
+                    }, err => {
+                        this.serverErrors(err);
+                    });
+                });
+            }
+            else {
+                this.validateAllFormFields(formGroup);
+            }
+        }
+    }
+    serverErrors(err) {
+        if (err.error) {
+            if (err.error.errors) {
+                const validationErrors = err.error.errors;
+                if (Array.isArray(validationErrors)) {
+                    validationErrors.forEach(prop => {
+                        const formControl = this.baseForm.get(this.firstCharToLowerCase(prop));
+                        if (formControl) {
+                            // activate the error message
+                            formControl.setErrors({
+                                serverError: { message: validationErrors[prop].join('\n') }
+                            });
+                        }
+                    });
+                }
+                else {
+                    const keys = Object.keys(validationErrors);
+                    keys.forEach(prop => {
+                        const formControl = this.baseForm.get(this.firstCharToLowerCase(prop));
+                        if (formControl) {
+                            // activate the error message
+                            formControl.setErrors({
+                                serverError: { message: validationErrors[prop].join('\n') }
+                            });
+                        }
+                    });
+                }
+            }
+        }
+    }
+    firstCharToLowerCase(str) {
+        if (str.length === 0) {
+            return str; // Return an empty string if the input is empty
+        }
+        const firstChar = str.charAt(0).toLowerCase();
+        const restOfString = str.slice(1);
+        return firstChar + restOfString;
+    }
+    async canDeactivate() {
+        if (!this.baseForm.dirty) {
+            return true;
+        }
+        var result = await this.dialogService.confirm(this.confirmQuestion, null, this.confirmButton);
+        return result;
+    }
+    getFiledName(filedTranslationKey) {
+        return { field: this.translate.instant(filedTranslationKey) };
+    }
+    getCustomErrorMessage(error, fieldLabel) {
+        return '';
+    }
+    getErrorMessageFromArray(arrayIndex, field, filedTranslationKey, arrayName = 'formArray') {
+        const fieldControl = this.baseForm.get(arrayName).get([arrayIndex]).get(field);
+        return this.getErrorMessageForField(fieldControl, filedTranslationKey);
+    }
+    getErrorMessage(field, filedTranslationKey, formGroup = null) {
+        const fg = this.getFromGroup(formGroup);
+        return this.getErrorMessageForField(fg.get(field), filedTranslationKey);
+    }
+    getErrorMessageForField(fieldControl, filedTranslationKey) {
+        const error = fieldControl.errors;
+        const fieldLabel = this.translate.instant(filedTranslationKey);
+        let rvalue = '';
+        if (error !== null) {
+            if (error['required'] === true) {
+                rvalue = this.translate.instant('General.Field.Required', { field: fieldLabel });
+            }
+            if (error['minlength']) {
+                rvalue = this.translate.instant('General.Field.MinLength', { field: fieldLabel, requiredLength: error.minlength.requiredLength });
+            }
+            if (error['email'] === true) {
+                rvalue = this.translate.instant('General.Field.InvalidEmail');
+            }
+            if (error['url'] === true) {
+                rvalue = this.translate.instant('General.Field.InvalidUrl');
+            }
+            if (error['serverError']) {
+                rvalue = error['serverError'];
+            }
+            if (rvalue === '') {
+                rvalue = this.getCustomErrorMessage(error, fieldLabel);
+            }
+        }
+        return rvalue;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicCrudPageComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: IonicDialogService }, { token: i2.TranslateService }, { token: i3.Location }, { token: i0.Injector }, { token: i6$1.FormlyJsonschema }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: GenericIonicCrudPageComponent, isStandalone: true, selector: "generic-ionic-crud", ngImport: i0, template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </ng-container>\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\r\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\r\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\r\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i8.LegacyFormlyForm, selector: "formly-form" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicCrudPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'generic-ionic-crud', imports: [RslIonicModuleModule], template: "<ion-header [translucent]=\"true\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n  <ng-container *ngIf=\"!isLoading\">\r\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n    </form>\r\n  </ng-container>\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\r\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\r\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\r\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>" }]
+        }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: IonicDialogService }, { type: i2.TranslateService }, { type: i3.Location }, { type: i0.Injector }, { type: i6$1.FormlyJsonschema }] });
+
+class GenericIonicGridComponent extends BaseTableImplementation {
+    constructor(router, translate, dialogServiceIonic, el, localFileService) {
+        super();
+        this.router = router;
+        this.translate = translate;
+        this.dialogServiceIonic = dialogServiceIonic;
+        this.el = el;
+        this.localFileService = localFileService;
+        // @Input() modelService: BaseService<BaseModel>;
+        // @Input() modelName: string | null = null;
+        this.data = [];
+        this.pageIndex = 1;
+        this.pageSize = 30;
+        this.columns = [];
+        this.allColumns = [];
+        this.referenceData = new Map();
+        this.ColumnMode = ColumnMode;
+        this.SelectionType = SelectionType;
+        this.headerHeight = 50;
+        this.rowHeight = 50;
+        this.isRdict = false;
+        this.destroy$ = new Subject();
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        const service = this.dataService;
+        this.isRdict = false;
+        if (service instanceof BaseService) {
+            this.initStandard();
+        }
+        else if (service instanceof ReactiveDictionary) {
+            this.rdict = service;
+            await this.initRdict();
+        }
+        this.router.events.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this.data = [];
+                this.pageIndex = 1;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    initStandard() {
+        this.getListLayout();
+        this.loadData();
+    }
+    async initRdict() {
+        this.isRdict = true;
+        const urlTree = this.router.url.split('?')[0];
+        const currentUrlSegments = urlTree
+            .split('/')
+            .filter((segment) => segment !== '')
+            .map((segment) => new UrlSegment(segment, {}));
+        this.basePath = currentUrlSegments.map((segment) => segment.path).join('/');
+        const filteredSegments = currentUrlSegments.filter((segment) => segment.path !== '');
+        this.dictPath = filteredSegments.map((segment) => segment.path).join('.');
+        this.model = filteredSegments.length > 0 ? filteredSegments[filteredSegments.length - 1].path : '';
+        if (this.useView) {
+            await this.getParentDict();
+        }
+        this.getListLayout();
+        this.loadData();
+    }
+    async getParentDict() {
+        const lastDotIndex = (this.dictPath ?? '').lastIndexOf('.');
+        const parentPath = lastDotIndex !== -1 ? (this.dictPath ?? '').substring(0, lastDotIndex) : this.dictPath;
+        this.parentDict = await this.rdict.asyncGet(parentPath);
+    }
+    onScroll(offsetY) {
+        if (offsetY) {
+            if (this.oldOffsetY !== offsetY) {
+                this.oldOffsetY = offsetY;
+                const viewHeight = this.el.nativeElement.getBoundingClientRect().height - this.headerHeight;
+                if (!this.isLoading && offsetY + viewHeight >= this.data.length * this.rowHeight) {
+                    let limit = this.pageSize;
+                    if (this.data.length === 0) {
+                        const pageSize = Math.ceil(viewHeight / this.rowHeight);
+                        limit = Math.max(pageSize, this.pageSize);
+                    }
+                    this.pageSize = limit;
+                    this.loadData();
+                }
+            }
+        }
+    }
+    async ionViewWillEnter() {
+        this.data = [];
+        this.loadData();
+    }
+    async handleChange(event) {
+        this.filterValue = event.target.value.toLowerCase();
+        this.data = [];
+        this.pageIndex = 1;
+        this.loadData();
+    }
+    async handleRefresh(event) {
+        this.pageIndex = 1;
+        this.data = [];
+        this.loadData();
+        if (event?.target) {
+            event.target.complete();
+        }
+    }
+    loadData() {
+        if (this.isRdict) {
+            this.loadDataRdict();
+        }
+        else {
+            this.loadDataStandard();
+        }
+    }
+    loadDataStandard() {
+        const filters = [];
+        let sorts = '';
+        this.isLoading = true;
+        if (this.defaultSort) {
+            sorts = this.defaultSortDirection === 'desc' ? '-' + this.defaultSort : this.defaultSort;
+        }
+        if (this.showSearch && this.filterValue) {
+            const searchFieldsValue = Array.isArray(this.searchFields) ? this.searchFields.join(',') : this.searchFields;
+            if (!searchFieldsValue) {
+                filters.push('@=*' + this.filterValue);
+            }
+            else {
+                const y = '(' + searchFieldsValue.replace(',', '|') + ')';
+                filters.push(y + '@=*' + this.filterValue);
+            }
+        }
+        if (this.defaultFilter) {
+            filters.push(this.defaultFilter);
+        }
+        setTimeout(() => {
+            const filtersValue = filters.join(', ');
+            this.dataService
+                .getAll(this.pageIndex, this.pageSize, sorts, filtersValue, this.customInclude)
+                .subscribe((response) => {
+                if (this.pageIndex !== response.getMeta().meta.count) {
+                    this.pageIndex++;
+                }
+                const rows = [...this.data, ...response.getModels()];
+                this.data = rows;
+                this.isLoading = false;
+            });
+        }, 700);
+    }
+    loadDataRdict() {
+        if (!this.dictPath)
+            return;
+        if (this.useView) {
+            this.loadDataViewRdict();
+            return;
+        }
+        this.rdict
+            .get$(this.dictPath)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (rdictData) => {
+                this.tableRdict = rdictData;
+                this.tableRdict
+                    .onChange$()
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe((changes) => this.onChangeEventRdict(changes));
+                this.tableRdict
+                    .onDelete$()
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe((changes) => this.onDeleteEventRdict(changes));
+                this.rdict
+                    .getArray$(this.dictPath, this.tableRdict)
+                    .pipe(takeUntil(this.destroy$))
+                    .subscribe({
+                    next: (value) => (this.data = value),
+                    error: (err) => console.error('Error:', err.message)
+                });
+            },
+            error: (err) => console.error('Error:', err.message)
+        });
+    }
+    loadDataViewRdict() {
+        if (!this.parentDict || !this.model)
+            return;
+        const request = { skip: 0, take: this.pageSize };
+        this.parentDict.getFilteredView(this.model, request).subscribe({
+            next: (view) => (this.data = view)
+        });
+    }
+    onDeleteEventRdict(changes) {
+        if (changes?.key) {
+            const index = this.data.findIndex((item) => item.oid === changes.key);
+            if (index > -1) {
+                this.data.splice(index, 1);
+            }
+        }
+    }
+    onChangeEventRdict(changes) {
+        if (!changes)
+            return;
+        const key = changes?.key;
+        const value = changes?.value;
+        if (key === 'transactions') {
+            for (const [tKey, tValue] of Object.entries(value)) {
+                const index = this.data.findIndex((item) => item.oid === tKey);
+                if (index > -1) {
+                    this.data[index] = tValue;
+                }
+                else {
+                    this.data.push(tValue);
+                }
+            }
+        }
+        else if (key && value) {
+            const index = this.data.findIndex((item) => item.oid === key);
+            if (index > -1) {
+                this.data[index] = value.getPlainObject();
+            }
+            else {
+                this.tableRdict.get$(key).subscribe((val) => {
+                    this.data.push(val.getPlainObject());
+                });
+            }
+        }
+    }
+    getListLayout() {
+        if (this.isRdict) {
+            this.getListLayoutRdict();
+        }
+        else {
+            this.getListLayoutStanderd();
+        }
+    }
+    getListLayoutStanderd() {
+        const modelKey = this.model;
+        if (!modelKey)
+            return;
+        const layoutSource$ = this.fileLayout
+            ? this.localFileService.getJsonData(this.fileLayout)
+            : this.rdict
+                ? this.rdict.get$('config.models.' + modelKey + '.tableLayout')
+                : null;
+        if (!layoutSource$)
+            return;
+        layoutSource$.subscribe({
+            next: (value) => {
+                const layout = this.fileLayout ? value.find((item) => item.model === modelKey) : value;
+                this.setLayout(this.fileLayout ? layout?.tableLayout : layout);
+            },
+            error: (err) => console.error('Error loading layout:', err.message)
+        });
+    }
+    getListLayoutRdict() {
+        const modelKey = this.model;
+        if (!modelKey)
+            return;
+        const layoutSource$ = this.fileLayout
+            ? this.localFileService.getJsonData(this.fileLayout)
+            : this.rdict.get$('config.models.' + modelKey + '.tableLayout');
+        layoutSource$.subscribe({
+            next: (value) => {
+                const layout = this.fileLayout ? value.find((item) => item.model === modelKey) : value;
+                this.setLayout(this.fileLayout ? layout?.tableLayout : layout);
+            },
+            error: (err) => console.error('Error loading layout:', err.message)
+        });
+    }
+    setLayout(layout) {
+        if (!layout)
+            return;
+        this.title = this.translate.instant(layout['title']);
+        this.allColumns = layout['columns'].map((item) => {
+            if (!item.isTranslated) {
+                item.name = this.translate.instant(item.translateKey);
+                item.isTranslated = true;
+                if (!item.type)
+                    item.type = 'property';
+            }
+            return item;
+        });
+        if (this.isRdict) {
+            const referenceColumns = this.allColumns.filter((item) => item.reference);
+            referenceColumns.forEach((item) => {
+                this.rdict.getArray$(item.reference).subscribe((value) => {
+                    if (value)
+                        this.referenceData.set(item.reference, this.arrayToMap(value, item.referenceKey));
+                });
+            });
+        }
+        this.allColumns.sort((a, b) => a.order - b.order);
+        this.columns = this.allColumns.map((col) => ({
+            prop: col.propertyName,
+            name: col.name,
+            sortable: true
+        }));
+        if (this.canDelete || this.canEdit) {
+            this.columns.push({
+                cellTemplate: this.actionsTmpl,
+                name: '',
+                sortable: false,
+                draggable: false
+            });
+        }
+    }
+    arrayToMap(array, keyProperty) {
+        const map = new Map();
+        array.forEach((item) => map.set(String(item[keyProperty]), item));
+        return map;
+    }
+    editHandler(args) {
+        this.edit(args);
+    }
+    removeHandler(args) {
+        this.delete(args);
+    }
+    delete(dataItem) {
+        const modelName = dataItem?.[this.deletePropertyName];
+        const message = this.translate.instant('Are you sure you want to delete this {{modelName}}?', { modelName });
+        this.dialogServiceIonic.confirm(message).then((value) => {
+            if (value?.data) {
+                const idValue = dataItem?.[this.idProperty] ?? dataItem?.id ?? dataItem?.oid;
+                this.performDelete(idValue);
+            }
+        });
+    }
+    performDelete(id) {
+        if (this.isRdict && this.tableRdict) {
+            this.tableRdict.delete$(id).subscribe(() => {
+                const index = this.data.findIndex((item) => item.oid === id || item.id === id);
+                if (index > -1) {
+                    this.data.splice(index, 1);
+                }
+            });
+            return;
+        }
+        this.dataService.delete(id).subscribe(() => {
+            const tempData = [];
+            this.data.map((item) => {
+                if (item.id !== id) {
+                    tempData.push(item);
+                }
+            });
+            this.data = tempData;
+        });
+    }
+    getCellValue(item, column) {
+        if (!item || typeof item !== 'object')
+            return null;
+        if (column?.type === 'reference') {
+            const getNested = (obj, path) => path.split('.').reduce((acc, key) => acc?.[key], obj);
+            const propVal = getNested(item, column.propertyName);
+            return this.referenceData.get(column.reference)?.get(String(propVal))?.[column.referenceProperty] ?? propVal;
+        }
+        return item[column?.propertyName ?? column?.prop];
+    }
+    onAdd() {
+        this.addHandler();
+    }
+    editModel(model) {
+        if (this.canEdit)
+            this.editHandler(model);
+    }
+    deleteModel(model) {
+        this.removeHandler(model);
+    }
+    deleteEnabled(model) {
+        if (this.canDelete) {
+            if (this.deleteDisableRule) {
+                return this.evaluateRule(this.deleteDisableRule, model);
+            }
+            else {
+                return true;
+            }
+        }
+        else {
+            return false;
+        }
+    }
+    evaluateRule(rules, model) {
+        let result = true;
+        rules.forEach((rule) => {
+            let jsonRule;
+            if (typeof rule.rule === 'string') {
+                jsonRule = JSON.parse(rule.rule);
+            }
+            else {
+                jsonRule = rule.rule;
+            }
+            if (rule.parameters) {
+                const data = '{' +
+                    rule.parameters
+                        .map((item) => {
+                        return '"' + item + '":"' + model[item] + '"';
+                    })
+                        .join(',') +
+                    '}';
+                result = jsonLogic.apply(jsonRule, JSON.parse(data));
+            }
+            else {
+                result = jsonLogic.apply(jsonRule);
+            }
+        });
+        return result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicGridComponent, deps: [{ token: i1$2.Router }, { token: i2.TranslateService }, { token: IonicDialogService }, { token: i0.ElementRef }, { token: i1$3.LocalFileService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: GenericIonicGridComponent, isStandalone: true, selector: "generic-ionic-grid", viewQueries: [{ propertyName: "actionsTmpl", first: true, predicate: ["actionsTmpl"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n\r\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\r\n    <ion-refresher-content></ion-refresher-content>\r\n  </ion-refresher>\r\n\r\n  <ngx-datatable class=\"material fullscreen rls-server-scrolling\" style=\"top: 115px\" [rows]=\"data\" [columns]=\"columns\"\r\n    [columnMode]=\"ColumnMode.standard\" [headerHeight]=\"headerHeight\" [rowHeight]=\"rowHeight\" [scrollbarV]=\"true\"\r\n    [loadingIndicator]=\"isLoading\" [scrollbarH]=\"true\" (scroll)=\"onScroll($event.offsetY)\"\r\n   >\r\n  </ngx-datatable>\r\n  \r\n  <ng-template #actionsTmpl let-row=\"row\" let-value=\"value\">\r\n    <ion-button  fill=\"clear\" *ngIf=\"canEdit\" (click)='editModel(row)'>\r\n      <ion-icon slot=\"icon-only\" name=\"create\" (click)='editModel(row)'></ion-icon>\r\n    </ion-button>\r\n    <ion-button fill=\"clear\" *ngIf=\"deleteEnabled(row)\" (click)='deleteModel(row)'>\r\n      <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='deleteModel(row)'></ion-icon>\r\n    </ion-button>\r\n  </ng-template>\r\n\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-center\">{{title}}</ion-title>\r\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\" *ngIf=\"hasAdd\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".rls-server-scrolling{height:calc(100vh - 110px)}::ng-deep .progress-linear{position:fixed!important;bottom:0}::ng-deep .actions-cell{padding:5px 0 0 .9rem!important}::ng-deep .align-right{text-align:right!important}\n"], dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.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: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i4.IonMenuButton, selector: "ion-menu-button", inputs: ["autoHide", "color", "disabled", "menu", "mode", "type"] }, { kind: "component", type: i4.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i4.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocapitalize", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "maxlength", "minlength", "mode", "name", "placeholder", "searchIcon", "showCancelButton", "showClearButton", "spellcheck", "type", "value"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i4.TextValueAccessor, selector: "ion-input:not([type=number]),ion-input-otp[type=text],ion-textarea,ion-searchbar" }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericIonicGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'generic-ionic-grid', standalone: true, imports: [RslIonicModuleModule], template: "<ion-header *ngIf=\"showHeader\">\r\n  <ion-toolbar>\r\n    <ion-buttons slot=\"start\">\r\n      <ion-menu-button></ion-menu-button>\r\n      <ion-back-button></ion-back-button>\r\n    </ion-buttons>\r\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\r\n  </ion-toolbar>\r\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\r\n</ion-header>\r\n\r\n<ion-content [fullscreen]=\"true\">\r\n\r\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\r\n    <ion-refresher-content></ion-refresher-content>\r\n  </ion-refresher>\r\n\r\n  <ngx-datatable class=\"material fullscreen rls-server-scrolling\" style=\"top: 115px\" [rows]=\"data\" [columns]=\"columns\"\r\n    [columnMode]=\"ColumnMode.standard\" [headerHeight]=\"headerHeight\" [rowHeight]=\"rowHeight\" [scrollbarV]=\"true\"\r\n    [loadingIndicator]=\"isLoading\" [scrollbarH]=\"true\" (scroll)=\"onScroll($event.offsetY)\"\r\n   >\r\n  </ngx-datatable>\r\n  \r\n  <ng-template #actionsTmpl let-row=\"row\" let-value=\"value\">\r\n    <ion-button  fill=\"clear\" *ngIf=\"canEdit\" (click)='editModel(row)'>\r\n      <ion-icon slot=\"icon-only\" name=\"create\" (click)='editModel(row)'></ion-icon>\r\n    </ion-button>\r\n    <ion-button fill=\"clear\" *ngIf=\"deleteEnabled(row)\" (click)='deleteModel(row)'>\r\n      <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='deleteModel(row)'></ion-icon>\r\n    </ion-button>\r\n  </ng-template>\r\n\r\n</ion-content>\r\n\r\n<ng-template #header>\r\n  <ion-title class=\"ion-text-center\">{{title}}</ion-title>\r\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\" *ngIf=\"hasAdd\">\r\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\r\n  </ion-button>\r\n</ng-template>\r\n\r\n<ng-template #search>\r\n  <ion-toolbar *ngIf=\"showSearch\">\r\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\r\n  </ion-toolbar>\r\n</ng-template>", styles: [".rls-server-scrolling{height:calc(100vh - 110px)}::ng-deep .progress-linear{position:fixed!important;bottom:0}::ng-deep .actions-cell{padding:5px 0 0 .9rem!important}::ng-deep .align-right{text-align:right!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i2.TranslateService }, { type: IonicDialogService }, { type: i0.ElementRef }, { type: i1$3.LocalFileService }], propDecorators: { actionsTmpl: [{
+                type: ViewChild,
+                args: ['actionsTmpl', { static: true }]
+            }] } });
+
 class RslIonicGridComponent {
     constructor(router, route, translate, location, injector, loadingCtrl, navCtrl, dialogService, datePipe, numberPipe, percentPipe) {
         this.router = router;
@@ -1582,5 +2245,5 @@ function IonicListLayout(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionWrapperComponent, GenericIonicCrudComponent, IonicDataTableLayout, IonicDialogService, IonicListLayout, PanelWrapperComponent, RepeatTypeComponent, RslIonicDataTableComponent, RslIonicGridComponent, RslIonicLayoutComponent, RslIonicSmButtonsComponent, TranslateExtension, fieldMatchValidator, registerTranslateExtension };
+export { AccordionWrapperComponent, GenericIonicCrudComponent, GenericIonicCrudPageComponent, GenericIonicGridComponent, IonicDataTableLayout, IonicDialogService, IonicListLayout, PanelWrapperComponent, RepeatTypeComponent, RslIonicDataTableComponent, RslIonicGridComponent, RslIonicLayoutComponent, RslIonicSmButtonsComponent, TranslateExtension, fieldMatchValidator, registerTranslateExtension };
 //# sourceMappingURL=rosoftlab-ionic.mjs.map