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

package/fesm2022/rosoftlab-rdict.mjs

@@ -1,4 +1,4 @@
-import * as i5$2 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';
@@ -6,56 +6,203 @@ import * as i1$1 from '@angular/router';
 import { RouterModule, UrlSegment, NavigationStart } from '@angular/router';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i4 from '@progress/kendo-angular-buttons';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonsModule, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
 import { KENDO_SVGICON } from '@progress/kendo-angular-icons';
-import * as i5 from '@progress/kendo-angular-layout';
+import * as i6 from '@progress/kendo-angular-layout';
 import { LayoutModule } from '@progress/kendo-angular-layout';
-import * as i7 from '@progress/kendo-angular-toolbar';
-import { ToolBarModule, ToolBarToolComponent, KENDO_TOOLBAR } 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 } from '@progress/kendo-svg-icons';
-import { BehaviorSubject, map } from 'rxjs';
+import { menuIcon, saveIcon, pencilIcon, trashIcon, plusIcon } from '@progress/kendo-svg-icons';
+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 { FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i4$1 from '@ngx-formly/core';
+import * as i7 from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i6$1 from '@ngx-formly/core';
 import { FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
 import { FormlyKendoModule } from '@ngx-formly/kendo';
-import * as i6 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 {
+    constructor(socketUrl) {
+        this.socketUrl = socketUrl;
+        // Replace with your actual server URL
+        // this.socket.on("connect", () => {
+        //   const engine = this.socket.io.engine;
+        //   (engine.transport.name); // in most cases, prints "polling"
+        //   engine.once("upgrade", () => {
+        //     // called when the transport is upgraded (i.e. from HTTP long-polling to WebSocket)
+        //     (engine.transport.name); // in most cases, prints "websocket"
+        //   });
+        // });
+    }
+    initSocket(authToken) {
+        if (this.socket == null && authToken !== null) {
+            this.socket = io(this.socketUrl, {
+                withCredentials: true,
+                // parser: msgpackParser,
+                auth: {
+                    token: authToken, // Include the authentication token
+                }
+                // ,
+                // 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() {
+        return new Promise((resolve, reject) => {
+            this.socket.on('init', (data) => {
+                if (data) {
+                    resolve(data["dict_data"]);
+                }
+                else {
+                    reject('No data received from init event');
+                }
+            });
+        });
+    }
+    getSetEvent(rdict) {
+        this.socket.on('set', (data) => {
+            // (rdict.get('__guid'), data, this.socket.id)
+            if (rdict.get('__guid') === data.did) {
+                // ('Set the data')
+                rdict.asyncSet(data.key, data.value, false);
+            }
+        });
+    }
+    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) => {
+            this.socket.emit('lazy_load', { did, key }, (response) => {
+                if (response && response.error) {
+                    reject(response.error); // Handle error if present
+                }
+                else {
+                    resolve(response); // Resolve with the response data
+                }
+            });
+        });
+    }
+    // Emit the 'set' event to update the data on the server
+    emitSet(did, key, value) {
+        return new Promise((resolve, reject) => {
+            this.socket.emit('set', { did, key, value }, (response) => {
+                if (response && response.error) {
+                    reject(response.error);
+                }
+                else {
+                    resolve();
+                }
+            });
+        });
+    }
+    // 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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SocketService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [SOCKET_URL]
+                }] }] });
+
+// import { mergeMap } from 'rxjs/operators';
 class ReactiveDictionary extends Map {
-    static { this.instance = new Map; }
-    constructor(socketService, authToken) {
+    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._authToken = authToken;
         this._socketService = socketService;
+        // this._socketService.initSocket(authToken)
+        // this._socketService.getSetEvent(this)
+    }
+    async initialize(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
-    static getInstance(socketService, authToken, instance_key) {
-        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();
@@ -76,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;
     }
@@ -98,7 +245,8 @@ class ReactiveDictionary extends Map {
                         const lazyLoadData = await this.lazyLoadSync(this.get('__guid'), key);
                         // console.log(lazyLoadData)
                         if (lazyLoadData) {
-                            const dict = new ReactiveDictionary(this._socketService, this._authToken);
+                            const dict = new ReactiveDictionary(this._socketService);
+                            dict.initialize(this._authToken);
                             await dict.asyncInit(lazyLoadData.data);
                             this.set(key, dict);
                             return dict;
@@ -107,15 +255,34 @@ class ReactiveDictionary extends Map {
                 }
                 return value;
             }
+            else {
+                const dict = new ReactiveDictionary(this._socketService);
+                dict.initialize(this._authToken);
+                dict.set('__guid', v4());
+                dict.set('__type', 'dict');
+                this.set(key, dict);
+                await this._socketService.emitSet(this.get('__guid'), key, this.transform_for_serialization(dict));
+                return dict;
+            }
         }
         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
                 return null;
         }
     }
