@infineon/infineon-design-system-stencil 34.5.1 → 34.5.2--canary.1896.28ee335d7d855df73698902ddd02bf1664ff7992.0

package/dist/infineon-design-system-stencil/{p-5b8bfb2e.entry.js.map → p-c8c295c8.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["ButtonCellRenderer","init","params","this","createButton","getGui","eGui","refresh","updateButton","config","data","button","options","colDef","cellRendererParams","document","createElement","eButton","hasRequiredKeys","setButtonAttributes","appendChild","attachEventListener","innerHTML","detachEventListener","setAttribute","disabled","toString","variant","theme","type","size","fullWidth","target","href","textContent","text","eventListener","event","onButtonClick","addEventListener","removeEventListener","CustomNoRowsOverlay","noRowsMessageFunc","_params","CustomLoadingOverlay","tableCss","IfxTableStyle0","Table","constructor","hostRef","currentPage","rowData","colData","filterOptions","currentFilters","allRowData","rowHeight","tableHeight","pagination","paginationPageSize","filterOrientation","showSidebarFilters","matchingResultsCount","showLoading","originalRowData","handleChipChange","name","currentSelection","previousSelection","detail","updatedFilters","Object","assign","length","customEvent","CustomEvent","filterName","bubbles","composed","host","dispatchEvent","filterValues","map","selection","value","applyAllFilters","updateTableView","onButtonRendererOptionsChanged","getColData","gridApi","setColumnDefs","toggleSidebarFilters","updateFilterOptions","col","field","Set","row","handleSidebarFilterChange","filterGroups","forEach","filterGroup","filterGroupName","selectedItems","item","label","handleTopbarFilterChange","filters","filter","filterInfo","selectedValues","toLowerCase","textFilterMatched","property","hasOwnProperty","rowValue","String","some","filterValue","startsWith","includesUndefined","includes","startIndex","endIndex","visibleRowData","slice","setGridOption","clearAllFilters","onBtShowLoading","showLoadingOverlay","componentWillLoad","uniqueKey","Math","floor","random","getRowData","gridOptions","headerHeight","defaultColDef","resizable","suppressDragLeaveHidesColumns","enableCellTextSelection","onFirstDataRendered","bind","columnDefs","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","dndSource","animateRows","componentDidRender","componentDidLoad","container","createGrid","sizeColumnsToFit","defaultMinWidth","paginationElement","shadowRoot","querySelector","handlePageChange","sidebarFilterElements","querySelectorAll","sidebarFilterElement","topbarFilterElements","topbarFilterElement","componentWillUnmount","sidebarFilters","sidebarFilter","topbarFilters","topbarFilter","isJSONParseable","str","JSON","parse","e","rows","undefined","Array","isArray","console","error","cols","buttonColumn","find","column","cellRenderer","valueFormatter","buttonRendererOptions","api","handleResetButtonClick","resetEvent","window","disconnectedCallback","resetButton","getTableClassNames","classNames","render","style","height","filterClass","h","Host","key","class","onClick","icon","keys","isMultiSelect","placeholder","readOnly","selected","id","ref","el","total","hasButtonCol","onDragOver","dragSupported","dataTransfer","dropEffect","preventDefault","onDrop","jsonData","getData","eJsonRow","classList","add","innerText","eJsonDisplay"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n  eGui!: HTMLDivElement;\n  eButton!: HTMLElement;  // Change to a generic HTMLElement to accommodate custom elements\n  eventListener!: (event: Event) => void;\n\n  init(params: ICellRendererParams) {\n    this.createButton(params);\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(params: ICellRendererParams) {\n    this.updateButton(params);\n    return true;\n  }\n\n  private createButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    this.eGui = document.createElement('div');\n    this.eButton = document.createElement('ifx-button') as HTMLElement;\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.eGui.appendChild(this.eButton);\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private updateButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.detachEventListener();\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private setButtonAttributes(config: ButtonInterface) {\n    this.eButton.setAttribute('disabled', config.disabled.toString());\n    this.eButton.setAttribute('variant', config.variant);\n    this.eButton.setAttribute('theme', config.theme);\n    this.eButton.setAttribute('type', config.type);\n    this.eButton.setAttribute('size', config.size);\n    this.eButton.setAttribute('full-width', config.fullWidth.toString());\n    this.eButton.setAttribute('target', config.target);\n    this.eButton.setAttribute('href', config.href);\n    this.eButton.textContent = config.text;\n  }\n\n  private attachEventListener(options: any, params: ICellRendererParams) {\n    this.eventListener = (event: Event) => {\n      if (options.onButtonClick) {\n        options.onButtonClick(params, event);\n      }\n    };\n    this.eButton.addEventListener('click', this.eventListener);\n  }\n\n  private detachEventListener() {\n    if (this.eventListener) {\n      this.eButton.removeEventListener('click', this.eventListener);\n    }\n  }\n\n  private hasRequiredKeys(config: ButtonInterface): boolean {\n    return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n  }\n}\n","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\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\n.table-container {\n  display: block;\n}\n\n.sidebar-btn {\n  margin-bottom: 24px;\n}\n\n.sidebar-container {\n  margin-right: 24px;\n}\n\n.sidebar-layout {\n  display: flex;\n  flex-direction: row;\n}\n\n.topbar-layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.table-pagination-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; // stretches items to fill the container horizontally\n  width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n  flex: 1; // allows the table to take up the remaining space\n  padding-bottom: tokens.$ifxSpace100;\n}\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.filter-chips { \n  display:flex;\n  gap:tokens.$ifxSpace100;\n  margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n  margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  margin-bottom: tokens.$ifxSpace100;\n  background: tokens.$ifxColorEngineering100;\n  padding-top: 32px;\n  padding-bottom: 32px;\n  gap: 24px;\n }\n\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n\n.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\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\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  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n  display: none;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n  font-size: 24px;\n  font-weight: 600;\n}\n\n\n.matching-results-container {\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n}\n\n.matching-results-count {\n  font-weight: 600;\n}\n\n.matching-results-text {\n  font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n  tag: 'ifx-table',\n  styleUrl: 'table.scss',\n  shadow: true\n})\nexport class Table {\n  gridOptions: GridOptions;\n  gridApi: GridApi;\n  @State() currentPage: number = 1;\n  @Prop() cols: any;\n  @Prop() rows: any;\n  @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n  @State() rowData: any[] = [];\n  @State() colData: any[] = [];\n  @State() filterOptions: { [key: string]: string[] } = {};\n  @State() currentFilters = {};\n  @State() uniqueKey: string;\n  allRowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @Prop() pagination: boolean = true;\n  @Prop() paginationPageSize: number = 10;\n  @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n  @State() showSidebarFilters: boolean = true;\n  @State() matchingResultsCount: number = 0;\n  @Prop() variant: string = 'default'\n\n  @Prop() showLoading: boolean = false;\n  private container: HTMLDivElement;\n  @Element() host: HTMLElement;\n  originalRowData: any[] = [];\n\n  @Listen('ifxChange')\n  handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n    const { name, currentSelection, previousSelection } = event.detail;\n    if(currentSelection && previousSelection) { \n      // Clone the current filters state\n      const updatedFilters = { ...this.currentFilters };\n  \n      if (currentSelection.length === 0) {\n        // If there are no selections for this filter, delete the filter\n        delete updatedFilters[name];\n  \n        // Emit event with specific filter name\n        const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n        this.host.dispatchEvent(customEvent);\n      } else {\n        // Otherwise, update the filter values with the current selection\n        updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n      }\n  \n      // Update the component's filters\n      this.currentFilters = updatedFilters;\n  \n      // Ensure table data is updated\n      this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n      this.updateTableView();\n    }\n  }\n\n  @Watch('buttonRendererOptions')\n  onButtonRendererOptionsChanged() {\n     this.colData = this.getColData();  // Re-fetch column data to apply new renderer options\n    if (this.gridApi) {\n      this.gridApi.setColumnDefs(this.colData);  // Update column definitions in the grid API\n    }\n  }\n\n  toggleSidebarFilters() {\n    this.showSidebarFilters = !this.showSidebarFilters;\n  }\n\n  updateFilterOptions() {\n    const options = {};\n    for (let col of this.colData) {\n      options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n    }\n    this.filterOptions = options;\n  }\n\n  handleSidebarFilterChange(event: CustomEvent) {\n    const filterGroups = event.detail;\n    const updatedFilters = {};\n\n    filterGroups.forEach(filterGroup => {\n      const filterName = filterGroup.filterGroupName;\n      let filterValues;\n      let type;\n\n      if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n        filterValues = filterGroup.selectedItems.map(item => item.label);\n        type = 'multi-select';\n      } else if (filterGroup.value) {\n        filterValues = [filterGroup.value];\n        type = 'text';\n      } else {\n        filterValues = [];\n      }\n\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        updatedFilters[filterName] = { filterValues, type };\n      }\n    });\n\n    this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n    this.updateTableView();\n    this.currentFilters = updatedFilters;\n  }\n\n\n  handleTopbarFilterChange(event: CustomEvent) {\n    const filters = event.detail;\n\n    // Start by resetting the filter conditions to a blank object\n    this.currentFilters = {};\n\n    // Loop through each filter group provided in the event detail\n    filters.forEach(filter => {\n      const filterName = filter.filterName;\n      let filterValues;\n\n      let type = filter.type;\n\n      if (type === 'text') {\n        // Search/Text filter\n        filterValues = filter.filterValues\n      } else {\n        // Multi-select/Single-Select\n        filterValues = filter.filterValues.map(item => item.label);\n      }\n\n      // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        // Add or update the filter in the currentFilters object\n        this.currentFilters[filterName] = { filterValues, type };\n      }\n    });\n\n\n    // Now that the currentFilters object has been updated, apply all filters to the data\n    this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n    // After filtering, update the table view with the new filtered data\n    this.updateTableView();\n  }\n\n\n  applyAllFilters(data, filters) {\n    return data.filter(row => {\n      for (const filterName in filters) {\n        const filterInfo = filters[filterName];\n        let selectedValues = (filterInfo.filterValues || []).map(value => {\n          if (typeof value === 'string') {\n            return value.toLowerCase();\n          } else if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n          }\n          return '';\n        });\n\n        // For text filters, check if row values start with any of the selectedValues\n        if (filterInfo.type === 'text') {\n          let textFilterMatched = false;\n          for (let property in row) {\n            if (row.hasOwnProperty(property)) {\n              let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n              if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n                textFilterMatched = true;\n                break;\n              }\n            }\n          }\n          if (!textFilterMatched) return false;\n        }\n        // For multi-select filters, this remains unchanged\n        else if (filterInfo.type === 'multi-select') {\n          let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n          // Check if 'undefined' is a selected value and include rows with empty values in that case\n          let includesUndefined = selectedValues.includes('undefined');\n          if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n            return false;\n          }\n        }\n      }\n      return true;\n    });\n  }\n\n\n\n  updateTableView() {\n    // Calculate the slice of data to display based on pagination\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n    // Update the row data in the table\n    this.rowData = visibleRowData;\n    this.gridApi.setGridOption('rowData', this.rowData);\n\n    // Update matching results count\n    this.matchingResultsCount = this.allRowData.length;\n  }\n\n\n  clearAllFilters() {\n    this.currentFilters = {};\n    this.allRowData = [...this.originalRowData];\n  }\n\n\n  @Method()\n  async onBtShowLoading() {\n    this.gridApi.showLoadingOverlay();\n  }\n\n  componentWillLoad() {\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n\n    this.rowData = this.getRowData();\n    this.colData = this.getColData();\n    this.updateFilterOptions();\n\n    this.gridOptions = {\n\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressDragLeaveHidesColumns: true,\n      enableCellTextSelection: true,\n      onFirstDataRendered: this.onFirstDataRendered.bind(this),\n      columnDefs: this.colData,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found' //at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>'\n      },\n      rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n      animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n    };\n\n  }\n\n  componentDidRender() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.colData);\n    }\n  }\n\n\n\n  componentDidLoad() {\n    if (this.container) {\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.colData);\n        this.gridApi.setGridOption('rowData', this.rowData);\n\n        if (this.pagination) {\n          const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n          if (paginationElement) {\n            paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n          }\n        }\n        const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n        // Add an event listener to each SetFilter component\n        sidebarFilterElements.forEach(sidebarFilterElement => {\n          sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n        });\n        const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n        // Add an event listener to each SetFilter component\n        topbarFilterElements.forEach(topbarFilterElement => {\n          topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n        });\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n      }\n    }\n    const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    sidebarFilters.forEach(sidebarFilter => {\n      sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n    });\n    const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    topbarFilters.forEach(topbarFilter => {\n      topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n    });\n  }\n\n  handlePageChange(event) {\n    this.currentPage = event.detail.currentPage;\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n    // Update the data in the grid\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', visibleRowData);\n    }\n  }\n\n  isJSONParseable(str) {\n    try {\n      JSON.parse(str);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n\n  getRowData() {\n    let rows: any[] = [];\n    if (this.rows === undefined || this.rows === null) {\n      return rows;\n    }\n \n    if (this.isJSONParseable(this.rows)) {\n      rows = [...JSON.parse(this.rows)];\n    }\n    else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n       rows = [...this.rows];\n    }\n    else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    this.allRowData = rows;\n    this.originalRowData = [...rows]; // Deep copy the original data\n    this.matchingResultsCount = this.allRowData.length;\n\n    return rows.slice(0, this.paginationPageSize);\n  }\n\n\n  getColData() {\n    let cols: any[] = [];\n    if (this.cols === undefined || this.cols === null) {\n      return cols;\n    }\n  \n    if (this.isJSONParseable(this.cols)) {\n      cols = [...JSON.parse(this.cols)];\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  \n    const buttonColumn = cols.find(column => column.field === 'button');\n    if (buttonColumn) {\n      buttonColumn.cellRenderer = ButtonCellRenderer;\n      buttonColumn.valueFormatter = params => params.value.text;\n      \n      // No JSON.parse needed now\n      if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n        if (this.buttonRendererOptions.onButtonClick) {\n          buttonColumn.cellRendererParams = {\n            onButtonClick: this.buttonRendererOptions.onButtonClick\n          };\n        }\n      }\n    }\n  \n    return cols;\n  }\n  \n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  handleResetButtonClick() {\n    const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n    window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n    this.clearAllFilters();\n    this.updateTableView();  // Update table view with the original data\n  }\n\n\n  disconnectedCallback() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n      }\n    }\n\n    const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n    if (resetButton) {\n      resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n    }\n  }\n\n\n\n  getTableClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n\n  render() {\n    let style = {};\n    if (this.tableHeight !== 'auto') {\n      style = {\n        'height': this.tableHeight\n      };\n    }\n    const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n    return (\n      <Host>\n        <div class=\"table-container\">\n          {this.filterOrientation === 'sidebar' && (\n            <div class=\"sidebar-btn\">\n              <ifx-button\n                type=\"button\"\n                disabled={false}\n                variant=\"secondary\"\n                size=\"m\"\n                target=\"_blank\"\n                theme=\"default\"\n                full-width=\"false\"\n                onClick={() => this.toggleSidebarFilters()}\n              >\n                <ifx-icon icon=\"cross-12\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n              </ifx-button>\n            </div>\n          )}\n\n          <div class={filterClass}>\n            {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n              <div class=\"sidebar-container\">\n                <div class=\"filters-title-container\">\n                  <span class=\"filters-title\">Filters</span>\n                </div>\n                <div class=\"set-filter-wrapper-sidebar\">\n                  {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                    <slot name=\"sidebar-filter\"></slot>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n              <div class=\"set-filter-wrapper-topbar\">\n                {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                  <slot name=\"topbar-filter\"></slot>\n                )}\n              </div>\n            )}\n\n            <div class=\"table-pagination-wrapper\">\n              <div class=\"filter-chips\">\n                {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n                  Object.keys(this.currentFilters).map(name => {\n                    const filter = this.currentFilters[name];\n                    const filterValues = filter.filterValues;\n                    const isMultiSelect = filter.type !== 'text';\n\n                    return filterValues.length > 0 ? (\n                      <ifx-chip\n                        placeholder={name}\n                        size=\"large\"\n                        variant={isMultiSelect ? \"multi\" : \"single\"}\n                        readOnly={true}\n                        value={filterValues} // Ensure value prop is set\n                        key={name}\n                      >\n                        {filterValues.map(filterValue => (\n                          <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n                            {filterValue}\n                          </ifx-chip-item>\n                        ))}\n                      </ifx-chip>\n                    ) : null;\n                  })\n                )}\n\n                {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n                  <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n                  >\n                    <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n                  </ifx-button>\n                )}\n              </div>\n\n              {this.filterOrientation !== 'none' && (\n                <div class=\"matching-results-container\">\n                  <span class=\"matching-results-count\">\n                    {this.matchingResultsCount}\n                  </span>\n                  <span class=\"matching-results-text\">\n                    matching results\n                  </span>\n                </div>\n              )}\n\n              <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n                <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n                </div>\n              </div>\n              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n\n  hasButtonCol(): boolean {\n    return this.getColData().some(column => column.field === 'button');\n  }\n\n  onDragOver(event) {\n    var dragSupported = event.dataTransfer.length;\n\n    if (dragSupported) {\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    event.preventDefault();\n  }\n\n  onDrop(event) {\n    var jsonData = event.dataTransfer.getData('application/json');\n\n    var eJsonRow = document.createElement('div');\n    eJsonRow.classList.add('json-row');\n    eJsonRow.innerText = jsonData;\n\n    var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n    eJsonDisplay.appendChild(eJsonRow);\n    event.preventDefault();\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ButtonCellRenderer","init","params","this","createButton","getGui","eGui","refresh","updateButton","config","data","button","options","colDef","cellRendererParams","document","createElement","eButton","hasRequiredKeys","setButtonAttributes","appendChild","attachEventListener","innerHTML","detachEventListener","setAttribute","disabled","toString","variant","theme","type","size","fullWidth","target","href","textContent","text","eventListener","event","onButtonClick","addEventListener","removeEventListener","CustomNoRowsOverlay","noRowsMessageFunc","_params","CustomLoadingOverlay","tableCss","IfxTableStyle0","Table","constructor","hostRef","currentPage","rowData","colData","filterOptions","currentFilters","allRowData","rowHeight","tableHeight","pagination","paginationPageSize","filterOrientation","showSidebarFilters","matchingResultsCount","showLoading","originalRowData","handleChipChange","name","currentSelection","previousSelection","detail","updatedFilters","Object","assign","length","customEvent","CustomEvent","filterName","bubbles","composed","host","dispatchEvent","filterValues","map","selection","value","applyAllFilters","updateTableView","onButtonRendererOptionsChanged","getColData","gridApi","setColumnDefs","toggleSidebarFilters","updateFilterOptions","col","field","Set","row","handleSidebarFilterChange","filterGroups","forEach","filterGroup","filterGroupName","selectedItems","item","label","handleTopbarFilterChange","filters","filter","filterInfo","selectedValues","toLowerCase","textFilterMatched","property","hasOwnProperty","rowValue","String","some","filterValue","startsWith","includesUndefined","includes","startIndex","endIndex","visibleRowData","slice","setGridOption","clearAllFilters","onBtShowLoading","showLoadingOverlay","componentWillLoad","uniqueKey","Math","floor","random","getRowData","gridOptions","headerHeight","defaultColDef","resizable","suppressDragLeaveHidesColumns","enableCellTextSelection","onFirstDataRendered","bind","columnDefs","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","dndSource","animateRows","componentDidRender","componentDidLoad","container","createGrid","sizeColumnsToFit","defaultMinWidth","paginationElement","shadowRoot","querySelector","handlePageChange","sidebarFilterElements","querySelectorAll","sidebarFilterElement","topbarFilterElements","topbarFilterElement","componentWillUnmount","sidebarFilters","sidebarFilter","topbarFilters","topbarFilter","isJSONParseable","str","JSON","parse","e","rows","undefined","Array","isArray","console","error","cols","buttonColumn","find","column","cellRenderer","valueFormatter","buttonRendererOptions","api","handleResetButtonClick","resetEvent","window","disconnectedCallback","resetButton","getTableClassNames","classNames","render","style","height","filterClass","h","Host","key","class","onClick","icon","keys","isMultiSelect","placeholder","readOnly","selected","id","ref","el","total","hasButtonCol","onDragOver","dragSupported","dataTransfer","dropEffect","preventDefault","onDrop","jsonData","getData","eJsonRow","classList","add","innerText","eJsonDisplay"],"sources":["src/components/table-advanced-version/buttonCellRenderer.ts","src/components/table-advanced-version/customNoRowsOverlay.ts","src/components/table-advanced-version/customLoadingOverlay.ts","src/components/table-advanced-version/table.scss?tag=ifx-table&encapsulation=shadow","src/components/table-advanced-version/table.tsx"],"sourcesContent":["import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';\nimport { ButtonInterface } from './interfaces';\n\nexport class ButtonCellRenderer implements ICellRendererComp {\n  eGui!: HTMLDivElement;\n  eButton!: HTMLElement;  // Change to a generic HTMLElement to accommodate custom elements\n  eventListener!: (event: Event) => void;\n\n  init(params: ICellRendererParams) {\n    this.createButton(params);\n  }\n\n  getGui() {\n    return this.eGui;\n  }\n\n  refresh(params: ICellRendererParams) {\n    this.updateButton(params);\n    return true;\n  }\n\n  private createButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    this.eGui = document.createElement('div');\n    this.eButton = document.createElement('ifx-button') as HTMLElement;\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.eGui.appendChild(this.eButton);\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private updateButton(params: ICellRendererParams) {\n    const config = params.data.button;\n    const options = params.colDef.cellRendererParams || {};\n    \n    if (this.hasRequiredKeys(config)) {\n      this.setButtonAttributes(config);\n      this.detachEventListener();\n      this.attachEventListener(options, params);\n    } else {\n      this.eGui.innerHTML = `<span>${config}</span>`;\n    }\n  }\n\n  private setButtonAttributes(config: ButtonInterface) {\n    this.eButton.setAttribute('disabled', config.disabled.toString());\n    this.eButton.setAttribute('variant', config.variant);\n    this.eButton.setAttribute('theme', config.theme);\n    this.eButton.setAttribute('type', config.type);\n    this.eButton.setAttribute('size', config.size);\n    this.eButton.setAttribute('full-width', config.fullWidth.toString());\n    this.eButton.setAttribute('target', config.target);\n    this.eButton.setAttribute('href', config.href);\n    this.eButton.textContent = config.text;\n  }\n\n  private attachEventListener(options: any, params: ICellRendererParams) {\n    this.eventListener = (event: Event) => {\n      if (options.onButtonClick) {\n        options.onButtonClick(params, event);\n      }\n    };\n    this.eButton.addEventListener('click', this.eventListener);\n  }\n\n  private detachEventListener() {\n    if (this.eventListener) {\n      this.eButton.removeEventListener('click', this.eventListener);\n    }\n  }\n\n  private hasRequiredKeys(config: ButtonInterface): boolean {\n    return config && config.text !== '' && config.variant !== '' && config.size !== '' && config.type !== '';\n  }\n}\n","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\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\n.table-container {\n  display: block;\n}\n\n.sidebar-btn {\n  margin-bottom: 24px;\n}\n\n.sidebar-container {\n  margin-right: 24px;\n}\n\n.sidebar-layout {\n  display: flex;\n  flex-direction: row;\n}\n\n.topbar-layout {\n  display: flex;\n  flex-direction: column;\n}\n\n.table-pagination-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch; // stretches items to fill the container horizontally\n  width: 100%; // ensures the wrapper takes up the full width of its parent\n}\n\n#table-wrapper {\n  flex: 1; // allows the table to take up the remaining space\n  padding-bottom: tokens.$ifxSpace100;\n}\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.filter-chips { \n  display:flex;\n  gap:tokens.$ifxSpace100;\n  margin-bottom: 12px;\n}\n\n.filter-chips > ifx-button { // ifx-button with icon and text has a paddingof 16 px. This is to remove the padding to align with the filter-chips container definition\n  margin-left: -8px;\n}\n\n.set-filter-wrapper-sidebar {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.set-filter-wrapper-topbar {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: row;\n  margin-bottom: tokens.$ifxSpace100;\n  background: tokens.$ifxColorEngineering100;\n  padding-top: 32px;\n  padding-bottom: 32px;\n  gap: 24px;\n }\n\n\n.ifx-ag-grid {\n  display: grid;\n  height: 100%;\n  width: 100%;\n  min-width: 100px;\n  //padding-bottom: tokens.$ifxSpace100;\n}\n\n\n.ifx-ag-grid .ag-header-cell::after {\n  outline: none !important;\n  border: none !important;\n  box-shadow: none !important;\n}\n\n.ifx-ag-grid .ag-header-cell:focus {\n  outline: none !important;\n}\n\n.ifx-ag-grid *:not(.ag-header-cell):focus {\n  outline: none;\n}\n\n\n.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\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\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  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.ag-sort-indicator-container .ag-sort-order { \n  display: none;\n}\n\n.unsort-icon-custom-color {\n  color: tokens.$ifxColorEngineering400;\n}\n\n\n// Table with set filters in sidebar orientation\n\n\n.filters-title {\n  font-size: 24px;\n  font-weight: 600;\n}\n\n\n.matching-results-container {\n  display: flex;\n  gap: 4px;\n  font-size: 14px;\n}\n\n.matching-results-count {\n  font-weight: 600;\n}\n\n.matching-results-text {\n  font-weight: 400;\n}","import { Component, h, Host, Method, Element, Prop, State, Listen, Watch } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { ButtonCellRenderer } from './buttonCellRenderer';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\n\n\n@Component({\n  tag: 'ifx-table',\n  styleUrl: 'table.scss',\n  shadow: true\n})\nexport class Table {\n  gridOptions: GridOptions;\n  gridApi: GridApi;\n  @State() currentPage: number = 1;\n  @Prop() cols: any;\n  @Prop() rows: any;\n  @Prop() buttonRendererOptions?: { onButtonClick?: (params: any, event: Event) => void;}; \n  @State() rowData: any[] = [];\n  @State() colData: any[] = [];\n  @State() filterOptions: { [key: string]: string[] } = {};\n  @State() currentFilters = {};\n  @State() uniqueKey: string;\n  allRowData: any[] = [];\n  @Prop() rowHeight: string = 'default';\n  @Prop() tableHeight: string = 'auto';\n  @Prop() pagination: boolean = true;\n  @Prop() paginationPageSize: number = 10;\n  @Prop() filterOrientation: string = 'sidebar'; // topbar / none\n  @State() showSidebarFilters: boolean = true;\n  @State() matchingResultsCount: number = 0;\n  @Prop() variant: string = 'default'\n\n  @Prop() showLoading: boolean = false;\n  private container: HTMLDivElement;\n  @Element() host: HTMLElement;\n  originalRowData: any[] = [];\n\n  @Listen('ifxChange')\n  handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n    const { name, currentSelection, previousSelection } = event.detail;\n    if(currentSelection && previousSelection) { \n      // Clone the current filters state\n      const updatedFilters = { ...this.currentFilters };\n  \n      if (currentSelection.length === 0) {\n        // If there are no selections for this filter, delete the filter\n        delete updatedFilters[name];\n  \n        // Emit event with specific filter name\n        const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });\n        this.host.dispatchEvent(customEvent);\n      } else {\n        // Otherwise, update the filter values with the current selection\n        updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);\n      }\n  \n      // Update the component's filters\n      this.currentFilters = updatedFilters;\n  \n      // Ensure table data is updated\n      this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n      this.updateTableView();\n    }\n  }\n\n  @Watch('buttonRendererOptions')\n  onButtonRendererOptionsChanged() {\n     this.colData = this.getColData();  // Re-fetch column data to apply new renderer options\n    if (this.gridApi) {\n      this.gridApi.setColumnDefs(this.colData);  // Update column definitions in the grid API\n    }\n  }\n\n  toggleSidebarFilters() {\n    this.showSidebarFilters = !this.showSidebarFilters;\n  }\n\n  updateFilterOptions() {\n    const options = {};\n    for (let col of this.colData) {\n      options[col.field] = [...new Set(this.rowData.map(row => row[col.field]))];\n    }\n    this.filterOptions = options;\n  }\n\n  handleSidebarFilterChange(event: CustomEvent) {\n    const filterGroups = event.detail;\n    const updatedFilters = {};\n\n    filterGroups.forEach(filterGroup => {\n      const filterName = filterGroup.filterGroupName;\n      let filterValues;\n      let type;\n\n      if (filterGroup.selectedItems && filterGroup.selectedItems.length > 0) {\n        filterValues = filterGroup.selectedItems.map(item => item.label);\n        type = 'multi-select';\n      } else if (filterGroup.value) {\n        filterValues = [filterGroup.value];\n        type = 'text';\n      } else {\n        filterValues = [];\n      }\n\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        updatedFilters[filterName] = { filterValues, type };\n      }\n    });\n\n    this.allRowData = this.applyAllFilters(this.originalRowData, updatedFilters);\n    this.updateTableView();\n    this.currentFilters = updatedFilters;\n  }\n\n\n  handleTopbarFilterChange(event: CustomEvent) {\n    const filters = event.detail;\n\n    // Start by resetting the filter conditions to a blank object\n    this.currentFilters = {};\n\n    // Loop through each filter group provided in the event detail\n    filters.forEach(filter => {\n      const filterName = filter.filterName;\n      let filterValues;\n\n      let type = filter.type;\n\n      if (type === 'text') {\n        // Search/Text filter\n        filterValues = filter.filterValues\n      } else {\n        // Multi-select/Single-Select\n        filterValues = filter.filterValues.map(item => item.label);\n      }\n\n      // If there are no filter values, or the filter is a text filter with an empty value, remove the filter\n      if (!(filterValues.length === 0 || (filterValues.length === 1 && type === 'text' && filterValues[0] === ''))) {\n        // Add or update the filter in the currentFilters object\n        this.currentFilters[filterName] = { filterValues, type };\n      }\n    });\n\n\n    // Now that the currentFilters object has been updated, apply all filters to the data\n    this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);\n\n    // After filtering, update the table view with the new filtered data\n    this.updateTableView();\n  }\n\n\n  applyAllFilters(data, filters) {\n    return data.filter(row => {\n      for (const filterName in filters) {\n        const filterInfo = filters[filterName];\n        let selectedValues = (filterInfo.filterValues || []).map(value => {\n          if (typeof value === 'string') {\n            return value.toLowerCase();\n          } else if (typeof value === 'number' || typeof value === 'boolean') {\n            return value.toString();\n          }\n          return '';\n        });\n\n        // For text filters, check if row values start with any of the selectedValues\n        if (filterInfo.type === 'text') {\n          let textFilterMatched = false;\n          for (let property in row) {\n            if (row.hasOwnProperty(property)) {\n              let rowValue = row[property] != null ? String(row[property]).toLowerCase() : '';\n              if (selectedValues.some(filterValue => rowValue.startsWith(filterValue))) {\n                textFilterMatched = true;\n                break;\n              }\n            }\n          }\n          if (!textFilterMatched) return false;\n        }\n        // For multi-select filters, this remains unchanged\n        else if (filterInfo.type === 'multi-select') {\n          let rowValue = row[filterName] != null ? String(row[filterName]).toLowerCase() : '';\n          // Check if 'undefined' is a selected value and include rows with empty values in that case\n          let includesUndefined = selectedValues.includes('undefined');\n          if (!selectedValues.includes(rowValue) && !(includesUndefined && rowValue === '')) {\n            return false;\n          }\n        }\n      }\n      return true;\n    });\n  }\n\n\n\n  updateTableView() {\n    // Calculate the slice of data to display based on pagination\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n\n    // Update the row data in the table\n    this.rowData = visibleRowData;\n    this.gridApi.setGridOption('rowData', this.rowData);\n\n    // Update matching results count\n    this.matchingResultsCount = this.allRowData.length;\n  }\n\n\n  clearAllFilters() {\n    this.currentFilters = {};\n    this.allRowData = [...this.originalRowData];\n  }\n\n\n  @Method()\n  async onBtShowLoading() {\n    this.gridApi.showLoadingOverlay();\n  }\n\n  componentWillLoad() {\n    this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n\n    this.rowData = this.getRowData();\n    this.colData = this.getColData();\n    this.updateFilterOptions();\n\n    this.gridOptions = {\n\n      rowHeight: this.rowHeight === 'default' ? 40 : 32,\n      headerHeight: 40,\n      defaultColDef: {\n        resizable: true,\n      },\n      suppressDragLeaveHidesColumns: true,\n      enableCellTextSelection: true,\n      onFirstDataRendered: this.onFirstDataRendered.bind(this),\n      columnDefs: this.colData,\n      rowData: this.rowData,\n      loadingOverlayComponent: CustomLoadingOverlay,\n      noRowsOverlayComponent: CustomNoRowsOverlay,\n      noRowsOverlayComponentParams: {\n        noRowsMessageFunc: () =>\n          'No rows found' //at: ' + new Date().toLocaleTimeString(),\n      },\n      icons: {\n        sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n        sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n        sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>'\n      },\n      rowDragManaged: this.colData.some(col => col.dndSource === true) ? true : false,\n      animateRows: this.colData.some(col => col.dndSource === true) ? true : false,\n    };\n\n  }\n\n  componentDidRender() {\n    if (this.gridApi) {\n      this.gridApi.setGridOption('columnDefs', this.colData);\n    }\n  }\n\n\n\n  componentDidLoad() {\n    if (this.container) {\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.colData);\n        this.gridApi.setGridOption('rowData', this.rowData);\n\n        if (this.pagination) {\n          const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n          if (paginationElement) {\n            paginationElement.addEventListener('ifxPageChange', this.handlePageChange.bind(this));\n          }\n        }\n        const sidebarFilterElements = this.host.querySelectorAll('ifx-filter-type-group');\n        // Add an event listener to each SetFilter component\n        sidebarFilterElements.forEach(sidebarFilterElement => {\n          sidebarFilterElement.addEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n        });\n        const topbarFilterElements = this.host.querySelectorAll('ifx-filter-bar');\n        // Add an event listener to each SetFilter component\n        topbarFilterElements.forEach(topbarFilterElement => {\n          topbarFilterElement.addEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n        });\n      }\n    }\n  }\n\n  componentWillUnmount() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange.bind(this));\n      }\n    }\n    const sidebarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    sidebarFilters.forEach(sidebarFilter => {\n      sidebarFilter.removeEventListener('ifxSidebarFilterChange', this.handleSidebarFilterChange.bind(this));\n    });\n    const topbarFilters = this.host.shadowRoot.querySelectorAll('ifx-filter-type-group');\n    // Remove the event listener from each SetFilter component\n    topbarFilters.forEach(topbarFilter => {\n      topbarFilter.removeEventListener('ifxTopbarFilterChange', this.handleTopbarFilterChange.bind(this));\n    });\n  }\n\n  handlePageChange(event) {\n    this.currentPage = event.detail.currentPage;\n    const startIndex = (this.currentPage - 1) * this.paginationPageSize;\n    const endIndex = startIndex + this.paginationPageSize;\n    const visibleRowData = this.allRowData.slice(startIndex, endIndex);\n    // Update the data in the grid\n    if (this.gridApi) {\n      this.gridApi.setGridOption('rowData', visibleRowData);\n    }\n  }\n\n  isJSONParseable(str) {\n    try {\n      JSON.parse(str);\n      return true;\n    } catch (e) {\n      return false;\n    }\n  }\n\n\n  getRowData() {\n    let rows: any[] = [];\n    if (this.rows === undefined || this.rows === null) {\n      return rows;\n    }\n \n    if (this.isJSONParseable(this.rows)) {\n      rows = [...JSON.parse(this.rows)];\n    }\n    else if (Array.isArray(this.rows) || typeof this.rows === 'object') {\n       rows = [...this.rows];\n    }\n    else {\n      console.error('Unexpected value for rows: ', this.rows);\n    }\n\n    this.allRowData = rows;\n    this.originalRowData = [...rows]; // Deep copy the original data\n    this.matchingResultsCount = this.allRowData.length;\n\n    return rows.slice(0, this.paginationPageSize);\n  }\n\n\n  getColData() {\n    let cols: any[] = [];\n    if (this.cols === undefined || this.cols === null) {\n      return cols;\n    }\n  \n    if (this.isJSONParseable(this.cols)) {\n      cols = [...JSON.parse(this.cols)];\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  \n    const buttonColumn = cols.find(column => column.field === 'button');\n    if (buttonColumn) {\n      buttonColumn.cellRenderer = ButtonCellRenderer;\n      buttonColumn.valueFormatter = params => params.value.text;\n      \n      // No JSON.parse needed now\n      if (this.buttonRendererOptions && typeof this.buttonRendererOptions === 'object') {\n        if (this.buttonRendererOptions.onButtonClick) {\n          buttonColumn.cellRendererParams = {\n            onButtonClick: this.buttonRendererOptions.onButtonClick\n          };\n        }\n      }\n    }\n  \n    return cols;\n  }\n  \n\n  onFirstDataRendered(params: FirstDataRenderedEvent) {\n    params.api.sizeColumnsToFit();\n  }\n\n  handleResetButtonClick() {\n    const resetEvent = new CustomEvent('ifxResetFiltersEvent', { bubbles: true, composed: true });\n    window.dispatchEvent(resetEvent); // Dispatch from the window object\n\n    this.clearAllFilters();\n    this.updateTableView();  // Update table view with the original data\n  }\n\n\n  disconnectedCallback() {\n    if (this.pagination) {\n      const paginationElement = this.host.shadowRoot.querySelector('ifx-pagination');\n      if (paginationElement) {\n        paginationElement.removeEventListener('ifxPageChange', this.handlePageChange);\n      }\n    }\n\n    const resetButton = this.host.shadowRoot.querySelector('#reset-filters-button');\n    if (resetButton) {\n      resetButton.removeEventListener('click', this.handleResetButtonClick.bind(this));\n    }\n  }\n\n\n\n  getTableClassNames() {\n    return classNames(\n      this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n      'table-wrapper',\n    );\n  }\n\n\n  render() {\n    let style = {};\n    if (this.tableHeight !== 'auto') {\n      style = {\n        'height': this.tableHeight\n      };\n    }\n    const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';\n    return (\n      <Host>\n        <div class=\"table-container\">\n          {this.filterOrientation === 'sidebar' && (\n            <div class=\"sidebar-btn\">\n              <ifx-button\n                type=\"button\"\n                disabled={false}\n                variant=\"secondary\"\n                size=\"m\"\n                target=\"_blank\"\n                theme=\"default\"\n                full-width=\"false\"\n                onClick={() => this.toggleSidebarFilters()}\n              >\n                <ifx-icon icon=\"cross-16\"></ifx-icon>{this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'}\n              </ifx-button>\n            </div>\n          )}\n\n          <div class={filterClass}>\n            {this.filterOrientation === 'sidebar' && this.showSidebarFilters && (\n              <div class=\"sidebar-container\">\n                <div class=\"filters-title-container\">\n                  <span class=\"filters-title\">Filters</span>\n                </div>\n                <div class=\"set-filter-wrapper-sidebar\">\n                  {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                    <slot name=\"sidebar-filter\"></slot>\n                  )}\n                </div>\n              </div>\n            )}\n\n            {this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (\n              <div class=\"set-filter-wrapper-topbar\">\n                {(this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (\n                  <slot name=\"topbar-filter\"></slot>\n                )}\n              </div>\n            )}\n\n            <div class=\"table-pagination-wrapper\">\n              <div class=\"filter-chips\">\n                {this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (\n                  Object.keys(this.currentFilters).map(name => {\n                    const filter = this.currentFilters[name];\n                    const filterValues = filter.filterValues;\n                    const isMultiSelect = filter.type !== 'text';\n\n                    return filterValues.length > 0 ? (\n                      <ifx-chip\n                        placeholder={name}\n                        size=\"large\"\n                        variant={isMultiSelect ? \"multi\" : \"single\"}\n                        readOnly={true}\n                        value={filterValues} // Ensure value prop is set\n                        key={name}\n                      >\n                        {filterValues.map(filterValue => (\n                          <ifx-chip-item value={filterValue} selected={true} key={filterValue}>\n                            {filterValue}\n                          </ifx-chip-item>\n                        ))}\n                      </ifx-chip>\n                    ) : null;\n                  })\n                )}\n\n                {this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (\n                  <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\" onClick={() => this.handleResetButtonClick()}\n                  >\n                    <ifx-icon icon=\"curved-arrow-left-16\"></ifx-icon>Reset all\n                  </ifx-button>\n                )}\n              </div>\n\n              {this.filterOrientation !== 'none' && (\n                <div class=\"matching-results-container\">\n                  <span class=\"matching-results-count\">\n                    {this.matchingResultsCount}\n                  </span>\n                  <span class=\"matching-results-text\">\n                    matching results\n                  </span>\n                </div>\n              )}\n\n              <div id=\"table-wrapper\" class={this.getTableClassNames()}>\n                <div id={`ifxTable-${this.uniqueKey}`} class={`ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : \"\"}`} style={style} ref={(el) => this.container = el}>\n                </div>\n              </div>\n              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage} items-per-page='[{\"value\":\"ten\",\"label\":\"10\",\"selected\":true}, {\"value\":\"Twenty\",\"label\":\"20\",\"selected\":false}, {\"value\":\"Thirty\",\"label\":\"30\",\"selected\":false}]'></ifx-pagination> : null}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n\n  hasButtonCol(): boolean {\n    return this.getColData().some(column => column.field === 'button');\n  }\n\n  onDragOver(event) {\n    var dragSupported = event.dataTransfer.length;\n\n    if (dragSupported) {\n      event.dataTransfer.dropEffect = 'move';\n    }\n\n    event.preventDefault();\n  }\n\n  onDrop(event) {\n    var jsonData = event.dataTransfer.getData('application/json');\n\n    var eJsonRow = document.createElement('div');\n    eJsonRow.classList.add('json-row');\n    eJsonRow.innerText = jsonData;\n\n    var eJsonDisplay = document.querySelector('#eJsonDisplay');\n\n    eJsonDisplay.appendChild(eJsonRow);\n    event.preventDefault();\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-bbc11181.entry.js → p-cd445592.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t}from"./p-b7a462e5.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=r;const s=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"603484dd098009af351637b23ed898a9930fec18","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \n                        ${this.error?"error":""}\n                        ${this.stepperState.variant}\n                        ${this.complete?"complete":""}\n                        ${this.lastStep?"last-step":""}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active?"active":""}\n                        ${this.clickable?"clickable":""}\n                        ${this.disabled?"disabled":""}`},t("div",{key:"0732df62ab68c7ee42d0a14e1ebc72a1d280a36b",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"44054e9fa675579a92b0744f824692c108743ee9",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"e337ececf801eb0ecc3ef3bdb85e3b590f7d51e5",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"a4f3ba01913d0320084a1a245634dd1a3ce38140",icon:"check16"}),this.active&&t("span",{key:"5cf8536ff33b38b99bf6e516abed2cb71d005e30",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"a82d3210924625dc11019e9fcc594096f4877ccf",icon:"warningf24"}),this.stepperState.variant!=="compact"&&t("span",{key:"52f2e8e74ee106e526e9c0823bf4c9c611c4db81",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"901cea7f3cd2793003198ce63fa95df151965f77",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"220cce65e6113c6fd68826cbc4abb0b2d38b9f69"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"d7fe0384cc4da72a2374345cc72ec71250b156ea"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};s.style=p;export{s as ifx_step};
-//# sourceMappingURL=p-bbc11181.entry.js.map
+import{r as e,h as t}from"./p-b7a462e5.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem "Source Sans 3"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem "Source Sans 3"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=r;const s=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"603484dd098009af351637b23ed898a9930fec18","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \n                        ${this.error?"error":""}\n                        ${this.stepperState.variant}\n                        ${this.complete?"complete":""}\n                        ${this.lastStep?"last-step":""}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active?"active":""}\n                        ${this.clickable?"clickable":""}\n                        ${this.disabled?"disabled":""}`},t("div",{key:"0732df62ab68c7ee42d0a14e1ebc72a1d280a36b",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"44054e9fa675579a92b0744f824692c108743ee9",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"e337ececf801eb0ecc3ef3bdb85e3b590f7d51e5",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"a4f3ba01913d0320084a1a245634dd1a3ce38140",icon:"check16"}),this.active&&t("span",{key:"5cf8536ff33b38b99bf6e516abed2cb71d005e30",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"a82d3210924625dc11019e9fcc594096f4877ccf",icon:"warningf16"}),this.stepperState.variant!=="compact"&&t("span",{key:"52f2e8e74ee106e526e9c0823bf4c9c611c4db81",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"901cea7f3cd2793003198ce63fa95df151965f77",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"220cce65e6113c6fd68826cbc4abb0b2d38b9f69"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"d7fe0384cc4da72a2374345cc72ec71250b156ea"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};s.style=p;export{s as ifx_step};
+//# sourceMappingURL=p-cd445592.entry.js.map

package/dist/infineon-design-system-stencil/{p-bbc11181.entry.js.map → p-cd445592.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stepCss","IfxStepStyle0","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf24'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stepCss","IfxStepStyle0","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningf16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-096320fd.entry.js → p-eb806fd6.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as o,a as n,g as i}from"./p-b7a462e5.js";function a(e,t,o,n=20,i=0){const d=[];if(i>=n){return d}const s=e=>{const d=e.assignedNodes().filter((e=>e.nodeType===1));if(d.length>0){const e=d[0].parentElement;return a(e,t,o,n,i+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){d.push(e)}if(e.shadowRoot!=null){d.push(...a(e.shadowRoot,t,o,n,i+1))}else if(e.tagName==="SLOT"){d.push(...s(e))}else{d.push(...a(e,t,o,n,i+1))}}return d}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function s(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function r(e){if(e.getAttribute("tabindex")==="-1"||d(e)||s(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function c(e,t,o){const n=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));n.addEventListener("finish",(()=>{n.commitStyles();n.cancel()}));return n}const l={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const f={fadeIn:[Object.assign(Object.assign({offset:0},l),{opacity:0}),Object.assign(Object.assign({offset:1},l),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},l),{opacity:1}),Object.assign(Object.assign({offset:1},l),{opacity:0})]};const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const b=h;const u=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),r)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=c(this.modalContainer,f.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=c(this.modalContainer,f.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){const e=this.hostElement.shadowRoot.querySelector(".modal-content");const t=window.innerHeight;const o=e.offsetHeight;return o>=t*.9}render(){const e=this.variant!=="default";return o(n,{key:"17d6875b06e84d97c5ec5fe406b067e3b8a89cfd"},o("div",{key:"bf3ac7d192d52b00338cc51df4223666ec6f3a6f",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"ae9ea60511ef423e02503f26aa60de0cda68ef0b",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"8cec672cb52dcec16d1b573af9a804814d8bd721","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"af2862cf1cf750311c7db8fa52cce02e8dafb579",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"28eb3b25740e198f4a821dd08972cb8a32af251d",class:"modal-content"},o("div",{key:"c6c7c7a33a2c54f80d84974f291da77bda1e9b32",class:"modal-header"},o("h2",{key:"d83f94c594402ab62a7df3eaa5066ba6db5ce7a4",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"9136aa70370ea024595dd38b4aed244e6f4d2e92",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-24",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"025c4ba66b524990994c3d282dad0ad8ef9fa025",class:"modal-body"},o("slot",{key:"ee6c23a794022df9377f024225a73021a5b20833",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"5b3c1db9daf678a9c0f49bde2ee6634bde4d27b0",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"ac84e7c3598ff81944b8413ddd67b0d9202998c2",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"eaaceffa354b1b17554881687c99643f3ff3c701","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return i(this)}static get watchers(){return{opened:["openedChanged"]}}};u.style=b;export{u as ifx_modal};
-//# sourceMappingURL=p-096320fd.entry.js.map
+import{r as e,c as t,h as o,a as n,g as i}from"./p-b7a462e5.js";function a(e,t,o,n=20,i=0){const d=[];if(i>=n){return d}const s=e=>{const d=e.assignedNodes().filter((e=>e.nodeType===1));if(d.length>0){const e=d[0].parentElement;return a(e,t,o,n,i+1)}return[]};const r=Array.from(e.children||[]);for(const e of r){if(t(e)){continue}if(o(e)){d.push(e)}if(e.shadowRoot!=null){d.push(...a(e.shadowRoot,t,o,n,i+1))}else if(e.tagName==="SLOT"){d.push(...s(e))}else{d.push(...a(e,t,o,n,i+1))}}return d}function d(e){return e.hasAttribute("hidden")||e.hasAttribute("aria-hidden")&&e.getAttribute("aria-hidden")!=="false"||e.style.display===`none`||e.style.opacity===`0`||e.style.visibility===`hidden`||e.style.visibility===`collapse`}function s(e){return e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false"}function r(e){if(e.getAttribute("tabindex")==="-1"||d(e)||s(e)){return false}return e.hasAttribute("tabindex")||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute("href")||e instanceof HTMLButtonElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement||e instanceof HTMLIFrameElement}function c(e,t,o){const n=e.animate(t,Object.assign(Object.assign({},o),{fill:"both"}));n.addEventListener("finish",(()=>{n.commitStyles();n.cancel()}));return n}const l={easing:"cubic-bezier(0.390, 0.575, 0.565, 1.000)"};const f={fadeIn:[Object.assign(Object.assign({offset:0},l),{opacity:0}),Object.assign(Object.assign({offset:1},l),{opacity:1})],fadeOut:[Object.assign(Object.assign({offset:0},l),{opacity:1}),Object.assign(Object.assign({offset:1},l),{opacity:0})]};const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.modal-container{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;z-index:1060;overflow-y:auto;font-family:var(--ifx-font-family)}.modal-container.open{display:flex}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1D1D1D;opacity:0.5;z-index:0}.modal-content-container{position:absolute;display:flex;justify-content:center;width:90%;min-height:218px;background-color:#fff;border-radius:0;box-shadow:0 2px 10px rgba(0, 0, 0, 0.1);box-sizing:border-box;align-items:stretch}.modal-content-container.no-overflow{overflow:hidden}.modal-content-container.no-overflow .modal-body{overflow-y:auto}@media screen and (min-width: 768px){.modal-content-container{width:540px;min-height:132px}.modal-content-container.m,.modal-content-container.l,.modal-content-container.s{width:90%}}@media screen and (min-width: 1024px){.modal-content-container.s{width:47vw}.modal-content-container.m{width:63vw}.modal-content-container.l{width:80%}}.modal-content{display:flex;flex-direction:column;width:100%;max-height:90vh}.modal-icon-container{display:flex;align-items:center;justify-content:center;width:32px;background-color:#0A8276;align-self:stretch}.modal-icon-container.danger{background-color:#CD002F}.modal-icon-container ifx-icon{color:#FFFFFF}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;min-height:76px;max-height:105px;box-sizing:border-box;border-radius:1px 1px 0px 0px;border-bottom:1px solid #EEEDED}.modal-caption{max-height:56px;display:-webkit-box;overflow:hidden;white-space:pre-wrap;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}.modal-header h2{margin:0;font-weight:600;font-size:1.25rem;line-height:28px}.modal-header button{background:none;border:none;font-size:1.5em;padding:0;cursor:pointer}.modal-close-button{align-self:flex-start;margin-right:-8px}.modal-body{padding:16px 24px;min-height:56px;box-sizing:border-box;flex:1}.modal-footer.buttons-present ::slotted(*){display:flex;justify-content:flex-end;gap:16px;padding:16px 24px 32px 16px}.modal-border{display:flex;align-items:center;justify-content:center;width:100%;font-size:1.5em;flex-grow:1}.modal-border.primary{background-color:#0A8276}.modal-border.secondary{background-color:#575352}.modal-border.danger{background-color:#CD002F}.modal-border.success{background-color:#4CA460}.modal-border.warning{background-color:#E16B25}.modal-border.orange{background-color:#E16B25}.modal-border.ocean{background-color:#0A8276}.modal-border.grey{background-color:#575352}.modal-border.grey-200{background-color:#EEEDED}.modal-border.red{background-color:#CD002F}.modal-border.green{background-color:#4CA460}.modal-border.berry{background-color:#9C216E}';const b=h;const u=class{constructor(o){e(this,o);this.ifxOpen=t(this,"ifxOpen",7);this.ifxClose=t(this,"ifxClose",7);this.opened=false;this.showModal=this.opened||false;this.caption="Modal Title";this.closeOnOverlayClick=true;this.variant="default";this.size="s";this.alertIcon="";this.okButtonLabel="OK";this.cancelButtonLabel="Cancel";this.slotButtonsPresent=false;this.showCloseButton=true;this.focusableElements=[];this.handleTopFocus=()=>{this.attemptFocus(this.getLastFocusableElement())};this.handleBottomFocus=()=>{this.attemptFocus(this.getFirstFocusableElement())};this.handleKeypress=e=>{if(!this.showModal){return}if(e.key==="Escape"){this.doBeforeClose("ESCAPE_KEY")}}}componentDidLoad(){this.focusableElements=a(this.hostElement.shadowRoot,(e=>d(e)||e.matches("[data-focus-trap-edge]")),r)}componentWillRender(){if(this.showModal){this.handleComponentOverflow()}}handleComponentOverflow(){const e=this.hostElement.shadowRoot.querySelector(".modal-content-container");if(this.showModal&&this.isModalContentContainerHeightReachedViewport()){e.classList.add("no-overflow")}else if(e===null||e===void 0?void 0:e.classList.contains("no-overflow")){e===null||e===void 0?void 0:e.classList.remove("no-overflow")}}getFirstFocusableElement(){return this.focusableElements[0]}getLastFocusableElement(){return this.focusableElements[this.focusableElements.length-1]}attemptFocus(e){if(e==null){setTimeout((()=>{this.closeButton.focus()}));return}setTimeout((()=>{e.focus()}),0)}open(){this.showModal=true;try{const e=c(this.modalContainer,f.fadeIn,{duration:200});e.addEventListener("finish",(()=>{setTimeout((()=>{var e,t;(e=this.getLastFocusableElement())===null||e===void 0?void 0:e.focus();(t=this.getLastFocusableElement())===null||t===void 0?void 0:t.blur()}),0);this.ifxOpen.emit()}));this.hostElement.addEventListener("keydown",this.handleKeypress)}catch(e){this.ifxOpen.emit()}}close(){try{const e=c(this.modalContainer,f.fadeOut,{duration:200});e.addEventListener("finish",(()=>{this.showModal=false;this.ifxClose.emit()}));this.hostElement.removeEventListener("keydown",this.handleKeypress)}catch(e){this.showModal=false;this.ifxClose.emit()}}doBeforeClose(e){const t=[];t.push(e);const o=t.some((e=>e.defaultPrevented));if(!o){this.opened=false}}openedChanged(e){if(e===true){this.open()}else{this.close()}}handleOverlayClick(){if(this.closeOnOverlayClick){this.doBeforeClose("BACKDROP")}}handleContentUpdate(e){const t=e.target;const o=t.assignedNodes();if(o.length>0){o.forEach((e=>{if(e.observer){e.observer.disconnect();delete e.observer}const t=new MutationObserver(((e,t)=>{for(let t of e){if(t.type==="childList"){if(this.showModal){this.handleComponentOverflow()}}}}));t.observe(e,{attributes:true,childList:true,subtree:true});e.observer=t}))}}handleButtonsSlotChange(e){var t;if(((t=e.currentTarget.assignedElements()[0])===null||t===void 0?void 0:t.childElementCount)>0){this.slotButtonsPresent=true}else{this.slotButtonsPresent=false}}isModalContentContainerHeightReachedViewport(){const e=this.hostElement.shadowRoot.querySelector(".modal-content");const t=window.innerHeight;const o=e.offsetHeight;return o>=t*.9}render(){const e=this.variant!=="default";return o(n,{key:"17d6875b06e84d97c5ec5fe406b067e3b8a89cfd"},o("div",{key:"bf3ac7d192d52b00338cc51df4223666ec6f3a6f",ref:e=>this.modalContainer=e,class:`modal-container ${this.showModal?"open":""}`},o("div",{key:"ae9ea60511ef423e02503f26aa60de0cda68ef0b",class:"modal-overlay",onClick:()=>this.handleOverlayClick()}),o("div",{key:"8cec672cb52dcec16d1b573af9a804814d8bd721","data-focus-trap-edge":true,onFocus:this.handleTopFocus,tabindex:"0"}),o("div",{key:"af2862cf1cf750311c7db8fa52cce02e8dafb579",class:`modal-content-container ${this.size}`,role:"dialog","aria-modal":"true","aria-label":this.caption},e?o("div",{class:`modal-icon-container ${this.variant==="alert-brand"?"":"danger"}`},this.alertIcon?o("ifx-icon",{icon:this.alertIcon}):null):null,o("div",{key:"28eb3b25740e198f4a821dd08972cb8a32af251d",class:"modal-content"},o("div",{key:"c6c7c7a33a2c54f80d84974f291da77bda1e9b32",class:"modal-header"},o("h2",{key:"d83f94c594402ab62a7df3eaa5066ba6db5ce7a4",class:"modal-caption"},this.caption),this.showCloseButton&&o("ifx-icon-button",{key:"9136aa70370ea024595dd38b4aed244e6f4d2e92",class:"modal-close-button",ref:e=>this.closeButton=e,icon:"cross-16",variant:"tertiary",onClick:()=>this.doBeforeClose("CLOSE_BUTTON")})),o("div",{key:"025c4ba66b524990994c3d282dad0ad8ef9fa025",class:"modal-body"},o("slot",{key:"ee6c23a794022df9377f024225a73021a5b20833",name:"content",onSlotchange:e=>this.handleContentUpdate(e)})),o("div",{key:"5b3c1db9daf678a9c0f49bde2ee6634bde4d27b0",class:`modal-footer ${this.slotButtonsPresent?"buttons-present":""}`},o("slot",{key:"ac84e7c3598ff81944b8413ddd67b0d9202998c2",name:"buttons",onSlotchange:e=>this.handleButtonsSlotChange(e)})))),o("div",{key:"eaaceffa354b1b17554881687c99643f3ff3c701","data-focus-trap-edge":true,onFocus:this.handleBottomFocus,tabindex:"0"})))}get hostElement(){return i(this)}static get watchers(){return{opened:["openedChanged"]}}};u.style=b;export{u as ifx_modal};
+//# sourceMappingURL=p-eb806fd6.entry.js.map

package/dist/infineon-design-system-stencil/{p-096320fd.entry.js.map → p-eb806fd6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","hostElement","el","componentWillRender","handleComponentOverflow","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","modalContent","viewportHeight","window","innerHeight","modalContentHeight","offsetHeight","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  \n  //overflow: hidden;\n\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n.modal-content-container {\n  &.no-overflow { \n    overflow: hidden;\n    & .modal-body { \n      overflow-y: auto;\n    }\n  }\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  \n  //overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n  }\n\n  componentWillRender() { \n    if(this.showModal) { \n      this.handleComponentOverflow();\n    }\n  }\n\n  handleComponentOverflow() { \n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n    if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n      modalContentContainer.classList.add('no-overflow')\n    } else if(modalContentContainer?.classList.contains('no-overflow')) { \n      modalContentContainer?.classList.remove('no-overflow')\n    }\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n    }\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n  handleContentUpdate(e) {\n  const slotElement = e.target;\n  const nodes = slotElement.assignedNodes();\n  if(nodes.length > 0) {\n    nodes.forEach(node => {\n      if (node.observer) {\n        node.observer.disconnect();\n        delete node.observer;\n      }\n      const observer = new MutationObserver((mutationsList, _) => {\n        for(let mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            if(this.showModal) { \n              this.handleComponentOverflow();\n            }\n          }\n        }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n        node.observer = observer;\n      });\n    } \n  }\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n  isModalContentContainerHeightReachedViewport() {\n    const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n    const viewportHeight = window.innerHeight;\n    const modalContentHeight = modalContent.offsetHeight;\n    return modalContentHeight >= viewportHeight * 0.9;\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-24\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["queryShadowRoot","root","skipNode","isMatch","maxDepth","depth","matches","traverseSlot","$slot","assignedNodes","filter","node","nodeType","length","$slotParent","parentElement","children","Array","from","$child","push","shadowRoot","tagName","isHidden","$elem","hasAttribute","getAttribute","style","display","opacity","visibility","isDisabled","isFocusable","HTMLAnchorElement","HTMLAreaElement","HTMLButtonElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","HTMLIFrameElement","animationTo","element","keyframes","options","animated","animate","Object","assign","fill","addEventListener","commitStyles","cancel","keyframeDefaults","easing","KEYFRAMES","fadeIn","offset","fadeOut","modalCss","IfxModalStyle0","IfxModal","constructor","hostRef","this","opened","showModal","caption","closeOnOverlayClick","variant","size","alertIcon","okButtonLabel","cancelButtonLabel","slotButtonsPresent","showCloseButton","focusableElements","handleTopFocus","attemptFocus","getLastFocusableElement","handleBottomFocus","getFirstFocusableElement","handleKeypress","event","key","doBeforeClose","componentDidLoad","hostElement","el","componentWillRender","handleComponentOverflow","modalContentContainer","querySelector","isModalContentContainerHeightReachedViewport","classList","add","contains","remove","setTimeout","closeButton","focus","open","anim","modalContainer","duration","_a","_b","blur","ifxOpen","emit","err","close","ifxClose","removeEventListener","trigger","triggers","prevented","some","defaultPrevented","openedChanged","newValue","handleOverlayClick","handleContentUpdate","e","slotElement","target","nodes","forEach","observer","disconnect","MutationObserver","mutationsList","_","mutation","type","observe","attributes","childList","subtree","handleButtonsSlotChange","currentTarget","assignedElements","childElementCount","modalContent","viewportHeight","window","innerHeight","modalContentHeight","offsetHeight","render","isAlertVariant","h","Host","ref","class","onClick","onFocus","tabindex","role","icon","name","onSlotchange"],"sources":["src/global/utils/focus-trap.ts","src/global/utils/animation.ts","src/components/modal/modal.scss?tag=ifx-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/**\n * Copy/pasted from https://github.com/andreasbm/focus-trap\n */\n\n/**\n * Traverses the slots of the open shadowroots and returns all children matching the query.\n * We need to traverse each child-depth one at a time because if an element should be skipped\n * (for example because it is hidden) we need to skip all of it's children. If we use querySelectorAll(\"*\")\n * the information of whether the children is within a hidden parent is lost.\n * @param {ShadowRoot | HTMLElement} root\n * @param skipNode\n * @param isMatch\n * @param {number} maxDepth\n * @param {number} depth\n * @returns {HTMLElement[]}\n */\nexport function queryShadowRoot(\n  root: ShadowRoot | HTMLElement,\n  skipNode: ($elem: HTMLElement) => boolean,\n  isMatch: ($elem: HTMLElement) => boolean,\n  maxDepth: number = 20,\n  depth: number = 0\n): HTMLElement[] {\n  const matches: HTMLElement[] = [];\n\n  // If the depth is above the max depth, abort the searching here.\n  if (depth >= maxDepth) {\n    return matches;\n  }\n\n  // Traverses a slot element\n  const traverseSlot = ($slot: HTMLSlotElement) => {\n    // Only check nodes that are of the type Node.ELEMENT_NODE\n    // Read more here https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType\n    const assignedNodes = $slot\n      .assignedNodes()\n      .filter((node) => node.nodeType === 1);\n    if (assignedNodes.length > 0) {\n      const $slotParent = assignedNodes[0].parentElement!;\n      return queryShadowRoot(\n        $slotParent,\n        skipNode,\n        isMatch,\n        maxDepth,\n        depth + 1\n      );\n    }\n\n    return [];\n  };\n\n  // Go through each child and continue the traversing if necessary\n  // Even though the typing says that children can't be undefined, Edge 15 sometimes gives an undefined value.\n  // Therefore we fallback to an empty array if it is undefined.\n  const children = Array.from(root.children || []) as HTMLElement[];\n  for (const $child of children) {\n    // Check if the element and its descendants should be skipped\n    if (skipNode($child)) {\n      // console.log('-- SKIP', $child);\n      continue;\n    }\n\n    // console.log('$child', $child);\n\n    // If the element matches we always add it\n    if (isMatch($child)) {\n      matches.push($child);\n    }\n\n    if ($child.shadowRoot != null) {\n      // If the element has a shadow root we need to traverse it\n      matches.push(\n        ...queryShadowRoot(\n          $child.shadowRoot,\n          skipNode,\n          isMatch,\n          maxDepth,\n          depth + 1\n        )\n      );\n    } else if ($child.tagName === 'SLOT') {\n      // If the child is a slot we need to traverse each assigned node\n      matches.push(...traverseSlot($child as HTMLSlotElement));\n    } else {\n      // Traverse the children of the element\n      matches.push(\n        ...queryShadowRoot($child, skipNode, isMatch, maxDepth, depth + 1)\n      );\n    }\n  }\n\n  return matches;\n}\n\n/**\n * Returns whether the element is hidden.\n * @param $elem\n */\nexport function isHidden($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('hidden') ||\n    ($elem.hasAttribute('aria-hidden') &&\n      $elem.getAttribute('aria-hidden') !== 'false') ||\n    // A quick and dirty way to check whether the element is hidden.\n    // For a more fine-grained check we could use \"window.getComputedStyle\" but we don't because of bad performance.\n    // If the element has visibility set to \"hidden\" or \"collapse\", display set to \"none\" or opacity set to \"0\" through CSS\n    // we won't be able to catch it here. We accept it due to the huge performance benefits.\n    $elem.style.display === `none` ||\n    $elem.style.opacity === `0` ||\n    $elem.style.visibility === `hidden` ||\n    $elem.style.visibility === `collapse`\n  );\n\n  // If offsetParent is null we can assume that the element is hidden\n  // https://stackoverflow.com/questions/306305/what-would-make-offsetparent-null\n  // || $elem.offsetParent == null;\n}\n\n/**\n * Returns whether the element is disabled.\n * @param $elem\n */\nexport function isDisabled($elem: HTMLElement): boolean {\n  return (\n    $elem.hasAttribute('disabled') ||\n    ($elem.hasAttribute('aria-disabled') &&\n      $elem.getAttribute('aria-disabled') !== 'false')\n  );\n}\n\n/**\n * Determines whether an element is focusable.\n * Read more here: https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus/1600194#1600194\n * Or here: https://stackoverflow.com/questions/18261595/how-to-check-if-a-dom-element-is-focusable\n * @param $elem\n */\nexport function isFocusable($elem: HTMLElement): boolean {\n  // Discard elements that are removed from the tab order.\n  if (\n    $elem.getAttribute('tabindex') === '-1' ||\n    isHidden($elem) ||\n    isDisabled($elem)\n  ) {\n    return false;\n  }\n\n  return (\n    // At this point we know that the element can have focus (eg. won't be -1) if the tabindex attribute exists\n    $elem.hasAttribute('tabindex') ||\n    // Anchor tags or area tags with a href set\n    (($elem instanceof HTMLAnchorElement || $elem instanceof HTMLAreaElement) &&\n      $elem.hasAttribute('href')) ||\n    // Form elements which are not disabled\n    $elem instanceof HTMLButtonElement ||\n    $elem instanceof HTMLInputElement ||\n    $elem instanceof HTMLTextAreaElement ||\n    $elem instanceof HTMLSelectElement ||\n    // IFrames\n    $elem instanceof HTMLIFrameElement\n  );\n}","export function animationTo(\n  element: HTMLElement,\n  keyframes: Keyframe | Keyframe[],\n  options?: KeyframeAnimationOptions\n) {\n  const animated = element.animate(keyframes, { ...options, fill: 'both' });\n  animated.addEventListener('finish', () => {\n    // @ts-ignore\n    animated.commitStyles();\n    animated.cancel();\n  });\n\n  return animated;\n}\n\nconst keyframeDefaults = {\n  easing: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n};\n\nexport const KEYFRAMES = {\n  fadeIn: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n  ],\n  fadeOut: [\n    {\n      offset: 0,\n      ...keyframeDefaults,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      ...keyframeDefaults,\n      opacity: 0,\n    },\n  ],\n};","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.modal-container {\n  display: none;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1060;\n  overflow-y: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n}\n\n.modal-container.open {\n  display: flex;\n}\n\n.modal-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: tokens.$ifxColorBaseBlack;\n  opacity: 0.5;\n  z-index: 0;\n}\n\n.modal-content-container {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 90%;\n  min-height: 218px;\n  background-color: #fff;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n  \n  //overflow: hidden;\n\n  box-sizing: border-box;\n  align-items: stretch;\n}\n\n.modal-content-container {\n  &.no-overflow { \n    overflow: hidden;\n    & .modal-body { \n      overflow-y: auto;\n    }\n  }\n}\n\n/* Add desktop size here */\n@media screen and (min-width: 768px) {\n  .modal-content-container {\n    width: 540px;\n    min-height: 132px;\n\n    &.m,\n    &.l,\n    &.s {\n      width: 90%;\n    }\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .modal-content-container {\n\n    &.s {\n      width: 47vw;\n    }\n\n    &.m {\n      width: 63vw;\n    }\n\n    &.l {\n      width: 80%;\n    }\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-height: 90vh;\n}\n\n.modal-icon-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  background-color: tokens.$ifxColorOcean500;\n  align-self: stretch;\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  & ifx-icon {\n    color: tokens.$ifxColorBaseWhite;\n  }\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  min-height: 76px;\n  max-height: 105px;\n  box-sizing: border-box;\n  border-radius: 1px 1px 0px 0px;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n}\n\n.modal-caption {\n  max-height: 56px;\n  display: -webkit-box;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical; \n}\n\n.modal-header h2 {\n  margin: 0;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeXl;\n  line-height: 28px;\n}\n\n.modal-header button {\n  background: none;\n  border: none;\n  font-size: 1.5em;\n  padding: 0;\n  cursor: pointer;\n}\n\n.modal-close-button {\n  align-self: flex-start;\n  margin-right: -8px;\n}\n\n.modal-body {\n  padding: 16px 24px;\n  min-height: 56px;\n  box-sizing: border-box;\n  flex: 1;\n  \n  //overflow-y: auto;\n}\n\n.modal-footer.buttons-present ::slotted(*){\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n  padding: 16px 24px 32px 16px\n}\n\n.modal-border {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  font-size: 1.5em;\n  flex-grow: 1;\n\n  &.primary {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.secondary {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.danger {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.success {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.warning {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.orange {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.ocean {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.grey {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.grey-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.red {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.green {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.berry {\n    background-color: tokens.$ifxColorBerry500;\n  }\n}","import { Component, Prop, Element, State, Event, Host, EventEmitter, h, Watch } from '@stencil/core';\nimport { queryShadowRoot, isHidden, isFocusable } from '../../global/utils/focus-trap';\nimport { animationTo, KEYFRAMES } from '../../global/utils/animation';\n \n\ntype CloseEventTrigger = 'CLOSE_BUTTON' | 'ESCAPE_KEY' | 'BACKDROP';\n\nexport interface BeforeCloseEventDetail {\n  trigger: CloseEventTrigger;\n}\n@Component({\n  tag: 'ifx-modal',\n  styleUrl: 'modal.scss',\n  shadow: true\n})\nexport class IfxModal {\n  @Prop({ reflect: true, mutable: true }) opened?: boolean = false;\n  @State() showModal: boolean = this.opened || false;\n\n  @Prop() caption: string = 'Modal Title';\n  @Prop() closeOnOverlayClick: boolean = true;\n\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n\n  @Prop() variant: 'default' | 'alert-brand' | 'alert-danger' = 'default';\n  \n  @Prop() size: 's' | 'm' | 'l' = 's';\n\n  @Prop() alertIcon: string = '';\n  @Prop() okButtonLabel: string = 'OK';\n  @Prop() cancelButtonLabel: string = 'Cancel';\n  @Element() hostElement: HTMLElement;\n\n  @State() slotButtonsPresent: boolean = false;\n\n  @Prop() showCloseButton: boolean = true;\n\n  private modalContainer: HTMLElement;\n  private focusableElements: HTMLElement[] = [];\n  private closeButton: HTMLButtonElement | HTMLIfxIconButtonElement;\n\n  componentDidLoad() {\n    // Query all focusable elements and store them in `focusableElements`.\n    // Needed for the \"focus trap\" functionality.\n    this.focusableElements = queryShadowRoot(\n      this.hostElement.shadowRoot,\n      (el) => isHidden(el) || el.matches('[data-focus-trap-edge]'),\n      isFocusable\n    );\n  }\n\n  componentWillRender() { \n    if(this.showModal) { \n      this.handleComponentOverflow();\n    }\n  }\n\n  handleComponentOverflow() { \n    const modalContentContainer = this.hostElement.shadowRoot.querySelector('.modal-content-container');\n    if (this.showModal && this.isModalContentContainerHeightReachedViewport()) {\n      modalContentContainer.classList.add('no-overflow')\n    } else if(modalContentContainer?.classList.contains('no-overflow')) { \n      modalContentContainer?.classList.remove('no-overflow')\n    }\n  }\n\n  getFirstFocusableElement(): HTMLElement | null {\n    return this.focusableElements[0];\n  }\n\n  getLastFocusableElement(): HTMLElement | null {\n    return this.focusableElements[this.focusableElements.length - 1];\n  }\n\n  handleTopFocus = () => {\n    this.attemptFocus(this.getLastFocusableElement());\n  };\n\n  handleBottomFocus = () => {\n    this.attemptFocus(this.getFirstFocusableElement());\n  };\n\n  attemptFocus(element: HTMLElement | null) {\n    if (element == null) {\n      setTimeout(() => { //wait until DOM is fully loaded\n        this.closeButton.focus();\n      },);\n      return;\n    }\n\n    setTimeout(() => { //wait until DOM is fully loaded\n      element.focus();\n    }, 0);\n  }\n\n  open() {\n    this.showModal = true;\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeIn, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        // Setting focus on last item and removing immediately\n        // so, on tab press first element is focused\n        setTimeout(() => {\n          this.getLastFocusableElement()?.focus();\n          this.getLastFocusableElement()?.blur();\n        }, 0);\n\n        this.ifxOpen.emit();\n      });\n\n      this.hostElement.addEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.ifxOpen.emit();\n    }\n  }\n\n  close() {\n    try {\n      const anim = animationTo(this.modalContainer, KEYFRAMES.fadeOut, {\n        duration: 200,\n      });\n      anim.addEventListener('finish', () => {\n        this.showModal = false;\n        this.ifxClose.emit();\n      });\n      this.hostElement.removeEventListener('keydown', this.handleKeypress);\n    } catch (err) {\n      this.showModal = false;\n      this.ifxClose.emit();\n    }\n  }\n\n  handleKeypress = (event: KeyboardEvent) => {\n    if (!this.showModal) {\n      return;\n    }\n    if (event.key === 'Escape') {\n      this.doBeforeClose('ESCAPE_KEY');\n    }\n  };\n\n  doBeforeClose(trigger: CloseEventTrigger) {\n    const triggers = [];\n    triggers.push(trigger);\n    const prevented = triggers.some((event) => event.defaultPrevented);\n    if (!prevented) {\n      this.opened = false;\n    }\n  }\n\n  @Watch('opened')\n  openedChanged(newValue) {\n    if (newValue === true) {\n      this.open();\n    } else {\n      this.close()\n    }\n  }\n\n  handleOverlayClick() {\n    if (this.closeOnOverlayClick) {\n      this.doBeforeClose('BACKDROP')\n    }\n  }\n\n  handleContentUpdate(e) {\n  const slotElement = e.target;\n  const nodes = slotElement.assignedNodes();\n  if(nodes.length > 0) {\n    nodes.forEach(node => {\n      if (node.observer) {\n        node.observer.disconnect();\n        delete node.observer;\n      }\n      const observer = new MutationObserver((mutationsList, _) => {\n        for(let mutation of mutationsList) {\n          if (mutation.type === 'childList') {\n            if(this.showModal) { \n              this.handleComponentOverflow();\n            }\n          }\n        }\n        });\n        observer.observe(node, { attributes: true, childList: true, subtree: true });\n        node.observer = observer;\n      });\n    } \n  }\n\n  handleButtonsSlotChange(e) {\n    if(e.currentTarget.assignedElements()[0]?.childElementCount > 0) {\n      this.slotButtonsPresent = true;\n    }else{\n      this.slotButtonsPresent = false;\n    }\n  }\n\n  isModalContentContainerHeightReachedViewport() {\n    const modalContent = this.hostElement.shadowRoot.querySelector('.modal-content') as HTMLElement;\n    const viewportHeight = window.innerHeight;\n    const modalContentHeight = modalContent.offsetHeight;\n    return modalContentHeight >= viewportHeight * 0.9;\n  }\n\n\n  render() {\n    const isAlertVariant = this.variant !== 'default';\n    return (\n      <Host>\n        <div\n          ref={(el) => (this.modalContainer = el)}\n          class={`modal-container ${this.showModal ? 'open' : ''}`}\n        >\n          <div\n            class=\"modal-overlay\"\n            onClick={() => this.handleOverlayClick()}\n          ></div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleTopFocus}\n            tabindex=\"0\"\n          ></div>\n          <div\n            class={`modal-content-container ${this.size}`}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={this.caption}>\n            {isAlertVariant ? (\n              <div class={`modal-icon-container ${this.variant === 'alert-brand' ? '' : 'danger'}`}>\n                {this.alertIcon ? <ifx-icon icon={this.alertIcon} /> : null}\n              </div>\n            ) : null}\n            <div class=\"modal-content\">\n              <div class=\"modal-header\">\n                <h2 class=\"modal-caption\">{this.caption}</h2>\n                { \n                  this.showCloseButton && \n                  <ifx-icon-button class = 'modal-close-button' ref={(el) => (this.closeButton = el)} icon=\"cross-16\" variant=\"tertiary\" onClick={() => this.doBeforeClose('CLOSE_BUTTON') }>\n                  </ifx-icon-button>\n                }\n              </div>\n              <div class=\"modal-body\">\n                <slot name=\"content\" onSlotchange={(e) => this.handleContentUpdate(e)} />\n              </div>\n              <div class={`modal-footer ${this.slotButtonsPresent ? 'buttons-present' : ''}`}>\n                <slot name=\"buttons\" onSlotchange={(e)=>this.handleButtonsSlotChange(e)}>\n                </slot>\n              </div>\n            </div>\n          </div>\n          <div\n            data-focus-trap-edge\n            onFocus={this.handleBottomFocus}\n            tabindex=\"0\"\n          ></div>\n        </div>\n      </Host>\n\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "34.5.1",
+  "version": "34.5.2--canary.1896.28ee335d7d855df73698902ddd02bf1664ff7992.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "5.0.0",
-    "@infineon/infineon-icons": "^2.1.2",
+    "@infineon/infineon-icons": "^4.0.0",
     "@popperjs/core": "^2.11.8",
     "@stencil/angular-output-target": "^0.9.0",
     "@stencil/core": "4.27.2",