@rosoftlab/rdict 1.0.3-alpha-1 → 1.0.3-alpha-3

package/fesm2022/rosoftlab-rdict.mjs

@@ -1,4 +1,4 @@
-import * as i6$2 from '@angular/common';
+import * as i7$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Inject, Injectable, Component, NgModule, HostBinding, forwardRef, Input, ViewChild, EventEmitter, ElementRef, Output, ViewEncapsulation, InjectionToken } from '@angular/core';
@@ -11,11 +11,11 @@ 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 i8 from '@progress/kendo-angular-toolbar';
+import * as i9 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, arrowLeftIcon, pencilIcon, trashIcon, plusIcon } from '@progress/kendo-svg-icons';
-import { Observable, Subject, from, mergeMap, catchError, throwError, tap, map } from 'rxjs';
+import { Observable, Subject, from, mergeMap, tap, catchError, throwError, map, BehaviorSubject } from 'rxjs';
 import { v4 } from 'uuid';
 import { io } from 'socket.io-client';
 import * as i2$1 from '@progress/kendo-angular-dialog';
@@ -29,10 +29,11 @@ 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 i7$1 from '@progress/kendo-angular-grid';
+import * as i8 from '@progress/kendo-angular-grid';
 import { KENDO_GRID } from '@progress/kendo-angular-grid';
 import * as i1$1 from '@progress/kendo-angular-label';
 import { KENDO_LABEL } from '@progress/kendo-angular-label';
+import * as i6$2 from '@progress/kendo-angular-intl';
 
 class SocketService {
     constructor(socketUrl) {
@@ -121,7 +122,8 @@ class SocketService {
                     observer.error(response.error);
                 }
                 else {
-                    observer.next(response);
+                    const transformedResponse = this.convertDates(response);
+                    observer.next(transformedResponse);
                     observer.complete();
                 }
             });
@@ -132,6 +134,28 @@ class SocketService {
             };
         });
     }
