@rosoftlab/rdict 1.0.1-alpha-9 → 1.0.1-alpha-10

package/fesm2022/rosoftlab-rdict.mjs

@@ -1,4 +1,4 @@
-import * as i4$1 from '@angular/common';
+import * as i6$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, Inject, Component, NgModule, forwardRef, ViewChild, Input, EventEmitter, ElementRef, ViewEncapsulation, Output, InjectionToken } from '@angular/core';
@@ -11,24 +11,27 @@ import { ButtonsModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 import { KENDO_SVGICON } from '@progress/kendo-angular-icons';
 import * as i6 from '@progress/kendo-angular-layout';
 import { LayoutModule } from '@progress/kendo-angular-layout';
-import * as i6$1 from '@progress/kendo-angular-toolbar';
+import * as i8 from '@progress/kendo-angular-toolbar';
 import { ToolBarModule, KENDO_TOOLBAR, ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import * as allIcons from '@progress/kendo-svg-icons';
 import { menuIcon, saveIcon, pencilIcon, trashIcon, plusIcon } from '@progress/kendo-svg-icons';
-import { BehaviorSubject, from, map } from 'rxjs';
+import { Subject, from, mergeMap, map, Observable } from 'rxjs';
 import { v4 } from 'uuid';
 import { io } from 'socket.io-client';
-import * as msgpackParser from 'socket.io-msgpack-parser';
 import * as i1 from '@rosoftlab/core';
 import { BaseModel, Attribute, BaseModelConfig, BaseService } from '@rosoftlab/core';
 import { __decorate, __metadata } from 'tslib';
-import * as i5$1 from '@angular/forms';
+import * as i7 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@ngx-formly/core';
+import * as i6$1 from '@ngx-formly/core';
 import { FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
 import { FormlyKendoModule } from '@ngx-formly/kendo';
-import * as i5$2 from '@progress/kendo-angular-grid';
+import * as i2$1 from '@progress/kendo-angular-dialog';
+import { DialogCloseResult, KENDO_DIALOG } from '@progress/kendo-angular-dialog';
+import * as i3 from '@progress/kendo-angular-notification';
+import * as i7$1 from '@progress/kendo-angular-grid';
 import { KENDO_GRID } from '@progress/kendo-angular-grid';
+import * as i1$2 from '@progress/kendo-angular-label';
 import { KENDO_LABEL } from '@progress/kendo-angular-label';
 
 class SocketService {
@@ -48,14 +51,27 @@ class SocketService {
         if (this.socket == null && authToken !== null) {
             this.socket = io(this.socketUrl, {
                 withCredentials: true,
-                parser: msgpackParser,
+                // parser: msgpackParser,
                 auth: {
                     token: authToken, // Include the authentication token
-                },
-                query: {
-                    "access_token": authToken
                 }
+                // ,
+                // query: {
+                //   "access_token": authToken
+                // }
             });
+            // const originalEmit = this.socket.emit;
+            // this.socket.emit = (event, ...args) => {
+            //   // Transform dates before sending
+            //   const transformedData = this.transformDatesForEncoding(args[0]);
+            //   originalEmit.call(this.socket, event, transformedData);
+            //   return this.socket;
+            // };
+            // Intercept incoming data and apply date transformation
+            // this.socket.onAny((event, data) => {
+            //   const transformedData = this.transformDatesForDecoding(data);
+            //   this.socket.emit(event, transformedData);  // Emit the transformed data back
+            // });
         }
     }
     getInitialData() {
@@ -79,6 +95,15 @@ class SocketService {
             }
         });
     }
+    getDeleteEvent(rdict) {
+        this.socket.on('delete', (data) => {
+            // (rdict.get('__guid'), data, this.socket.id)
+            if (rdict.get('__guid') === data.did) {
+                // ('Set the data')
+                rdict.asyncDelete(data.key, false);
+            }
+        });
+    }
     // Emit the 'lazy_load' event with callback to get the response
     requestLazyLoad(did, key) {
         return new Promise((resolve, reject) => {
@@ -105,6 +130,46 @@ class SocketService {
             });
         });
     }
+    // Emit the 'set' event to update the data on the server
+    emitDelete(did, key) {
+        return new Promise((resolve, reject) => {
+            this.socket.emit('delete', { did, key }, (response) => {
+                if (response && response.error) {
+                    reject(response.error);
+                }
+                else {
+                    resolve();
+                }
+            });
+        });
+    }
+    transformDatesForEncoding(obj) {
+        if (obj instanceof Date) {
+            return { __date__: obj.toISOString() };
+        }
+        else if (Array.isArray(obj)) {
+            return obj.map(this.transformDatesForEncoding);
+        }
+        else if (obj !== null && typeof obj === "object") {
+            return Object.keys(obj).reduce((acc, key) => {
+                acc[key] = this.transformDatesForEncoding(obj[key]);
+                return acc;
+            }, {});
+        }
+        return obj;
+    }
+    transformDatesForDecoding(obj) {
+        if (typeof obj === "object" && obj !== null) {
+            if ("__date__" in obj) {
+                return new Date(obj.__date__);
+            }
+            return Object.keys(obj).reduce((acc, key) => {
+                acc[key] = this.transformDatesForDecoding(obj[key]);
+                return acc;
+            }, {});
+        }
+        return obj;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SocketService, deps: [{ token: SOCKET_URL }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SocketService, providedIn: 'root' }); }
 }
@@ -118,11 +183,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                     args: [SOCKET_URL]
                 }] }] });
 