+    transform_for_serialization(value) {
+        // Transform a value to a format that can be serialized.
+        const dict_type = value['__type'];
+        if (dict_type === 'lazy')
+            return { __type: 'lazy' };
+        else if (value instanceof ReactiveDictionary)
+            return { __type: 'dict', __guid: value.get('__guid') };
+        else
+            return value;
+    }
     // Asynchronous method to set a value by key
     async asyncSet(key, value, emmit_event = true) {
         if (emmit_event) {
@@ -129,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)) {
@@ -160,134 +344,168 @@ 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
     }
-    async getTable(key) {
-        const data = await this.asyncGet(key); // Get rooms from the ReactiveDictionary
-        if (!data) {
-            return []; // Return an empty array if data is undefined
+    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
         }
-        // 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
-        return result.filter((entry) => entry instanceof ReactiveDictionary);
+        return value;
     }
-    async getTableWithoutGuid(key) {
-        const data = await this.asyncGet(key); // Get rooms from the ReactiveDictionary
-        if (!data) {
+    getAsObservable(key) {
+        return from(this.asyncGet(key));
+    }
+    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');
+            }
+            const isArrayOfReactiveDictionaries = dictionary.every((item) => item instanceof ReactiveDictionary);
+            if (!isArrayOfReactiveDictionaries) {
+                throw new Error('Expected an array of ReactiveDictionary instances but received something else');
+            }
+            // ✅ WRAP THIS IN from(...) to make it emit real data, not a Promise
+            return from(this.processTableData(dictionary));
+        }));
+    }
+    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
-        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;
-                }
+        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 filteredObject;
-        });
-    }
-    onChanges() {
-        return this.changes$.asObservable();
+            return entry;
+        }))) || []; // Return an empty array if the above yields undefined
+        return result.filter((entry) => entry instanceof ReactiveDictionary);
     }
-}
-
-class SocketService {
-    constructor(socketUrl) {
-        this.socketUrl = socketUrl;
-        // Replace with your actual server URL
-        // this.socket.on("connect", () => {
-        //   const engine = this.socket.io.engine;
-        //   (engine.transport.name); // in most cases, prints "polling"
-        //   engine.once("upgrade", () => {
-        //     // called when the transport is upgraded (i.e. from HTTP long-polling to WebSocket)
-        //     (engine.transport.name); // in most cases, prints "websocket"
-        //   });
-        // });
+    async getTableWithoutGuid(key) {
+        const data = await this.asyncGet(key);
+        if (!data)
+            return [];
+        // Reuse the common processing logic
+        return this.processTableData(data);
     }
-    initSocket(authToken) {
-        if (this.socket == null && authToken !== null) {
-            this.socket = io(this.socketUrl, {
-                withCredentials: true,
-                parser: msgpackParser,
-                auth: {
-                    token: authToken, // Include the authentication token
-                },
-                query: {
-                    "access_token": authToken
+    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;
             });
         }
-    }
-    getInitialData() {
-        return new Promise((resolve, reject) => {
-            this.socket.on('init', (data) => {
-                if (data) {
-                    resolve(data["dict_data"]);
-                }
-                else {
-                    reject('No data received from init event');
+        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;
             });
-        });
+        }
+        else {
+            console.warn('processTableData received unexpected data:', data);
+            return [];
+        }
     }
-    getSetEvent(rdict) {
-        this.socket.on('set', (data) => {
-            // (rdict.get('__guid'), data, this.socket.id)
-            if (rdict.get('__guid') === data.did) {
-                // ('Set the data')
-                rdict.asyncSet(data.key, data.value, false);
-            }
-        });
+    // 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();
     }
-    // Emit the 'lazy_load' event with callback to get the response
-    requestLazyLoad(did, key) {
-        return new Promise((resolve, reject) => {
-            this.socket.emit('lazy_load', { did, key }, (response) => {
-                if (response && response.error) {
-                    reject(response.error); // Handle error if present
-                }
-                else {
-                    resolve(response); // Resolve with the response data
-                }
-            });
-        });
+    onDelete() {
+        return this.deletes$.asObservable();
     }
-    // Emit the 'set' event to update the data on the server
-    emitSet(did, key, value) {
-        return new Promise((resolve, reject) => {
-            this.socket.emit('set', { did, key, value }, (response) => {
-                if (response && response.error) {
-                    reject(response.error);
-                }
-                else {
-                    resolve();
-                }
-            });
-        });
+    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)) {
+                const currentValue = await dict.asyncGet(key);
+                if (currentValue !== record[key])
+                    await dict.asyncSet(key, record[key]);
+            }
+        }
     }
-    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' }); }
+    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' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: SocketService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: ReactiveDictionary, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root', // This makes the service a singleton and available throughout the app
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [SOCKET_URL]
-                }] }] });
+        }], ctorParameters: () => [{ type: SocketService }] });
 
 let Menu = class Menu extends BaseModel {
 };
