npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.0 → 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.0 - Mend

@infineon/infineon-design-system-stencil 39.5.1--canary.2128.32855eaced35e683ae58f61e74597b349ac6110b.0 → 39.5.1--canary.1723.ff8f559ad2723273cd93183465ad335fc28571d7.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.

Files changed (759) hide show

package/dist/cjs/ifx-basic-table.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-basic-table.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"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// } ag-ltr .ag-header-cell-resize\n\n.zebra {\n & .ag-row-odd {\n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row {\n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport {\n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\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 overflow-x: auto;\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.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px;\n width: 1px;\n background-color: tokens.$ifxColorEngineering300;\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: 1px solid tokens.$ifxColorEngineering200;\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); // tokens.$ifxFontFamilyBody;\n\n\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 white-space: pre-line;\n min-height: 40px; \n height: auto;\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}\n\n// Mobile optimization for horizontal scrolling\n@media (max-width: tokens.$ifxBreakpointM) {\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .ifx-ag-grid {\n min-width: 400px;\n }\n\n .ag-root-wrapper {\n min-width: 100%;\n }\n\n .ag-header-cell,\n .ag-cell {\n min-width: 100px;\n white-space: nowrap;\n }\n\n .table-wrapper {\n margin-bottom: tokens.$ifxSpace200;\n }\n}\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Prop() variant: string = 'default'\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 autoHeight: true,\n },\n suppressCellFocus: false,\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=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></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 async componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-basic-table', await framework)\n }\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 ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-basic-table.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"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// } ag-ltr .ag-header-cell-resize\n\n.zebra {\n & .ag-row-odd {\n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row {\n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport {\n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\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 overflow-x: auto;\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.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px;\n width: 1px;\n background-color: tokens.$ifxColorEngineering300;\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: 1px solid tokens.$ifxColorEngineering200;\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); // tokens.$ifxFontFamilyBody;\n\n\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 white-space: pre-line;\n min-height: 40px; \n height: auto;\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}\n\n// Mobile optimization for horizontal scrolling\n@media (max-width: tokens.$ifxBreakpointM) {\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .ifx-ag-grid {\n min-width: 400px;\n }\n\n .ag-root-wrapper {\n min-width: 100%;\n }\n\n .ag-header-cell,\n .ag-cell {\n min-width: 100px;\n white-space: nowrap;\n }\n\n .table-wrapper {\n margin-bottom: tokens.$ifxSpace200;\n }\n}\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Prop() variant: string = 'default'\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 autoHeight: true,\n },\n suppressCellFocus: false,\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=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></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 async componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-basic-table', await framework)\n }\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 ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-basic-table.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-basic-table.entry.cjs.js","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// } ag-ltr .ag-header-cell-resize\n\n.zebra {\n & .ag-row-odd {\n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row {\n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport {\n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\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 overflow-x: auto;\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.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px;\n width: 1px;\n background-color: tokens.$ifxColorEngineering300;\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: 1px solid tokens.$ifxColorEngineering200;\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); // tokens.$ifxFontFamilyBody;\n\n\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 white-space: pre-line;\n min-height: 40px; \n height: auto;\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}\n\n// Mobile optimization for horizontal scrolling\n@media (max-width: tokens.$ifxBreakpointM) {\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .ifx-ag-grid {\n min-width: 400px;\n }\n\n .ag-root-wrapper {\n min-width: 100%;\n }\n\n .ag-header-cell,\n .ag-cell {\n min-width: 100px;\n white-space: nowrap;\n }\n\n .table-wrapper {\n margin-bottom: tokens.$ifxSpace200;\n }\n}\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Prop() variant: string = 'default'\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 autoHeight: true,\n },\n suppressCellFocus: false,\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=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></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 async componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-basic-table', await framework)\n }\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 ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"mappings":"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"}
1	+ {"version":3,"file":"ifx-basic-table.entry.cjs.js","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// } ag-ltr .ag-header-cell-resize\n\n.zebra {\n & .ag-row-odd {\n background-color: tokens.$ifxColorEngineering100!important;\n }\n\n & .ag-row {\n border-bottom: none!important;\n }\n}\n\n.ag-header-viewport {\n background-color: tokens.$ifxColorEngineering200!important;\n}\n\n.table-wrapper {\n overflow-x: auto;\n width: 100%;\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 overflow-x: auto;\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.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\n content: '';\n position: absolute;\n right: 0;\n top: calc(50% - 12px);\n height: 24px;\n width: 1px;\n background-color: tokens.$ifxColorEngineering300;\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: 1px solid tokens.$ifxColorEngineering200;\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); // tokens.$ifxFontFamilyBody;\n\n\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 white-space: pre-line;\n min-height: 40px; \n height: auto;\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}\n\n// Mobile optimization for horizontal scrolling\n@media (max-width: tokens.$ifxBreakpointM) {\n .table-wrapper {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n }\n\n .ifx-ag-grid {\n min-width: 400px;\n }\n\n .ag-root-wrapper {\n min-width: 100%;\n }\n\n .ag-header-cell,\n .ag-cell {\n min-width: 100px;\n white-space: nowrap;\n }\n\n .table-wrapper {\n margin-bottom: tokens.$ifxSpace200;\n }\n}\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\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 @Prop() variant: string = 'default'\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 autoHeight: true,\n },\n suppressCellFocus: false,\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=\"arrow-triangle-up-16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></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 async componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n if(!isNestedInIfxComponent(this.host)) { \n const framework = detectFramework();\n trackComponent('ifx-basic-table', await framework)\n }\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 ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","createGrid","classNames","h","Host"],"mappings":"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"}

