udp-stencil-component-library 1.0.0

package/dist/collection/components/my-component/UI/grid/new-grid/datasources/apiMethodDatasource.js

@@ -0,0 +1,71 @@
+import { FilterOperators } from "../../../../../../udp-utilities/grid/models/udp-models";
+import { executeQueryAdHoc } from "../../../../../../udp-utilities/api-udp/apiUtils";
+import { ConfigService } from "../../../../../../udp-utilities/api-config/index";
+export const apiMethodDataSource = (apiMethodId, customSearchObject) => {
+    return {
+        async getRows(params) {
+            const { startRow, endRow, filterModel, sortModel } = params.request;
+            const pageSize = endRow - startRow; // Dynamic page size from grid
+            const pageNumber = Math.floor(startRow / pageSize) + 1;
+            const searchObject = Object.assign({ pageNumber: pageNumber, pageSize: pageSize, filterElements: [], filterGroups: [], orderElements: [], groupingType: '', groupProperty: [], groupOperationList: [], eagerLoad: false, logicalSearchOperator: 1 }, customSearchObject);
+            //1. convert ag grid sort model to udp search object
+            if (Array.isArray(sortModel) && sortModel.length > 0) {
+                const orderElements = searchObject.orderElements || [];
+                sortModel.forEach(sortItem => {
+                    if (sortItem && sortItem.colId) {
+                        const formattedPropertyName = sortItem.colId.charAt(0).toUpperCase() + sortItem.colId.slice(1);
+                        const element = orderElements.find(element => element.sortColumn === formattedPropertyName);
+                        if (element) {
+                            element.sortDirection = sortItem.sort.toUpperCase();
+                        }
+                        else {
+                            orderElements.push({
+                                sortColumn: formattedPropertyName,
+                                sortDirection: sortItem.sort.toUpperCase(),
+                            });
+                        }
+                    }
+                });
+            }
+            //2. convert ag grid filter model to udp search object
+            if (Object.keys(filterModel).length) {
+                const filterElements = searchObject.filterElements || [];
+                Object.keys(filterModel).forEach(key => {
+                    const filterItem = filterModel[key];
+                    const formattedPropertyName = key.charAt(0).toUpperCase() + key.slice(1);
+                    const element = filterElements.find(element => element.searchField === formattedPropertyName);
+                    if (element) {
+                        element.searchValue = filterItem.filter;
+                        element.searchOperator = FilterOperators[filterItem.type];
+                    }
+                    else {
+                        filterElements.push({
+                            searchField: formattedPropertyName,
+                            searchValue: filterItem.filter,
+                            searchOperator: FilterOperators[filterItem.type],
+                            searchValueType: 1,
+                            groupId: 1,
+                        });
+                    }
+                });
+            }
+            const response = await executeQueryAdHoc(searchObject, apiMethodId, ConfigService.integrationV1ApiUrl, false).catch(e => {
+                console.log(e);
+            });
+            const rowData = response;
+            if (!rowData || rowData.pageList.length === 0) {
+                params.success({
+                    rowData: [],
+                    rowCount: 0,
+                });
+            }
+            else {
+                params.success({
+                    rowData: rowData.pageList,
+                    rowCount: parseInt(rowData.total),
+                });
+            }
+        },
+    };
+};
+//# sourceMappingURL=apiMethodDatasource.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/datasources/apiMethodDatasource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiMethodDatasource.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/grid/new-grid/datasources/apiMethodDatasource.ts"],"names":[],"mappings":"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","sourcesContent":["import { FilterOperators } from '../../../../../../udp-utilities/grid/models/udp-models';\nimport { executeQueryAdHoc } from '../../../../../../udp-utilities/api-udp/apiUtils';\nimport { ConfigService } from 'src/udp-utilities/api-config';\nimport { Search } from '../interfaces/searchObject';\n\nexport const apiMethodDataSource = (apiMethodId: string, customSearchObject: Search) => {\n  return {\n    async getRows(params) {\n      const { startRow, endRow, filterModel, sortModel } = params.request;\n\n      const pageSize = endRow - startRow; // Dynamic page size from grid\n      const pageNumber = Math.floor(startRow / pageSize) + 1;\n      const searchObject: Search = {\n        pageNumber: pageNumber,\n        pageSize: pageSize,\n        filterElements: [],\n        filterGroups: [],\n        orderElements: [],\n        groupingType: '',\n        groupProperty: [],\n        groupOperationList: [],\n        eagerLoad: false,\n        logicalSearchOperator: 1,\n        ...customSearchObject,\n      };\n\n      //1. convert ag grid sort model to udp search object\n      if (Array.isArray(sortModel) && sortModel.length > 0) {\n        const orderElements = searchObject.orderElements || [];\n        sortModel.forEach(sortItem => {\n          if (sortItem && sortItem.colId) {\n            const formattedPropertyName = sortItem.colId.charAt(0).toUpperCase() + sortItem.colId.slice(1);\n            const element = orderElements.find(element => element.sortColumn === formattedPropertyName);\n            if (element) {\n              element.sortDirection = sortItem.sort.toUpperCase();\n            } else {\n              orderElements.push({\n                sortColumn: formattedPropertyName,\n                sortDirection: sortItem.sort.toUpperCase(),\n              });\n            }\n          }\n        });\n      }\n\n      //2. convert ag grid filter model to udp search object\n      if (Object.keys(filterModel).length) {\n        const filterElements = searchObject.filterElements || [];\n        Object.keys(filterModel).forEach(key => {\n          const filterItem = filterModel[key];\n          const formattedPropertyName = key.charAt(0).toUpperCase() + key.slice(1);\n          const element = filterElements.find(element => element.searchField === formattedPropertyName);\n          if (element) {\n            element.searchValue = filterItem.filter;\n            element.searchOperator = FilterOperators[filterItem.type];\n          } else {\n            filterElements.push({\n              searchField: formattedPropertyName,\n              searchValue: filterItem.filter,\n              searchOperator: FilterOperators[filterItem.type],\n              searchValueType: 1,\n              groupId: 1,\n            });\n          }\n        });\n      }\n\n      const response = await executeQueryAdHoc(\n        searchObject,\n        apiMethodId,\n        ConfigService.integrationV1ApiUrl,\n        false\n      ).catch(e => {\n        console.log(e);\n      });\n\n      const rowData = response;\n\n      if (!rowData || rowData.pageList.length === 0) {\n        params.success({\n          rowData: [],\n          rowCount: 0,\n        });\n      } else {\n        params.success({\n          rowData: rowData.pageList,\n          rowCount: parseInt(rowData.total),\n        });\n      }\n    },\n  };\n};\n"]}

