@infineon/infineon-design-system-stencil 30.4.0--canary.1645.49b556c58dadc4ed77f2ef716be668796b86d7d4.0 → 30.5.0--canary.1653.e0dbd3314b37fb8bdea4791ccaa98bb5bd212c8f.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-basic-table.cjs.entry.js +14 -6
- package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.js +14 -6
- package/dist/collection/components/table-basic-version/table.js.map +1 -1
- package/dist/components/ifx-basic-table.js +14 -6
- package/dist/components/ifx-basic-table.js.map +1 -1
- package/dist/esm/ifx-basic-table.entry.js +14 -6
- package/dist/esm/ifx-basic-table.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/{p-1835d5a0.entry.js → p-c593bed5.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-c593bed5.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-1835d5a0.entry.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["CustomNoRowsOverlay","init","params","this","eGui","document","createElement","innerHTML","noRowsMessageFunc","getGui","refresh","_params","CustomLoadingOverlay","tableCss","IfxBasicTableStyle0","Table","gridInitialized","componentWillLoad","uniqueKey","Math","floor","random","setColsAndRows","setGridOptions","gridOptions","rowHeight","headerHeight","defaultColDef","resizable","suppressCellFocus","enableCellTextSelection","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","columnDefs","rowData","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","Date","toLocaleTimeString","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","some","col","dndSource","animateRows","rows","cols","JSON","parse","err","console","error","Array","isArray","getRowData","getColData","api","sizeColumnsToFit","componentWillUpdate","gridApi","setGridOption","componentDidLoad","container","createGrid","defaultMinWidth","getClassNames","classNames","tableHeight","getTableStyle","height","render","h","Host","key","id","class","style","ref","el"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value */\n// }\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: none;\n}\n\n\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family);\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] | string;\n @Prop() rows: any[] | string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "30.
|
|
3
|
+
"version": "30.5.0--canary.1653.e0dbd3314b37fb8bdea4791ccaa98bb5bd212c8f.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["CustomNoRowsOverlay","init","params","this","eGui","document","createElement","innerHTML","noRowsMessageFunc","getGui","refresh","_params","CustomLoadingOverlay","tableCss","IfxBasicTableStyle0","Table","gridInitialized","componentWillLoad","uniqueKey","Math","floor","random","setColsAndRows","setGridOptions","gridOptions","rowHeight","headerHeight","defaultColDef","resizable","suppressCellFocus","enableCellTextSelection","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","columnDefs","rowData","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","Date","toLocaleTimeString","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","some","col","dndSource","animateRows","rows","cols","JSON","parse","err","console","error","Array","isArray","getRowData","getColData","api","sizeColumnsToFit","componentWillUpdate","gridApi","setGridOption","componentDidLoad","container","createGrid","defaultMinWidth","getClassNames","classNames","tableHeight","getTableStyle","height","render","h","Host","key","id","class","style","ref","el"],"sources":["src/components/table-basic-version/customNoRowsOverlay.ts","src/components/table-basic-version/customLoadingOverlay.ts","src/components/table-basic-version/table.scss?tag=ifx-basic-table","src/components/table-basic-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomNoRowsOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `\n <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\n ${params.noRowsMessageFunc()}\n </div>\n `;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\n\nexport class CustomLoadingOverlay implements ICellRendererComp {\n eGui!: HTMLElement;\n\n init(_params: ICellRendererParams & { loadingMessage: string }) {\n this.eGui = document.createElement('div');\n this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\n<ifx-spinner></ifx-spinner>\n </div>`;\n }\n\n getGui() {\n return this.eGui;\n }\n\n refresh(_params: ICellRendererParams): boolean {\n return false;\n }\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n@import \"~ag-grid-community/styles/ag-grid.css\";\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n\n// :host {\n// --table-height: '200px';\n// /* Default value */\n// }\n\n.table-wrapper .ag-root-wrapper-body {\n height: auto !important;\n min-height: 100px !important;\n min-width: 100px;\n}\n\n.ifx-ag-grid {\n display: grid;\n height: 100%;\n width: 100%;\n min-width: 100px;\n padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n outline: none !important;\n border: none !important;\n box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n outline: none;\n}\n\n\n\n.ag-overlay-loading-center {\n border: none;\n background: none;\n border-radius: none;\n box-shadow: none;\n}\n\n\n.ag-root-wrapper {\n border: none;\n}\n\n\n\n.ag-header {\n background-color: tokens.$ifxColorEngineering100;\n border-bottom: none;\n\n &.ag-header-active {\n outline: none !important;\n border-color: #0A8276 !important;\n }\n}\n\n.ag-header-cell {\n padding-left: 16px;\n padding-right: 16px;\n gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n border: none !important;\n outline: none !important;\n}\n\n.ag-header-cell-text {\n font-size: 13px;\n font-style: normal;\n font-weight: 600;\n line-height: 20px;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family);\n\n}\n\n.ag-row-focus {\n background-color: inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n border: none !important;\n outline: none !important;\n background-color: inherit !important;\n}\n\n\n\n.ag-row {\n background-color: tokens.$ifxColorBaseWhite;\n border-bottom: 1px solid tokens.$ifxColorEngineering200;\n font-size: 13px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n display: flex;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n padding-left: 0px;\n vertical-align: bottom;\n line-height: 12px;\n}\n\n.unsort-icon-custom-color {\n color: tokens.$ifxColorEngineering400;\n}","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] | string;\n @Prop() rows: any[] | string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows();\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n this.columnDefs = JSON.parse(this.cols);\n this.rowData = JSON.parse(this.rows);\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n rows = JSON.parse(this.rows);\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n cols = JSON.parse(this.cols);\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|