@infineon/infineon-design-system-stencil 30.2.0 → 30.3.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 +4 -1
- package/dist/cjs/ifx-basic-table.cjs.entry.js.map +1 -1
- package/dist/collection/components/table-basic-version/table.js +4 -1
- package/dist/collection/components/table-basic-version/table.js.map +1 -1
- package/dist/components/ifx-basic-table.js +4 -1
- package/dist/components/ifx-basic-table.js.map +1 -1
- package/dist/esm/ifx-basic-table.entry.js +4 -1
- 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-42a6429b.entry.js → p-24b38292.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/p-24b38292.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-42a6429b.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","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 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":[]}
|
package/package.json
CHANGED
|
@@ -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","suppressDragLeaveHidesColumns","suppressRowHoverHighlight","onFirstDataRendered","columnDefs","rowData","loadingOverlayComponent","noRowsOverlayComponent","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 suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\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":[]}
|