package/dist/collection/components/my-component/UI/grid/new-grid/grid-header.js

@@ -0,0 +1,38 @@
+import { h } from "@stencil/core";
+export class GridHeader {
+    render() {
+        const cfg = this.headerConfig;
+        return (h("div", { key: 'aab79872fd62f1bbcad0231717e66a6e505da3f9', class: "auto-header" }, cfg.title && h("h3", { key: '23442aec557c5672d27a2d59d6806564037b7583' }, cfg.title)));
+    }
+    static get is() { return "grid-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "headerConfig": {
+                "type": "unknown",
+                "attribute": "header-config",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderConfig",
+                    "resolved": "HeaderConfig",
+                    "references": {
+                        "HeaderConfig": {
+                            "location": "import",
+                            "path": "./interfaces/grid",
+                            "id": "src/components/my-component/UI/grid/new-grid/interfaces/grid.ts::HeaderConfig"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=grid-header.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/grid-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-header.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/new-grid/grid-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,UAAU;IAGrB,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;QAC9B,OAAO,CACL,4DAAK,KAAK,EAAC,aAAa,IACrB,GAAG,CAAC,KAAK,IAAI,6DAAK,GAAG,CAAC,KAAK,CAAM,CAC9B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { HeaderConfig } from './interfaces/grid';\n\n@Component({\n  tag: 'grid-header',\n  shadow: true,\n})\nexport class GridHeader {\n  @Prop() headerConfig!: HeaderConfig;\n\n  render() {\n    const cfg = this.headerConfig;\n    return (\n      <div class=\"auto-header\">\n        {cfg.title && <h3>{cfg.title}</h3>}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/new-grid/interfaces/grid.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=grid.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/interfaces/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/grid/new-grid/interfaces/grid.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderConfig {\n    title?: string;\n    showExport?: boolean;\n    showImport?: boolean;\n    showExpand?: boolean;\n    extraActions?: Array<{\n      label: string;\n      callback: () => void;\n    }>;\n  }"]}

package/dist/collection/components/my-component/UI/grid/new-grid/interfaces/searchObject.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=searchObject.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/interfaces/searchObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchObject.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/grid/new-grid/interfaces/searchObject.ts"],"names":[],"mappings":"","sourcesContent":["export interface SearchFilters {\n  searchField: string;\n  searchValue: string;\n  searchOperator: string;\n  searchValueType: number;\n  groupId: number | null | undefined;\n}\n\nexport interface SearchFilterGroups {\n  groupId: number;\n  groupOperator: number;\n  parentGroupId: number;\n}\n\nexport interface FilterObject {\n  filterType: string;\n  type: string;\n  filter: string;\n}\n\nexport interface GroupOperation {\n  operation: string; //i.e. SUM, AVG, COUNT, MIN, MAX\n  property: string;\n}\n\nexport interface OrderElement {\n  sortColumn: string;\n  sortDirection: string;\n}\n\nexport interface Search {\n  eagerLoad?: boolean;\n  pageNumber: number;\n  pageSize: number;\n  groupingType?: string;\n  groupProperty?: string[];\n  groupOperationList?: GroupOperation[];\n  orderElements: OrderElement[];\n  filterElements: SearchFilters[];\n  filterGroups: SearchFilterGroups[];\n  logicalSearchOperator?: number;\n}\n"]}

package/dist/collection/components/my-component/UI/grid/new-grid/server-side-grid.js

@@ -0,0 +1,127 @@
+import { h } from "@stencil/core";
+import { ModuleRegistry } from "ag-grid-community-v33";
+import { ServerSideRowModelModule } from "ag-grid-enterprise-v33";
+ModuleRegistry.registerModules([ServerSideRowModelModule]);
+export class ServerSideGrid {
+    constructor() {
+        this.columnDefs = [];
+        this.serverConfig = {
+            rowModelType: 'serverSide',
+            //paginationAutoPageSize: true
+            paginationPageSize: 5, //number of rows per page on grid
+            cacheBlockSize: 5 //number of rows the server requests per request
+        };
+        this.headerConfig = {
+            title: 'Server-Side',
+        };
+    }
+    updateColumnDefs() {
+        if (this.gridApi) {
+            this.gridApi.setGridOption('columnDefs', this.columnDefs);
+        }
+    }
+    updateDataSource() {
+        if (this.gridApi) {
+            this.gridApi.setGridOption('serverSideDatasource', this.dataSource);
+        }
+    }
+    handleServerSideGridReady(event) {
+        this.gridApi = event.detail;
+        this.serverSideGridReady.emit(this.gridApi);
+    }
+    render() {
+        return h("ag-grid-base", { key: '7a92bc450fca5ded4bbcefa1d3806208844786fb', gridConfig: this.serverConfig, headerConfig: this.headerConfig, onGridReady: e => this.handleServerSideGridReady(e) });
+    }
+    static get is() { return "server-side-grid"; }
+    static get properties() {
+        return {
+            "columnDefs": {
+                "type": "unknown",
+                "attribute": "column-defs",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<ColDef>",
+                    "resolved": "ColDef<any, any>[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "ColDef": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::ColDef"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "dataSource": {
+                "type": "unknown",
+                "attribute": "data-source",
+                "mutable": false,
+                "complexType": {
+                    "original": "IServerSideDatasource",
+                    "resolved": "IServerSideDatasource<any>",
+                    "references": {
+                        "IServerSideDatasource": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::IServerSideDatasource"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "serverSideGridReady",
+                "name": "serverSideGridReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "GridApi",
+                    "resolved": "GridApi<any>",
+                    "references": {
+                        "GridApi": {
+                            "location": "import",
+                            "path": "ag-grid-community-v33",
+                            "id": "../../node_modules/.pnpm/ag-grid-community@33.0.0/node_modules/ag-grid-community/dist/types/src/main.d.ts::GridApi"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "columnDefs",
+                "methodName": "updateColumnDefs"
+            }, {
+                "propName": "dataSource",
+                "methodName": "updateDataSource"
+            }];
+    }
+}
+//# sourceMappingURL=server-side-grid.js.map

package/dist/collection/components/my-component/UI/grid/new-grid/server-side-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-side-grid.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/new-grid/server-side-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAuD,MAAM,uBAAuB,CAAC;AAC5G,OAAO,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAElE,cAAc,CAAC,eAAe,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC;AAM3D,MAAM,OAAO,cAAc;IAJ3B;QAKU,eAAU,GAAkB,EAAE,CAAC;QA0B/B,iBAAY,GAAgB;YAClC,YAAY,EAAE,YAAY;YAC1B,8BAA8B;YAC9B,kBAAkB,EAAE,CAAC,EAAE,iCAAiC;YACxD,cAAc,EAAE,CAAC,CAAC,gDAAgD;SACnE,CAAC;QAEM,iBAAY,GAAG;YACrB,KAAK,EAAE,aAAa;SACrB,CAAC;KAKH;IAhCC,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,sBAAsB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAEO,yBAAyB,CAAC,KAA2B;QAC3D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC;IAaD,MAAM;QACJ,OAAO,qEAAc,UAAU,EAAE,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAAI,CAAC;IAC/I,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\nimport { ModuleRegistry, GridOptions, GridApi, ColDef, IServerSideDatasource } from 'ag-grid-community-v33';\nimport { ServerSideRowModelModule } from 'ag-grid-enterprise-v33';\n\nModuleRegistry.registerModules([ServerSideRowModelModule]);\n\n@Component({\n  tag: 'server-side-grid',\n  shadow: false,\n})\nexport class ServerSideGrid {\n  @Prop() columnDefs: Array<ColDef> = [];\n  @Prop() dataSource!: IServerSideDatasource;\n\n  @Event() serverSideGridReady!: EventEmitter<GridApi>;\n\n  private gridApi!: GridApi;\n\n  @Watch('columnDefs')\n  updateColumnDefs() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\n    }\n  }\n\n  @Watch('dataSource')\n  updateDataSource() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('serverSideDatasource', this.dataSource);\n    }\n  }\n\n  private handleServerSideGridReady(event: CustomEvent<GridApi>) {\n    this.gridApi = event.detail;\n    this.serverSideGridReady.emit(this.gridApi);\n  }\n\n  private serverConfig: GridOptions = {\n    rowModelType: 'serverSide',\n    //paginationAutoPageSize: true\n    paginationPageSize: 5, //number of rows per page on grid\n    cacheBlockSize: 5 //number of rows the server requests per request\n  };\n\n  private headerConfig = {\n    title: 'Server-Side',\n  };\n\n  render() {\n    return <ag-grid-base gridConfig={this.serverConfig} headerConfig={this.headerConfig} onGridReady={e => this.handleServerSideGridReady(e)} />;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/actions-renderer.js

@@ -0,0 +1,40 @@
+import { getIconFromName } from "../../data-display/icons/iconUtils";
+export default class ActionsRenderer {
+    constructor() {
+        this.actionList = [];
+    }
+    init(params) {
+        var _a;
+        this.eGui = document.createElement('div');
+        this.eGui.style.cssText = `display: flex;
+      width: 100%;
+      gap: 4px;
+      justify-content: center;
+    `;
+        if ((params === null || params === void 0 ? void 0 : params.hideActions) && (params === null || params === void 0 ? void 0 : params.hideActions(params === null || params === void 0 ? void 0 : params.node))) {
+            return;
+        }
+        this.actionList = params === null || params === void 0 ? void 0 : params.actionList;
+        (_a = this.actionList) === null || _a === void 0 ? void 0 : _a.forEach(action => {
+            var _a;
+            const disabledAction = (action === null || action === void 0 ? void 0 : action.checkDisabled) ? action === null || action === void 0 ? void 0 : action.checkDisabled(params === null || params === void 0 ? void 0 : params.node) : (_a = action === null || action === void 0 ? void 0 : action.disabled) !== null && _a !== void 0 ? _a : false;
+            const actionTitle = (action === null || action === void 0 ? void 0 : action.getTitle) ? action === null || action === void 0 ? void 0 : action.getTitle(params === null || params === void 0 ? void 0 : params.node) : action === null || action === void 0 ? void 0 : action.title;
+            const actionButton = document.createElement('stencil-icon-button');
+            actionButton.buttonId = action === null || action === void 0 ? void 0 : action.id.toString();
+            actionButton.icon = getIconFromName(action === null || action === void 0 ? void 0 : action.iconName);
+            actionButton.tooltip = actionTitle;
+            actionButton.disabled = disabledAction;
+            actionButton.onClick = e => {
+                action === null || action === void 0 ? void 0 : action.handleOnClick(e, params === null || params === void 0 ? void 0 : params.node);
+            };
+            this.eGui.appendChild(actionButton);
+        });
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh() {
+        return true;
+    }
+}
+//# sourceMappingURL=actions-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/actions-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/actions-renderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAErE,MAAM,CAAC,OAAO,OAAO,eAAe;IAApC;QAEU,eAAU,GAAiB,EAAE,CAAC;IAuCxC,CAAC;IArCQ,IAAI,CAAC,MAAW;;QACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;;;;KAIzB,CAAC;QAEF,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAA,EAAE,CAAC;YAC7D,OAAO;QACT,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,CAAC;QACrC,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,CAAC,MAAM,CAAC,EAAE;;YAChC,MAAM,cAAc,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,EAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,mCAAI,KAAK,CAAC;YAC/G,MAAM,WAAW,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC;YACtF,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;YAEnE,YAAY,CAAC,QAAQ,GAAG,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,EAAE,CAAC,QAAQ,EAAE,CAAC;YAC9C,YAAY,CAAC,IAAI,GAAG,eAAe,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAC,CAAC;YACtD,YAAY,CAAC,OAAO,GAAG,WAAW,CAAC;YACnC,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;YACvC,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC,EAAE;gBACzB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,CAAC,CAAC,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,CAAC,CAAC;YACzC,CAAC,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\nimport { ActionItem } from '../ambient-template-grid/interfaces/gridInterfaces';\nimport { getIconFromName } from '../../data-display/icons/iconUtils';\n\nexport default class ActionsRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n  private actionList: ActionItem[] = [];\n\n  public init(params: any): void {\n    this.eGui = document.createElement('div');\n    this.eGui.style.cssText = `display: flex;\n      width: 100%;\n      gap: 4px;\n      justify-content: center;\n    `;\n\n    if (params?.hideActions && params?.hideActions(params?.node)) {\n      return;\n    }\n\n    this.actionList = params?.actionList;\n    this.actionList?.forEach(action => {\n      const disabledAction = action?.checkDisabled ? action?.checkDisabled(params?.node) : action?.disabled ?? false;\n      const actionTitle = action?.getTitle ? action?.getTitle(params?.node) : action?.title;\n      const actionButton = document.createElement('stencil-icon-button');\n\n      actionButton.buttonId = action?.id.toString();\n      actionButton.icon = getIconFromName(action?.iconName);\n      actionButton.tooltip = actionTitle;\n      actionButton.disabled = disabledAction;\n      actionButton.onClick = e => {\n        action?.handleOnClick(e, params?.node);\n      };\n\n      this.eGui.appendChild(actionButton);\n    });\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public refresh(): boolean {\n    return true;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/currency-renderer.js

@@ -0,0 +1,15 @@
+import { fortmatCurrency } from "../../../../../utils/utils";
+export default class CurrencyRenderer {
+    init(params) {
+        this.eGui = document.createElement('div');
+        const formattedCurrency = fortmatCurrency(params === null || params === void 0 ? void 0 : params.value, params === null || params === void 0 ? void 0 : params.currency, params === null || params === void 0 ? void 0 : params.locales, params === null || params === void 0 ? void 0 : params.minimumFractionDigits, params === null || params === void 0 ? void 0 : params.maximumFractionDigits);
+        this.eGui.innerHTML = formattedCurrency;
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh() {
+        return true;
+    }
+}
+//# sourceMappingURL=currency-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/currency-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/currency-renderer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,gBAAgB;IAG5B,IAAI,CAAC,MAAW;QACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,iBAAiB,GAAG,eAAe,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,qBAAqB,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,qBAAqB,CAAC,CAAC;QAC1J,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,iBAAiB,CAAC;IAC1C,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\nimport { fortmatCurrency } from 'src/utils/utils';\n\nexport default class CurrencyRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n\n  public init(params: any): void {\n    this.eGui = document.createElement('div');\n    const formattedCurrency = fortmatCurrency(params?.value, params?.currency, params?.locales, params?.minimumFractionDigits, params?.maximumFractionDigits);\n    this.eGui.innerHTML = formattedCurrency;\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public refresh(): boolean {\n    return true;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/custom-actions-renderer.js

@@ -0,0 +1,27 @@
+import ChooseItem16 from "@carbon/icons/es/choose-item/16";
+export default class CustomActionsRenderer {
+    init(params) {
+        this.eGui = document.createElement('div');
+        this.eGui.innerHTML = `
+      <stencil-icon-button></stencil-icon-button>
+    `;
+        this.iconButton = this.eGui.querySelector('stencil-icon-button');
+        // Assuming `icon` is the attribute or property used to set the icon
+        this.iconButton.icon = ChooseItem16;
+        this.iconButton = this.eGui.querySelector('stencil-icon-button');
+        // Assigning the cell value to some attribute or property
+        this.iconButton.cellValue = params.value;
+        // Use the provided onClick function if it exists
+        const onClick = params.onClick || function () { };
+        // Add an onClick event listener to the button
+        this.iconButton.addEventListener('click', () => onClick(params.value));
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.iconButton.cellValue = params.value;
+        return true;
+    }
+}
+//# sourceMappingURL=custom-actions-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/custom-actions-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-actions-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/custom-actions-renderer.tsx"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,OAAO,OAAO,qBAAqB;IAIjC,IAAI,CAAC,MAAW;QACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;KAErB,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAEjE,oEAAoE;QACpE,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,YAAY,CAAC;QAEpC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAEjE,yDAAyD;QACzD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;QAEzC,iDAAiD;QACjD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,cAAY,CAAC,CAAC;QAEhD,8CAA8C;QAC9C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACzE,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,MAAW;QACxB,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC;QACzC,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\nimport ChooseItem16 from '@carbon/icons/es/choose-item/16';\n\nexport default class CustomActionsRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n  private iconButton: any; // Use appropriate type\n\n  public init(params: any): void {\n    this.eGui = document.createElement('div');\n\n    this.eGui.innerHTML = `\n      <stencil-icon-button></stencil-icon-button>\n    `;\n\n    this.iconButton = this.eGui.querySelector('stencil-icon-button');\n  \n    // Assuming `icon` is the attribute or property used to set the icon\n    this.iconButton.icon = ChooseItem16;\n\n    this.iconButton = this.eGui.querySelector('stencil-icon-button');\n\n    // Assigning the cell value to some attribute or property\n    this.iconButton.cellValue = params.value;\n\n    // Use the provided onClick function if it exists\n    const onClick = params.onClick || function() {};\n    \n    // Add an onClick event listener to the button\n    this.iconButton.addEventListener('click', () => onClick(params.value));\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public refresh(params: any): boolean {\n    this.iconButton.cellValue = params.value;\n    return true;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/custom-renderer.js

@@ -0,0 +1,18 @@
+export default class CustomRenderer {
+    init(params) {
+        this.eGui = document.createElement('div');
+        this.eGui.innerHTML = `
+      <status-chip></status-chip>
+    `;
+        this.statusChip = this.eGui.querySelector('status-chip');
+        this.statusChip.status = params.value;
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        this.statusChip.status = params.value;
+        return true;
+    }
+}
+//# sourceMappingURL=custom-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/custom-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/custom-renderer.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,cAAc;IAI1B,IAAI,CAAC,MAAW;QACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;KAErB,CAAC;QACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;IACxC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,MAAW;QACxB,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC;QACtC,OAAO,IAAI,CAAC;IACd,CAAC;CACF","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\n\nexport default class CustomRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n  private statusChip: any; // Use appropriate type\n\n  public init(params: any): void {\n    this.eGui = document.createElement('div');\n    this.eGui.innerHTML = `\n      <status-chip></status-chip>\n    `;\n    this.statusChip = this.eGui.querySelector('status-chip');\n    this.statusChip.status = params.value;\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public refresh(params: any): boolean {\n    this.statusChip.status = params.value;\n    return true;\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/date-time-cell-renderer.js

@@ -0,0 +1,72 @@
+export default class DateTimeCellRenderer {
+    constructor() {
+        this.formatMode = 'exact'; // Default to 'relative'
+        this.locale = 'UK'; // Default locale
+    }
+    init(params) {
+        console.log('Renderer init called.'); // Check if init is called
+        this.eGui = document.createElement('div');
+        this.formatMode = params.formatMode || this.formatMode;
+        this.locale = params.locale || this.locale;
+        // If we are grouping by row and value is null we want to hide the cell
+        if (params.node.group && !params.value) {
+            this.eGui.style.display = 'none';
+        }
+        else {
+            const formattedDate = this.formatDate(params.value);
+            this.eGui.innerHTML = `${formattedDate}`;
+        }
+        this.applyStyles();
+    }
+    formatDate(dateString) {
+        console.log('formatDate called with:', dateString); // Log when formatDate is called
+        if (!dateString) {
+            return '';
+        }
+        const date = new Date(dateString);
+        if (this.formatMode === 'exact-with-time') {
+            return this.formatExactDate(date, true);
+        }
+        return this.formatExactDate(date);
+    }
+    formatExactDate(date, includeTime = false) {
+        const day = date.getDate().toString().padStart(2, '0');
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const year = date.getFullYear().toString();
+        let formatted = this.locale === 'UK' ? `${day}/${month}/${year}` : `${month}/${day}/${year}`;
+        if (includeTime) {
+            const hours = date.getHours();
+            const minutes = date.getMinutes().toString().padStart(2, '0');
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const hour12 = (hours % 12 || 12).toString().padStart(2, '0');
+            const time = `${hour12}:${minutes}${ampm}`;
+            formatted += ` ${time}`;
+        }
+        console.log(`Formatting date${includeTime ? '/time' : ''} for locale: ${this.locale}`);
+        return formatted;
+    }
+    refresh(params) {
+        console.log('Renderer refresh called.'); // Check if refresh is called
+        if (params.formatMode && params.formatMode !== this.formatMode) {
+            this.formatMode = params.formatMode;
+        }
+        if (params.locale && params.locale !== this.locale) {
+            this.locale = params.locale;
+        }
+        const formattedDate = this.formatDate(params.value);
+        this.eGui.innerHTML = `${formattedDate}`;
+        return true;
+    }
+    applyStyles() {
+        // this.eGui.style.padding = '8px';
+        this.eGui.style.textAlign = 'left';
+        this.eGui.style.cursor = 'default';
+    }
+    getGui() {
+        return this.eGui;
+    }
+    destroy() {
+        // Optionally, clean up any added listeners, etc.
+    }
+}
+//# sourceMappingURL=date-time-cell-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/date-time-cell-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-cell-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/date-time-cell-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\n\nexport default class DateTimeCellRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n  private formatMode: 'exact' | 'relative' | 'exact-with-time' = 'exact'; // Default to 'relative'\n  private locale: 'UK' | 'US' = 'UK'; // Default locale\n\n  public init(params: any): void {\n    console.log('Renderer init called.'); // Check if init is called\n    this.eGui = document.createElement('div');\n    this.formatMode = params.formatMode || this.formatMode;\n    this.locale = params.locale || this.locale;\n\n    // If we are grouping by row and value is null we want to hide the cell\n    if (params.node.group && !params.value) {\n      this.eGui.style.display = 'none';\n    } else {\n      const formattedDate = this.formatDate(params.value);\n      this.eGui.innerHTML = `${formattedDate}`;\n    }\n    this.applyStyles();\n  }\n\n  private formatDate(dateString: string): string {\n    console.log('formatDate called with:', dateString); // Log when formatDate is called\n    if (!dateString) {\n      return '';\n    }\n\n    const date = new Date(dateString);\n    if (this.formatMode === 'exact-with-time') {\n      return this.formatExactDate(date, true);\n    }\n\n    return this.formatExactDate(date);\n  }\n\n  private formatExactDate(date: Date, includeTime: boolean = false): string {\n    const day = date.getDate().toString().padStart(2, '0');\n    const month = (date.getMonth() + 1).toString().padStart(2, '0');\n    const year = date.getFullYear().toString();\n\n    let formatted = this.locale === 'UK' ? `${day}/${month}/${year}` : `${month}/${day}/${year}`;\n\n    if (includeTime) {\n      const hours = date.getHours();\n      const minutes = date.getMinutes().toString().padStart(2, '0');\n      const ampm = hours >= 12 ? 'PM' : 'AM';\n      const hour12 = (hours % 12 || 12).toString().padStart(2, '0');\n      const time = `${hour12}:${minutes}${ampm}`;\n\n      formatted += ` ${time}`;\n    }\n\n    console.log(`Formatting date${includeTime ? '/time' : ''} for locale: ${this.locale}`);\n    return formatted;\n  }\n\n  public refresh(params: any): boolean {\n    console.log('Renderer refresh called.'); // Check if refresh is called\n    if (params.formatMode && params.formatMode !== this.formatMode) {\n      this.formatMode = params.formatMode;\n    }\n    if (params.locale && params.locale !== this.locale) {\n      this.locale = params.locale;\n    }\n    const formattedDate = this.formatDate(params.value);\n    this.eGui.innerHTML = `${formattedDate}`;\n    return true;\n  }\n\n  private applyStyles(): void {\n    // this.eGui.style.padding = '8px';\n    this.eGui.style.textAlign = 'left';\n    this.eGui.style.cursor = 'default';\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public destroy(): void {\n    // Optionally, clean up any added listeners, etc.\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/grid/renderers/email-cell-renderer.js

@@ -0,0 +1,52 @@
+//import { SharedContext } from './sharedContext'; // Ensure the path is correct
+export default class EmailCellRenderer {
+    init(params) {
+        this.eGui = document.createElement('div');
+        // Set the cell's content with the arrow character appended
+        this.eGui.innerHTML = `${params.value} <span style="padding-left: 5px; color: blue ">🡕</span>`;
+        // Style the cell
+        this.applyStyles();
+        // Retrieve the value from another cell in the same row (update 'otherField' accordingly)
+        //this.otherCellValue = params.data.contactID;
+        // Create a click listener that calls the shared callback with the other cell's value
+        //this.clickListener = () => SharedContext.myClickCallback(this.otherCellValue);
+        // Add the click event listener to the cell
+        this.eGui.addEventListener('click', this.clickListener);
+    }
+    applyStyles() {
+        // Apply your desired styling here
+        this.eGui.style.backgroundColor = '#f0f0f0'; // Light grey background
+        this.eGui.style.borderRadius = '50px'; // Rounded corners
+        this.eGui.style.paddingLeft = '8px'; // Some padding
+        this.eGui.style.paddingRight = '8px'; // Some padding
+        this.eGui.style.textAlign = 'center'; // Center the text
+        this.eGui.style.margin = '2px 0'; // Add a bit of margin for spacing
+        this.eGui.style.lineHeight = '26px'; // Add a bit of margin for spacing
+        this.eGui.style.cursor = 'pointer';
+        // Apply styles to the arrow
+        const arrowStyle = document.createElement('style');
+        arrowStyle.innerHTML = `
+      .arrow {
+        display: inline-block;
+       
+      }
+    `;
+        document.head.appendChild(arrowStyle);
+    }
+    getGui() {
+        return this.eGui;
+    }
+    refresh(params) {
+        // Update the content (with arrow) and other cell value when data changes
+        this.eGui.innerHTML = `${params.value} <span style="padding-left: 6px;  ">⇡</span>`;
+        //this.otherCellValue = params.data.contactID;
+        return true; // Return true to indicate the refresh happened
+    }
+    destroy() {
+        // Cleanup: remove the click event listener
+        if (this.eGui && this.clickListener) {
+            this.eGui.removeEventListener('click', this.clickListener);
+        }
+    }
+}
+//# sourceMappingURL=email-cell-renderer.js.map

package/dist/collection/components/my-component/UI/grid/renderers/email-cell-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"email-cell-renderer.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/grid/renderers/email-cell-renderer.tsx"],"names":[],"mappings":"AACA,gFAAgF;AAEhF,MAAM,CAAC,OAAO,OAAO,iBAAiB;IAK7B,IAAI,CAAC,MAAW;QACrB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAE1C,2DAA2D;QAC3D,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,0DAA0D,CAAC;QAEhG,iBAAiB;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,yFAAyF;QACzF,8CAA8C;QAE9C,qFAAqF;QACrF,gFAAgF;QAEhF,2CAA2C;QAC3C,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC;IAEO,WAAW;QACjB,kCAAkC;QAClC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC,wBAAwB;QACrE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,kBAAkB;QACzD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,CAAC,eAAe;QACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,CAAC,eAAe;QACrD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,kBAAkB;QACxD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,kCAAkC;QACpE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC,kCAAkC;QACvE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC;QAEnC,4BAA4B;QAC5B,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACnD,UAAU,CAAC,SAAS,GAAG;;;;;KAKtB,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IACxC,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,MAAW;QACxB,yEAAyE;QACzE,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,8CAA8C,CAAC;QACpF,8CAA8C;QAC9C,OAAO,IAAI,CAAC,CAAC,+CAA+C;IAC9D,CAAC;IAEM,OAAO;QACZ,2CAA2C;QAC3C,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;CACF","sourcesContent":["import { ICellRenderer } from 'ag-grid-community';\n//import { SharedContext } from './sharedContext'; // Ensure the path is correct\n\nexport default class EmailCellRenderer implements ICellRenderer {\n  private eGui: HTMLElement;\n  //private otherCellValue: any;\n  private clickListener: () => void;\n\n  public init(params: any): void {\n    this.eGui = document.createElement('div');\n\n    // Set the cell's content with the arrow character appended\n    this.eGui.innerHTML = `${params.value} <span style=\"padding-left: 5px; color: blue \">🡕</span>`;\n\n    // Style the cell\n    this.applyStyles();\n\n    // Retrieve the value from another cell in the same row (update 'otherField' accordingly)\n    //this.otherCellValue = params.data.contactID;\n\n    // Create a click listener that calls the shared callback with the other cell's value\n    //this.clickListener = () => SharedContext.myClickCallback(this.otherCellValue);\n\n    // Add the click event listener to the cell\n    this.eGui.addEventListener('click', this.clickListener);\n  }\n\n  private applyStyles(): void {\n    // Apply your desired styling here\n    this.eGui.style.backgroundColor = '#f0f0f0'; // Light grey background\n    this.eGui.style.borderRadius = '50px'; // Rounded corners\n    this.eGui.style.paddingLeft = '8px'; // Some padding\n    this.eGui.style.paddingRight = '8px'; // Some padding\n    this.eGui.style.textAlign = 'center'; // Center the text\n    this.eGui.style.margin = '2px 0'; // Add a bit of margin for spacing\n    this.eGui.style.lineHeight = '26px'; // Add a bit of margin for spacing\n    this.eGui.style.cursor = 'pointer'; \n    \n    // Apply styles to the arrow\n    const arrowStyle = document.createElement('style');\n    arrowStyle.innerHTML = `\n      .arrow {\n        display: inline-block;\n       \n      }\n    `;\n    document.head.appendChild(arrowStyle);\n  }\n\n  public getGui(): HTMLElement {\n    return this.eGui;\n  }\n\n  public refresh(params: any): boolean {\n    // Update the content (with arrow) and other cell value when data changes\n    this.eGui.innerHTML = `${params.value} <span style=\"padding-left: 6px;  \">⇡</span>`;\n    //this.otherCellValue = params.data.contactID;\n    return true; // Return true to indicate the refresh happened\n  }\n\n  public destroy(): void {\n    // Cleanup: remove the click event listener\n    if (this.eGui && this.clickListener) {\n      this.eGui.removeEventListener('click', this.clickListener);\n    }\n  }\n}\n"]}