@@ -459,39 +677,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i1.DatastoreCore }] });
 
-class WsAuthService {
-    constructor() {
-        this.token = null;
-    }
-    get Token() {
-        return this.token;
-    }
-    set Token(token) {
-        this.token = token;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: WsAuthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: WsAuthService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: WsAuthService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class FullComponent {
-    constructor(userService, router, socketService, translate, wsAuthService) {
+    constructor(userService, router, translate, rdict) {
         this.userService = userService;
         this.router = router;
-        this.socketService = socketService;
         this.translate = translate;
-        this.wsAuthService = wsAuthService;
+        this.rdict = rdict;
         this.selected = "Inbox";
         this.menuSvg = menuIcon;
         this.expandedIndices = [2];
         this.hasItems = false;
         this.items = [];
         this.icons = allIcons;
+        //private rdict: ReactiveDictionary | undefined;
         this.apptitle = "Test";
         this.isItemExpanded = (item) => {
             return this.expandedIndices.indexOf(item.id) >= 0;
@@ -499,9 +697,6 @@ class FullComponent {
         this.getMenu();
     }
     async ngOnInit() {
-        this.rdict = ReactiveDictionary.getInstance(this.socketService, this.wsAuthService.Token);
-        if (this.rdict.size == 0)
-            await this.rdict.asyncInit();
         this.apptitle = await this.rdict.asyncGet("appname");
     }
     getMenu() {
@@ -555,8 +750,8 @@ class FullComponent {
         });
         return drawerItems;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FullComponent, deps: [{ token: UserService }, { token: i1$1.Router }, { token: SocketService }, { token: i2.TranslateService }, { token: WsAuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FullComponent, isStandalone: true, selector: "rdict-full", ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i4.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: "ngmodule", type: ToolBarModule }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i5.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { kind: "component", type: i5.DrawerContainerComponent, selector: "kendo-drawer-container" }, { kind: "component", type: i5.DrawerContentComponent, selector: "kendo-drawer-content" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FullComponent, deps: [{ token: UserService }, { token: i1$1.Router }, { token: i2.TranslateService }, { token: ReactiveDictionary }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.3", type: FullComponent, isStandalone: true, selector: "rdict-full", ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonsModule }, { 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: "ngmodule", type: ToolBarModule }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i6.DrawerComponent, selector: "kendo-drawer", inputs: ["mode", "position", "mini", "expanded", "width", "miniWidth", "autoCollapse", "items", "isItemExpanded", "animation"], outputs: ["expand", "collapse", "select", "expandedChange"], exportAs: ["kendoDrawer"] }, { kind: "component", type: i6.DrawerContainerComponent, selector: "kendo-drawer-container" }, { kind: "component", type: i6.DrawerContentComponent, selector: "kendo-drawer-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImport: i0, type: FullComponent, decorators: [{
             type: Component,
@@ -570,7 +765,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         LayoutModule,
                         KENDO_SVGICON
                     ], 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: SocketService }, { type: i2.TranslateService }, { type: WsAuthService }] });
+        }], 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) {
@@ -639,57 +891,170 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                 }]
         }] });
 