+// import { mergeMap } from 'rxjs/operators';
 class ReactiveDictionary extends Map {
-    static { this.instance = new Map; }
+    static { this.instance = new Map(); }
     constructor(socketService) {
         super();
-        this.changes$ = new BehaviorSubject(null);
+        this.changes$ = new Subject();
+        this.deletes$ = new Subject();
         this.isInitialized = false;
         this._authToken = null;
         this._socketService = socketService;
@@ -130,26 +197,12 @@ class ReactiveDictionary extends Map {
         // this._socketService.getSetEvent(this)
     }
     async initialize(authToken) {
-        this._authToken = authToken;
         this._authToken = authToken;
         this._socketService.initSocket(authToken);
         this._socketService.getSetEvent(this);
+        this._socketService.getDeleteEvent(this);
         await this.asyncInit();
     }
-    // // Method to get the singleton instance
-    // public static getInstance(socketService: SocketService, authToken: string, instance_key?: string): ReactiveDictionary {
-    //     if (!instance_key)
-    //         instance_key = 'root'
-    //     if (!ReactiveDictionary.instance.has(instance_key)) {
-    //         ReactiveDictionary.instance.set(instance_key, new ReactiveDictionary(socketService, authToken));
-    //     }
-    //     const instance = ReactiveDictionary.instance.get(instance_key);
-    //     if (!instance) {
-    //         throw new Error(`No instance found for key: ${instance_key}`); // Handle undefined case
-    //     }
-    //     return instance; // Now TypeScript knows 'instance' is not undefined
-    // }
-    // str_keys(): string[] {
     keys() {
         const excludedKeys = ['__guid', '__type']; // Key to exclude
         const iterator = super.keys();
@@ -170,8 +223,8 @@ class ReactiveDictionary extends Map {
                             return { value: key, done: false }; // Return the valid key
                         }
                     } while (true); // Continue until a valid key is found
-                }
-            })
+                },
+            }),
         };
         return filteredIterator;
     }
