@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0

package/dist/infineon-design-system-stencil/ifx-basic-table.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-basic-table.entry.esm.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":[],"mappings":"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"}
+{"version":3,"file":"ifx-basic-table.entry.esm.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';\r\n\r\nexport class CustomNoRowsOverlay implements ICellRendererComp {\r\n  eGui!: HTMLElement;\r\n\r\n  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {\r\n    this.eGui = document.createElement('div');\r\n    this.eGui.innerHTML = `\r\n            <div role=\"presentation\" class=\"ag-overlay-loading-center\" >\r\n               ${params.noRowsMessageFunc()}\r\n            </div>\r\n        `;\r\n  }\r\n\r\n  getGui() {\r\n    return this.eGui;\r\n  }\r\n\r\n  refresh(_params: ICellRendererParams): boolean {\r\n    return false;\r\n  }\r\n}","import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\r\n\r\nexport class CustomLoadingOverlay implements ICellRendererComp {\r\n  eGui!: HTMLElement;\r\n\r\n  init(_params: ICellRendererParams & { loadingMessage: string }) {\r\n    this.eGui = document.createElement('div');\r\n    this.eGui.innerHTML = `<div class=\"ag-overlay-loading-center\" role=\"presentation\">\r\n<ifx-spinner></ifx-spinner>\r\n            </div>`;\r\n  }\r\n\r\n  getGui() {\r\n    return this.eGui;\r\n  }\r\n\r\n  refresh(_params: ICellRendererParams): boolean {\r\n    return false;\r\n  }\r\n}","@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n@import \"~ag-grid-community/styles/ag-grid.css\";\r\n// @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\r\n\r\n// :host {\r\n//   --table-height: '200px';\r\n//   /* Default value */\r\n// } ag-ltr .ag-header-cell-resize\r\n\r\n.zebra {\r\n  & .ag-row-odd {\r\n    background-color: tokens.$ifxColorEngineering100!important;\r\n  }\r\n\r\n  & .ag-row {\r\n    border-bottom: none!important;\r\n  }\r\n}\r\n\r\n.ag-header-viewport {\r\n  background-color: tokens.$ifxColorEngineering200!important;\r\n}\r\n\r\n.table-wrapper {\r\n  overflow-x: auto;\r\n  width: 100%;\r\n}\r\n\r\n.table-wrapper .ag-root-wrapper-body {\r\n  height: auto !important;\r\n  min-height: 100px !important;\r\n  min-width: 100px;\r\n}\r\n\r\n.ifx-ag-grid {\r\n  display: grid;\r\n  height: 100%;\r\n  width: 100%;\r\n  min-width: 100px;\r\n  padding-bottom: tokens.$ifxSpace100;\r\n  overflow-x: auto;\r\n}\r\n\r\n\r\n.ifx-ag-grid .ag-header-cell::after {\r\n  outline: none !important;\r\n  border: none !important;\r\n  box-shadow: none !important;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:focus {\r\n  outline: none !important;\r\n}\r\n\r\n.ifx-ag-grid *:not(.ag-header-cell):focus {\r\n  outline: none;\r\n}\r\n\r\n.ifx-ag-grid .ag-header-cell:not(:last-child)::before {\r\n  content: '';\r\n  position: absolute;\r\n  right: 0;\r\n  top: calc(50% - 12px);\r\n  height: 24px;\r\n  width: 1px;\r\n  background-color: tokens.$ifxColorEngineering300;\r\n}\r\n\r\n.ag-overlay-loading-center {\r\n  border: none;\r\n  background: none;\r\n  border-radius: none;\r\n  box-shadow: none;\r\n}\r\n\r\n\r\n.ag-root-wrapper {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n}\r\n\r\n.ag-header {\r\n  background-color: tokens.$ifxColorEngineering100;\r\n  border-bottom: none;\r\n\r\n  &.ag-header-active {\r\n    outline: none !important;\r\n    border-color: #0A8276 !important;\r\n  }\r\n}\r\n\r\n.ag-header-cell {\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n  gap: 4px;\r\n}\r\n\r\n\r\n.ag-header-cell-focus {\r\n  border: none !important;\r\n  outline: none !important;\r\n}\r\n\r\n.ag-header-cell-text {\r\n  font-size: 13px;\r\n  font-style: normal;\r\n  font-weight: 600;\r\n  line-height: 20px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n}\r\n\r\n.ag-row-focus {\r\n  background-color: inherit !important;\r\n  /* Reset the hover color to the row's original color */\r\n}\r\n\r\n.ag-row-hover {\r\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\r\n  /* Reset the hover color to the row's original color */\r\n}\r\n\r\n\r\n.ag-cell-focus {\r\n  border: none !important;\r\n  outline: none !important;\r\n  background-color: inherit !important;\r\n}\r\n\r\n\r\n\r\n.ag-row {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n  font-size: 13px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  z-index: 1; //ensure the stacking order when used inside js frameworks\r\n}\r\n\r\n.ag-row-odd {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n}\r\n\r\n.ag-cell {\r\n  display: flex;\r\n  padding-left: 16px;\r\n  padding-right: 16px;\r\n  white-space: pre-line;\r\n  min-height: 40px; \r\n  height: auto;\r\n}\r\n\r\n.ag-ltr .ag-sort-indicator-icon {\r\n  padding-left: 0px;\r\n  vertical-align: bottom;\r\n  line-height: 12px;\r\n}\r\n\r\n.unsort-icon-custom-color {\r\n  color: tokens.$ifxColorEngineering400;\r\n}\r\n\r\n// Mobile optimization for horizontal scrolling\r\n@media (max-width: tokens.$ifxBreakpointM) {\r\n  .table-wrapper {\r\n    overflow-x: auto;\r\n    -webkit-overflow-scrolling: touch;\r\n  }\r\n\r\n  .ifx-ag-grid {\r\n    min-width: 400px;\r\n  }\r\n\r\n  .ag-root-wrapper {\r\n    min-width: 100%;\r\n  }\r\n\r\n  .ag-header-cell,\r\n  .ag-cell {\r\n    min-width: 100px;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .table-wrapper {\r\n    margin-bottom: tokens.$ifxSpace200;\r\n  }\r\n}\r\n","import { Component, h, Element, Host, Prop, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\r\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\r\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n  tag: 'ifx-basic-table',\r\n  styleUrl: 'table.scss',\r\n  shadow: false // only works with shadowdom off because we are using an external library\r\n})\r\nexport class Table {\r\n  @State() gridOptions: GridOptions;\r\n  @Prop() cols: any[] | string;\r\n  @Prop() rows: any[] | string;\r\n  @State() columnDefs: any[] = [];\r\n  @State() rowData: any[] = [];\r\n  @Prop() rowHeight: string = 'default';\r\n  @Prop() tableHeight: string = 'auto';\r\n  @Prop() variant: string = 'default'\r\n  @State() uniqueKey: string;\r\n  @Element() host: HTMLElement;\r\n  \r\n  private container: HTMLDivElement;\r\n  private gridApi: GridApi; \r\n  private gridInitialized = false;\r\n\r\n  componentWillLoad() {\r\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\r\n    this.setColsAndRows(); //needed?\r\n    this.setGridOptions();\r\n  }\r\n\r\n  setGridOptions() {\r\n    this.gridOptions = {\r\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\r\n      headerHeight: 40,\r\n      defaultColDef: {\r\n        resizable: true,\r\n        autoHeight: true,\r\n      },\r\n      suppressCellFocus: false,\r\n      enableCellTextSelection: true,\r\n      suppressDragLeaveHidesColumns: true,\r\n      suppressRowHoverHighlight: true,\r\n      onFirstDataRendered: this.onFirstDataRendered,\r\n      columnDefs: this.columnDefs,\r\n      rowData: this.rowData,\r\n      loadingOverlayComponent: CustomLoadingOverlay,\r\n      noRowsOverlayComponent: CustomNoRowsOverlay,\r\n      noRowsOverlayComponentParams: {\r\n        noRowsMessageFunc: () =>\r\n          'No rows found at: ' + new Date().toLocaleTimeString(),\r\n      },\r\n      icons: {\r\n        sortAscending: '<ifx-icon icon=\"arrow-triangle-up-16\"></ifx-icon>',\r\n        sortDescending: '<ifx-icon icon=\"arrow-triangle-down-16\"></ifx-icon>',\r\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrow-triangle-vertikal-16\"></ifx-icon></a>',\r\n      },\r\n      rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n      animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\r\n    };\r\n  }\r\n\r\n  setColsAndRows() {\r\n    if (typeof this.rows === 'string' && typeof this.cols === 'string') {\r\n      try {\r\n        if(this.cols) {\r\n          this.columnDefs = JSON.parse(this.cols);\r\n        }\r\n        if(this.rows) {\r\n          this.rowData = JSON.parse(this.rows);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if ((Array.isArray(this.rows) || typeof this.rows === 'object') && (Array.isArray(this.cols) || typeof this.cols === 'object')) {\r\n      this.columnDefs = this.cols;\r\n      this.rowData = this.rows;\r\n    } else {\r\n      console.error('Unexpected value for cols and rows:', this.rows, this.cols);\r\n    }\r\n  }\r\n\r\n  getRowData() {\r\n    let rows: any[] = [];\r\n    if (typeof this.rows === 'string') {\r\n      try {\r\n        if(this.rows) {\r\n          rows = JSON.parse(this.rows);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\r\n      rows = this.rows;\r\n    } else {\r\n      console.error('Unexpected value for rows: ', this.rows);\r\n    }\r\n\r\n    return rows;\r\n  }\r\n\r\n  getColData() {\r\n    let cols: any[] = [];\r\n\r\n    if (typeof this.cols === 'string') {\r\n      try {\r\n        if(this.cols) { \r\n          cols = JSON.parse(this.cols);\r\n        }\r\n      } catch (err) {\r\n        console.error('Failed to parse input:', err);\r\n      }\r\n    } else if (Array.isArray(this.cols) || typeof this.cols === 'object') {\r\n      cols = this.cols;\r\n    } else {\r\n      console.error('Unexpected value for cols: ', this.cols);\r\n    }\r\n    return cols;\r\n  }\r\n\r\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\r\n    params.api.sizeColumnsToFit();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.setColsAndRows();\r\n    this.gridOptions.columnDefs = this.columnDefs;\r\n    this.gridOptions.rowData = this.rowData;\r\n    if (this.gridApi) {\r\n      this.gridApi.setGridOption('rowData', this.rowData);\r\n      this.gridApi.setGridOption('columnDefs', this.columnDefs);\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if (this.container && !this.gridInitialized) {\r\n      if(!isNestedInIfxComponent(this.host)) { \r\n        const framework = detectFramework();\r\n        trackComponent('ifx-basic-table', await framework)\r\n      }\r\n      this.gridApi = createGrid(this.container, this.gridOptions);\r\n      if (this.gridApi) {\r\n        this.gridApi.sizeColumnsToFit({\r\n          defaultMinWidth: 100,\r\n        });\r\n        this.gridApi.setGridOption('columnDefs', this.getColData());\r\n        this.gridApi.setGridOption('rowData', this.getRowData());\r\n        this.gridInitialized = true; \r\n      }\r\n    }\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\r\n      'table-wrapper',\r\n    );\r\n  }\r\n\r\n  getTableStyle() {\r\n    if (this.tableHeight !== 'auto') {\r\n      return {\r\n        height: this.tableHeight,\r\n      };\r\n    }\r\n    return {};\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div id=\"table-wrapper\" class={this.getClassNames()}>\r\n          <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-breadcrumb-item-label.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-breadcrumb-item-label.entry.esm.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":[],"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,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;"}
+{"version":3,"file":"ifx-breadcrumb-item-label.entry.esm.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\";\r\n@use \"../../global/font.scss\";\r\n\r\n.breadcrumb-item-label-container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: tokens.$ifxSpace100;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  &.margin {\r\n    margin-left: 16px;\r\n  }\r\n\r\n  & ifx-icon:empty {\r\n    display: none;\r\n  }\r\n\r\n  & .label-icon-wrapper {\r\n    display: inline-flex;\r\n  }\r\n\r\n  & .menu-icon-wrapper {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    width: tokens.$ifxSize200;\r\n    height: tokens.$ifxSize200;\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n\r\n    & ifx-icon {\r\n      transition: .3s;\r\n    }\r\n\r\n    &.show {\r\n      & ifx-icon {\r\n        transition: .3s;\r\n        transform: rotate(180deg);\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-breadcrumb-item-label',\r\n  styleUrl: 'breadcrumb-item-label.scss',\r\n  shadow: true,\r\n})\r\nexport class BreadcrumbItemLabel {\r\n  @Prop() icon: string;\r\n  @Prop() href: string;\r\n  @Prop() target: string = \"_self\"\r\n  @Element() el;\r\n  @Event() breadcrumbMenuIconWrapper: EventEmitter<CustomEvent>;\r\n\r\n  componentDidLoad() { \r\n    const container = this.el.shadowRoot.querySelector('.breadcrumb-item-label-container')\r\n    const menuWrapper = container.querySelector('.menu-icon-wrapper')\r\n    this.breadcrumbMenuIconWrapper.emit(menuWrapper)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={this.href} target={this.target} class=\"breadcrumb-item-label-container\" role='link'>\r\n        <ifx-icon icon={this.icon} aria-hidden=\"true\"></ifx-icon>\r\n        <span class=\"label-wrapper\">\r\n          <slot />\r\n        </span>\r\n       <span class=\"menu-icon-wrapper\" aria-hiden=\"true\">\r\n        <ifx-icon icon=\"chevron-down-16\"></ifx-icon>\r\n       </span>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"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,QACE,0DAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,iCAAiC,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1F,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EACzD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mBAAmB,EAAA,YAAA,EAAY,MAAM,EAAA,EAChD,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,GAAY,CACtC,CACJ;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-breadcrumb-item.entry.esm.js.map

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

package/dist/infineon-design-system-stencil/ifx-breadcrumb.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-breadcrumb.entry.esm.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":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,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,QACE,0EAAgB,4BAA4B,EAAA,EAC1C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}
+{"version":3,"file":"ifx-breadcrumb.entry.esm.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\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: flex;\r\n}\r\n\r\n.breadcrumb {\r\n  list-style: none;\r\n  padding: 0px;\r\n  margin: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  font-size: tokens.$ifxFontSizeS;\r\n  align-items: flex-start;\r\n  //gap: tokens.$ifxSpace200; //this is where the gap comes from\r\n\r\n}\r\n\r\n// .separator {\r\n//   color: tokens.$ifxColorEngineering300;\r\n//   margin: 0 16px;\r\n// }","import { Component, h, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-breadcrumb',\r\n  styleUrl: 'breadcrumb.scss',\r\n  shadow: true\r\n})\r\nexport class Breadcrumb {\r\n  @Element() el;\r\n\r\n  async componentDidLoad() {\r\n     if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-breadcrumb', await framework)\r\n    }\r\n    const element = this.el.shadowRoot.firstChild;\r\n    this.validateBreadcrumbItemStructure(element);\r\n  }\r\n\r\n  private validateBreadcrumbItemStructure(element: HTMLElement) {\r\n    if (!element) {\r\n      console.error('element not found');\r\n      return;\r\n    }\r\n  \r\n    const slot = element.querySelector('slot');\r\n    if(slot) { \r\n      const assignedNodes = slot.assignedNodes();\r\n  \r\n      for (let i = 0; i < assignedNodes.length; i++) {\r\n        const node = assignedNodes[i];\r\n        if (node.nodeName === 'IFX-BREADCRUMB-ITEM') {\r\n          const breadcrumbItem = node as HTMLIfxBreadcrumbItemElement;\r\n          const breadcrumbItemLabel = breadcrumbItem.querySelector('ifx-breadcrumb-item-label');\r\n          const breadcrumbDropdown = breadcrumbItem.querySelector('ifx-dropdown-menu');\r\n          if (breadcrumbItemLabel.hasAttribute('href') && breadcrumbDropdown) {\r\n            throw new Error('ifx-breadcrumb-item cannot have both a href and a dropdown menu.');\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <nav aria-label=\"Page navigation breadcrumb\">\r\n        <ol class=\"breadcrumb\">\r\n          <slot />\r\n        </ol>\r\n      </nav>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,sPAAsP;;MCU/P,UAAU,GAAA,MAAA;;;;AAGrB,IAAA,MAAM,gBAAgB,GAAA;QACnB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,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,QACE,0EAAgB,4BAA4B,EAAA,EAC1C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACL,CACD;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-button.entry.esm.js.map

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

package/dist/infineon-design-system-stencil/ifx-card-headline.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card-headline.entry.esm.js","sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__headline-wrapper {\n  padding-bottom: 16px;\n\n  &.withDesc {\n    padding-bottom: 8px;\n  }\n}\n\n.card-headline {\n  margin-top: 0;\n  padding-top: 0;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSize3xl;\n  line-height: tokens.$ifxLineHeight3xl;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &.horizontal {\n    font-size: tokens.$ifxFontSizeXl;\n    line-height: 28px;\n  }\n\n}","import { Component, h, Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-headline',\n  styleUrl: 'card-headline.scss',\n  shadow: true,\n})\n\nexport class CardHeadline {\n  @Element() el;\n  @State() direction: string;\n  @State() hasDesc: boolean;\n\n  componentWillLoad() {\n    const cardElement = this.el.closest('ifx-card');\n\n    if (cardElement) {\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\n\n      if (cardClass && cardClass.includes('horizontal')) {\n        this.direction = 'horizontal'\n      }\n\n      const desc = cardElement.querySelector('ifx-card-text');\n      if (desc) {\n        this.hasDesc = true;\n      }\n    }\n  }\n\n\n  render() {\n    return (\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\n        <div class={`card-headline ${this.direction}`}>\n          <slot />\n        </div>\n      </div>\n    )\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}
+{"version":3,"file":"ifx-card-headline.entry.esm.js","sources":["src/components/card/card-headline/card-headline.scss?tag=ifx-card-headline&encapsulation=shadow","src/components/card/card-headline/card-headline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card__headline-wrapper {\r\n  padding-bottom: 16px;\r\n\r\n  &.withDesc {\r\n    padding-bottom: 8px;\r\n  }\r\n}\r\n\r\n.card-headline {\r\n  margin-top: 0;\r\n  padding-top: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSize3xl;\r\n  line-height: tokens.$ifxLineHeight3xl;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 2;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  &.horizontal {\r\n    font-size: tokens.$ifxFontSizeXl;\r\n    line-height: 28px;\r\n  }\r\n\r\n}","import { Component, h, Element, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-headline',\r\n  styleUrl: 'card-headline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardHeadline {\r\n  @Element() el;\r\n  @State() direction: string;\r\n  @State() hasDesc: boolean;\r\n\r\n  componentWillLoad() {\r\n    const cardElement = this.el.closest('ifx-card');\r\n\r\n    if (cardElement) {\r\n      const cardClass = cardElement.shadowRoot.querySelector('.card')?.className;\r\n\r\n      if (cardClass && cardClass.includes('horizontal')) {\r\n        this.direction = 'horizontal'\r\n      }\r\n\r\n      const desc = cardElement.querySelector('ifx-card-text');\r\n      if (desc) {\r\n        this.hasDesc = true;\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card__headline-wrapper ${this.hasDesc ? 'withDesc' : \"\"}`}>\r\n        <div class={`card-headline ${this.direction}`}>\r\n          <slot />\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,qeAAqe;;MCQhf,YAAY,GAAA,MAAA;;;;IAKvB,iBAAiB,GAAA;;QACf,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;QAE/C,IAAI,WAAW,EAAE;AACf,YAAA,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS;YAE1E,IAAI,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACjD,gBAAA,IAAI,CAAC,SAAS,GAAG,YAAY;;YAG/B,MAAM,IAAI,GAAG,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC;YACvD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;;IAMzB,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,uBAAA,EAA0B,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAAA,EACpE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAiB,cAAA,EAAA,IAAI,CAAC,SAAS,CAAE,CAAA,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-card-image.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card-image.entry.esm.js","sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\n  width: 100%;\n  height: 100%;\n  vertical-align: bottom;\n  object-fit: cover;\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-image',\n  styleUrl: 'card-image.scss',\n  shadow: true,\n})\n\nexport class CardImage {\n  @Prop() src: string;\n  @Prop() alt: string;\n  @Prop() position: string;\n  @Event() imgPosition: EventEmitter;\n\n  handlePosition(position) {\n    this.imgPosition.emit(position)\n  }\n\n  componentWillLoad() {\n    this.handlePosition(this.position)\n  }\n\n  componentDidUpdate() {\n    this.handlePosition(this.position)\n  }\n\n  render() {\n    return (\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;"}
+{"version":3,"file":"ifx-card-image.entry.esm.js","sources":["src/components/card/card-image/card-image.scss?tag=ifx-card-image&encapsulation=shadow","src/components/card/card-image/card-image.tsx"],"sourcesContent":[".card-image {\r\n  width: 100%;\r\n  height: 100%;\r\n  vertical-align: bottom;\r\n  object-fit: cover;\r\n}","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-image',\r\n  styleUrl: 'card-image.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardImage {\r\n  @Prop() src: string;\r\n  @Prop() alt: string;\r\n  @Prop() position: string;\r\n  @Event() imgPosition: EventEmitter;\r\n\r\n  handlePosition(position) {\r\n    this.imgPosition.emit(position)\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.handlePosition(this.position)\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.handlePosition(this.position)\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <img src={this.src} alt={this.alt} class=\"card-image\" />\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,4EAA4E;;MCQpF,SAAS,GAAA,MAAA;;;;;AAMpB,IAAA,cAAc,CAAC,QAAQ,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,YAAY,EAAA,CAAG;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-card-links.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card-links.entry.esm.js","sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: tokens.$ifxSpace250;\n  flex-wrap: wrap;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  padding: 0px 24px 24px 24px;\n\n  /* wraps text at spaces and within words */\n  word-wrap: break-word;\n  /* breaks text within a word if necessary */\n  overflow-wrap: anywhere;\n  /* breaks text at arbitrary points when needed */\n\n  &:hover {\n    cursor: initial;\n  }\n}","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-links',\n  styleUrl: 'card-links.scss',\n  shadow: true,\n})\n\nexport class CardLinks {\n  @Element() el;\n\n  render() {\n    return (\n      <div class='container'>\n        <slot />\n      </div>\n    )\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}
+{"version":3,"file":"ifx-card-links.entry.esm.js","sources":["src/components/card/card-links/card-links.scss?tag=ifx-card-links&encapsulation=shadow","src/components/card/card-links/card-links.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n.container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: tokens.$ifxSpace250;\r\n  flex-wrap: wrap;\r\n  text-decoration: none;\r\n  color: tokens.$ifxColorBaseBlack;\r\n  padding: 0px 24px 24px 24px;\r\n\r\n  /* wraps text at spaces and within words */\r\n  word-wrap: break-word;\r\n  /* breaks text within a word if necessary */\r\n  overflow-wrap: anywhere;\r\n  /* breaks text at arbitrary points when needed */\r\n\r\n  &:hover {\r\n    cursor: initial;\r\n  }\r\n}","import { Component, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-links',\r\n  styleUrl: 'card-links.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardLinks {\r\n  @Element() el;\r\n\r\n  render() {\r\n    return (\r\n      <div class='container'>\r\n        <slot />\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,iRAAiR;;MCQzR,SAAS,GAAA,MAAA;;;;IAGpB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-card-overline.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card-overline.entry.esm.js","sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card-overline {\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: tokens.$ifxFontWeightRegular;\n  color: tokens.$ifxColorEngineering500;\n  padding-bottom: 4px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-overline',\n  styleUrl: 'card-overline.scss',\n  shadow: true,\n})\n\nexport class CardOverline {\n\n  render() {\n    return (\n      <div class=\"card-overline\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}
+{"version":3,"file":"ifx-card-overline.entry.esm.js","sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card-overline {\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: tokens.$ifxFontWeightRegular;\r\n  color: tokens.$ifxColorEngineering500;\r\n  padding-bottom: 4px;\r\n\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 1;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n\r\n  word-break: break-all;\r\n\r\n}","import { Component, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-overline',\r\n  styleUrl: 'card-overline.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardOverline {\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"card-overline\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,6SAA6S;;MCQxT,YAAY,GAAA,MAAA;;;;IAEvB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-card-text.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card-text.entry.esm.js","sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card__text-wrapper {\n  padding-bottom: 0px;\n\n  &.hasBtn {\n    padding-bottom: 16px;\n  }\n}\n\n.card-text {\n  line-height: tokens.$ifxLineHeightM;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n  white-space: wrap;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}","import { Component, h, Element, State} from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-text',\n  styleUrl: './card-text.scss',\n  shadow: true,\n})\n\nexport class CardText {\n  @Element() el;\n  @State() hasBtn: boolean;\n\n  componentWillLoad() { \n    const link = this.el.closest('ifx-card').querySelector('ifx-link');\n    const button = this.el.closest('ifx-card').querySelector('ifx-button');\n    if(link || button) { \n      this.hasBtn = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\n        <div class={`card-text`}>\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}
+{"version":3,"file":"ifx-card-text.entry.esm.js","sources":["src/components/card/card-text/card-text.scss?tag=ifx-card-text&encapsulation=shadow","src/components/card/card-text/card-text.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../../global/font.scss\";\r\n\r\n:host {\r\n  pointer-events: none;\r\n}\r\n\r\n.card__text-wrapper {\r\n  padding-bottom: 0px;\r\n\r\n  &.hasBtn {\r\n    padding-bottom: 16px;\r\n  }\r\n}\r\n\r\n.card-text {\r\n  line-height: tokens.$ifxLineHeightM;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n  white-space: wrap;\r\n  display: -webkit-box;\r\n  -webkit-line-clamp: 3;\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}","import { Component, h, Element, State} from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-card-text',\r\n  styleUrl: './card-text.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class CardText {\r\n  @Element() el;\r\n  @State() hasBtn: boolean;\r\n\r\n  componentWillLoad() { \r\n    const link = this.el.closest('ifx-card').querySelector('ifx-link');\r\n    const button = this.el.closest('ifx-card').querySelector('ifx-button');\r\n    if(link || button) { \r\n      this.hasBtn = true;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card__text-wrapper ${this.hasBtn ? 'hasBtn' : \"\"}`}>\r\n        <div class={`card-text`}>\r\n          <slot />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,WAAW,GAAG,6WAA6W;;MCQpX,QAAQ,GAAA,MAAA;;;;IAInB,iBAAiB,GAAA;AACf,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;AAClE,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC;AACtE,QAAA,IAAG,IAAI,IAAI,MAAM,EAAE;AACjB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;;IAItB,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,sBAAsB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAA,CAAE,EAAA,EAC7D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,SAAA,CAAW,EAAA,EACrB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;"}

package/dist/infineon-design-system-stencil/ifx-card.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-card.entry.esm.js","sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 2px solid tokens.$ifxColorEngineering200;\n  border-radius: 2px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } 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-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail;\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image');\n    const links = this.el.querySelector('ifx-card-links');\n\n    this.noImg = !image;\n    this.noBtns = !links;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  componentWillLoad() {\n    this.handleComponentAdjustment();\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', await framework);\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div \n          aria-label={this.ariaLabel} \n          class={\n            `card \n            ${this.noBtns ? 'noBtns' : \"\"}\n            ${this.direction} \n            ${this.alignment}`\n          }\n          role=\"group\"\n        >\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a \n                class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref}\n              >\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a \n                  class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \n                  href={this.internalHref}\n                  id=\"upper-body-content\"\n                >\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a \n                class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref} \n                target={this.target}\n              >\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body' id=\"upper-body-content\">\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-card.entry.esm.js","sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.card {\r\n  position: relative;\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n  word-wrap: break-word;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  background-clip: border-box;\r\n  border: 2px solid tokens.$ifxColorEngineering200;\r\n  border-radius: 2px;\r\n  //width: 22rem;\r\n  width: 350px;\r\n  height: auto;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  // when the link is focused or hovered, the border color changes\r\n  &:has(.card-href:focus), &:has(.card-href:hover) {\r\n    outline: none;\r\n    border-color: tokens.$ifxColorOcean500;\r\n\r\n    ::slotted(ifx-card-headline) {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n  }\r\n\r\n  &.noBtns {\r\n    & .vertical {\r\n      & .lower__body-wrapper {\r\n        padding-bottom: 24px;\r\n      }\r\n    }\r\n\r\n    & .horizontal {\r\n      & .lower__body-wrapper {\r\n        padding-bottom: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .horizontal {\r\n    display: flex;\r\n    flex-direction: row;\r\n    min-height: 218px;\r\n\r\n    & .card-img {\r\n      flex: 1;\r\n      text-decoration: none;\r\n\r\n      &.noImage {\r\n        display: none;\r\n      }\r\n\r\n      & ::slotted([slot=img]) {\r\n        width: 100%;\r\n        vertical-align: bottom;\r\n      }\r\n    }\r\n\r\n    & .lower__body-wrapper {\r\n      flex: 1;\r\n      display: grid;\r\n      grid-template-rows: 1fr auto;\r\n\r\n      & .upper-body {\r\n        display: flex;\r\n        flex-direction: column;\r\n        text-decoration: none;\r\n        color: tokens.$ifxColorBaseBlack;\r\n        padding: 24px 24px 0px 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .vertical {\r\n    & .upper__body-wrapper {\r\n      text-decoration: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n\r\n      & .card-img {\r\n        height: 190px;\r\n\r\n        &.noImage {\r\n          display: none;\r\n        }\r\n      }\r\n\r\n      & .upper-body {\r\n        padding: 24px 24px 0px 24px;\r\n      }\r\n    }\r\n\r\n    & .lower__body-wrapper {\r\n      &:hover {\r\n        border-color: tokens.$ifxColorEngineering200;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.horizontal {\r\n    flex-direction: row;\r\n    width: 538px;\r\n\r\n    & .card-img {\r\n      flex: 1;\r\n      order: 2;\r\n\r\n      & ::slotted([slot=img]) {\r\n        width: 100%;\r\n        height: 100%;\r\n        vertical-align: bottom;\r\n        object-fit: cover;\r\n      }\r\n    }\r\n\r\n    &.left {\r\n      & .horizontal {\r\n        & .card-img {\r\n          order: 1;\r\n        }\r\n\r\n        & .lower__body-wrapper {\r\n          order: 2;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  & .card-href:focus {\r\n    outline: none;\r\n  }\r\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-card',\r\n  styleUrl: 'card.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class Card {\r\n  @Element() el;\r\n  @State() noBtns: boolean;\r\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\r\n  @State() alignment: string;\r\n  @State() noImg: boolean;\r\n  @Prop() href: string = \"\";\r\n  @State() internalHref: string = \"\";\r\n  @Prop() target: string = \"_self\";\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  @Listen('imgPosition')\r\n  setImgPosition(event) {\r\n    this.alignment = event.detail;\r\n  }\r\n\r\n  handleComponentAdjustment() {\r\n    const image = this.el.querySelector('ifx-card-image');\r\n    const links = this.el.querySelector('ifx-card-links');\r\n\r\n    this.noImg = !image;\r\n    this.noBtns = !links;\r\n\r\n    if (this.href.trim() === \"\") {\r\n      this.internalHref = undefined;\r\n    } else {\r\n      this.internalHref = this.href;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.handleComponentAdjustment();\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-card', await framework);\r\n    }\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.handleComponentAdjustment();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div \r\n          aria-label={this.ariaLabel} \r\n          class={\r\n            `card \r\n            ${this.noBtns ? 'noBtns' : \"\"}\r\n            ${this.direction} \r\n            ${this.alignment}`\r\n          }\r\n          role=\"group\"\r\n        >\r\n\r\n          {this.direction === 'horizontal' &&\r\n            <div class=\"horizontal\">\r\n              <a \r\n                class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \r\n                href={this.internalHref}\r\n              >\r\n                <slot name=\"img\" />\r\n              </a>\r\n\r\n              <div class='lower__body-wrapper'>\r\n                <a \r\n                  class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \r\n                  href={this.internalHref}\r\n                  id=\"upper-body-content\"\r\n                >\r\n                  <slot />\r\n                </a>\r\n                <div>\r\n                  <slot name='buttons' />\r\n                </div>\r\n              </div>\r\n            </div>}\r\n\r\n          {this.direction === 'vertical' &&\r\n            <div class=\"vertical\">\r\n              <a \r\n                class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \r\n                href={this.internalHref} \r\n                target={this.target}\r\n              >\r\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\r\n                  <slot name=\"img\" />\r\n                </div>\r\n\r\n                <div class='upper-body' id=\"upper-body-content\">\r\n                  <slot />\r\n                </div>\r\n              </a>\r\n\r\n              <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\r\n                <slot name='buttons' />\r\n              </div>\r\n            </div>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-checkbox-group.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-checkbox-group.entry.esm.js","sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font-size: tokens.$ifxFontSizeM;\n    color: tokens.$ifxColorBaseBlack;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n    color: tokens.$ifxColorEngineering500;\n    margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n    color: tokens.$ifxColorRed500;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @Prop() required: boolean = false;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel && (\n          <div class=\"group-label\">\n            {this.groupLabelText}\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n          </div>\n        )}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-checkbox-group.entry.esm.js","sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.checkbox-group-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.checkbox-group {\r\n    display: flex;\r\n    gap: tokens.$ifxSpace100;\r\n\r\n    &.horizontal {\r\n        flex-direction: row;\r\n        column-gap: tokens.$ifxSpace150;\r\n    }\r\n\r\n    &.vertical {\r\n        flex-direction: column;\r\n        row-gap: tokens.$ifxSpace150;\r\n    }\r\n}\r\n\r\n.group-label {\r\n    font-size: tokens.$ifxFontSizeM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    margin-bottom: tokens.$ifxSpace100;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.group-label .required {\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-left: tokens.$ifxSpace50;\r\n}\r\n\r\n.group-label .required.error {\r\n    color: tokens.$ifxColorRed500;\r\n}\r\n\r\n.caption {\r\n    margin-top: tokens.$ifxSpace100;\r\n    align-self: flex-start;\r\n    display: flex;\r\n    width: 100%;\r\n    column-gap: tokens.$ifxSpace100;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    &.default {\r\n        color: tokens.$ifxColorBaseBlack;\r\n    }\r\n\r\n    &.error {\r\n        color: tokens.$ifxColorRed500;\r\n    }\r\n}\r\n\r\n.caption-text {\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    line-height: tokens.$ifxLineHeightXs;\r\n    flex: 1;\r\n    text-align: left;\r\n    text-underline-position: from-font;\r\n    text-decoration-skip-ink: none;\r\n}\r\n\r\n.caption-icon {\r\n    flex:0;\r\n    display: flex;\r\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-checkbox-group',\r\n  styleUrl: 'checkbox-group.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\n\r\nexport class CheckboxGroup {\r\n  private errorStates: Map<HTMLElement, boolean> = new Map();\r\n\r\n  @Element() el: HTMLElement;\r\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\r\n  @Prop() size: string;\r\n  @Prop() showGroupLabel: boolean;\r\n  @Prop() groupLabelText: string = 'Group Label Text';\r\n  @Prop() showCaption: boolean;\r\n  @Prop() captionText: string;\r\n  @Prop() showCaptionIcon: boolean;\r\n  @Prop() required: boolean = false;\r\n  @State() hasErrors: boolean = false;\r\n\r\n  @Listen('ifxError')\r\n  handleCheckboxError(event: CustomEvent) {\r\n    const checkbox = event.target as HTMLElement;\r\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\r\n      this.errorStates.set(checkbox, event.detail);\r\n      this.updateHasErrors();\r\n    }\r\n  }\r\n\r\n  // Method to set the error state of all checkboxes in the group\r\n  @Method()\r\n  async setGroupError(error: boolean) {\r\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n    checkboxes.forEach((checkbox) => {\r\n      (checkbox as any).error = error;\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.initializeState();\r\n\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-checkbox-group', await framework)\r\n    }\r\n  }\r\n\r\n  handleSlotChange = () => {\r\n    this.initializeState();\r\n  };\r\n\r\n  private initializeState() {\r\n    this.errorStates.clear();\r\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\r\n    checkboxes.forEach((checkbox) => {\r\n      if (!this.errorStates.has(checkbox)) {\r\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\r\n      }\r\n    });\r\n    this.updateHasErrors();\r\n  }\r\n\r\n  private updateHasErrors() {\r\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='checkbox-group-container'>\r\n        {this.showGroupLabel && (\r\n          <div class=\"group-label\">\r\n            {this.groupLabelText}\r\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\r\n          </div>\r\n        )}\r\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\r\n          <slot onSlotchange={this.handleSlotChange}></slot>\r\n        </div>\r\n        {this.showCaption ? (\r\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\r\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\r\n            </ifx-icon></div> : ''}\r\n            <div class='caption-text'>{this.captionText}</div>\r\n          </div>) : ''}\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":[],"mappings":"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"}

package/dist/infineon-design-system-stencil/ifx-checkbox.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-checkbox.entry.esm.js","sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: tokens.$ifxFontFamilyBody;\n    vertical-align: bottom;\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid tokens.$ifxColorEngineering500;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: tokens.$ifxColorRed500;\n        }\n\n        &:focus-visible {\n            border: 1px solid tokens.$ifxColorEngineering500;\n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n            border: 1px solid tokens.$ifxColorEngineering500;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: tokens.$ifxColorEngineering300;;\n            border-color: tokens.$ifxColorEngineering300;;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: tokens.$ifxColorOcean500;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: tokens.$ifxColorRed500;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: tokens.$ifxColorOcean500;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: tokens.$ifxColorEngineering300;;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: tokens.$ifxColorOcean600; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } 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-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          //this.internals.setFormValue(this.value);\n        } else {\n          //this.internals.setFormValue(\"on\")\n        }\n      } else {\n        //this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox', await framework)\n    }\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"ifx-checkbox.entry.esm.js","sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n    display: inline-flex;\r\n    vertical-align: top;\r\n}\r\n\r\n.checkbox__container {\r\n    box-sizing: border-box;\r\n    display: inline-flex;\r\n    flex-direction: row;\r\n    align-items: top;\r\n    padding: 0px;\r\n    gap: tokens.$ifxSpace100;\r\n    font-family: tokens.$ifxFontFamilyBody;\r\n    vertical-align: bottom;\r\n\r\n    & .checkbox__wrapper {\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        position: relative; //needs to be added for the indeterminate state of the checkbox\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: tokens.$ifxSize250;\r\n        height: tokens.$ifxSize250;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 1px solid tokens.$ifxColorEngineering500;\r\n        border-radius: tokens.$ifxBorderRadius12;\r\n        flex: none;\r\n        order: 0;\r\n        flex-grow: 0;\r\n        align-self: flex-start;\r\n\r\n        &.checkbox-m {\r\n            height: tokens.$ifxSize300;\r\n            width: tokens.$ifxSize300;\r\n        }\r\n\r\n        &.error {\r\n            border-color: tokens.$ifxColorRed500;\r\n        }\r\n\r\n        &:focus-visible {\r\n            border: 1px solid tokens.$ifxColorEngineering500;\r\n            outline: 2px solid tokens.$ifxColorOcean500;\r\n            outline-offset: 2px;\r\n        }\r\n\r\n        &:hover {\r\n            background-color: tokens.$ifxColorEngineering200;\r\n            border: 1px solid tokens.$ifxColorEngineering500;\r\n            border-radius: tokens.$ifxBorderRadius12;\r\n            flex: none;\r\n            order: 0;\r\n            flex-grow: 0;\r\n        }\r\n\r\n        &.disabled {\r\n            background-color: tokens.$ifxColorEngineering300;;\r\n            border-color: tokens.$ifxColorEngineering300;;\r\n            border-radius: tokens.$ifxBorderRadius12;\r\n            flex: none;\r\n            order: 0;\r\n            flex-grow: 0;\r\n        }\r\n\r\n        &.checked:not(.indeterminate) {\r\n            background-color: tokens.$ifxColorOcean500;\r\n            border-radius: tokens.$ifxBorderRadius12;\r\n            border-color: tokens.$ifxColorBaseTransparent;\r\n            flex: none;\r\n            order: 0;\r\n            flex-grow: 0;\r\n            color: tokens.$ifxColorBaseWhite;\r\n\r\n            &.error {\r\n                background-color: tokens.$ifxColorRed500;\r\n            }\r\n\r\n            &:focus-visible {\r\n                border: 1px solid transparent;\r\n                outline: 2px solid #0A8276;\r\n                outline-offset: 2px;\r\n            }\r\n\r\n            &:hover {\r\n                background-color: tokens.$ifxColorOcean500;\r\n                border-radius: tokens.$ifxBorderRadius12;\r\n                flex: none;\r\n                order: 0;\r\n                flex-grow: 0;\r\n            }\r\n\r\n            &.disabled {\r\n                background: tokens.$ifxColorEngineering300;;\r\n                border-radius: tokens.$ifxBorderRadius12;\r\n                flex: none;\r\n                order: 0;\r\n                flex-grow: 0;\r\n            }\r\n        }\r\n\r\n        &.indeterminate {\r\n            &:before {\r\n                content: \"\";\r\n                display: block;\r\n                width: 70%; // Adjust as needed for the width of the minus sign\r\n                height: 2px; // Adjust for thickness of the minus sign\r\n                background-color: tokens.$ifxColorOcean600; // Color of the minus sign\r\n                position: absolute;\r\n                top: 50%;\r\n                left: 50%;\r\n                transform: translate(-50%, -50%);\r\n            }\r\n        }\r\n\r\n    }\r\n\r\n    & .label {\r\n        font-style: normal;\r\n        font-weight: 400;\r\n        font-size: tokens.$ifxFontSizeS;\r\n        line-height: tokens.$ifxLineHeightS;\r\n        color: tokens.$ifxColorBaseBlack;\r\n        overflow-wrap: break-word;\r\n        word-wrap: break-word;\r\n        word-break: break-all;\r\n        max-width: 100%;\r\n\r\n        &.label-m {\r\n            font-size: tokens.$ifxFontSizeM;\r\n            line-height: tokens.$ifxLineHeightM;\r\n        }\r\n\r\n        &.disabled {\r\n            color: tokens.$ifxColorEngineering300;\r\n        }\r\n    }\r\n\r\n    & .checkbox__wrapper,\r\n    & .label {\r\n        &:hover {\r\n            cursor: pointer;\r\n        }\r\n    }\r\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-checkbox',\r\n  styleUrl: 'checkbox.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\n\r\nexport class Checkbox {\r\n  private inputElement: HTMLInputElement;\r\n\r\n  @Element() el;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() checked: boolean = false;\r\n  @Prop() error: boolean = false;\r\n  @Prop() size: string = 'm';\r\n  @Prop() indeterminate: boolean = false;\r\n  @Prop() value: string;\r\n  @State() internalChecked: boolean;\r\n  @State() internalIndeterminate: boolean;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n\r\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\r\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\r\n\r\n  handleCheckbox() {\r\n    if (!this.disabled) {\r\n      if (!this.inputElement.indeterminate) {\r\n        this.internalChecked = !this.internalChecked;\r\n      } \r\n      if (this.internalChecked && !this.internalIndeterminate) {\r\n        if (this.value !== undefined) {\r\n          //this.internals.setFormValue(this.value);\r\n        } else {\r\n          //this.internals.setFormValue(\"on\")\r\n        }\r\n      } else {\r\n        //this.internals.setFormValue(null)\r\n      }\r\n      this.ifxChange.emit(this.internalChecked);\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async isChecked(): Promise<boolean> {\r\n    return this.internalChecked;\r\n  }\r\n\r\n  @Method()\r\n  async toggleCheckedState(newVal: boolean) {\r\n    this.internalChecked = newVal;\r\n  }\r\n\r\n  @Watch('checked')\r\n  valueChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.internalChecked = newValue;\r\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\r\n    }\r\n  }\r\n\r\n  @Watch('error')\r\n  errorChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.ifxError.emit(newValue);\r\n    }\r\n  }\r\n\r\n  @Watch('indeterminate')\r\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\r\n    if (newValue !== oldValue) {\r\n      this.internalIndeterminate = newValue;\r\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\r\n    }\r\n  }\r\n\r\n  handleKeydown(event) {\r\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\r\n    if (event.keyCode === 32 || event.keyCode === 13) {\r\n      this.handleCheckbox();\r\n      event.preventDefault();  // prevent the default action when space or enter is pressed\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalChecked = this.checked;\r\n    this.internalIndeterminate = this.indeterminate;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-checkbox', await framework)\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.inputElement.indeterminate = this.internalIndeterminate;\r\n  }\r\n\r\n  /**\r\n   * Callback for form association.\r\n   * Called whenever the form is reset.\r\n   */\r\n  // formResetCallback() {\r\n  //   this.internals.setFormValue(null);\r\n  // }\r\n\r\n  getCheckedClassName() {\r\n    if (this.error) {\r\n      if (this.internalChecked) {\r\n        return \"checked error\"\r\n      } else {\r\n        return \"error\"\r\n      }\r\n    } else if (this.internalChecked) {\r\n      return \"checked\";\r\n    } else return \"\"\r\n  }\r\n\r\n  render() {\r\n    const slot = this.el.innerHTML;\r\n    let hasSlot = false;\r\n    if (slot) {\r\n      hasSlot = true;\r\n    }\r\n    return (\r\n      <div class=\"checkbox__container\">\r\n        <input\r\n          type=\"checkbox\"\r\n          hidden\r\n          ref={(el) => (this.inputElement = el)}\r\n          checked={this.internalChecked}\r\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\r\n          id='checkbox'\r\n          value={`${this.value}`}\r\n          disabled={this.disabled ? true : undefined}\r\n        />\r\n        <div\r\n          tabindex=\"0\"\r\n          onClick={this.handleCheckbox.bind(this)}\r\n          onKeyDown={this.handleKeydown.bind(this)}\r\n          role=\"checkbox\"\r\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\r\n          aria-disabled={this.disabled}\r\n          aria-labelledby=\"label\"\r\n          class={`checkbox__wrapper \r\n          ${this.getCheckedClassName()}\r\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\r\n        ${this.indeterminate ? 'indeterminate' : \"\"}\r\n        ${this.disabled ? 'disabled' : \"\"}`}\r\n        >\r\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\r\n        </div>\r\n        {hasSlot &&\r\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\r\n            <slot />\r\n          </div>}\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":[],"mappings":"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"}