-;
 class RdictCrudComponent {
-    // = [
-    //   {
-    //     key: 'name',
-    //     type: 'input',
-    //     props: {
-    //       label: 'General.Name',
-    //       translate: true,
-    //       required: true,
-    //     }
-    //   },
-    // ];
-    constructor(router, route, translate, socketService, wsAuthService) {
+    constructor(router, route, translate, rdict, localFileService, dialogService) {
         this.router = router;
         this.route = route;
         this.translate = translate;
-        this.socketService = socketService;
-        this.wsAuthService = wsAuthService;
+        this.rdict = rdict;
+        this.localFileService = localFileService;
+        this.dialogService = dialogService;
         this.baseForm = new FormGroup({});
         this.model = {};
         this.options = {};
         this.fields = [];
+        this.saveIcon = saveIcon;
     }
     async ngOnInit() {
-        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 !== '');
-        this.dictPath = filteredSegments.map(segment => segment.path).join('.');
-        this.rdictModel = filteredSegments.length > 0 ? filteredSegments[filteredSegments.length - 2].path : ''; // Default to empty string if no valid segments
-        this.rdict = ReactiveDictionary.getInstance(this.socketService, this.wsAuthService.Token);
-        if (this.rdict.size == 0)
-            await this.rdict.asyncInit();
-        await this.getModelFields();
+        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)
+    }
+    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),
+            });
+        }
     }
-    async getModelFields() {
+    getModelFields() {
         if (this.rdictModel) {
-            const formLayout = await this.rdict.asyncGet("config.models." + this.rdictModel + ".formLayout");
-            // const tableLayout = await this.rdict.asyncGet("config.models." + this.rdictModel + ".tableLayout");
-            console.log(formLayout);
-            // console.log(tableLayout);
-            if (formLayout) {
-                this.title = this.translate.instant(formLayout["title"]);
-                this.fields = formLayout["fields"];
+            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.update(fg.value, this.modelKey);
+            this.dialogService.showSaveMessage();
+            // console.log(fg.value);
+        }
+        else {
+            this.validateAllFormFields(fg);
         }
     }
-    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: SocketService }, { token: WsAuthService }], 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: "<form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\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$1.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 }] }); }
+    validateAllFormFields(fg) {
+        Object.keys(fg.controls).forEach(field => {
+            // console.log(field);
+            const control = fg.get(field);
+            if (control instanceof FormControl) {
+                control.markAsTouched({ onlySelf: true });
+            }
+            else if (control instanceof FormGroup) {
+                this.validateAllFormFields(control);
+            }
+        });
+    }
+    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,
@@ -698,9 +1063,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         ReactiveFormsModule,
                         FormlyKendoModule,
                         TranslateModule,