@@ -213,7 +266,7 @@ class ReactiveDictionary extends Map {
             }
         }
         else {
-            const obj = await this.asyncGet(keys[0]);
+            const obj = (await this.asyncGet(keys[0]));
             if (obj)
                 return await obj.asyncGet(keys.slice(1).join('.'));
             else
@@ -224,9 +277,9 @@ class ReactiveDictionary extends Map {
         // Transform a value to a format that can be serialized.
         const dict_type = value['__type'];
         if (dict_type === 'lazy')
-            return { "__type": "lazy" };
+            return { __type: 'lazy' };
         else if (value instanceof ReactiveDictionary)
-            return { "__type": "dict", "__guid": value.get('__guid') };
+            return { __type: 'dict', __guid: value.get('__guid') };
         else
             return value;
     }
@@ -243,12 +296,29 @@ class ReactiveDictionary extends Map {
         this.set(key, value);
         this.changes$.next({ key, value });
     }
+    async asyncDelete(key, emmit_event = true) {
+        if (this.has(key)) {
+            if (emmit_event) {
+                try {
+                    await this._socketService.emitDelete(this.get('__guid'), key);
+                }
+                catch (error) {
+                    console.error('Error emitting set event:', error);
+                }
+            }
+            this.delete(key);
+            this.deletes$.next({ key });
+        }
+    }
+    deleteAsObservable(key, emmit_event = true) {
+        return from(this.asyncDelete(key, emmit_event));
+    }
     // Asynchronous method to initialize with a set of key-value pairs
     async asyncInit(initialData) {
         if (!this.isInitialized) {
             try {
                 // If initial data is not provided, fetch it
-                const data = initialData || await this._socketService.getInitialData();
+                const data = initialData || (await this._socketService.getInitialData());
                 // this.known_dicts.set(data.__guid,data);
                 // Set the initial properties on the proxy
                 for (const [key, value] of Object.entries(data)) {
@@ -274,98 +344,166 @@ class ReactiveDictionary extends Map {
     getPlainObject() {
         const plainObject = {};
         this.forEach((value, key) => {
-            if (value instanceof ReactiveDictionary)
+            if (value instanceof ReactiveDictionary) {
                 plainObject[key] = value.getPlainObject();
-            else
-                plainObject[key] = value; // Add key-value pairs to the plain object
+            }
+            else if (typeof value === 'string') {
+                const formattedValue = value
+                    .replace(/'/g, '"') // Convert single quotes to double quotes
+                    .replace(/\bNone\b/g, 'null') // Replace None with null
+                    .replace(/\bFalse\b/g, 'false') // Replace False with false
+                    .replace(/\bTrue\b/g, 'true'); // Replace True with true
+                try {
+                    const parsedValue = JSON.parse(formattedValue, this.jsonDateReviver);
+                    plainObject[key] = parsedValue;
+                }
+                catch {
+                    plainObject[key] = value; // Keep as string if not valid JSON
+                }
+            }
+            else {
+                plainObject[key] = value;
+            }
         });
         return plainObject; // Return the plain object
     }
+    jsonDateReviver(key, value) {
+        // Check if the value is a valid ISO date string
+        if (typeof value === 'string' &&
+            /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value)) {
+            return new Date(value); // Convert to JavaScript Date object
+        }
+        return value;
+    }
     getAsObservable(key) {
         return from(this.asyncGet(key));
     }
-    // getAsObservable(key: string): Observable<any> {
-    //     return from(this.asyncGet(key)).pipe(
-    //       map(value => ({ data: value, success: true })), // Transform the response
-    //       catchError(error => {
-    //         console.error('Error fetching value:', error);
-    //         throw error; // Rethrow the error so subscribers can handle it
-    //       })
-    //     );
-    //   }
-    getTableAsObservable(key) {
-        return from(this.getTable(key)).pipe(map(dictionary => {
-            // Check if dictionary is an array
+    getTableAsObservable(key, data = null) {
+        return from(this.getTable(key, data)).pipe(mergeMap((dictionary) => {
             if (!Array.isArray(dictionary)) {
                 throw new Error('Expected an array but received something else');
             }
-            // Check if all elements in the array are instances of ReactiveDictionary
-            const isArrayOfReactiveDictionaries = dictionary.every(item => item instanceof ReactiveDictionary);
+            const isArrayOfReactiveDictionaries = dictionary.every((item) => item instanceof ReactiveDictionary);
             if (!isArrayOfReactiveDictionaries) {
                 throw new Error('Expected an array of ReactiveDictionary instances but received something else');
             }
-            // Convert each ReactiveDictionary to a plain object, filtering out '__guid'
-            return dictionary.map(dict => {
-                const filteredObject = {};
-                for (const [key, value] of dict.entries()) {
-                    if (key !== '__guid') {
-                        filteredObject[key] = value;
-                    }
-                }
-                return filteredObject;
-            });
+            // ✅ WRAP THIS IN from(...) to make it emit real data, not a Promise
+            return from(this.processTableData(dictionary));
         }));
     }
-    async getTable(key) {
-        const data = await this.asyncGet(key); // Get rooms from the ReactiveDictionary
-        if (!data) {
+    async getTable(key, data = null) {
+        if (!data)
+            data = await this.asyncGet(key); // Get rooms from the ReactiveDictionary
+        if (!data)
             return []; // Return an empty array if data is undefined
-        }
+        console.log('getTable', data);
         // Filter and get only entries that are instances of ReactiveDictionary
-        const result = await Promise.all(Array.from(data.entries()).map(async (key) => await data.asyncGet(key[0])) // Get data from asyncGet
-        ) || []; // Return an empty array if the above yields undefined
+        const result = (await Promise.all(Array.from(data.entries()).map(async (key, index) => {
+            const entry = (await data.asyncGet(key[0]));
+            if (entry instanceof ReactiveDictionary) {
+                entry.set('__idx', key[0]);
+            }
+            return entry;
+        }))) || []; // Return an empty array if the above yields undefined
         return result.filter((entry) => entry instanceof ReactiveDictionary);
     }
     async getTableWithoutGuid(key) {
-        const data = await this.asyncGet(key); // Get rooms from the ReactiveDictionary
-        if (!data) {
-            return []; // Return an empty array if data is undefined
+        const data = await this.asyncGet(key);
+        if (!data)
+            return [];
+        // Reuse the common processing logic
+        return this.processTableData(data);
+    }
+    async processTableData(data) {
+        if (data instanceof ReactiveDictionary) {
+            const result = (await Promise.all(Array.from(data.entries()).map(async ([key]) => {
+                const entry = (await data.asyncGet(key));
+                if (entry instanceof ReactiveDictionary) {
+                    entry.set('__idx', key);
+                }
+                return entry;
+            }))) || [];
+            return result
+                .filter((entry) => entry instanceof ReactiveDictionary)
+                .map((dictionary) => {
+                const filteredObject = {};
+                for (const [key, value] of dictionary.entries()) {
+                    if (key !== '__guid') {
+                        filteredObject[key] = value;
+                    }
+                }
+                return filteredObject;
+            });
         }
-        // Filter and get only entries that are instances of ReactiveDictionary
-        const result = await Promise.all(Array.from(data.entries()).map(async (key) => await data.asyncGet(key[0])) // Get data from asyncGet
-        ) || []; // Return an empty array if the above yields undefined
-        var filteredResults = result.filter((entry) => entry instanceof ReactiveDictionary);
-        return filteredResults.map(dictionary => {
-            // Convert Map to object and filter out __guid
-            const filteredObject = {};
-            for (const [key, value] of dictionary.entries()) {
-                if (key !== '__guid') {
-                    filteredObject[key] = value;
+        else if (Array.isArray(data)) {
+            // Directly process array of ReactiveDictionary instances
+            return data.map((dictionary) => {
+                const filteredObject = {};
+                for (const [key, value] of dictionary.entries()) {
+                    if (key !== '__guid') {
+                        filteredObject[key] = value;
+                    }
                 }
-            }
-            return filteredObject;
-        });
+                return filteredObject;
+            });
+        }
+        else {
+            console.warn('processTableData received unexpected data:', data);
+            return [];
+        }
     }
+    // async processTableData(data: any): Promise<any[]> {
+    //     // Filter and get only entries that are instances of ReactiveDictionary
+    //     const result = await Promise.all(
+    //         Array.from(data.entries()).map(async ([key]) => {
+    //             const entry = await data.asyncGet(key) as ReactiveDictionary
+    //             if (entry instanceof ReactiveDictionary) {
+    //                 entry.set('__idx', key);
+    //                 }
+    //             return entry;
+    //         })
+    //     ) || [];
+    //     // Filter out entries that are not ReactiveDictionary instances
+    //     const filteredResults = result.filter((entry: any) => entry instanceof ReactiveDictionary);
+    //     // Remove __guid from each dictionary and return the plain object
+    //     return filteredResults.map(dictionary => {
+    //         const filteredObject: Record<string, any> = {};
+    //         for (const [key, value] of dictionary.entries()) {
+    //             if (key !== '__guid') {
+    //                 filteredObject[key] = value;
+    //             }
+    //         }
+    //         return filteredObject;
+    //     });
+    // }
     onChanges() {
         return this.changes$.asObservable();
     }
-    async addNew(record) {
-        const nextKey = this.size.toString();
-        const dict = await this.asyncGet(nextKey);
+    onDelete() {
+        return this.deletes$.asObservable();
+    }
+    async update(record, key = null) {
+        if (!key)
+            key = this.size.toString();
+        const dict = await this.asyncGet(key);
         for (const key in record) {
             if (record.hasOwnProperty(key)) {
-                await dict.asyncSet(key, record[key]);
+                const currentValue = await dict.asyncGet(key);
+                if (currentValue !== record[key])
+                    await dict.asyncSet(key, record[key]);
             }
         }
     }
+    modelFormList(property, value) {
+        return this.get('__modelFormList');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveDictionary, deps: [{ token: SocketService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveDictionary, providedIn: 'root' // This makes the service a singleton and available throughout the app
-     }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveDictionary, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveDictionary, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root' // This makes the service a singleton and available throughout the app
+                    providedIn: 'root', // This makes the service a singleton and available throughout the app
                 }]
         }], ctorParameters: () => [{ type: SocketService }] });
 
@@ -629,6 +767,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                     ], template: "<div class=\"custom-toolbar\">\r\n  <button kendoButton [svgIcon]=\"menuSvg\" fillMode=\"flat\" (click)=\"drawer.toggle()\"></button>\r\n  <!-- <kendo-toolbar-button icon=\"menu\"  themeColor=\"tertiary\"  (click)=\"drawer.toggle()\"> </kendo-toolbar-button> -->\r\n  <span class=\"app-title\">{{apptitle}}</span>\r\n</div>\r\n<kendo-drawer-container>\r\n  <kendo-drawer #drawer [items]=\"items\" mode=\"push\" [mini]=\"true\" [expanded]=\"true\" (select)=\"onSelect($event)\"\r\n    [autoCollapse]=\"false\" [isItemExpanded]=\"isItemExpanded\">\r\n    <!-- <ng-template kendoDrawerItemTemplate let-item>\r\n      <div *ngIf=\"item.path !== ''\" class=\"k-drawer-link\" [routerLink]=\"item.path\">\r\n        <kendo-svgicon [icon]=\"item.svgIcon\"></kendo-svgicon>\r\n        <span>{{ item.text }}</span>\r\n      </div>\r\n      <div *ngIf=\"item.path == ''\" class=\"k-drawer-link\" >\r\n        <kendo-svgicon [icon]=\"item.svgIcon\"></kendo-svgicon>\r\n        <span>{{ item.text }}</span>\r\n      </div>\r\n    </ng-template> -->\r\n  </kendo-drawer>\r\n\r\n  <kendo-drawer-content>\r\n    <router-outlet></router-outlet>\r\n    <!-- <div>{{selected}}</div> -->\r\n    <!-- <my-content [selectedItem]=\"selected\"></my-content> -->\r\n  </kendo-drawer-content>\r\n</kendo-drawer-container>", styles: ["html,body,rdict-full{padding:0;height:100%}rdict-full{display:flex;flex-direction:column}kendo-drawer-container{flex:1 1 auto;overflow-y:auto}.k-icon{font-size:20px}.custom-toolbar{width:100%;background-color:#f6f6f6;line-height:10px;border-bottom:inset;border-bottom-width:1px;color:#656565}.custom-toolbar button{margin:3px 0 3px 8px}.app-title{margin-left:20px;font-weight:700;font-size:17px}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1$1.Router }, { type: i2.TranslateService }, { type: ReactiveDictionary }] });
 
+class MaterialDialogService {
+    constructor(translate, dialogService, notificationService) {
+        this.translate = translate;
+        this.dialogService = dialogService;
+        this.notificationService = notificationService;
+        this.state = {
+            content: "Your data has been saved.",
+            type: { style: "success", icon: true },
+            animation: { type: "slide", duration: 400 },
+            hideAfter: 3000,
+        };
+    }
+    confirmDelete() {
+        return this.confirm(this.translate.instant("Are you sure you want to delete this record ?"), this.translate.instant("Delete Record"), this.translate.instant("General.Yes"), this.translate.instant("General.No"));
+    }
+    confirm(content, title, confirmButtonText, cancelButtonText) {
+        const dialog = this.dialogService.open({
+            title: title || "Confirm",
+            content: content || "Are you sure?",
+            actions: [
+                { text: cancelButtonText || "No", result: false },
+                { text: confirmButtonText || "Yes", themeColor: "primary", result: true }
+            ],
+            width: 450,
+            height: 200,
+            minWidth: 250,
+        });
+        // Return an Observable<boolean>
+        return new Observable((observer) => {
+            dialog.result.subscribe((result) => {
+                if (result instanceof DialogCloseResult) {
+                    // Dialog was closed without an action
+                    observer.next(false);
+                }
+                else {
+                    const actionResult = result;
+                    observer.next(actionResult.result);
+                }
+                observer.complete(); // Complete the observable
+            });
+        });
+    }
+    showSaveMessage(message) {
+        this.state.content = message || "Your data has been saved.";
+        this.state.type = { style: "success", icon: true };
+        this.notificationService.show(this.state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialDialogService, deps: [{ token: i2.TranslateService }, { token: i2$1.DialogService }, { token: i3.NotificationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: MaterialDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i2.TranslateService }, { type: i2$1.DialogService }, { type: i3.NotificationService }] });
+
 class TranslateExtension {
     constructor(translate) {
         this.translate = translate;
@@ -697,11 +892,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
         }] });
 
 class RdictCrudComponent {
-    constructor(router, route, translate, rdict) {
+    constructor(router, route, translate, rdict, localFileService, dialogService) {
         this.router = router;
         this.route = route;
         this.translate = translate;
         this.rdict = rdict;
+        this.localFileService = localFileService;
+        this.dialogService = dialogService;
         this.baseForm = new FormGroup({});
         this.model = {};
         this.options = {};
@@ -709,38 +906,133 @@ class RdictCrudComponent {
         this.saveIcon = saveIcon;
     }
     async ngOnInit() {
+        this.setValueFromSnapshot(this, this.route.snapshot, 'fileLayout', '');
         const currentUrlSegments = this.router.url.split('/').filter(segment => segment !== '' && isNaN(Number(segment)));
         if (['add', 'edit'].includes(currentUrlSegments[currentUrlSegments.length - 1])) {
             currentUrlSegments.pop();
         }
         this.dictPath = currentUrlSegments.join('.');
         this.rdictModel = currentUrlSegments.length > 0 ? currentUrlSegments[currentUrlSegments.length - 1] : '';
+        const id = this.route.snapshot.paramMap.get('id');
+        this.modelKey = id ?? null;
         this.getModelFields();
+        this.getModel();
+    }
+    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;
+        }
     }
     onSubmit(model) {
-        this.saveModel(this.baseForm);
+        // this.saveModel(this.baseForm)
     }
-    getModelFields() {
-        if (this.rdictModel) {
-            this.rdict.getAsObservable("config.models." + this.rdictModel + ".formLayout").subscribe({
-                next: formLayout => {
-                    if (formLayout) {
-                        this.title = this.translate.instant(formLayout["title"]);
-                        this.fields = formLayout["fields"];
-                    }
+    getModel() {
+        if (this.modelKey) {
+            this.rdict.getAsObservable(this.dictPath).subscribe({
+                next: value => {
+                    value.getAsObservable(this.modelKey).subscribe({
+                        next: modelValue => {
+                            this.modelRdict = modelValue;
+                            this.model = this.modelRdict.getPlainObject();
+                            this.modelRdict.onChanges().subscribe(changes => {
+                                if (changes) {
+                                    console.log("Changes detected:", changes);
+                                    this.baseForm.get(changes.key).patchValue(changes.value);
+                                    // this.model[changes.key] = changes.value;
+                                }
+                            });
+                        }
+                    });
                 },
                 error: err => console.error('Error:', err.message),
             });
         }
     }
+    getModelFields() {
+        if (this.rdictModel) {
+            if (this.fileLayout) {
+                //load from file
+                this.localFileService.getJsonData(this.fileLayout).subscribe({
+                    next: value => {
+                        if (value) {
+                            const layout = value.find(item => item.model === this.rdictModel);
+                            this.setLayout(layout?.formLayout);
+                        }
+                    },
+                    error: err => console.error('Error:', err.message),
+                });
+            }
+            else
+                this.rdict.getAsObservable("config.models." + this.rdictModel + ".formLayout").subscribe({
+                    next: formLayout => {
+                        if (formLayout) {
+                            this.setLayout(formLayout);
+                        }
+                    },
+                    error: err => console.error('Error:', err.message),
+                });
+        }
+    }
+    setLayout(formLayout) {
+        this.title = this.translate.instant(formLayout["title"]);
+        // console.log(formLayout["fields"]);
+        let fieldsTmp = formLayout["fields"];
+        this.fields = this.transformFields(fieldsTmp);
+        //  this.transformJsonToFormlyFields()
+    }
+    // transformJsonToFormlyFields(json: any[]): FormlyFieldConfig[] {
+    //   // return json.map(field => {
+    //   //   if (field.type === 'select' && field.props.options) {
+    //   //     field.props.options = this.getSelectData(field.props.options);
+    //   //   }
+    //   //   return {
+    //   //     key: field.key,
+    //   //     type: field.type,
+    //   //     props: field.props,
+    //   //     fieldGroup: field?.fieldGroup
+    //   //   };
+    //   // });
+    // }
+    transformFields(fields) {
+        return fields.map(field => this.transformField(field));
+    }
+    transformField(field) {
+        // Handle the current field
+        if (field.type === 'select' && field.props?.options && typeof field.props.options === 'string') {
+            field.props.options = this.getSelectData(field.props.options);
+        }
+        // Recursively handle fieldGroup
+        if (field.fieldGroup) {
+            field.fieldGroup = this.transformFields(field.fieldGroup);
+        }
+        // Recursively handle fieldArray
+        if (field.fieldArray) {
+            if (typeof field.fieldArray === 'function') {
+                const originalFieldArrayFn = field.fieldArray;
+                field.fieldArray = (fieldConfig) => {
+                    const transformedField = this.transformField(originalFieldArrayFn(fieldConfig));
+                    return transformedField;
+                };
+            }
+            else {
+                field.fieldArray = this.transformField(field.fieldArray);
+            }
+        }
+        return field;
+    }
     async onSave() {
         await this.saveModel(this.baseForm);
     }
     async saveModel(fg) {
         if (fg.valid) {
             var dict = await this.rdict.asyncGet(this.dictPath);
-            await dict.addNew(fg.value);
-            console.log(fg.value);
+            await dict.update(fg.value, this.modelKey);
+            this.dialogService.showSaveMessage();
+            // console.log(fg.value);
         }
         else {
             this.validateAllFormFields(fg);
@@ -758,8 +1050,11 @@ class RdictCrudComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RdictCrudComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: ReactiveDictionary }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: RdictCrudComponent, isStandalone: true, selector: "app-rdict-crud", ngImport: i0, template: "<kendo-toolbar>\r\n  <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n  <kendo-toolbar-button text=\"Save\" showText=\"both\" [svgIcon]=\"saveIcon\" showIcon=\"both\" themeColor=\"primary\"\r\n    [disabled]=\"false\" (click)=\"onSave()\">\r\n  </kendo-toolbar-button>\r\n</kendo-toolbar>\r\n<form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n\r\n  <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyKendoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CrudFormlyTransaltionModule }, { kind: "component", type: i6$1.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i6$1.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i6$1.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }] }); }
+    getSelectData(key) {
+        return this.rdict.getTableAsObservable(key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RdictCrudComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: ReactiveDictionary }, { token: i1.LocalFileService }, { token: MaterialDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: RdictCrudComponent, isStandalone: true, selector: "app-rdict-crud", ngImport: i0, template: "<kendo-toolbar>\r\n  <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n  <kendo-toolbar-button text=\"Save\" showText=\"both\" [svgIcon]=\"saveIcon\" showIcon=\"both\" themeColor=\"primary\"\r\n    [disabled]=\"false\" (click)=\"onSave()\">\r\n  </kendo-toolbar-button>\r\n</kendo-toolbar>\r\n<form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n\r\n  <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i6$1.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyKendoModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CrudFormlyTransaltionModule }, { kind: "component", type: i8.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i8.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i8.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RdictCrudComponent, decorators: [{
             type: Component,
@@ -771,7 +1066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         CrudFormlyTransaltionModule,
                         KENDO_TOOLBAR
                     ], template: "<kendo-toolbar>\r\n  <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n  <kendo-toolbar-button text=\"Save\" showText=\"both\" [svgIcon]=\"saveIcon\" showIcon=\"both\" themeColor=\"primary\"\r\n    [disabled]=\"false\" (click)=\"onSave()\">\r\n  </kendo-toolbar-button>\r\n</kendo-toolbar>\r\n<form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n\r\n  <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n</form>" }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: ReactiveDictionary }] });
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: ReactiveDictionary }, { type: i1.LocalFileService }, { type: MaterialDialogService }] });
 
 class RdictTableTitle extends ToolBarToolComponent {
     constructor() {
@@ -783,7 +1078,7 @@ class RdictTableTitle extends ToolBarToolComponent {
         <ng-template #toolbarTemplate>
             <kendo-label>{{text}}</kendo-label>
         </ng-template>
-    `, isInline: true }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: i1$2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: RdictTableTitle, decorators: [{
             type: Component,
@@ -791,6 +1086,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                     providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => RdictTableTitle) }],
                     selector: 'table-title',
                     standalone: true,
+                    imports: [
+                        KENDO_LABEL,
+                    ],
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-label>{{text}}</kendo-label>
@@ -805,26 +1103,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             }] } });
 
 class GenericRdictTableComponent {
-    constructor(router, route, translate, injector, el, rdict) {
+    constructor(router, route, translate, injector, localFileService, rdict, dialogService) {
         this.router = router;
         this.route = route;
         this.translate = translate;
         this.injector = injector;
-        this.el = el;
+        this.localFileService = localFileService;
         this.rdict = rdict;
-        this.themeColors = [
-            "base",
-            "primary",
-            "secondary",
-            "tertiary",
-            "info",
-            "success",
-            "warning",
-            "error",
-            "dark",
-            "light",
-            "inverse",
-        ];
+        this.dialogService = dialogService;
         this.editOnClick = false;
         this.editOnDblClick = false;
         this.data = [];
@@ -864,6 +1150,8 @@ class GenericRdictTableComponent {
         this.setValueFromSnapshot(this, this.route.snapshot, 'canEdit', true);
         this.setValueFromSnapshot(this, this.route.snapshot, 'editOnClick', false);
         this.setValueFromSnapshot(this, this.route.snapshot, 'editOnDblClick', false);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'editColumn', null);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'fileLayout', '');
         const currentUrlSegments = this.router.url.split('/').map(segment => new UrlSegment(segment, {}));
         this.basePath = currentUrlSegments.map(segment => segment.path).join('/');
         const filteredSegments = currentUrlSegments.filter(segment => segment.path !== '');
@@ -890,48 +1178,147 @@ class GenericRdictTableComponent {
         }
     }
     async loadData() {
-        this.rdict.getTableAsObservable(this.dictPath).subscribe({
-            next: value => {
-                this.dataSource = value;
+        this.rdict.getAsObservable(this.dictPath).subscribe({
+            next: rdictData => {
+                this.tableRdict = rdictData;
+                this.tableRdict.onChanges().subscribe({
+                    next: (changes) => {
+                        console.log("Changes detected grid:", changes);
+                        this.onChangeEvent(changes);
+                    }
+                });
+                this.tableRdict.onDelete().subscribe({
+                    next: (changes) => {
+                        console.log("Delete detected grid:", changes);
+                        this.ondDeleteEvent(changes);
+                    }
+                });
+                this.rdict.getTableAsObservable(this.dictPath, this.tableRdict).subscribe({
+                    next: value => {
+                        this.dataSource = value;
+                    },
+                    error: err => console.error('Error:', err.message),
+                });
             },
             error: err => console.error('Error:', err.message),
         });
     }
+    onChangeEvent(changes) {
+        if (changes) {
+            const key = changes?.key;
+            const value = changes?.value;
+            if (key && value) {
+                const index = this.dataSource.findIndex((item) => item.__idx === key);
+                if (index > -1) {
+                    this.dataSource[index] = value;
+                }
+                else {
+                    //get the object from rdict
+                    this.tableRdict.getAsObservable(key).subscribe({
+                        next: value => {
+                            var dd = value.getPlainObject();
+                            this.dataSource.push(dd);
+                        }
+                    });
+                }
+            }
+        }
+    }
+    ondDeleteEvent(changes) {
+        if (changes) {
+            const key = changes?.key;
+            if (key) {
+                const index = this.dataSource.findIndex((item) => item.__idx === key);
+                if (index > -1) {
+                    this.dataSource.splice(index, 1);
+                }
+                // this.tableRdict.delete(key)
+            }
+        }
+    }
     getListLayout() {
         if (this.model) {
-            this.rdict.getAsObservable("config.models." + this.model + ".tableLayout").subscribe({
-                next: value => {
-                    if (value) {
-                        this.tableLayout = value;
-                        this.title = this.translate.instant(this.tableLayout["title"]);
-                        this.allColumns = this.tableLayout["columns"].map(item => {
-                            if (!item.isTranslated) {
-                                item.name = this.translate.instant(item.translateKey);
-                                item.isTranslated = true;
-                            }
-                            return item;
-                        });
-                        this.columns = [];
-                        this.allColumns.sort((a, b) => a.order - b.order);
-                        this.displayedColumns = [];
-                        this.displayedColumns.push.apply(this.displayedColumns, this.allColumns.map(x => x.propertyName));
+            if (this.fileLayout) {
+                //load from file
+                this.localFileService.getJsonData(this.fileLayout).subscribe({
+                    next: value => {
+                        if (value) {
+                            const layout = value.find(item => item.model === this.model);
+                            this.setLayout(layout?.tableLayout);
+                        }
+                    },
+                    error: err => console.error('Error:', err.message),
+                });
+            }
+            else
+                //Use rdict layout
+                this.rdict.getAsObservable("config.models." + this.model + ".tableLayout").subscribe({
+                    next: value => {
+                        this.setLayout(value);
+                    },
+                    error: err => console.error('Error:', err.message),
+                });
+        }
+    }
+    setLayout(layout) {
+        if (layout) {
+            this.tableLayout = layout;
+            this.title = this.translate.instant(this.tableLayout["title"]);
+            this.allColumns = this.tableLayout["columns"].map(item => {
+                if (!item.isTranslated) {
+                    item.name = this.translate.instant(item.translateKey);
+                    item.isTranslated = true;
+                    item.isEditLink = false;
+                    if (this.editColumn && this.editColumn === item.propertyName) {
+                        item.isEditLink = true;
                     }
-                },
-                error: err => console.error('Error:', err.message),
+                }
+                return item;
             });
+            this.columns = [];
+            this.allColumns.sort((a, b) => a.order - b.order);
+            this.displayedColumns = [];
+            this.displayedColumns.push.apply(this.displayedColumns, this.allColumns.map(x => x.propertyName));
         }
     }
     addHandler() {
-        console.log("add");
-        this.router.navigate([this.basePath + '/add']);
-        // this.editDataItem = new Product();
-        // this.isNew = true;
+        this.router.navigate([`${this.basePath}/add`]);
+    }
+    editHandler(args) {
+        this.edit(args.dataItem);
+        // this.editDataItem = args.dataItem;
+        // this.isNew = false;
+    }
+    edit(dataItem) {
+        this.router.navigate([`${this.basePath}/edit/${dataItem.__idx}`]);
+    }
+    removeHandler(args) {
+        this.dialogService.confirmDelete().subscribe({
+            next: (result) => {
+                if (result) {
+                    this.tableRdict.deleteAsObservable(args.dataItem.__idx).subscribe({
+                        next: (result) => {
+                            this.dataSource.splice(args.rowIndex, 1);
+                        }
+                    });
+                }
+            }
+        });
+        // this.editService.remove(args.dataItem);
+    }
+    getCellValue(item, propertyName) {
+        if (item instanceof ReactiveDictionary) {
+            console.log(item);
+        }
+        else {
+            return item[propertyName];
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: GenericRdictTableComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: i0.Injector }, { token: i0.ElementRef }, { token: ReactiveDictionary }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: GenericRdictTableComponent, isStandalone: true, selector: "rsl-rdict-generic-table", inputs: { showSerach: "showSerach", searchFields: "searchFields", customInclude: "customInclude", defaultSort: "defaultSort", deletePropertyName: "deletePropertyName", defaultFilter: "defaultFilter", showHeader: "showHeader", hasAdd: "hasAdd", canDelete: "canDelete", canEdit: "canEdit", editOnClick: "editOnClick", editOnDblClick: "editOnDblClick" }, outputs: { selectedObject: "selectedObject", click: "click", editModel: "editModel" }, providers: [], viewQueries: [{ propertyName: "filter", first: true, predicate: ElementRef, descendants: true }], ngImport: i0, template: "<kendo-grid [data]=\"dataSource\" \r\n      [sortable]=\"true\" \r\n      [filterable]=\"showSerach\"\r\n       [resizable]=\"true\"\r\n      (add)=\"addHandler()\">\r\n  <kendo-toolbar>\r\n    <table-title text=\"{{title}}\"></table-title>\r\n    <kendo-toolbar-messages>Test</kendo-toolbar-messages>\r\n    <!-- <kendo-toolbar-separator></kendo-toolbar-separator> -->\r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <kendo-toolbar-button kendoButton [svgIcon]=\"svgAdd\" text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\r\n\r\n  <!-- <kendo-toolbar>\r\n    \r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <button kendoGridAddCommand type=\"button\">Add new</button>\r\n  </kendo-toolbar> -->\r\n  <kendo-grid-column *ngFor=\"let column of allColumns\" field=\"{{ column.propertyName }}\"\r\n    title=\" {{column.translateKey | translate}}\">\r\n  </kendo-grid-column>\r\n  <kendo-grid-command-column title=\"\" [width]=\"100\" >\r\n    <ng-template kendoGridCellTemplate>\r\n      <button kendoButton  [svgIcon]=\"svgEdit\" themeColor=\"light\" ></button>\r\n      <button kendoButton  [svgIcon]=\"svgDelete\" themeColor=\"error\"></button>\r\n    </ng-template>\r\n  </kendo-grid-command-column>\r\n</kendo-grid>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: GenericRdictTableComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i2.TranslateService }, { token: i0.Injector }, { token: i1.LocalFileService }, { token: ReactiveDictionary }, { token: MaterialDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: GenericRdictTableComponent, isStandalone: true, selector: "rsl-rdict-generic-table", inputs: { showSerach: "showSerach", searchFields: "searchFields", customInclude: "customInclude", defaultSort: "defaultSort", deletePropertyName: "deletePropertyName", defaultFilter: "defaultFilter", showHeader: "showHeader", hasAdd: "hasAdd", canDelete: "canDelete", canEdit: "canEdit", editOnClick: "editOnClick", editOnDblClick: "editOnDblClick" }, outputs: { selectedObject: "selectedObject", click: "click", editModel: "editModel" }, providers: [], viewQueries: [{ propertyName: "filter", first: true, predicate: ElementRef, descendants: true }], ngImport: i0, template: "<kendo-grid [data]=\"dataSource\" [sortable]=\"true\" [filterable]=\"showSerach\" [resizable]=\"true\" (add)=\"addHandler()\"\r\n  (edit)=\"editHandler($event)\" (remove)=\"removeHandler($event)\">\r\n  <kendo-toolbar>\r\n    <table-title text=\"{{title}}\"></table-title>\r\n    <kendo-toolbar-messages>Test</kendo-toolbar-messages>\r\n    <!-- <kendo-toolbar-separator></kendo-toolbar-separator> -->\r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <kendo-toolbar-button kendoButton [svgIcon]=\"svgAdd\" text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\r\n\r\n  <!-- <kendo-toolbar>\r\n    \r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <button kendoGridAddCommand type=\"button\">Add new</button>\r\n  </kendo-toolbar> -->\r\n  <!-- <kendo-grid-column *ngFor=\"let column of allColumns\" field=\"{{ column.propertyName }}\"\r\n    title=\" {{column.translateKey | translate}}\">\r\n  </kendo-grid-column> -->\r\n\r\n  <kendo-grid-column *ngFor=\"let column of allColumns\" [field]=\"column.propertyName\"\r\n    [title]=\"column.translateKey | translate\">\r\n    <!-- Use ng-template to customize the column content -->\r\n    <ng-template *ngIf=\"column.isEditLink; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <!-- Create a link that calls editHandler(dataItem) -->\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue(dataItem,column.propertyName) }}\r\n      </a>\r\n    </ng-template>\r\n    <!-- Default template for non-link columns -->\r\n    <ng-template #defaultTemplate kendoGridCellTemplate let-dataItem>\r\n      {{ getCellValue(dataItem,column.propertyName) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column title=\"\" [width]=\"100\">\r\n    <ng-template kendoGridCellTemplate>\r\n      <!-- <button kendoButton  kendoGridEditCommand  [svgIcon]=\"svgEdit\" themeColor=\"light\" ></button>\r\n      <button kendoButton  kendoGridRemoveCommand [svgIcon]=\"svgDelete\" themeColor=\"error\"></button> -->\r\n      <button kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button kendoGridRemoveCommand [svgIcon]=\"svgDelete\" themeColor=\"error\"></button>\r\n    </ng-template>\r\n  </kendo-grid-command-column>\r\n</kendo-grid>\r\n<div kendoDialogContainer></div>", styles: [".edit-link{color:#00f!important;text-decoration:underline!important;cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 // MatPaginatorModule,
                 // MatTableModule,
-                TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: i5$2.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "component", type: i5$2.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "component", type: i5$2.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i5$2.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "directive", type: i5$2.AddCommandToolbarDirective, selector: "[kendoGridAddTool]" }, { kind: "component", type: i6$1.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i6$1.ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages" }, { kind: "component", type: i6$1.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i6$1.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: RdictTableTitle, selector: "table-title", inputs: ["text"] }], encapsulation: i0.ViewEncapsulation.None }); }
+                TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: i7$1.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "rowReorderable", "navigable", "navigatable", "autoSize", "rowClass", "rowSticky", "rowSelected", "isRowSelectable", "cellSelected", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "isDetailExpanded", "isGroupExpanded"], outputs: ["filterChange", "pageChange", "groupChange", "sortChange", "selectionChange", "rowReorder", "dataStateChange", "groupExpand", "groupCollapse", "detailExpand", "detailCollapse", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "columnStickyChange", "scrollBottom", "contentScroll"], exportAs: ["kendoGrid"] }, { kind: "directive", type: i7$1.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i7$1.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i7$1.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i7$1.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i7$1.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: i7$1.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i7$1.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "directive", type: i7$1.AddCommandToolbarDirective, selector: "[kendoGridAddTool]" }, { kind: "component", type: i8.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i8.ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages" }, { kind: "component", type: i8.ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: i8.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { kind: "directive", type: i2$1.DialogContainerDirective, selector: "[kendoDialogContainer]" }, { kind: "component", type: RdictTableTitle, selector: "table-title", inputs: ["text"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: GenericRdictTableComponent, decorators: [{
             type: Component,
@@ -945,9 +1332,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         KENDO_TOOLBAR,
                         KENDO_LABEL,
                         KENDO_BUTTONS,
+                        KENDO_DIALOG,
                         RdictTableTitle
-                    ], providers: [], template: "<kendo-grid [data]=\"dataSource\" \r\n      [sortable]=\"true\" \r\n      [filterable]=\"showSerach\"\r\n       [resizable]=\"true\"\r\n      (add)=\"addHandler()\">\r\n  <kendo-toolbar>\r\n    <table-title text=\"{{title}}\"></table-title>\r\n    <kendo-toolbar-messages>Test</kendo-toolbar-messages>\r\n    <!-- <kendo-toolbar-separator></kendo-toolbar-separator> -->\r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <kendo-toolbar-button kendoButton [svgIcon]=\"svgAdd\" text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\r\n\r\n  <!-- <kendo-toolbar>\r\n    \r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <button kendoGridAddCommand type=\"button\">Add new</button>\r\n  </kendo-toolbar> -->\r\n  <kendo-grid-column *ngFor=\"let column of allColumns\" field=\"{{ column.propertyName }}\"\r\n    title=\" {{column.translateKey | translate}}\">\r\n  </kendo-grid-column>\r\n  <kendo-grid-command-column title=\"\" [width]=\"100\" >\r\n    <ng-template kendoGridCellTemplate>\r\n      <button kendoButton  [svgIcon]=\"svgEdit\" themeColor=\"light\" ></button>\r\n      <button kendoButton  [svgIcon]=\"svgDelete\" themeColor=\"error\"></button>\r\n    </ng-template>\r\n  </kendo-grid-command-column>\r\n</kendo-grid>\r\n" }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: i0.Injector }, { type: i0.ElementRef }, { type: ReactiveDictionary }], propDecorators: { showSerach: [{
+                    ], providers: [], template: "<kendo-grid [data]=\"dataSource\" [sortable]=\"true\" [filterable]=\"showSerach\" [resizable]=\"true\" (add)=\"addHandler()\"\r\n  (edit)=\"editHandler($event)\" (remove)=\"removeHandler($event)\">\r\n  <kendo-toolbar>\r\n    <table-title text=\"{{title}}\"></table-title>\r\n    <kendo-toolbar-messages>Test</kendo-toolbar-messages>\r\n    <!-- <kendo-toolbar-separator></kendo-toolbar-separator> -->\r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <kendo-toolbar-button kendoButton [svgIcon]=\"svgAdd\" text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\r\n\r\n  <!-- <kendo-toolbar>\r\n    \r\n    <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n    <button kendoGridAddCommand type=\"button\">Add new</button>\r\n  </kendo-toolbar> -->\r\n  <!-- <kendo-grid-column *ngFor=\"let column of allColumns\" field=\"{{ column.propertyName }}\"\r\n    title=\" {{column.translateKey | translate}}\">\r\n  </kendo-grid-column> -->\r\n\r\n  <kendo-grid-column *ngFor=\"let column of allColumns\" [field]=\"column.propertyName\"\r\n    [title]=\"column.translateKey | translate\">\r\n    <!-- Use ng-template to customize the column content -->\r\n    <ng-template *ngIf=\"column.isEditLink; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <!-- Create a link that calls editHandler(dataItem) -->\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue(dataItem,column.propertyName) }}\r\n      </a>\r\n    </ng-template>\r\n    <!-- Default template for non-link columns -->\r\n    <ng-template #defaultTemplate kendoGridCellTemplate let-dataItem>\r\n      {{ getCellValue(dataItem,column.propertyName) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column title=\"\" [width]=\"100\">\r\n    <ng-template kendoGridCellTemplate>\r\n      <!-- <button kendoButton  kendoGridEditCommand  [svgIcon]=\"svgEdit\" themeColor=\"light\" ></button>\r\n      <button kendoButton  kendoGridRemoveCommand [svgIcon]=\"svgDelete\" themeColor=\"error\"></button> -->\r\n      <button kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button kendoGridRemoveCommand [svgIcon]=\"svgDelete\" themeColor=\"error\"></button>\r\n    </ng-template>\r\n  </kendo-grid-command-column>\r\n</kendo-grid>\r\n<div kendoDialogContainer></div>", styles: [".edit-link{color:#00f!important;text-decoration:underline!important;cursor:pointer!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: i0.Injector }, { type: i1.LocalFileService }, { type: ReactiveDictionary }, { type: MaterialDialogService }], propDecorators: { showSerach: [{
                 type: Input
             }], searchFields: [{
                 type: Input