package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-n_pDKBY2.js');
+var index = require('./index-Dc5gCGlQ.js');
-const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
+const breadcrumbItemLabelCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.breadcrumb-item-label-container{display:flex;align-items:center;gap:8px;text-decoration:none;color:#1D1D1D}.breadcrumb-item-label-container.margin{margin-left:16px}.breadcrumb-item-label-container ifx-icon:empty{display:none}.breadcrumb-item-label-container .label-icon-wrapper{display:inline-flex}.breadcrumb-item-label-container .menu-icon-wrapper{display:flex;justify-content:center;align-items:center;width:16px;height:16px}.breadcrumb-item-label-container .menu-icon-wrapper.hide{display:none}.breadcrumb-item-label-container .menu-icon-wrapper ifx-icon{transition:0.3s}.breadcrumb-item-label-container .menu-icon-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}";
 const BreadcrumbItemLabel = class {
     constructor(hostRef) {

package/dist/cjs/ifx-breadcrumb-item-label.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,~~4uBAA4uB~~;;~~MCO9vB~~,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1FA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb-item-label.entry.cjs.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8uBAA8uB;;MCOhwB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1FA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb-item-label.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-breadcrumb-item-label.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,~~4uBAA4uB~~;;~~MCO9vB~~,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1FA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;"}
1	+ {"version":3,"file":"ifx-breadcrumb-item-label.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item-label.scss?tag=ifx-breadcrumb-item-label&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item-label.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-item-label-container {\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n\n &.margin {\n margin-left: 16px;\n }\n\n & ifx-icon:empty {\n display: none;\n }\n\n & .label-icon-wrapper {\n display: inline-flex;\n }\n\n & .menu-icon-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n &.hide {\n display: none;\n }\n\n & ifx-icon {\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n }\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item-label',\n styleUrl: 'breadcrumb-item-label.scss',\n shadow: true,\n})\nexport class BreadcrumbItemLabel {\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = \"_self\"\n @Element() el;\n @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\n\n componentDidLoad() { \n const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\n const menuWrapper = container.querySelector('.menu-icon-wrapper')\n this.breadcrumbMenuIconWrapper.emit(menuWrapper)\n }\n\n render() {\n return (\n <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\n <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\n <span class=\"label-wrapper\">\n <slot />\n </span>\n <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\n <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\n </span>\n </a>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,8uBAA8uB;;MCOhwB,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAuBjC;IAnBC,gBAAgB,GAAA;AACd,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,kCAAkC,CAAC;QACtF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACjE,QAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,WAAW,CAAC;;IAGlD,MAAM,GAAA;QACJ,QACEA,gEAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1FA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzDA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACRA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChDA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;"}

package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 'use strict';
-var index = require('./index-n_pDKBY2.js');
+var index = require('./index-Dc5gCGlQ.js');
-const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
+const breadcrumbItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}";
 const BreadcrumbItem = class {
     constructor(hostRef) {

package/dist/cjs/ifx-breadcrumb-item.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,~~k9BAAk9B~~;;~~MCO/9B~~,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOW,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAI3B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AA0H1C;AAvHC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC3B,IAAI,CAAC,iBAAiB,EAAE;;;AAK5B,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE;;AACpB,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE;;;IAI5B,eAAe,GAAA;AACb,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACvE,QAAA,OAAO,YAAY;;AAIrB,IAAA,yBAAyB,CAAC,KAA+B,EAAA;AACvD,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM;;IAGpC,kBAAkB,GAAA;QAChB,OAAO,IAAI,CAAC,cAAc;;AAG5B,IAAA,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,EAAA;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,QAAA,OAAO,IAAI,CAAC,eAAe,IAAI,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;;IAGxF,cAAc,GAAA;AACZ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;AACjG,QAAA,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE;AACxD,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;;AACjB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;IAGhC,gBAAgB,CAAC,MAAM,GAAG,IAAI,EAAA;QAC5B,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;;IAGlE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;;QAE9D,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;IAGvB,mBAAmB,GAAA;QACjB,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,uBAAuB,GAAA;AACrB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;QACvD,IAAG,YAAY,EAAE;AACf,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,YAAY;;;IAIzC,2BAA2B,GAAA;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;AAC/D,QAAA,OAAO,YAAY;;IAGrB,gBAAgB,GAAA;AACd,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;AAEvD,QAAA,IAAG,CAAC,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE;YACjD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC;;aAClD;AACL,YAAA,YAAY,CAAC,MAAM,GAAG,IAAI;;;IAI9B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,cAAA,EAAe,CAAA,EAAG,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE,EAAE,EAAA,EAC7EA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,EAAgB,eAAA,EAAA,MAAM,gBAAY,sBAAsB,EAAA,EACjNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAE,CAAA,EACpBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,kBAAkB,EAAE,gBAAa,eAAe,EAAA,EAChHA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACH,EACJ,CAAC,IAAI,CAAC,UAAU,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAa,aAAA,EAAA,MAAM,EAAS,EAAA,GAAA,CAAA,CAC9E;;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,o9BAAo9B;;MCOj+B,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOW,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;AAI3B,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;AA0H1C;AAvHC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YAC3B,IAAI,CAAC,iBAAiB,EAAE;;;AAK5B,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,IAAI,EAAE,CAAC,GAAG,KAAK,OAAO,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,EAAE;YACxC,IAAI,CAAC,kBAAkB,EAAE;;AACpB,aAAA,IAAI,EAAE,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC9B,IAAI,CAAC,iBAAiB,EAAE;;;IAI5B,eAAe,GAAA;AACb,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACvE,QAAA,OAAO,YAAY;;AAIrB,IAAA,yBAAyB,CAAC,KAA+B,EAAA;AACvD,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM;;IAGpC,kBAAkB,GAAA;QAChB,OAAO,IAAI,CAAC,cAAc;;AAG5B,IAAA,eAAe,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,EAAA;QACjC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;;IAG/B,iBAAiB,GAAA;AACf,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,IAAG,IAAI,CAAC,eAAe,EAAE;AACvB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,EAAE,MAAM,CAAC;YACpD,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;;;IAIvD,kBAAkB,GAAA;AAChB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;AAC3C,QAAA,OAAO,IAAI,CAAC,eAAe,IAAI,YAAY,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC;;IAGxF,cAAc,GAAA;AACZ,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;AACjG,QAAA,IAAG,IAAI,CAAC,EAAE,KAAK,eAAe,CAAC,eAAe,CAAC,MAAM,GAAC,CAAC,CAAC,EAAE;AACxD,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI;;;AACjB,YAAA,IAAI,CAAC,UAAU,GAAG,KAAK;;IAGhC,gBAAgB,CAAC,MAAM,GAAG,IAAI,EAAA;QAC5B,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;;IAGlE,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAC;;QAE9D,IAAI,CAAC,cAAc,EAAE;;IAGvB,kBAAkB,GAAA;QAChB,IAAI,CAAC,cAAc,EAAE;;IAGvB,mBAAmB,GAAA;QACjB,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,uBAAuB,GAAA;AACrB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;QACvD,IAAG,YAAY,EAAE;AACf,YAAA,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,YAAY;;;IAIzC,2BAA2B,GAAA;QACzB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC;AAC/D,QAAA,OAAO,YAAY;;IAGrB,gBAAgB,GAAA;AACd,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,2BAA2B,EAAE;AAEvD,QAAA,IAAG,CAAC,IAAI,CAAC,eAAe,EAAE;AACxB,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE;YACjD,IAAI,CAAC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAM,CAAC;;aAClD;AACL,YAAA,YAAY,CAAC,MAAM,GAAG,IAAI;;;IAI9B,MAAM,GAAA;AACJ,QAAA,QACEA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,cAAA,EAAe,CAAA,EAAG,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,EAAE,EAAE,EAAA,EAC7EA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,EAAE,EAAE,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,mBAAiB,IAAI,CAAC,QAAQ,EAAgB,eAAA,EAAA,MAAM,gBAAY,sBAAsB,EAAA,EACjNA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAE,CAAA,EACpBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,eAAe,mBAAgB,IAAI,CAAC,kBAAkB,EAAE,gBAAa,eAAe,EAAA,EAChHA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACH,EACJ,CAAC,IAAI,CAAC,UAAU,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAa,aAAA,EAAA,MAAM,EAAS,EAAA,GAAA,CAAA,CAC9E;;;;;;;;","names":["h"],"sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb-item.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,iBAAiB,GAAG,~~k9BAAk9B~~;;~~MCO/9B~~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"}
1	+ {"version":3,"file":"ifx-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb-item.scss?tag=ifx-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb/breadcrumb-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.breadcrumb-parent {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace150;\n min-height: tokens.$ifxSize300;\n justify-content: center;\n\n &:hover {\n cursor: pointer;\n }\n\n & .breadcrumb-wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n position: relative;\n\n & .dropdown-menu {\n display: none;\n position: absolute;\n top: 20px;\n\n &.open {\n display: block;\n }\n }\n\n & a {\n text-decoration: none;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex-direction: column;\n justify-content: center;\n padding: 0px;\n border-bottom: 1px solid #1D1D1D;\n }\n }\n\n & .breadcrumb-divider {\n width: 10px;\n height: tokens.$ifxSize200;\n color: tokens.$ifxColorEngineering200;\n line-height: 13px;\n font-size: tokens.$ifxFontSizeXl;\n\n margin-right: 12px;\n }\n}","import { Component, h, Element, State, Listen } from '@stencil/core';\n\n@Component({\n tag: 'ifx-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n shadow: true,\n})\nexport class BreadcrumbItem {\n\n @State() isLastItem: boolean = false;\n @Element() el;\n private emittedElement: HTMLElement;\n @State() uniqueId: string;\n @State() hasDropdownMenu: boolean = false;\n\n @Listen('mousedown', { target: 'document' })\n handleOutsideClick(event: MouseEvent) {\n const path = event.composedPath();\n if (!path.includes(this.el)) {\n this.closeDropdownMenu();\n }\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Enter' \|\| ev.key === ' ') {\n this.toggleDropdownMenu();\n } else if (ev.key === 'Escape') {\n this.closeDropdownMenu();\n }\n }\n\n getDropdownMenu() {\n const dropdownMenu = this.el.shadowRoot.querySelector('.dropdown-menu');\n return dropdownMenu\n }\n\n @Listen('breadcrumbMenuIconWrapper')\n menuWrapperEventReEmitter(event: CustomEvent<HTMLElement>) { \n this.emittedElement = event.detail;\n }\n\n getMenuIconWrapper(): HTMLElement \| undefined {\n return this.emittedElement;\n }\n\n handleClassList(el, type, className) {\n el.classList[type](className)\n }\n\n closeDropdownMenu() {\n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'remove', 'open')\n this.handleClassList(menuWrapper, 'remove', 'show')\n }\n }\n\n toggleDropdownMenu() { \n if(this.hasDropdownMenu) {\n const dropdownMenu = this.getDropdownMenu()\n const menuWrapper = this.getMenuIconWrapper()\n this.handleClassList(dropdownMenu, 'toggle', 'open')\n this.handleClassList(menuWrapper, 'toggle', 'show')\n }\n }\n\n isDropdownMenuOpen(): boolean {\n const dropdownMenu = this.getDropdownMenu()\n return this.hasDropdownMenu && dropdownMenu && dropdownMenu.classList.contains('open')\n }\n\n handleLastItem() { \n const breadcrumbItems = this.el.closest('ifx-breadcrumb').querySelectorAll('ifx-breadcrumb-item')\n if(this.el === breadcrumbItems[breadcrumbItems.length-1]) { \n this.isLastItem = true;\n } else this.isLastItem = false;\n }\n\n generateUniqueId(prefix = 'id') {\n return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n }\n\n componentWillLoad() { \n if (!this.uniqueId) {\n this.uniqueId = this.generateUniqueId('breadcrumb-dropdown');\n }\n this.handleLastItem()\n }\n\n componentDidUpdate() {\n this.handleLastItem()\n }\n\n componentWillRender() { \n this.setHasDropdownMenuState()\n }\n\n setHasDropdownMenuState() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n if(dropdownMenu) {\n this.hasDropdownMenu = !!dropdownMenu;\n }\n }\n\n getIfxDropdownMenuComponent() { \n const dropdownMenu = this.el.querySelector('ifx-dropdown-menu');\n return dropdownMenu;\n }\n\n componentDidLoad() { \n const dropdownMenu = this.getIfxDropdownMenuComponent();\n\n if(!this.hasDropdownMenu) { \n const iconMenuWrapper = this.getMenuIconWrapper();\n this.handleClassList(iconMenuWrapper, 'toggle', 'hide');\n } else { \n dropdownMenu.isOpen = true;\n }\n }\n\n render() {\n return (\n <li class='breadcrumb-parent' aria-current={`${this.isLastItem ? 'page' : \"\"}`}>\n <li role=\"button\" tabindex={this.hasDropdownMenu ? 0 : -1} class=\"breadcrumb-wrapper\" onClick={() => this.toggleDropdownMenu()} aria-controls={this.uniqueId} aria-haspopup=\"menu\" aria-label=\"Toggle dropdown menu\">\n <slot name='label'/>\n <div id={this.uniqueId} class=\"dropdown-menu\" aria-expanded={this.isDropdownMenuOpen()} aria-label=\"Dropdown menu\">\n <slot />\n </div>\n </li>\n {!this.isLastItem && <span class=\"breadcrumb-divider\" aria-hidden=\"true\">/</span>}\n </li>\n );\n }\n}\n"],"names":["h"],"mappings":"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"}

package/dist/cjs/ifx-breadcrumb.cjs.entry.js CHANGED Viewed

@@ -1,10 +1,10 @@
 'use strict';
-var index = require('./index-n_pDKBY2.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
-const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
+const breadcrumbCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.breadcrumb{list-style:none;padding:0px;margin:0px;display:flex;flex-direction:row;font-family:var(--ifx-font-family);font-size:0.875rem;align-items:flex-start}";
 const Breadcrumb = class {
     constructor(hostRef) {

package/dist/cjs/ifx-breadcrumb.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,~~oPAAoP~~;;~~MCU7P~~,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ifx-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ifx-breadcrumb.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ifx-breadcrumb.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,~~oPAAoP~~;;~~MCU7P~~,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}
1	+ {"version":3,"file":"ifx-breadcrumb.entry.cjs.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ifx-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.breadcrumb {\n list-style: none;\n padding: 0px;\n margin: 0px;\n display: flex;\n flex-direction: row;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n font-size: tokens.$ifxFontSizeS;\n align-items: flex-start;\n //gap: tokens.$ifxSpace200; //this is where the gap comes from\n\n}\n\n// .separator {\n// color: tokens.$ifxColorEngineering300;\n// margin: 0 16px;\n// }","import { Component, h, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n shadow: true\n})\nexport class Breadcrumb {\n @Element() el;\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-breadcrumb', await framework)\n }\n const element = this.el.shadowRoot.firstChild;\n this.validateBreadcrumbItemStructure(element);\n }\n\n private validateBreadcrumbItemStructure(element: HTMLElement) {\n if (!element) {\n console.error('element not found');\n return;\n }\n \n const slot = element.querySelector('slot');\n if(slot) { \n const assignedNodes = slot.assignedNodes();\n \n for (let i = 0; i < assignedNodes.length; i++) {\n const node = assignedNodes[i];\n if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\n const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\n const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\n const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\n if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\n throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\n }\n }\n }\n }\n }\n\n render() {\n return (\n <nav aria-label=\"Page navigation breadcrumb\">\n <ol class=\"breadcrumb\">\n <slot />\n </ol>\n </nav>\n );\n }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,gBAAgB,EAAE,MAAM,SAAS,CAAC;;QAEnD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU;AAC7C,QAAA,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC;;AAGvC,IAAA,+BAA+B,CAAC,OAAoB,EAAA;QAC1D,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,CAAC,KAAK,CAAC,mBAAmB,CAAC;YAClC;;QAGF,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC;QAC1C,IAAG,IAAI,EAAE;AACP,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,EAAE;AAE1C,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC;AAC7B,gBAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,qBAAqB,EAAE;oBAC3C,MAAM,cAAc,GAAG,IAAoC;oBAC3D,MAAM,mBAAmB,GAAG,cAAc,CAAC,aAAa,CAAC,2BAA2B,CAAC;oBACrF,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,mBAAmB,CAAC;oBAC5E,IAAI,mBAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,kBAAkB,EAAE;AAClE,wBAAA,MAAM,IAAI,KAAK,CAAC,kEAAkE,CAAC;;;;;;IAO7F,MAAM,GAAA;AACJ,QAAA,QACEC,gFAAgB,4BAA4B,EAAA,EAC1CA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}

package/dist/cjs/ifx-button.cjs.entry.js CHANGED Viewed

@@ -1,12 +1,12 @@
 'use strict';
-var index = require('./index-n_pDKBY2.js');
+var index = require('./index-Dc5gCGlQ.js');
 var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
 var domUtils = require('./dom-utils-dykhxr-_.js');
 var index$1 = require('./index-CVw4GUo6.js');
 require('./_commonjsHelpers-CFO10eej.js');
-const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";
+const buttonCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{vertical-align:bottom;display:inline-flex;width:var(--bw, fit-content)}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0px 16px;gap:8px;color:#FFFFFF;font-weight:600;border-radius:1px;line-height:1.5rem;font-family:var(--ifx-font-family);font-style:normal;text-decoration:none;user-select:none;font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;width:var(--bw, fit-content)}.btn:not(.disabled){cursor:pointer}.btn.disabled{pointer-events:none}.btn-default{color:#FFFFFF;background-color:#0A8276}.btn-default:disabled,.btn-default.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-default{background-color:#FFFFFF;color:#0A8276;border:1px solid #0A8276}.btn-secondary-default:disabled,.btn-secondary-default.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-default{background-color:transparent;color:#0A8276}.btn-tertiary-default:disabled,.btn-tertiary-default.disabled{color:#BFBBBB;pointer-events:none}.btn-danger{color:#FFFFFF;background-color:#CD002F;border-color:#CD002F}.btn-danger:disabled,.btn-danger.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary-danger{background-color:#FFFFFF;color:#CD002F;border:1px solid #CD002F}.btn-secondary-danger:disabled,.btn-secondary-danger.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary-danger{background-color:transparent;color:#CD002F}.btn-tertiary-danger:disabled,.btn-tertiary-danger.disabled{background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-inverse{color:#0A8276;background-color:#FFFFFF}.btn-inverse:disabled,.btn-inverse.disabled{opacity:1;background-color:#FFFFFF;color:#BFBBBB;pointer-events:none}.btn-secondary-inverse{color:#FFFFFF;border:1px solid #FFFFFF}.btn-secondary-inverse:disabled,.btn-secondary-inverse.disabled{border:1px solid #FFFFFF;color:#FFFFFF;pointer-events:none}.btn-tertiary-inverse{color:#FFFFFF}.btn-tertiary-inverse:disabled,.btn-tertiary-inverse.disabled{color:#FFFFFF;opacity:1;pointer-events:none}.btn ifx-icon:empty{display:none}.btn.btn-xs{font-size:0.875rem;height:32px;line-height:1rem}.btn.btn-s{font-size:0.875rem;height:36px;line-height:1.25rem}.btn.btn-l{font-size:1.25rem;height:48px;line-height:1.75rem}.btn.btn-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-default:not(:disabled,.disabled):hover{background-color:#08665C}.btn.btn-default:not(:disabled,.disabled):active,.btn.btn-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-default:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#08665C}.btn.btn-secondary-default:not(:disabled,.disabled):active,.btn.btn-secondary-default:not(:disabled,.disabled).active{background-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#9C216E}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#9C216E}.btn.btn-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-danger:not(:disabled,.disabled):hover{background-color:#A2001E}.btn.btn-danger:not(:disabled,.disabled):active,.btn.btn-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-secondary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary-danger:not(:disabled,.disabled):hover{color:#FFFFFF;background-color:#A2001E}.btn.btn-secondary-danger:not(:disabled,.disabled):active,.btn.btn-secondary-danger:not(:disabled,.disabled).active{background-color:#900021}.btn.btn-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-inverse:not(:disabled,.disabled):hover{background-color:#EEEDED}.btn.btn-inverse:not(:disabled,.disabled):active,.btn.btn-inverse:not(:disabled,.disabled).active{background-color:#BFBBBB}.btn.btn-secondary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-secondary-inverse:not(:disabled,.disabled):hover{color:#0A8276;background-color:#EEEDED}.btn.btn-secondary-inverse:not(:disabled,.disabled):active,.btn.btn-secondary-inverse:not(:disabled,.disabled).active{color:#0A8276;background-color:#BFBBBB}.btn.btn-tertiary-default:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):hover{color:#08665C}.btn.btn-tertiary-default:not(:disabled,.disabled):active,.btn.btn-tertiary-default:not(:disabled,.disabled).active{color:#06534B}.btn.btn-tertiary-danger:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):hover{color:#A2001E}.btn.btn-tertiary-danger:not(:disabled,.disabled):active,.btn.btn-tertiary-danger:not(:disabled,.disabled).active{color:#900021}.btn.btn-tertiary-inverse:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #0A8276, 0 0 0 4px #FFFFFF}.btn.btn-tertiary-inverse:not(:disabled,.disabled):hover{color:#EEEDED}.btn.btn-tertiary-inverse:not(:disabled,.disabled):active,.btn.btn-tertiary-inverse:not(:disabled,.disabled).active{color:#BFBBBB}";
 const Button = class {
     constructor(hostRef) {

package/dist/cjs/ifx-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}
1	+ {"file":"ifx-button.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","Host","classNames"],"sources":["src/components/button/button.scss?tag=ifx-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n vertical-align: bottom;\n display: inline-flex;\n width: var(--bw, fit-content);\n}\n\n.btn {\n box-sizing: border-box;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: tokens.$ifxSize500;\n padding: 0px tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n color: tokens.$ifxColorBaseWhite;\n font-weight: tokens.$ifxFontWeightSemibold;\n border-radius: tokens.$ifxBorderRadius12;\n line-height: tokens.$ifxLineHeightM;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-style: normal;\n text-decoration: none;\n user-select: none;\n font-size: tokens.$ifxFontSizeM;\n transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n width: var(--bw, fit-content);\n}\n\n.btn:not(.disabled) {\n cursor: pointer;\n}\n\n.btn.disabled {\n pointer-events: none;\n}\n\n.btn-default {\n //default variant=primary; default color=default\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-default {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorOcean500;\n border: 1px solid tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-default {\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorOcean500;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n\n.btn-danger {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed500;\n border-color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n.btn-secondary-danger {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorRed500;\n border: 1px solid tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-tertiary-danger {\n //combination tertiary + danger not in design\n background-color: tokens.$ifxColorBaseTransparent;\n color: tokens.$ifxColorRed500;\n\n &:disabled,\n &.disabled {\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n\n }\n}\n\n.btn-inverse {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n opacity: tokens.$ifxOpacity100;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorEngineering300;\n pointer-events: none;\n }\n}\n\n.btn-secondary-inverse {\n color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n border: 1px solid tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseWhite;\n pointer-events: none;\n\n }\n}\n\n\n.btn-tertiary-inverse {\n color: tokens.$ifxColorBaseWhite;\n\n &:disabled,\n &.disabled {\n color: tokens.$ifxColorBaseWhite;\n opacity: tokens.$ifxOpacity100;\n pointer-events: none;\n\n }\n}\n\n.btn {\n & ifx-icon:empty {\n display: none;\n }\n\n &.btn-xs {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize400;\n line-height: tokens.$ifxLineHeightXs;\n }\n\n &.btn-s {\n font-size: tokens.$ifxFontSizeS;\n height: tokens.$ifxSize450;\n line-height: tokens.$ifxLineHeightS;\n }\n\n // &.btn-m { //default\n // font-size: tokens.$ifxFontSizeM;\n // height: tokens.$ifxSize400;\n // line-height: tokens.$ifxLineHeightM;\n // }\n\n\n &.btn-l {\n font-size: tokens.$ifxFontSizeXl;\n height: tokens.$ifxSize600;\n line-height: tokens.$ifxLineHeightXl;\n }\n\n\n\n &.btn-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorOcean700;\n }\n }\n\n &.btn-secondary:not(:disabled, .disabled) {\n\n &:hover {\n background-color: tokens.$ifxColorBerry500;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorBerry500;\n }\n }\n\n\n\n &.btn-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n &.btn-secondary-danger:not(:disabled, .disabled) {\n\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n }\n\n &:hover {\n color: tokens.$ifxColorBaseWhite;\n background-color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorRed700;\n }\n }\n\n\n &.btn-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.btn-secondary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering200;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean500;\n background-color: tokens.$ifxColorEngineering300;\n }\n }\n\n\n\n &.btn-tertiary-default:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean600;\n }\n\n &:hover {\n color: tokens.$ifxColorOcean600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorOcean700;\n }\n\n\n }\n\n\n\n\n\n &.btn-tertiary-danger:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorRed600;\n }\n\n &:hover {\n color: tokens.$ifxColorRed600;\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorRed700;\n }\n\n }\n\n\n &.btn-tertiary-inverse:not(:disabled, .disabled) {\n &:focus:not(:active, .active) {\n outline: none;\n box-shadow: 0 0 0 2px tokens.$ifxColorOcean500, 0 0 0 4px tokens.$ifxColorBaseWhite;\n }\n\n &:hover {\n color: tokens.$ifxColorEngineering200;\n\n }\n\n &:active,\n &.active {\n color: tokens.$ifxColorEngineering300;\n }\n }\n}","import { Component, Prop, h, Host, Method, Element, Listen, State, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' = 'primary';\n @Prop() theme: 'default' \| 'danger' \| 'inverse' = 'default';\n @Prop() size: string = 'm';\n @Prop() disabled: boolean = false;\n @State() internalHref: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n @Prop() fullWidth: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Element() el;\n\n private focusableElement: HTMLElement;\n private nativeButton: HTMLButtonElement \| HTMLInputElement;\n\n @Watch('href')\n setInternalHref(newValue: string) {\n this.internalHref = newValue;\n }\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n insertNativeButton() {\n this.nativeButton = document.createElement('button');\n this.nativeButton.type = this.type;\n this.nativeButton.style.display = 'none';\n this.el.closest('form').appendChild(this.nativeButton);\n }\n\n handleFormAndInternalHref() {\n if (this.el.closest('form')) {\n if (this.el.href) {\n this.el.internalHref = undefined;\n }\n this.insertNativeButton()\n } else {\n this.internalHref = this.href;\n }\n }\n\n handleButtonWidth() {\n if (this.fullWidth) {\n this.el.style.setProperty('--bw', '100%');\n } else {\n this.el.style.setProperty('--bw', 'fit-content');\n }\n }\n\n componentWillLoad() {\n this.handleFormAndInternalHref()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-button', await framework)\n }\n }\n\n componentWillRender() {\n this.handleButtonWidth()\n }\n\n\n\n handleClick = (ev: Event) => {\n if (this.el.shadowRoot) {\n const parentForm = this.el.closest('form');\n if (parentForm) {\n ev.preventDefault();\n\n if (this.type === 'reset') {\n // If the button type is 'reset', manually reset all custom form fields\n this.resetClickHandler(); //this will reset all ifx-text-fields within a form\n } else {\n const fakeButton = document.createElement('button');\n if (this.type) {\n fakeButton.type = this.type;\n }\n fakeButton.style.display = 'none';\n parentForm.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n }\n\n resetClickHandler() {\n const formElement = this.el.closest('form');\n const customElements = formElement.querySelectorAll('ifx-text-field, ifx-textarea');\n customElements.forEach(element => {\n element.reset();\n });\n }\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if ( ev.key === \" \" \|\| ev.key === 'Enter' && !this.disabled) {\n this.focusableElement.click();\n }\n }\n\n @Listen('click', { capture: true })\n handleHostClick(event: Event) {\n if (this.disabled === true) {\n event.stopImmediatePropagation();\n }\n }\n\n handleFocus(event: FocusEvent) {\n if (this.disabled) {\n event.preventDefault();\n this.focusableElement.blur();\n }\n }\n\n render() {\n return (\n <Host>\n <a\n role={this.href ? 'link' : 'button'}\n tabIndex={this.disabled ? -1 : 0}\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.internalHref : undefined}\n target={this.target}\n onClick={this.handleClick}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n onFocus={(event) => this.handleFocus(event)}\n aria-disabled={this.disabled ? 'true' : null}\n aria-describedby={this.theme === 'danger' ? 'Dangerous action' : undefined}\n aria-label={this.ariaLabel \|\| undefined}\n >\n <slot></slot>\n </a>\n </Host>\n );\n }\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary-${this.theme}`\n : `${this.variant}` === 'tertiary'\n ? `tertiary-${this.theme}`\n : `${this.theme}`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn',\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"],"version":3}