-                        CrudFormlyTransaltionModule
-                    ], template: "<form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\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: SocketService }, { type: WsAuthService }] });
+                        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 }, { type: i1.LocalFileService }, { type: MaterialDialogService }] });
 
 class RdictTableTitle extends ToolBarToolComponent {
     constructor() {
@@ -712,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,
@@ -720,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>
@@ -734,14 +1103,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
             }] } });
 
 class GenericRdictTableComponent {
-    constructor(router, route, translate, injector, socketService, wsAuthService, el) {
+    constructor(router, route, translate, injector, localFileService, rdict, dialogService) {
         this.router = router;
         this.route = route;
         this.translate = translate;
         this.injector = injector;
-        this.socketService = socketService;
-        this.wsAuthService = wsAuthService;
-        this.el = el;
+        this.localFileService = localFileService;
+        this.rdict = rdict;
+        this.dialogService = dialogService;
         this.editOnClick = false;
         this.editOnDblClick = false;
         this.data = [];
@@ -761,6 +1130,9 @@ class GenericRdictTableComponent {
         // SelectionType = SelectionType;
         this.headerHeight = 50;
         this.rowHeight = 50;
+        this.svgEdit = pencilIcon;
+        this.svgDelete = trashIcon;
+        this.svgAdd = plusIcon;
     }
     async ngOnInit() {
         this.setValueFromSnapshot(this, this.route.snapshot, 'model', "");
@@ -778,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 !== '');
@@ -791,13 +1165,8 @@ class GenericRdictTableComponent {
                 // Perform actions or update component as needed
             }
         });
-        this.rdict = ReactiveDictionary.getInstance(this.socketService, this.wsAuthService.Token);
-        if (this.rdict.size == 0)
-            await this.rdict.asyncInit();
-        await this.getListLayout();
-        await this.loadData();
-        // this.isLoading = true;
-        // this.onScroll(0);
+        this.getListLayout();
+        this.loadData();
     }
     setValueFromSnapshot(component, snapshot, key, defaultValue) {
         if (component[key] === undefined) {
@@ -809,130 +1178,147 @@ class GenericRdictTableComponent {
         }
     }
     async loadData() {
-        var x = await this.rdict.getTable(this.dictPath);
-        const result = x.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;
+        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);
+                        }
+                    });
                 }
             }
-            return filteredObject;
-        });
-        this.dataSource = result; //new MatTableDataSource(result);
+        }
     }
-    // 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: BaseQueryData<T>) => {
-    //         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: BaseModelFormly) {
-    //   if (this.canEdit)
-    //     this.router.navigate([this.basePath + '/edit/', model.id]);
-    //   // this.navCtrl.navigateForward(this.basePath + '/edit/' + model.id);
-    // }
-    async getListLayout() {
+    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.tableLayout = await this.rdict.asyncGet("config.models." + this.model + ".tableLayout");
-            const formLayout = await this.rdict.asyncGet("config.models." + this.model + ".formLayout");
-            console.log(formLayout);
-            if (this.tableLayout) {
-                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;
+            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),
                 });
-                this.columns = [];
-                this.allColumns.sort((a, b) => a.order - b.order);
-                // if (this.canDelete || this.canEdit) {
-                //   this.allColumns.push({
-                //     // cellTemplate: null,
-                //     name: '',
-                //     // cellClass: 'actions-cell',
-                //     draggable: false,
-                //     sortable: false,
-                //     visible: true
-                //     // width: 100,
-                //     // maxWidth: 100,
-                //     // minWidth: 100
-                //   })
-                // }
-                // this.columns = this.allColumns.filter((item: IonicDataTableLayoutConfig) => item.visible);
-                this.displayedColumns = [];
-                // if (this.allowReorderItems) {
-                //   this.displayedColumns.push('position')
-                // }
-                this.displayedColumns.push.apply(this.displayedColumns, this.allColumns.map(x => x.propertyName));
             }
+            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;
+                    }
+                }
+                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: SocketService }, { token: WsAuthService }, { token: i0.ElementRef }], 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      (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 text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\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>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5$2.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: i6.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: i6.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i6.AddCommandToolbarDirective, selector: "[kendoGridAddTool]" }, { kind: "component", type: i7.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i7.ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages" }, { kind: "component", type: i7.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: i7.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { 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 +1331,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.3", ngImpor
                         KENDO_GRID,
                         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      (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 text=\"Add new\" kendoGridAddTool></kendo-toolbar-button>\r\n  </kendo-toolbar>\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>" }]
-        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }, { type: i2.TranslateService }, { type: i0.Injector }, { type: SocketService }, { type: WsAuthService }, { type: i0.ElementRef }], 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
@@ -993,5 +1381,5 @@ const SOCKET_URL = new InjectionToken('SocketUrl');
  * Generated bundle index. Do not edit.
  */
 
-export { FullComponent, GenericRdictTableComponent, Menu, RdictCrudComponent, ReactiveDictionary, Right, SOCKET_URL, SocketService, User, UserService, WsAuthService };
+export { FullComponent, GenericRdictTableComponent, Menu, RdictCrudComponent, ReactiveDictionary, Right, SOCKET_URL, SocketService, User, UserService };
 //# sourceMappingURL=rosoftlab-rdict.mjs.map