@rosoftlab/ionic 1.0.0-alpha-0

package/fesm2022/rosoftlab-ionic.mjs

@@ -0,0 +1,1251 @@
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, NgModule, Component, ViewChild, Input } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import * as i1$1 from '@angular/router';
+import { UrlSegment, NavigationStart } from '@angular/router';
+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 } from 'rxjs';
+import * as i4 from '@ionic/angular';
+import { IonicModule } from '@ionic/angular';
+import * as i6 from '@ngx-formly/core';
+import { FormlyModule, FORMLY_CONFIG, FieldArrayType, FieldWrapper } from '@ngx-formly/core';
+import { FormlyIonicModule } from '@ngx-formly/ionic';
+import * as i6$2 from '@swimlane/ngx-datatable';
+import { NgxDatatableModule, ColumnMode, SelectionType } from '@swimlane/ngx-datatable';
+import { readFileAsync, getValueFromJsonData, GridLayoutFormat } from '@rosoftlab/core';
+import * as i3 from 'ngx-filesaver';
+import * as XLSX from 'xlsx';
+import * as jsonLogic from 'json-logic-js/logic.js';
+
+class IonicDialogService {
+    constructor(alertController) {
+        this.alertController = alertController;
+    }
+    async confirm(message, title, confirmButtonText = 'Delete', cancelButtonText = 'Cancel') {
+        let choice;
+        const alert = await this.alertController.create({
+            header: title,
+            subHeader: message,
+            buttons: [{
+                    text: cancelButtonText,
+                    handler: () => {
+                        alert.dismiss(false);
+                        return false;
+                    }
+                }, {
+                    text: confirmButtonText,
+                    handler: () => {
+                        alert.dismiss(true);
+                        return true;
+                    }
+                }]
+        });
+        await alert.present();
+        await alert.onDidDismiss().then((data) => {
+            choice = data;
+        });
+        return choice;
+    }
+    async showSaveMessage(message, title) {
+        const alert = await this.alertController.create({
+            header: title,
+            subHeader: message,
+            buttons: ['OK']
+        });
+        await alert.present();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IonicDialogService, deps: [{ token: i4.AlertController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IonicDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IonicDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i4.AlertController }]; } });
+
+class TranslateExtension {
+    constructor(translate) {
+        this.translate = translate;
+    }
+    prePopulate(field) {
+        const props = field.props || {};
+        if (!props['translate'] || props['_translated']) {
+            return;
+        }
+        props['_translated'] = true;
+        field.expressions = {
+            ...(field.expressions || {}),
+            'props.label': this.translate.stream(props.label),
+        };
+        if (props.placeholder) {
+            field.expressions = {
+                ...(field.expressions || {}),
+                'props.placeholder': this.translate.stream(props.placeholder)
+            };
+        }
+        if (props.description) {
+            field.expressions = {
+                ...(field.expressions || {}),
+                'props.description': this.translate.stream(props.description)
+            };
+        }
+    }
+}
+function registerTranslateExtension(translate) {
+    return {
+        validationMessages: [
+            {
+                name: 'required',
+                message(error, field) {
+                    // console.log(field);
+                    return translate.stream('General.Field.Required', { field: field.props.label });
+                },
+            },
+        ],
+        extensions: [
+            {
+                name: 'translate',
+                extension: new TranslateExtension(translate),
+            }
+        ],
+    };
+}
+
+const COMMON_MODULES$1 = [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    FormlyIonicModule,
+    NgxDatatableModule
+];
+class WrappersModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: WrappersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: WrappersModule, imports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, TranslateModule], exports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, FormlyModule,
+            TranslateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: WrappersModule, providers: [
+            { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
+        ], imports: [COMMON_MODULES$1, TranslateModule, CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, FormlyModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: WrappersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...COMMON_MODULES$1,
+                        TranslateModule
+                    ],
+                    providers: [
+                        { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
+                    ],
+                    exports: [
+                        ...COMMON_MODULES$1,
+                        FormlyModule,
+                        TranslateModule
+                    ],
+                }]
+        }] });
+
+class RepeatTypeComponent extends FieldArrayType {
+    constructor(dialogService, translate, fileSaverService) {
+        super();
+        this.dialogService = dialogService;
+        this.translate = translate;
+        this.fileSaverService = fileSaverService;
+        this.data = null;
+        this.serach = null;
+        this.showSerach = false;
+        this.filterValue = null;
+        this.importDataProp = null;
+        this.exportDataProp = null;
+        this.deleteMessage = this.translate.instant("General.Delete.Question");
+        this.deleteButton = this.translate.instant("General.Delete.Button");
+        this.cancelButton = this.translate.instant("General.Cancel.Button");
+    }
+    remove(i, { markAsDirty } = { markAsDirty: true }) {
+        this.dialogService.confirm(this.deleteMessage, null, this.deleteButton, this.cancelButton).then((value) => {
+            if (value.data) {
+                var onDelete = this.field.props['onDelete'];
+                if (onDelete) {
+                    onDelete(this.field.fieldGroup[i].model).subscribe(() => {
+                        super.remove(i);
+                    });
+                }
+                super.remove(i);
+            }
+        });
+    }
+    ngOnInit() {
+        this.typeKey = this.field.key;
+        this.serach = this.props['search'];
+        this.exportDataProp = this.props['export'] || null;
+        this.importDataProp = this.props['import'] || null;
+        if (this.serach) {
+            this.showSerach = this.serach.showSerach;
+        }
+    }
+    postPopulate(field) {
+        if (this.showSerach) {
+            this.data = field.fieldGroup;
+            if (this.filterValue) {
+                this.field.fieldGroup = this.data.filter(f => f.formControl.value[this.serach.searchProp].toLowerCase().includes(this.filterValue));
+            }
+        }
+    }
+    handleChange(event) {
+        if (this.showSerach) {
+            if (this.data == null && this.field.fieldGroup !== null) {
+                this.data = this.field.fieldGroup;
+            }
+            this.filterValue = event.target.value.toLowerCase();
+            this.field.fieldGroup = this.data.filter(f => f.formControl.value[this.serach.searchProp].toLowerCase().includes(this.filterValue));
+        }
+    }
+    importData() {
+        this.fileInput.nativeElement.click();
+    }
+    async handleImportFile(event) {
+        const file = event.target.files[0];
+        if (file) {
+            try {
+                const fileContents = await readFileAsync(file);
+                // Handle the file contents here (e.g., display or process the data)
+                const wb = XLSX.read(fileContents); //, { type: 'binary' });
+                const wsname = wb.SheetNames[0];
+                const ws = wb.Sheets[wsname];
+                const excelData = XLSX.utils.sheet_to_json(ws); //, { header: 1 });
+                excelData.forEach(element => {
+                    const jsonX = getValueFromJsonData(element, this.importDataProp.keyProp);
+                    const idx = this.field.parent.model[this.typeKey].findIndex(f => f[this.importDataProp.keyProp] === jsonX);
+                    if (idx >= 0) {
+                        const existingdata = this.field.parent.model[this.typeKey][idx];
+                        for (const prop of this.importDataProp.propertiesToImport) {
+                            const jsonVal = getValueFromJsonData(element, prop);
+                            if (existingdata[prop] !== jsonVal) {
+                                var fieldControl = this.field.fieldGroup[idx].formControl;
+                                fieldControl.controls[prop].setValue(jsonVal);
+                            }
+                        }
+                    }
+                    else {
+                        super.add(null, element);
+                    }
+                });
+            }
+            catch (error) {
+                console.error('Error reading the file:', error);
+            }
+        }
+    }
+    exportData() {
+        // Filter the data to include only the specified properties
+        const filteredData = this.field.parent.model[this.typeKey].map(item => {
+            const filteredItem = {};
+            for (const prop of this.exportDataProp.propertiesToExport) {
+                filteredItem[prop] = item[prop];
+            }
+            return filteredItem;
+        });
+        const ws = XLSX.utils.json_to_sheet(filteredData);
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, this.exportDataProp.sheetName);
+        const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
+        const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        this.fileSaverService.save(blob, this.exportDataProp.fileName);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RepeatTypeComponent, deps: [{ token: IonicDialogService }, { token: i2.TranslateService }, { token: i3.FileSaverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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=\"showSerach\">\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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i4.IonSearchbar, selector: "ion-searchbar", inputs: ["animated", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "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-textarea,ion-searchbar" }, { kind: "component", type: i6.FormlyField, selector: "formly-field", inputs: ["field"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RepeatTypeComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'formly-repeat-section', imports: [
+                        WrappersModule
+                    ], 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=\"showSerach\">\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"] }]
+        }], ctorParameters: function () { return [{ type: IonicDialogService }, { type: i2.TranslateService }, { type: i3.FileSaverService }]; }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+
+function fieldMatchValidator(control) {
+    const { password, confirmPassword } = control.value;
+    // avoid displaying the message error when values are empty
+    if (!confirmPassword || !password) {
+        return null;
+    }
+    if (confirmPassword === password) {
+        return null;
+    }
+    return { fieldMatch: { message: 'Fields.Not.Matching' } };
+}
+
+class AccordionWrapperComponent extends FieldWrapper {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AccordionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: AccordionWrapperComponent, isStandalone: true, selector: "formly-accordion-panel", usesInheritance: true, ngImport: i0, template: `
+
+  <ion-accordion-group  [value]="['first']">
+    <ion-accordion value="first">
+        <ion-item slot="header">
+            <ion-card-title>{{ props.label}}</ion-card-title>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+            <ng-container #fieldComponent></ng-container>
+        </div>
+    </ion-accordion>
+  </ion-accordion-group>
+
+
+            
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "component", type: i4.IonAccordion, selector: "ion-accordion", inputs: ["disabled", "mode", "readonly", "toggleIcon", "toggleIconSlot", "value"] }, { kind: "component", type: i4.IonAccordionGroup, selector: "ion-accordion-group", inputs: ["animated", "disabled", "expand", "mode", "multiple", "readonly", "value"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: AccordionWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'formly-accordion-panel',
+                    template: `
+
+  <ion-accordion-group  [value]="['first']">
+    <ion-accordion value="first">
+        <ion-item slot="header">
+            <ion-card-title>{{ props.label}}</ion-card-title>
+        </ion-item>
+        <div class="ion-padding" slot="content">
+            <ng-container #fieldComponent></ng-container>
+        </div>
+    </ion-accordion>
+  </ion-accordion-group>
+
+
+            
+  `,
+                    imports: [WrappersModule]
+                }]
+        }] });
+
+class PanelWrapperComponent extends FieldWrapper {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PanelWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: PanelWrapperComponent, isStandalone: true, selector: "formly-wrapper-panel", usesInheritance: true, ngImport: i0, template: `
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>{{ props.label}}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ng-container #fieldComponent></ng-container>
+      </ion-card-content>
+    </ion-card>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: WrappersModule }, { kind: "component", type: i4.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i4.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i4.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i4.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PanelWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    selector: 'formly-wrapper-panel',
+                    template: `
+    <ion-card>
+      <ion-card-header>
+        <ion-card-title>{{ props.label}}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>
+        <ng-container #fieldComponent></ng-container>
+      </ion-card-content>
+    </ion-card>
+  `,
+                    imports: [WrappersModule]
+                }]
+        }] });
+
+const COMMON_MODULES = [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    FormlyIonicModule,
+    NgxDatatableModule
+];
+class RslIonicModuleModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RslIonicModuleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.1", ngImport: i0, type: RslIonicModuleModule, imports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, TranslateModule, i6.FormlyModule], exports: [CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, FormlyModule,
+            TranslateModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RslIonicModuleModule, providers: [
+            IonicDialogService,
+            { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
+        ], imports: [COMMON_MODULES, TranslateModule,
+            FormlyModule.forRoot({
+                types: [{ name: 'repeat', component: RepeatTypeComponent }],
+                validators: [{ name: 'fieldMatch', validation: fieldMatchValidator }],
+                wrappers: [
+                    { name: 'panel', component: PanelWrapperComponent },
+                    { name: 'accordion', component: AccordionWrapperComponent }
+                ],
+                validationMessages: [
+                    { name: 'required', message: 'This field is required' },
+                ],
+            }), CommonModule,
+            IonicModule,
+            ReactiveFormsModule,
+            FormlyIonicModule,
+            NgxDatatableModule, FormlyModule,
+            TranslateModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RslIonicModuleModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...COMMON_MODULES,
+                        TranslateModule,
+                        FormlyModule.forRoot({
+                            types: [{ name: 'repeat', component: RepeatTypeComponent }],
+                            validators: [{ name: 'fieldMatch', validation: fieldMatchValidator }],
+                            wrappers: [
+                                { name: 'panel', component: PanelWrapperComponent },
+                                { name: 'accordion', component: AccordionWrapperComponent }
+                            ],
+                            validationMessages: [
+                                { name: 'required', message: 'This field is required' },
+                            ],
+                        }),
+                    ],
+                    providers: [
+                        IonicDialogService,
+                        { provide: FORMLY_CONFIG, multi: true, useFactory: registerTranslateExtension, deps: [TranslateService] },
+                    ],
+                    exports: [
+                        ...COMMON_MODULES,
+                        FormlyModule,
+                        TranslateModule
+                    ],
+                }]
+        }] });
+
+class GenericIonicCrudComponent {
+    //#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: "16.2.1", ngImport: i0, type: GenericIonicCrudComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: IonicDialogService }, { token: i2.TranslateService }, { token: i3$1.Location }, { token: i0.Injector }, { token: i6$1.FormlyJsonschema }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: GenericIonicCrudComponent, isStandalone: true, selector: "rslc-ionic-crud", ngImport: i0, template: "<ion-header [translucent]=\"true\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n  <ng-container *ngIf=\"!isLoading\">\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\n    </form>\n  </ng-container>\n</ion-content>\n\n<ng-template #header>\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\n  </ion-button>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { 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", "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: "directive", type: i4.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i6.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: GenericIonicCrudComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'rslc-ionic-crud', imports: [RslIonicModuleModule], template: "<ion-header [translucent]=\"true\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n  <ng-container *ngIf=\"!isLoading\">\n    <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\n      <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\n    </form>\n  </ng-container>\n</ion-content>\n\n<ng-template #header>\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\n  <ion-button *ngIf=\"!isLoading\" slot=\"end\" fill=\"clear\" (click)=\"onSave()\"\n    [disabled]=\"baseForm.invalid || !baseForm.dirty\">\n    <ion-icon size=\"large\" name=\"save\"></ion-icon>\n  </ion-button>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: IonicDialogService }, { type: i2.TranslateService }, { type: i3$1.Location }, { type: i0.Injector }, { type: i6$1.FormlyJsonschema }]; } });
+
+class RslIonicDataTableComponent {
+    constructor(router, route, translate, location, injector, navCtrl, dialogService, el) {
+        this.router = router;
+        this.route = route;
+        this.translate = translate;
+        this.location = location;
+        this.injector = injector;
+        this.navCtrl = navCtrl;
+        this.dialogService = dialogService;
+        this.el = el;
+        this.data = [];
+        this.pageIndex = 1;
+        this.pageSize = 30;
+        this.columns = [];
+        this.allColumns = [];
+        this.ColumnMode = ColumnMode;
+        this.SelectionType = SelectionType;
+        this.headerHeight = 50;
+        this.rowHeight = 50;
+    }
+    ngOnInit() {
+        this.setValueFromSnapshot(this, this.route.snapshot, 'showSerach', false);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'searchFields', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'customInclude', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSort', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSortDirection', '');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'deletePropertyName', 'name');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultFilter', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'showHeader', true);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'deleteDisableRule', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'hasAdd', true);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'canDelete', true);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'canEdit', true);
+        if (!this.modelService) {
+            const SERVICE_TOKEN = this.route.snapshot.data['requiredService'];
+            this.modelService = this.injector.get(SERVICE_TOKEN);
+        }
+        this.model = this.modelService.newModel();
+        this.title = this.model.modelConfig.formTitle;
+        this.getListLayout();
+        const currentUrlSegments = this.router.url.split('/').map(segment => new UrlSegment(segment, {}));
+        this.basePath = currentUrlSegments.map(segment => segment.path).join('/');
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                // Navigation to another page is about to occur
+                this.data = [];
+                this.pageIndex = 1;
+                // Perform actions or update component as needed
+            }
+        });
+        // this.isLoading = true;
+        // this.onScroll(0);
+    }
+    setValueFromSnapshot(component, snapshot, key, defaultValue) {
+        if (component[key] === undefined) {
+            let dataFromSnapshot = snapshot.data[key];
+            if (dataFromSnapshot === null || dataFromSnapshot === undefined) {
+                dataFromSnapshot = snapshot.params[key];
+            }
+            component[key] = dataFromSnapshot !== undefined ? dataFromSnapshot : defaultValue;
+        }
+    }
+    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) {
+                    // total number of results to load
+                    let limit = this.pageSize;
+                    // check if we haven't fetched any results yet
+                    if (this.data.length === 0) {
+                        // calculate the number of rows that fit within viewport
+                        const pageSize = Math.ceil(viewHeight / this.rowHeight);
+                        // change the limit to pageSize such that we fill the first page entirely
+                        // (otherwise, we won't be able to scroll past it)
+                        limit = Math.max(pageSize, this.pageSize);
+                    }
+                    // this.pageIndex
+                    this.pageSize = limit;
+                    this.loadData();
+                    // this.loadPage(limit);
+                }
+            }
+        }
+    }
+    async ionViewWillEnter() {
+        this.data = [];
+        this.loadData();
+    }
+    async handleChange(event) {
+        this.filterValue = event.target.value.toLowerCase();
+        this.data = [];
+        this.pageIndex = 1;
+        this.loadData();
+    }
+    loadData(event = null) {
+        const filters = [];
+        let sorts = '';
+        this.isLoading = true;
+        if (this.defaultSort) {
+            if (this.defaultSortDirection === 'desc') {
+                sorts = '-' + this.defaultSort;
+            }
+            else {
+                sorts = this.defaultSort;
+            }
+        }
+        if (this.showSerach) {
+            if (this.filterValue) {
+                const y = '(' + this.searchFields.replace(',', '|') + ')';
+                filters.push(y + '@=*' + this.filterValue);
+            }
+        }
+        if (this.defaultFilter) {
+            filters.push(this.defaultFilter);
+        }
+        setTimeout(() => {
+            const filtersValue = filters.join(', ');
+            this.modelService.getAll(this.pageIndex, this.pageSize, sorts, filtersValue, this.customInclude).subscribe((response) => {
+                if (this.pageIndex !== response.getMeta().meta.count) {
+                    this.pageIndex++;
+                }
+                else {
+                    if (event)
+                        event.target.disabled = true;
+                }
+                // if (this.filterValue)
+                //   this.data = response.getModels();
+                // else
+                const rows = [...this.data, ...response.getModels()];
+                this.data = rows;
+                // this.data = this.data.concat();
+                if (event)
+                    event.target.complete();
+                this.isLoading = false;
+            });
+        }, 700);
+    }
+    async handleRefresh(event) {
+        this.pageIndex = 1;
+        this.data = [];
+        this.loadData();
+        event.target.complete();
+    }
+    onAdd() {
+        console.log(this.basePath);
+        this.router.navigate([this.basePath + '/add']);
+        // this.navCtrl.navigateForward(this.basePath + '/add');
+    }
+    editModel(model) {
+        if (this.canEdit)
+            this.router.navigate([this.basePath + '/edit/', model.id]);
+        // this.navCtrl.navigateForward(this.basePath + '/edit/' + model.id);
+    }
+    getListLayout() {
+        if (!this.model) {
+            this.model = this.modelService.newModel();
+        }
+        this.allColumns = [];
+        this.columns = [];
+        this.allColumns = Reflect.getMetadata('IonicDataTableLayout', this.model).map((item) => {
+            if (!item.isTranslated) {
+                item.name = this.translate.instant(item.name);
+                item.isTranslated = true;
+            }
+            return item;
+        });
+        this.allColumns.sort((a, b) => a.order - b.order);
+        if (this.canDelete || this.canEdit) {
+            this.allColumns.push({
+                cellTemplate: this.actionsTmpl,
+                name: '',
+                cellClass: 'actions-cell',
+                draggable: false,
+                sortable: false,
+                visible: true
+                // width: 100,
+                // maxWidth: 100,
+                // minWidth: 100
+            });
+        }
+        this.columns = this.allColumns.filter((item) => item.visible);
+        // Sort the columns array by the order property
+    }
+    deleteModel(model) {
+        const msg = 'Do you want to delete ' + model[this.deletePropertyName] + '?';
+        this.dialogService.confirm(msg).then((value) => {
+            if (value.data) {
+                this.modelService.delete(model.id).subscribe(() => {
+                    const tempData = [];
+                    // this.selectedObject.emit(null);
+                    this.data.map((item) => {
+                        if (item.id !== model.id) {
+                            tempData.push(item);
+                        }
+                    });
+                    this.data = tempData;
+                });
+            }
+        });
+    }
+    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: "16.2.1", ngImport: i0, type: RslIonicDataTableComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: i3$1.Location }, { token: i0.Injector }, { token: i4.NavController }, { token: IonicDialogService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RslIonicDataTableComponent, isStandalone: true, selector: "app-rsl-ionic-data-table", inputs: { showSerach: "showSerach", searchFields: "searchFields", customInclude: "customInclude", defaultSort: "defaultSort", defaultSortDirection: "defaultSortDirection", deletePropertyName: "deletePropertyName", defaultFilter: "defaultFilter", showHeader: "showHeader", deleteDisableRule: "deleteDisableRule", hasAdd: "hasAdd", canDelete: "canDelete", canEdit: "canEdit", model: "model", modelService: "modelService" }, viewQueries: [{ propertyName: "actionsTmpl", first: true, predicate: ["actionsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <ngx-datatable class=\"material fullscreen rls-server-scrolling\" style=\"top: 115px\" [rows]=\"data\" [columns]=\"columns\"\n    [columnMode]=\"ColumnMode.standard\" [headerHeight]=\"headerHeight\" [rowHeight]=\"rowHeight\" [scrollbarV]=\"true\"\n    [loadingIndicator]=\"isLoading\" [scrollbarH]=\"true\" (scroll)=\"onScroll($event.offsetY)\"\n   >\n  </ngx-datatable>\n  \n  <ng-template #actionsTmpl let-row=\"row\" let-value=\"value\">\n    <ion-button  fill=\"clear\" *ngIf=\"canEdit\" (click)='editModel(row)'>\n      <ion-icon slot=\"icon-only\" name=\"create\" (click)='editModel(row)'></ion-icon>\n    </ion-button>\n    <ion-button fill=\"clear\" *ngIf=\"deleteEnabled(row)\" (click)='deleteModel(row)'>\n      <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='deleteModel(row)'></ion-icon>\n    </ion-button>\n  </ng-template>\n\n</ion-content>\n\n<ng-template #header>\n  <ion-title class=\"ion-text-center\">{{title}}</ion-title>\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\" *ngIf=\"hasAdd\">\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #search>\n  <ion-toolbar *ngIf=\"showSerach\">\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { 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", "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", "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", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "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-textarea,ion-searchbar" }, { kind: "directive", type: i4.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "component", type: i6$2.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: "16.2.1", ngImport: i0, type: RslIonicDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'app-rsl-ionic-data-table', imports: [RslIonicModuleModule], template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <ngx-datatable class=\"material fullscreen rls-server-scrolling\" style=\"top: 115px\" [rows]=\"data\" [columns]=\"columns\"\n    [columnMode]=\"ColumnMode.standard\" [headerHeight]=\"headerHeight\" [rowHeight]=\"rowHeight\" [scrollbarV]=\"true\"\n    [loadingIndicator]=\"isLoading\" [scrollbarH]=\"true\" (scroll)=\"onScroll($event.offsetY)\"\n   >\n  </ngx-datatable>\n  \n  <ng-template #actionsTmpl let-row=\"row\" let-value=\"value\">\n    <ion-button  fill=\"clear\" *ngIf=\"canEdit\" (click)='editModel(row)'>\n      <ion-icon slot=\"icon-only\" name=\"create\" (click)='editModel(row)'></ion-icon>\n    </ion-button>\n    <ion-button fill=\"clear\" *ngIf=\"deleteEnabled(row)\" (click)='deleteModel(row)'>\n      <ion-icon color=\"danger\" slot=\"icon-only\" name=\"trash\" (click)='deleteModel(row)'></ion-icon>\n    </ion-button>\n  </ng-template>\n\n</ion-content>\n\n<ng-template #header>\n  <ion-title class=\"ion-text-center\">{{title}}</ion-title>\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\" *ngIf=\"hasAdd\">\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #search>\n  <ion-toolbar *ngIf=\"showSerach\">\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\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: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: i3$1.Location }, { type: i0.Injector }, { type: i4.NavController }, { type: IonicDialogService }, { type: i0.ElementRef }]; }, propDecorators: { actionsTmpl: [{
+                type: ViewChild,
+                args: ['actionsTmpl', { static: true }]
+            }], showSerach: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
+            }], customInclude: [{
+                type: Input
+            }], defaultSort: [{
+                type: Input
+            }], defaultSortDirection: [{
+                type: Input
+            }], deletePropertyName: [{
+                type: Input
+            }], defaultFilter: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], deleteDisableRule: [{
+                type: Input
+            }], hasAdd: [{
+                type: Input
+            }], canDelete: [{
+                type: Input
+            }], canEdit: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelService: [{
+                type: Input
+            }] } });
+
+class RslIonicGridComponent {
+    constructor(router, route, translate, location, injector, loadingCtrl, navCtrl, dialogService, datePipe, numberPipe, percentPipe) {
+        this.router = router;
+        this.route = route;
+        this.translate = translate;
+        this.location = location;
+        this.injector = injector;
+        this.loadingCtrl = loadingCtrl;
+        this.navCtrl = navCtrl;
+        this.dialogService = dialogService;
+        this.datePipe = datePipe;
+        this.numberPipe = numberPipe;
+        this.percentPipe = percentPipe;
+        this.data = [];
+        this.pageIndex = 1;
+        this.pageSize = 30;
+    }
+    ngOnInit() {
+        this.setValueFromSnapshot(this, this.route.snapshot, 'showSerach', false);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'searchFields', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'customInclude', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSort', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSortDirection', '');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'deletePropertyName', 'name');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultFilter', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'showHeader', true);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'deleteDisableRule', null);
+        // this.showSerach = route.snapshot.data['showSerach'] || false;
+        // this.searchFields = this.route.snapshot.data['searchFields'] || null;
+        // this.customInclude = this.route.snapshot.data['customInclude'] || null;
+        // this.defaultSort = this.route.snapshot.data['defaultSort'] || null;
+        // this.defaultSortDirection = this.route.snapshot.data['defaultSortDirection'] || '';
+        // this.deletePropertyName = this.route.snapshot.data['deletePropertyName'] || 'name';
+        // this.defaultFilter = this.route.snapshot.data['defaultFilter'] || null;
+        if (!this.modelService) {
+            const SERVICE_TOKEN = this.route.snapshot.data['requiredService'];
+            this.modelService = this.injector.get(SERVICE_TOKEN);
+        }
+        this.model = this.modelService.newModel();
+        this.title = this.model.modelConfig.formTitle;
+        this.getListLayout();
+        const currentUrlSegments = this.router.url.split('/').map(segment => new UrlSegment(segment, {}));
+        this.basePath = currentUrlSegments.map(segment => segment.path).join('/');
+        this.router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                // Navigation to another page is about to occur
+                this.data = [];
+                this.pageIndex = 1;
+                // Perform actions or update component as needed
+            }
+        });
+    }
+    setValueFromSnapshot(component, snapshot, key, defaultValue) {
+        if (component[key] === undefined) {
+            let dataFromSnapshot = snapshot.data[key];
+            if (!dataFromSnapshot)
+                dataFromSnapshot = snapshot.params[key];
+            component[key] = dataFromSnapshot !== undefined ? dataFromSnapshot : defaultValue;
+        }
+    }
+    async ionViewWillEnter() {
+        this.data = [];
+        const loading = await this.loadingCtrl.create({
+            message: this.translate.instant('General.Loading'),
+            spinner: 'circles',
+        });
+        loading.present();
+        this.loadData(null, null, loading);
+    }
+    async handleChange(event) {
+        const loading = await this.loadingCtrl.create({
+            message: this.translate.instant('General.Loading'),
+            spinner: 'circles',
+        });
+        loading.present();
+        const query = event.target.value.toLowerCase();
+        this.pageIndex = 1;
+        this.loadData(null, query, loading);
+        // this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1);
+    }
+    loadData(event = null, filterValue = undefined, loading = null) {
+        const filters = [];
+        let sorts = '';
+        if (this.defaultSort) {
+            if (this.defaultSortDirection === 'desc') {
+                sorts = '-' + this.defaultSort;
+            }
+            else {
+                sorts = this.defaultSort;
+            }
+        }
+        if (this.showSerach) {
+            if (filterValue) {
+                const y = '(' + this.searchFields.replace(',', '|') + ')';
+                filters.push(y + '@=*' + filterValue);
+            }
+        }
+        if (this.defaultFilter) {
+            filters.push(this.defaultFilter);
+        }
+        setTimeout(() => {
+            const filtersValue = filters.join(', ');
+            this.modelService.getAll(this.pageIndex, this.pageSize, sorts, filtersValue, this.customInclude).subscribe((response) => {
+                if (this.pageIndex !== response.getMeta().meta.count) {
+                    this.pageIndex++;
+                }
+                else {
+                    if (event)
+                        event.target.disabled = true;
+                }
+                if (filterValue || loading)
+                    this.data = response.getModels();
+                else
+                    this.data = this.data.concat(response.getModels());
+                if (event)
+                    event.target.complete();
+                if (loading)
+                    loading.dismiss();
+            });
+        }, 700);
+    }
+    async handleRefresh(event) {
+        const loading = await this.loadingCtrl.create({
+            message: this.translate.instant('General.Loading'),
+            spinner: 'circles',
+        });
+        loading.present();
+        this.pageIndex = 1;
+        this.loadData(null, null, loading);
+        event.target.complete();
+    }
+    onAdd() {
+        console.log(this.basePath);
+        this.navCtrl.navigateForward(this.basePath + '/add');
+    }
+    editModel(model) {
+        this.navCtrl.navigateForward(this.basePath + '/edit/' + model.id);
+    }
+    getListLayout() {
+        if (!this.model) {
+            this.model = this.modelService.newModel();
+        }
+        this.gridLayout = Reflect.getMetadata('IonicListLayout', this.model);
+    }
+    deleteModel(model) {
+        const msg = 'Do you want to delete ' + model[this.deletePropertyName] + '?';
+        this.dialogService.confirm(msg).then((value) => {
+            if (value.data) {
+                this.modelService.delete(model.id).subscribe(() => {
+                    const tempData = [];
+                    // this.selectedObject.emit(null);
+                    this.data.map((item) => {
+                        if (item.id !== model.id) {
+                            tempData.push(item);
+                        }
+                    });
+                    this.data = tempData;
+                });
+            }
+        });
+    }
+    getCelValue(row, propertyName) {
+        if (!row)
+            return "";
+        // if (propertyName == 'kompetenzenStdev')
+        //   console.log(propertyName);
+        if (propertyName.indexOf('.') === -1) {
+            var gridLayout = this.gridLayout.find(f => f.key.indexOf(propertyName) > -1);
+            return this.getFormatedValue(gridLayout, row[propertyName]);
+        }
+        else {
+            const prop = propertyName.split('.')[0];
+            const subProp = propertyName.replace(prop + '.', '');
+            return this.getCelValue(row[prop], subProp);
+        }
+    }
+    getFormatedValue(gridLayout, value) {
+        if (gridLayout) {
+            switch (gridLayout.formating) {
+                case GridLayoutFormat.date:
+                    return this.datePipe.transform(value, gridLayout.customFormat);
+                    break;
+                case GridLayoutFormat.number:
+                    return this.numberPipe.transform(value, gridLayout.customFormat);
+                case GridLayoutFormat.percent:
+                    const valuePrc = value / 100;
+                    return this.percentPipe.transform(valuePrc, gridLayout.customFormat);
+                default:
+                    return value;
+                    break;
+            }
+        }
+        return value;
+    }
+    deleteEnabled(model) {
+        if (this.deleteDisableRule) {
+            return this.evaluateRule(this.deleteDisableRule, model);
+        }
+        else {
+            return true;
+        }
+    }
+    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: "16.2.1", ngImport: i0, type: RslIonicGridComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: i3$1.Location }, { token: i0.Injector }, { token: i4.LoadingController }, { token: i4.NavController }, { token: IonicDialogService }, { token: i3$1.DatePipe }, { token: i3$1.DecimalPipe }, { token: i3$1.PercentPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: RslIonicGridComponent, isStandalone: true, selector: "rsl-ionic-grid", inputs: { showSerach: "showSerach", searchFields: "searchFields", customInclude: "customInclude", defaultSort: "defaultSort", defaultSortDirection: "defaultSortDirection", deletePropertyName: "deletePropertyName", defaultFilter: "defaultFilter", showHeader: "showHeader", deleteDisableRule: "deleteDisableRule", model: "model", modelService: "modelService" }, ngImport: i0, template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <ion-list>\n    <ng-container *ngFor=\"let item of data\">\n      <ion-item-sliding>\n        <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\n        <ion-item-options *ngIf=\"deleteEnabled(item)\" side=\"end\">\n          <ion-item-option color=\"danger\">\n            <ion-icon slot=\"icon-only\" name=\"trash\" (click)='deleteModel(item)'></ion-icon>\n          </ion-item-option>\n        </ion-item-options>\n      </ion-item-sliding>\n    </ng-container>\n  </ion-list>\n  <ion-infinite-scroll threshold=\"100px\" (ionInfinite)=\"loadData($event)\">\n    <ion-infinite-scroll-content loadingSpinner=\"bubbles\" loadingText=\"Loading more data...\">\n    </ion-infinite-scroll-content>\n  </ion-infinite-scroll>\n\n</ion-content>\n\n<ng-template #header>\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\">\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #search>\n  <ion-toolbar *ngIf=\"showSerach\">\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ng-template>\n\n<ng-template #listItem let-item='item'>\n  <ion-item button (click)='editModel(item)'>\n    <ion-label>\n      <ng-container *ngFor=\"let row of gridLayout\">\n        <h2 *ngIf=\"row.primary\"> {{getCelValue(item,row.key)}} </h2>\n        <h3 *ngIf=\"!row.primary\">{{getCelValue(item,row.key)}} </h3>\n      </ng-container>\n    </ion-label>\n  </ion-item>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: RslIonicModuleModule }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { 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", "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.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i4.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i4.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i4.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { kind: "component", type: i4.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { kind: "component", type: i4.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { kind: "component", type: i4.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i4.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { 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", "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", "autocomplete", "autocorrect", "cancelButtonIcon", "cancelButtonText", "clearIcon", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "mode", "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-textarea,ion-searchbar" }, { kind: "directive", type: i4.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: RslIonicGridComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'rsl-ionic-grid', imports: [RslIonicModuleModule], template: "<ion-header *ngIf=\"showHeader\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-menu-button></ion-menu-button>\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n    <ng-container [ngTemplateOutlet]=\"header\"></ng-container>\n  </ion-toolbar>\n  <ng-container [ngTemplateOutlet]=\"search\"></ng-container>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n\n  <ion-refresher slot=\"fixed\" (ionRefresh)=\"handleRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <ion-list>\n    <ng-container *ngFor=\"let item of data\">\n      <ion-item-sliding>\n        <ng-container [ngTemplateOutlet]=\"listItem\" [ngTemplateOutletContext]=\"{item}\"></ng-container>\n        <ion-item-options *ngIf=\"deleteEnabled(item)\" side=\"end\">\n          <ion-item-option color=\"danger\">\n            <ion-icon slot=\"icon-only\" name=\"trash\" (click)='deleteModel(item)'></ion-icon>\n          </ion-item-option>\n        </ion-item-options>\n      </ion-item-sliding>\n    </ng-container>\n  </ion-list>\n  <ion-infinite-scroll threshold=\"100px\" (ionInfinite)=\"loadData($event)\">\n    <ion-infinite-scroll-content loadingSpinner=\"bubbles\" loadingText=\"Loading more data...\">\n    </ion-infinite-scroll-content>\n  </ion-infinite-scroll>\n\n</ion-content>\n\n<ng-template #header>\n  <ion-title  class=\"ion-text-center\">{{title |translate}}</ion-title>\n  <ion-button slot=\"end\" (click)=\"onAdd()\" fill=\"clear\">\n    <ion-icon size=\"large\" name=\"add\"></ion-icon>\n  </ion-button>\n</ng-template>\n\n<ng-template #search>\n  <ion-toolbar *ngIf=\"showSerach\">\n    <ion-searchbar [debounce]=\"1000\" (ionChange)=\"handleChange($event)\"></ion-searchbar>\n  </ion-toolbar>\n</ng-template>\n\n<ng-template #listItem let-item='item'>\n  <ion-item button (click)='editModel(item)'>\n    <ion-label>\n      <ng-container *ngFor=\"let row of gridLayout\">\n        <h2 *ngIf=\"row.primary\"> {{getCelValue(item,row.key)}} </h2>\n        <h3 *ngIf=\"!row.primary\">{{getCelValue(item,row.key)}} </h3>\n      </ng-container>\n    </ion-label>\n  </ion-item>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: i3$1.Location }, { type: i0.Injector }, { type: i4.LoadingController }, { type: i4.NavController }, { type: IonicDialogService }, { type: i3$1.DatePipe }, { type: i3$1.DecimalPipe }, { type: i3$1.PercentPipe }]; }, propDecorators: { showSerach: [{
+                type: Input
+            }], searchFields: [{
+                type: Input
+            }], customInclude: [{
+                type: Input
+            }], defaultSort: [{
+                type: Input
+            }], defaultSortDirection: [{
+                type: Input
+            }], deletePropertyName: [{
+                type: Input
+            }], defaultFilter: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], deleteDisableRule: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }], modelService: [{
+                type: Input
+            }] } });
+
+function IonicDataTableLayout(config) {
+    return (target, propertyName) => {
+        const annotations = Reflect.getMetadata('IonicDataTableLayout', target) || [];
+        config.prop = propertyName;
+        config.visible = config.visible === undefined ? true : config.visible;
+        annotations.push(config);
+        Reflect.defineMetadata('IonicDataTableLayout', annotations, target);
+    };
+}
+
+function IonicListLayout(config) {
+    return (target, propertyName) => {
+        const annotations = Reflect.getMetadata('IonicListLayout', target) || [];
+        config.key = propertyName;
+        annotations.push(config);
+        Reflect.defineMetadata('IonicListLayout', annotations, target);
+    };
+}
+
+/*
+ * Public API Surface of ionic
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AccordionWrapperComponent, GenericIonicCrudComponent, IonicDataTableLayout, IonicDialogService, IonicListLayout, PanelWrapperComponent, RepeatTypeComponent, RslIonicDataTableComponent, RslIonicGridComponent, TranslateExtension, fieldMatchValidator, registerTranslateExtension };
+//# sourceMappingURL=rosoftlab-ionic.mjs.map