+    convertDates(obj) {
+        if (obj === null || obj === undefined)
+            return obj;
+        if (Array.isArray(obj)) {
+            return obj.map((item) => this.convertDates(item));
+        }
+        if (typeof obj === 'object') {
+            const newObj = {};
+            for (const key of Object.keys(obj)) {
+                const value = obj[key];
+                // detect ISO date strings
+                if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}[ T]\d/.test(value)) {
+                    newObj[key] = new Date(value.replace(' ', 'T')); // replace space with T for safety
+                }
+                else {
+                    newObj[key] = this.convertDates(value); // recurse
+                }
+            }
+            return newObj;
+        }
+        return obj;
+    }
     executeFunction(did, functionName, args = [], kwargs = {}) {
         const payload = {
             did,
@@ -494,18 +518,16 @@ class ReactiveDictionary extends Map {
     }
     getFilteredView(key, request) {
         const guid = this.get('__guid'); // however you’re retrieving it
-        return this._socketService.requestFilteredData(guid, key, request).pipe(
-        // tap((data) => {
-        //   // you can still inspect/log the data here if you like
-        //   console.log('received filtered view:', data);
-        // }),
-        catchError((err) => {
+        return this._socketService.requestFilteredData(guid, key, request).pipe(tap((data) => {
+            // you can still inspect/log the data here if you like
+            // console.log('received filtered view:', data);
+        }), catchError((err) => {
             console.error('Error fetching filtered view:', err);
             // re-throw so subscribers can handle it
             return throwError(() => err);
         }));
     }
-    executeFunction(did, functionName, args = [], kwargs = {}) {
+    executeFunction(functionName, args = [], kwargs = {}) {
         const guid = this.get('__guid'); // however you’re retrieving it
         return this._socketService.executeFunction(guid, functionName, args, kwargs).pipe(tap((data) => {
             // you can still inspect/log the data here if you like
@@ -1123,7 +1145,7 @@ class RdictCrudComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RdictCrudComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: ReactiveDictionary }, { token: i4.LocalFileService }, { token: MaterialDialogService }, { token: i4.RouteHistoryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RdictCrudComponent, isStandalone: true, selector: "app-rdict-crud", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<kendo-toolbar>\r\n  <kendo-toolbar-button text=\"Back\" showText=\"both\" [svgIcon]=\"backIcon\" showIcon=\"both\" themeColor=\"primary\"\r\n    [disabled]=\"false\" (click)=\"onBack()\">\r\n  </kendo-toolbar-button>\r\n  <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n  <kendo-toolbar-button text=\"Save\" showText=\"both\" [svgIcon]=\"saveIcon\" showIcon=\"both\" themeColor=\"success\"\r\n    [disabled]=\"false\" (click)=\"onSave()\">\r\n  </kendo-toolbar-button>\r\n</kendo-toolbar>\r\n\r\n  <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n    <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n  </form>\r\n<div kendoDialogContainer></div>", styles: ["::ng-deep formly-field{padding:.3rem;display:block}\n"], 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"] }, { kind: "directive", type: i2$1.DialogContainerDirective, selector: "[kendoDialogContainer]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: RdictCrudComponent, isStandalone: true, selector: "app-rdict-crud", host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<kendo-toolbar>\r\n  <kendo-toolbar-button text=\"Back\" showText=\"both\" [svgIcon]=\"backIcon\" showIcon=\"both\" themeColor=\"primary\"\r\n    [disabled]=\"false\" (click)=\"onBack()\">\r\n  </kendo-toolbar-button>\r\n  <kendo-toolbar-spacer></kendo-toolbar-spacer>\r\n  <kendo-toolbar-button text=\"Save\" showText=\"both\" [svgIcon]=\"saveIcon\" showIcon=\"both\" themeColor=\"success\"\r\n    [disabled]=\"false\" (click)=\"onSave()\">\r\n  </kendo-toolbar-button>\r\n</kendo-toolbar>\r\n\r\n  <form [formGroup]=\"baseForm\" (ngSubmit)=\"onSubmit(model)\">\r\n    <formly-form [form]=\"baseForm\" [fields]=\"fields\" [model]=\"model\" [options]=\"options\"></formly-form>\r\n  </form>\r\n<div kendoDialogContainer></div>", styles: ["::ng-deep formly-field{padding:.3rem;display:block}\n"], 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: i9.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i9.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: i9.ToolBarSpacerComponent, selector: "kendo-toolbar-spacer", exportAs: ["kendoToolBarSpacer"] }, { kind: "directive", type: i2$1.DialogContainerDirective, selector: "[kendoDialogContainer]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: RdictCrudComponent, decorators: [{
             type: Component,
@@ -1144,6 +1166,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['class']
             }] } });
 
+/** Main mapper */
+function kendoToFilterRequest(e) {
+    const { skip = 0, take = 0, sort, filter, group } = e ?? e;
+    const page_size = take || undefined;
+    const page = take ? Math.floor(skip / take) + 1 : undefined;
+    return {
+        page,
+        page_size,
+        sorts: kendoSortsToDict(sort),
+        filters: kendoFilterToSieve(filter),
+        group_by: kendoGroupToArray(group)
+        // distinctColumns: fill if you use a “distinct” mode in your API
+    };
+}
+/* ------------------------------- Sorts ---------------------------------- */
+function kendoSortsToDict(sorts) {
+    if (!sorts?.length)
+        return undefined;
+    const result = {};
+    for (const s of sorts) {
+        if (!s.field)
+            continue;
+        result[s.field] = (s.dir ?? 'asc');
+    }
+    return result;
+}
+/* ---------------- GroupBy as array ---------------- */
+function kendoGroupToArray(group) {
+    if (!group?.length)
+        return undefined;
+    return group.map((g) => g.field);
+}
+/* ------------------------------ Filters --------------------------------- */
+/**
+ * Converts Kendo filter tree to a Sieve filter string.
+ * Notes (Sieve):
+ * - Clause is {Name}{Operator}{Value}, AND with commas, simple OR via:
+ *   - multiple names: (Field1|Field2)opValue
+ *   - multiple values: Field@=a|b
+ * - Operators: ==, !=, >, <, >=, <=, @= (contains), _= (starts), _-= (ends),
+ *   and case-insensitive variants like @=* etc. :contentReference[oaicite:1]{index=1}
+ */
+function kendoFilterToSieve(node) {
+    if (!node)
+        return undefined;
+    if (isLeaf(node)) {
+        const op = mapOperator(node.operator, !!node.ignoreCase, node.value);
+        if (!op)
+            return undefined; // unsupported operator (e.g., isnull/isnotnull)
+        const name = node.field;
+        const value = formatSieveValue(node.value);
+        return `${name}${op}${value}`;
+    }
+    // Composite: best-effort mapping.
+    // AND → comma-join
+    // OR  → try to compress same-field same-op OR into value pipes; otherwise fall back to (Field1|Field2)opValue when viable.
+    const parts = node.filters.map((f) => kendoFilterToSieve(f)).filter(Boolean);
+    if (!parts.length)
+        return undefined;
+    if (node.logic === 'and') {
+        return parts.join(',');
+    }
+    // OR logic – try simple compressions; if not possible, return a comma-joined set of grouped OR chunks when possible.
+    // Heuristic: if all parts share the same {field,op} with different values → merge via value pipes.
+    const parsed = parts.map(parseClause).filter(Boolean);
+    if (parsed.length && allSame(parsed, (c) => `${c.name}|${c.op}`)) {
+        const { name, op } = parsed[0];
+        const pipedValues = parsed.map((c) => c.value).join('|');
+        return `${name}${op}${pipedValues}`;
+    }
+    // If all parts share same {op,value} but different fields → (A|B)opV
+    if (parsed.length && allSame(parsed, (c) => `${c.op}|${c.value}`)) {
+        const fields = parsed.map((c) => c.name).join('|');
+        const { op, value } = parsed[0];
+        return `(${fields})${op}${value}`;
+    }
+    // Fallback: join with Sieve’s AND (comma). (General mixed OR trees can’t always be represented in Sieve DSL.
+    // If you need exact semantics, consider adding a custom Sieve filter.) :contentReference[oaicite:2]{index=2}
+    return parts.join(',');
+}
+/* ----------------------------- Helpers ---------------------------------- */
+function isLeaf(f) {
+    return f.filters === undefined;
+}
+// Map Kendo operators to Sieve operators (case-insensitive variants when ignoreCase=true)
+function mapOperator(kendoOp, ignoreCase, value) {
+    // Kendo operators list: eq, neq, lt, lte, gt, gte, contains, doesnotcontain, startswith, endswith,
+    // isnull, isnotnull, isempty, isnotempty
+    // Sieve operators: ==, !=, <, <=, >, >=, @=, !@=, _=, _-=, and their * variants for case-insensitive. :contentReference[oaicite:3]{index=3}
+    const strOps = {
+        contains: '@=',
+        doesnotcontain: '!@=',
+        startswith: '_=',
+        endswith: '_-='
+    };
+    const base = (() => {
+        switch (kendoOp) {
+            case 'eq':
+                return '==';
+            case 'neq':
+                return '!=';
+            case 'lt':
+                return '<';
+            case 'lte':
+                return '<=';
+            case 'gt':
+                return '>';
+            case 'gte':
+                return '>=';
+            case 'contains':
+                return strOps.contains;
+            case 'doesnotcontain':
+                return strOps.doesnotcontain;
+            case 'startswith':
+                return strOps.startswith;
+            case 'endswith':
+                return strOps.endswith;
+            case 'isempty':
+                return '=='; // value should be ''
+            case 'isnotempty':
+                return '!='; // value should be ''
+            // isnull / isnotnull don’t have a native Sieve op. Recommend a custom filter on the API.
+            case 'isnull':
+            case 'isnotnull':
+                return undefined;
+            default:
+                return undefined;
+        }
+    })();
+    if (!base)
+        return undefined;
+    // Promote to case-insensitive *only* for string-y ops when requested
+    const isStringy = ['@=', '!@=', '_=', '_-='].includes(base) || typeof value === 'string';
+    if (ignoreCase && isStringy) {
+        // Sieve: case-insensitive variants add a trailing * (e.g., @=*). :contentReference[oaicite:4]{index=4}
+        return base.endsWith('*') ? base : `${base}*`;
+    }
+    return base;
+}
+function formatSieveValue(v) {
+    if (v === '' || v === null || v === undefined)
+        return '';
+    if (v instanceof Date)
+        return toISO(v);
+    // Kendo may send dates as strings – try to detect ISO-like and pass through
+    if (typeof v === 'string' && isDateLike(v))
+        return v;
+    if (typeof v === 'string')
+        return escapeSieve(v);
+    if (typeof v === 'number' || typeof v === 'bigint' || typeof v === 'boolean')
+        return String(v);
+    // Arrays can appear with “in” like semantics via OR; join with pipes
+    if (Array.isArray(v))
+        return v.map(formatSieveValue).join('|');
+    // Fallback to JSON (rare)
+    return escapeSieve(JSON.stringify(v));
+}
+function toISO(d) {
+    // Prefer full ISO so the API can parse reliably
+    // return new Date(d).toISOString();
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    return `${y}-${m}-${day}T${hh}:${mm}:${ss}`;
+}
+function isDateLike(s) {
+    // very lenient check
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(s);
+}
+function escapeSieve(s) {
+    // Sieve escaping: backslash to escape commas and pipes (and the backslash itself). :contentReference[oaicite:5]{index=5}
+    return s.replace(/([\\,|])/g, '\\$1');
+}
+/** Parses "NameOPValue" (no commas) into {name,op,value} */
+function parseClause(clause) {
+    // Operators (longer first)
+    const ops = ['==*', '!=*', '@=*', '!@=*', '_=*', '!_=*', '_-=*', '==', '!=', '>=', '<=', '>', '<', '@=', '!@=', '_=', '_-='];
+    for (const op of ops) {
+        const idx = clause.indexOf(op);
+        if (idx > 0) {
+            return {
+                name: clause.slice(0, idx),
+                op,
+                value: clause.slice(idx + op.length)
+            };
+        }
+    }
+    return null;
+}
+function allSame(arr, key) {
+    if (!arr.length)
+        return true;
+    const k0 = key(arr[0]);
+    return arr.every((a) => key(a) === k0);
+}
+
 class RdictTableTitle extends ToolBarToolComponent {
     constructor() {
         super();
@@ -1179,7 +1400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
             }] } });
 
 class GenericRdictTableComponent {
-    constructor(router, route, translate, injector, localFileService, rdict, dialogService) {
+    constructor(router, route, translate, injector, localFileService, rdict, dialogService, intl) {
         this.router = router;
         this.route = route;
         this.translate = translate;
@@ -1187,6 +1408,7 @@ class GenericRdictTableComponent {
         this.localFileService = localFileService;
         this.rdict = rdict;
         this.dialogService = dialogService;
+        this.intl = intl;
         this.editOnClick = false;
         this.editOnDblClick = false;
         this.data = [];
@@ -1211,6 +1433,11 @@ class GenericRdictTableComponent {
         this.svgEdit = pencilIcon;
         this.svgDelete = trashIcon;
         this.svgAdd = plusIcon;
+        this.state = {
+            skip: 0,
+            take: 30
+        };
+        this.stateChange = new BehaviorSubject(this.state);
     }
     async ngOnInit() {
         this.setValueFromSnapshot(this, this.route.snapshot, 'model', null);
@@ -1219,7 +1446,7 @@ class GenericRdictTableComponent {
         this.setValueFromSnapshot(this, this.route.snapshot, 'searchFields', null);
         this.setValueFromSnapshot(this, this.route.snapshot, 'customInclude', null);
         this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSort', null);
-        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSortDirection', '');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'defaultSortDirection', null);
         this.setValueFromSnapshot(this, this.route.snapshot, 'deletePropertyName', 'name');
         this.setValueFromSnapshot(this, this.route.snapshot, 'defaultFilter', null);
         this.setValueFromSnapshot(this, this.route.snapshot, 'showHeader', true);
@@ -1231,6 +1458,9 @@ class GenericRdictTableComponent {
         this.setValueFromSnapshot(this, this.route.snapshot, 'editOnDblClick', false);
         this.setValueFromSnapshot(this, this.route.snapshot, 'editColumn', null);
         this.setValueFromSnapshot(this, this.route.snapshot, 'fileLayout', '');
+        this.setValueFromSnapshot(this, this.route.snapshot, 'useView', false);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'pageable', false);
+        this.setValueFromSnapshot(this, this.route.snapshot, 'pageSizes ', [10, 20, 30, 50, 100]);
         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 !== '');
@@ -1244,9 +1474,20 @@ class GenericRdictTableComponent {
                 // Perform actions or update component as needed
             }
         });
+        if (this.useView) {
+            if (this.defaultSort) {
+                this.state.sort = this.defaultSort;
+            }
+            await this.getParentDict();
+        }
         this.getListLayout();
         this.loadData();
     }
+    async getParentDict() {
+        const lastDotIndex = this.dictPath.lastIndexOf('.');
+        const parentPath = lastDotIndex !== -1 ? this.dictPath.substring(0, lastDotIndex) : this.dictPath;
+        this.parentDict = await this.rdict.asyncGet(parentPath);
+    }
     setValueFromSnapshot(component, snapshot, key, defaultValue) {
         if (component[key] === undefined) {
             let dataFromSnapshot = snapshot.data[key];
@@ -1256,7 +1497,11 @@ class GenericRdictTableComponent {
             component[key] = dataFromSnapshot !== undefined ? dataFromSnapshot : defaultValue;
         }
     }
-    async loadData() {
+    loadData() {
+        if (this.useView) {
+            this.loadDataView();
+            return;
+        }
         this.rdict.get$(this.dictPath).subscribe({
             next: (rdictData) => {
                 this.tableRdict = rdictData;
@@ -1282,6 +1527,22 @@ class GenericRdictTableComponent {
             error: (err) => console.error('Error:', err.message)
         });
     }
+    loadDataView() {
+        //Get the parent path
+        // const request = {
+        //   filters: '',
+        //   sorts: { import_date: 'desc' },
+        //   page: Math.floor(this.state.skip / this.state.take) + 1,
+        //   page_size: this.state.take
+        // };
+        const request = kendoToFilterRequest(this.state);
+        this.parentDict.getFilteredView(this.model, request).subscribe({
+            next: (view) => {
+                // console.log('View:', view);
+                this.dataSource = view;
+            }
+        });
+    }
     onChangeEvent(changes) {
         if (changes) {
             const key = changes?.key;
@@ -1357,6 +1618,7 @@ class GenericRdictTableComponent {
                 }
                 return item;
             });
+            // console.log('All columns:', this.allColumns);
             //Get reference columns
             const referenceColumns = this.allColumns.filter((item) => item.reference !== undefined && item.reference !== null);
             if (referenceColumns.length > 0) {
@@ -1417,17 +1679,69 @@ class GenericRdictTableComponent {
         }
         if (column.type == 'reference') {
             const value = this.referenceData.get(column.reference)?.get(item[column.propertyName])?.[column.referenceProperty] ?? item[column.propertyName];
+            return this.formatValue(value, column.format);
             return value;
         }
         else {
-            return item[column.propertyName];
+            return this.formatValue(item[column.propertyName], column.format);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericRdictTableComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: i0.Injector }, { token: i4.LocalFileService }, { token: ReactiveDictionary }, { token: MaterialDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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 *ngIf=\"hasAdd\" 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) }}\r\n      </a>\r\n    </ng-template>\r\n        \r\n    <!-- <ng-template *ngIf=\"column.type=='reference'; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue$(dataItem,column) | async }}\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) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column *ngIf=\"canEdit && canDelete\" 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 *ngIf=\"canEdit\" kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button *ngIf=\"canDelete\" 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: 
+    filterChange(filter) {
+        // console.log(filter);
+        // this.loadData();
+    }
+    dataStateChange(state) {
+        this.state = state;
+        this.loadData();
+    }
+    pageChange(state) {
+        console.log('State:', state);
+        this.stateChange.next(state);
+    }
+    formatValue(value, format) {
+        if (value === null || value === undefined || !format) {
+            return value ?? '';
+        }
+        // Accept both "{0:...}" and plain "..." patterns
+        const inner = this.extractFormat(format);
+        // Heuristics: date vs number
+        if (this.looksLikeDateFormat(inner)) {
+            const d = value instanceof Date ? value : new Date(value);
+            return isNaN(d.getTime()) ? value : this.intl.formatDate(d, inner);
+        }
+        const num = typeof value === 'number' ? value : Number(value);
+        if (!Number.isNaN(num)) {
+            // supports "n", "n2", "c", "p", etc. and custom patterns
+            return this.intl.formatNumber(num, inner);
+        }
+        // Fallback: return as-is if not a date/number
+        return value;
+    }
+    extractFormat(fmt) {
+        const m = fmt.match(/^\{0:([^}]+)\}$/);
+        return m ? m[1] : fmt;
+    }
+    looksLikeDateFormat(f) {
+        // crude but effective: typical date tokens
+        return /d|M|y|H|h|m|s|E|a/.test(f) && !/^[cnp]/i.test(f);
+    }
+    inferFilterType(col) {
+        if (!col)
+            return 'text';
+        const f = this.extractFormat(col.format || '');
+        if (this.looksLikeDateFormat(f))
+            return 'date';
+        if (/^(n\d*|c|p\d*|n)$/i.test(f))
+            return 'numeric'; // Kendo number patterns
+        if (col.type === 'boolean')
+            return 'boolean';
+        return 'text';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: GenericRdictTableComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i2.TranslateService }, { token: i0.Injector }, { token: i4.LocalFileService }, { token: ReactiveDictionary }, { token: MaterialDialogService }, { token: i6$2.IntlService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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  (filterChange)=\"filterChange($event)\"\r\n  (dataStateChange)=\"dataStateChange($event)\"\r\n   \r\n   [pageable]=\"{pageSizes:pageSizes}\"  [pageSize]=\"state.take\"\r\n    [skip]=\"state.skip\"  [sort]=\"state.sort\" >\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 *ngIf=\"hasAdd\" 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\" [format]=\"column.format\" [filter]=\"inferFilterType(column)\">\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) }}\r\n      </a>\r\n    </ng-template>\r\n        \r\n    <!-- <ng-template *ngIf=\"column.type=='reference'; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue$(dataItem,column) | async }}\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) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column *ngIf=\"canEdit && canDelete\" 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 *ngIf=\"canEdit\" kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button *ngIf=\"canDelete\" 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: i7$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7$1.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: 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", "gridResizable", "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 }); }
+                TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: i8.GridComponent, selector: "kendo-grid", inputs: ["data", "pageSize", "height", "rowHeight", "detailRowHeight", "skip", "scrollable", "selectable", "sort", "size", "trackBy", "filter", "group", "virtualColumns", "filterable", "sortable", "pageable", "groupable", "gridResizable", "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: i8.GridToolbarFocusableDirective, selector: "        [kendoGridToolbarFocusable],        [kendoGridAddCommand],        [kendoGridCancelCommand],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridExcelCommand],        [kendoGridPDFCommand]    " }, { kind: "component", type: i8.ColumnComponent, selector: "kendo-grid-column", inputs: ["field", "format", "sortable", "groupable", "editor", "filter", "filterable", "editable"] }, { kind: "directive", type: i8.FocusableDirective, selector: "[kendoGridFocusable],        [kendoGridEditCommand],        [kendoGridRemoveCommand],        [kendoGridSaveCommand],        [kendoGridCancelCommand],        [kendoGridSelectionCheckbox]    ", inputs: ["kendoGridFocusable"] }, { kind: "component", type: i8.CommandColumnComponent, selector: "kendo-grid-command-column" }, { kind: "directive", type: i8.CellTemplateDirective, selector: "[kendoGridCellTemplate]" }, { kind: "component", type: i8.EditCommandDirective, selector: "[kendoGridEditCommand]" }, { kind: "component", type: i8.RemoveCommandDirective, selector: "[kendoGridRemoveCommand]" }, { kind: "directive", type: i8.AddCommandToolbarDirective, selector: "[kendoGridAddTool]" }, { kind: "component", type: i9.ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: i9.ToolbarCustomMessagesComponent, selector: "kendo-toolbar-messages" }, { kind: "component", type: i9.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: i9.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.2.8", ngImport: i0, type: GenericRdictTableComponent, decorators: [{
             type: Component,
@@ -1443,8 +1757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         KENDO_BUTTONS,
                         KENDO_DIALOG,
                         RdictTableTitle
-                    ], 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 *ngIf=\"hasAdd\" 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) }}\r\n      </a>\r\n    </ng-template>\r\n        \r\n    <!-- <ng-template *ngIf=\"column.type=='reference'; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue$(dataItem,column) | async }}\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) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column *ngIf=\"canEdit && canDelete\" 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 *ngIf=\"canEdit\" kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button *ngIf=\"canDelete\" 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.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: i0.Injector }, { type: i4.LocalFileService }, { type: ReactiveDictionary }, { type: MaterialDialogService }], 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  (filterChange)=\"filterChange($event)\"\r\n  (dataStateChange)=\"dataStateChange($event)\"\r\n   \r\n   [pageable]=\"{pageSizes:pageSizes}\"  [pageSize]=\"state.take\"\r\n    [skip]=\"state.skip\"  [sort]=\"state.sort\" >\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 *ngIf=\"hasAdd\" 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\" [format]=\"column.format\" [filter]=\"inferFilterType(column)\">\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) }}\r\n      </a>\r\n    </ng-template>\r\n        \r\n    <!-- <ng-template *ngIf=\"column.type=='reference'; else defaultTemplate\" kendoGridCellTemplate let-dataItem>\r\n      <a href=\"javascript:void(0)\" (click)=\"edit(dataItem)\" class=\"edit-link\">\r\n        {{ getCellValue$(dataItem,column) | async }}\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) }}\r\n    </ng-template>\r\n  </kendo-grid-column>\r\n\r\n\r\n  <kendo-grid-command-column *ngIf=\"canEdit && canDelete\" 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 *ngIf=\"canEdit\" kendoGridEditCommand [svgIcon]=\"svgEdit\" themeColor=\"light\"></button>\r\n      <button *ngIf=\"canDelete\" 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.Router }, { type: i1.ActivatedRoute }, { type: i2.TranslateService }, { type: i0.Injector }, { type: i4.LocalFileService }, { type: ReactiveDictionary }, { type: MaterialDialogService }, { type: i6$2.IntlService }], propDecorators: { showSerach: [{
                 type: Input
             }], searchFields: [{
                 type: Input