@infineon/infineon-design-system-stencil 30.10.0--canary.1683.fe45f72105a11f62b600b213cc47953ca6da983c.0 → 30.10.0--canary.1690.3d3b622c5283d21417323e397dba5684776ee0fb.0

package/dist/infineon-design-system-stencil/p-00d6e46e.entry.js.map

@@ -1 +0,0 @@
-{"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","allRowData","originalRowData","handleChipChange","name","currentSelection","detail","updatedFilters","Object","assign","currentFilters","length","customEvent","CustomEvent","filterName","bubbles","composed","host","dispatchEvent","filterValues","map","selection","value","applyAllFilters","updateTableView","onButtonRendererOptionsChanged","colData","getColData","gridApi","setColumnDefs","toggleSidebarFilters","showSidebarFilters","updateFilterOptions","col","field","Set","rowData","row","filterOptions","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","currentPage","paginationPageSize","endIndex","visibleRowData","slice","setGridOption","matchingResultsCount","clearAllFilters","onBtShowLoading","showLoadingOverlay","componentWillLoad","uniqueKey","Math","floor","random","getRowData","gridOptions","rowHeight","headerHeight","defaultColDef","resizable","suppressDragLeaveHidesColumns","enableCellTextSelection","onFirstDataRendered","bind","columnDefs","loadingOverlayComponent","noRowsOverlayComponent","noRowsOverlayComponentParams","icons","sortAscending","sortDescending","sortUnSort","rowDragManaged","dndSource","animateRows","componentDidRender","componentDidLoad","container","createGrid","sizeColumnsToFit","defaultMinWidth","pagination","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","tableHeight","render","style","height","filterClass","filterOrientation","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\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}\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: none;\n}\n\n\n\n.ag-header {\n  background-color: tokens.$ifxColorEngineering100;\n  border-bottom: none;\n\n  &.ag-header-active {\n    outline: none !important;\n    border-color: #0A8276 !important;\n  }\n}\n\n.ag-header-cell {\n  padding-left: 16px;\n  padding-right: 16px;\n  gap: 4px;\n}\n\n\n.ag-header-cell-focus {\n  border: none !important;\n  outline: none !important;\n}\n\n.ag-header-cell-text {\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseBlack;\n  font-family: var(--ifx-font-family);\n\n}\n\n.ag-row-focus {\n  background-color: inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n.ag-row-hover {\n  background-color: tokens.$ifxColorBaseWhite !important; //inherit !important;\n  /* Reset the hover color to the row's original color */\n}\n\n\n.ag-cell-focus {\n  border: none !important;\n  outline: none !important;\n  background-color: inherit !important;\n}\n\n\n\n.ag-row {\n  background-color: tokens.$ifxColorBaseWhite;\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  z-index: 1; //ensure the stacking order when used inside js frameworks\n}\n\n.ag-row-odd {\n  background-color: tokens.$ifxColorBaseWhite;\n}\n\n.ag-cell {\n  display: flex;\n  padding-left: 16px;\n  padding-right: 16px;\n  align-items: center;\n\n}\n\n.ag-ltr .ag-sort-indicator-icon {\n  padding-left: 0px;\n  vertical-align: bottom;\n  line-height: 12px;\n}\n\n.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\n  @Prop() showLoading: boolean = false;\n  private container: HTMLDivElement;\n  @Element() host: HTMLElement;\n  originalRowData: any[] = [];\n\n  @Listen('ifxChipChange')\n  handleChipChange(event: CustomEvent<{ previousSelection: Array<any>, currentSelection: Array<any>, name: string }>) {\n    const { name, currentSelection } = event.detail;\n\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  @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' style={style} ref={(el) => this.container = el}>\n                </div>\n              </div>\n              {this.pagination ? <ifx-pagination total={this.allRowData.length} current-page={this.currentPage}></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-030a5b46.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,g as s}from"./p-6b122987.js";const c=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{display:flex;flex-direction:row;align-items:center}.container.gap{gap:16px}.switch__checkbox-container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.switch__checkbox-container:focus{outline:4px solid #0A8276;outline-offset:2px}.switch__checkbox-container:focus:not(:focus-visible){outline:none}.switch__checkbox-container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.switch__checkbox-container.disabled{cursor:default;border-color:#BFBBBB}.switch__label-wrapper label:hover{cursor:pointer}.switch__label-wrapper.disabled{color:#BFBBBB}.switch__checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch__checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch__checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch__checkbox-wrapper .switch.checked.disabled{cursor:default}.switch__checkbox-container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.switch__checkbox-container.checked{background-color:#0A8276;border-color:#0A8276}.switch__checkbox-container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const o=c;const a=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.checked=false;this.name="";this.disabled=false;this.value=undefined;this.internalChecked=false}async isChecked(){return this.internalChecked}componentWillLoad(){this.internalChecked=this.checked}toggleLabelGap(){const e=this.el.shadowRoot.querySelector("slot");const i=this.el.shadowRoot.querySelector(".container");if(e.assignedNodes().length){i.classList.add("gap")}else{i.classList.remove("gap")}}componentDidLoad(){this.toggleLabelGap()}valueChanged(e,i){if(e!==i){this.internalChecked=e}}toggleSwitch(){if(this.disabled)return;this.internalChecked=!this.internalChecked;if(this.internalChecked){if(this.value!==undefined){this.internals.setFormValue(this.value)}else{this.internals.setFormValue("on")}}else{this.internals.setFormValue(null)}this.ifxChange.emit(this.internalChecked)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggleSwitch()}}formResetCallback(){this.internals.setFormValue(null)}render(){return t("div",{key:"de6389b77c207826d77a570abe5478c6367d1a2f",class:"container",role:"switch","aria-checked":this.internalChecked?"true":"false","aria-label":this.name,onClick:()=>this.toggleSwitch(),onKeyDown:e=>this.handleKeyDown(e)},t("div",{key:"1106e7915d271968cfb7e492416e4c4d3880c79f",class:`switch__checkbox-container ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`,tabindex:"0"},t("div",{key:"28e9a3a6b19b15e0bf7728de60d0096b0105e479",class:"switch__checkbox-wrapper"},t("input",{key:"707c0926234f0efd3e89add4de113a60d93fa0f6",type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,checked:this.internalChecked,value:`${this.value}`}),t("div",{key:"c49f39e736dedca763a5e64c244150511002b362",class:`switch ${this.internalChecked?"checked":""} ${this.disabled?"disabled":""}`}))),t("div",{key:"11b0ea462a831639c84aa58cfaffed801881dc6a",class:`switch__label-wrapper ${this.disabled?"disabled":""}`},t("label",{key:"dc3fd52e702f0630283d871fff9b47184db4e535",htmlFor:"switch"},t("slot",{key:"4b77fbdea92c23c4d056b71ad5ac889f24e34277",onSlotchange:()=>this.toggleLabelGap()}))))}static get formAssociated(){return true}get el(){return s(this)}static get watchers(){return{checked:["valueChanged"]}}};a.style=o;export{a as ifx_switch};
-//# sourceMappingURL=p-030a5b46.entry.js.map

package/dist/infineon-design-system-stencil/p-030a5b46.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["switchCss","IfxSwitchStyle0","Switch","isChecked","this","internalChecked","componentWillLoad","checked","toggleLabelGap","slot","el","shadowRoot","querySelector","container","assignedNodes","length","classList","add","remove","componentDidLoad","valueChanged","newValue","oldValue","toggleSwitch","disabled","value","undefined","internals","setFormValue","ifxChange","emit","handleKeyDown","event","key","formResetCallback","render","h","class","role","name","onClick","onKeyDown","tabindex","type","hidden","htmlFor","onSlotchange"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  componentDidLoad() {\n    this.toggleLabelGap();\n\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,giDAClB,MAAAC,EAAeD,E,MCSFE,EAAM,M,2OACU,M,UACJ,G,cACK,M,0CAEQ,K,CASpC,eAAMC,GACJ,OAAOC,KAAKC,e,CAGd,iBAAAC,GACEF,KAAKC,gBAAkBD,KAAKG,O,CAI9B,cAAAC,GACE,MAAMC,EAAOL,KAAKM,GAAGC,WAAWC,cAAc,QAC9C,MAAMC,EAAYT,KAAKM,GAAGC,WAAWC,cAAc,cACnD,GAAIH,EAAKK,gBAAgBC,OAAQ,CAC/BF,EAAUG,UAAUC,IAAI,M,KACnB,CACLJ,EAAUG,UAAUE,OAAO,M,EAI/B,gBAAAC,GACEf,KAAKI,gB,CAKP,YAAAY,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBlB,KAAKC,gBAAkBgB,C,EAI3B,YAAAE,GACE,GAAInB,KAAKoB,SAAU,OACnBpB,KAAKC,iBAAmBD,KAAKC,gBAE7B,GAAID,KAAKC,gBAAiB,CACxB,GAAID,KAAKqB,QAAUC,UAAW,CAC5BtB,KAAKuB,UAAUC,aAAaxB,KAAKqB,M,KAC5B,CACLrB,KAAKuB,UAAUC,aAAa,K,MAEzB,CACLxB,KAAKuB,UAAUC,aAAa,K,CAG9BxB,KAAKyB,UAAUC,KAAK1B,KAAKC,gB,CAG3B,aAAA0B,CAAcC,GACZ,GAAI5B,KAAKoB,SAAU,OAEnB,GAAIQ,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9C7B,KAAKmB,c,EAQT,iBAAAW,GACE9B,KAAKuB,UAAUC,aAAa,K,CAG9B,MAAAO,GACE,OACEC,EAAA,OAAAH,IAAA,2CACEI,MAAM,YACNC,KAAK,SAAQ,eACClC,KAAKC,gBAAkB,OAAS,QAAO,aACzCD,KAAKmC,KACjBC,QAAS,IAAMpC,KAAKmB,eACpBkB,UAAYT,GAAU5B,KAAK2B,cAAcC,IAGzCI,EAAA,OAAAH,IAAA,2CACEI,MAAO,8BAA8BjC,KAAKC,gBAAkB,UAAY,MAAMD,KAAKoB,SAAW,WAAa,KAC3GkB,SAAS,KAETN,EAAA,OAAAH,IAAA,2CAAKI,MAAM,4BACTD,EAAA,SAAAH,IAAA,2CAAOU,KAAK,WAAWC,OAAM,KAC3BL,KAAMnC,KAAKmC,KACXf,SAAUpB,KAAKoB,SACfjB,QAASH,KAAKC,gBACdoB,MAAO,GAAGrB,KAAKqB,UACjBW,EAAA,OAAAH,IAAA,2CAAKI,MAAO,UAAUjC,KAAKC,gBAAkB,UAAY,MAAMD,KAAKoB,SAAW,WAAa,SAKhGY,EAAA,OAAAH,IAAA,2CAAKI,MAAO,yBAAyBjC,KAAKoB,SAAW,WAAa,MAChEY,EAAA,SAAAH,IAAA,2CAAOY,QAAQ,UACbT,EAAA,QAAAH,IAAA,2CAAMa,aAAc,IAAM1C,KAAKI,qB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-0a011c63.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s}from"./p-6b122987.js";const n=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.segment{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #BFBBBB;border-radius:1px;padding:0 8px 0 8px;height:34px;background-color:#FFFFFF;transition:all 100ms ease;transition-property:color, background;font:600 0.875rem/1.25rem "Source Sans 3"}.segment:focus-visible{color:#FFFFFF;background-color:#0A8276}.segment:hover{color:#FFFFFF;background-color:#08665C;cursor:pointer}.segment:active{background-color:#06534B}.segment.segment--selected{color:#FFFFFF;background-color:#0A8276}.segment.segment--small{height:30px}.segment::after{position:absolute;top:0;left:0;width:100%;height:100%;outline:1px solid #BFBBBB;border-radius:1px;content:""}';const o=n;const i=class{constructor(s){e(this,s);this.segmentSelect=t(this,"segmentSelect",5);this.icon=undefined;this.segmentIndex=undefined;this.selected=false;this.value=undefined}handleSegmentClick(){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}handleSegmentKeyDown(e){if(e.code==="Enter"||e.code==="Space"){if(this.selected)return;this.selected=true;this.segmentSelect.emit(this.segmentIndex)}}render(){return s("div",{key:"49c56df2adf407d13685ae7c99b512afa532c6de",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},s("ifx-icon",{key:"c576b2bb7b09ae6ed1946759df7303df36b430dc",icon:this.icon})," ",s("slot",{key:"61d467f2cda3552d5c90e9995ceccdca76c6825c"}))}};i.style=o;export{i as ifx_segment};
-//# sourceMappingURL=p-0a011c63.entry.js.map

package/dist/infineon-design-system-stencil/p-0a011c63.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["segmentCss","IfxSegmentStyle0","Segment","handleSegmentClick","this","selected","segmentSelect","emit","segmentIndex","handleSegmentKeyDown","event","code","render","h","key","class","tabIndex","onClick","onKeyDown","e","icon"],"sources":["src/components/segmented-control/segment/segment.scss?tag=ifx-segment&encapsulation=shadow","src/components/segmented-control/segment/segment.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.segment {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: tokens.$ifxSize100;\n    position: relative;\n\n    border: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: 0 tokens.$ifxSize100 0 tokens.$ifxSize100;\n    \n    height: 34px;\n\n    background-color: tokens.$ifxColorBaseWhite;\n\n    transition: all 100ms ease;\n    transition-property: color, background;\n    \n    font: tokens.$ifxBodyBodySemibold04;\n\n    &:focus-visible {\n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &:hover {         \n        color: tokens.$ifxColorBaseWhite;\n        background-color: tokens.$ifxColorOcean600;\n        \n        cursor: pointer;\n    }\n    \n    &:active {\n        background-color: tokens.$ifxColorOcean700;\n    }\n    \n    &.segment--selected {\n        color: tokens.$ifxColorBaseWhite;\n        \n        background-color: tokens.$ifxColorOcean500;\n    }\n\n    &.segment--small {\n        height: 30px;\n    }\n}\n\n.segment::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n\n    width: 100%;\n    height: 100%;\n\n    outline: tokens.$ifxBorderRadius12 solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadius12;\n\n    content: '';\n}","import { h, Component, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segment',\n    styleUrl: 'segment.scss',\n    shadow: true\n})\n\nexport class Segment {\n    @Event({ composed: false }) segmentSelect: EventEmitter<number>;\n\n    @Prop() icon: string;\n    @Prop() segmentIndex: number;\n    @Prop({ mutable: true }) selected: boolean = false;\n    @Prop() value!: string;\n\n    handleSegmentClick() {\n        if (this.selected) return;\n        this.selected = true;\n        this.segmentSelect.emit(this.segmentIndex);\n    }\n    \n    handleSegmentKeyDown(event: KeyboardEvent) {\n        if (event.code === 'Enter' || event.code === 'Space') {\n            if (this.selected) return;\n            this.selected = true;\n            this.segmentSelect.emit(this.segmentIndex);\n        }\n    }\n\n    render() {\n        return (\n            <div class={`segment ${this.selected ? 'segment--selected' : ''}`} \n                tabIndex={0}\n                onClick={() => {this.handleSegmentClick()}}\n                onKeyDown={(e) => {this.handleSegmentKeyDown(e)}}>\n                <ifx-icon icon={this.icon}></ifx-icon> <slot />\n            </div>\n        );\n    }\n}"],"mappings":"kDAAA,MAAMA,EAAa,ixBACnB,MAAAC,EAAeD,E,MCOFE,EAAO,M,oIAK6B,M,qBAG7C,kBAAAC,GACI,GAAIC,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,CAGjC,oBAAAC,CAAqBC,GACjB,GAAIA,EAAMC,OAAS,SAAWD,EAAMC,OAAS,QAAS,CAClD,GAAIP,KAAKC,SAAU,OACnBD,KAAKC,SAAW,KAChBD,KAAKE,cAAcC,KAAKH,KAAKI,a,EAIrC,MAAAI,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,WAAWX,KAAKC,SAAW,oBAAsB,KACzDW,SAAU,EACVC,QAAS,KAAOb,KAAKD,oBAAoB,EACzCe,UAAYC,IAAOf,KAAKK,qBAAqBU,EAAE,GAC/CN,EAAA,YAAAC,IAAA,2CAAUM,KAAMhB,KAAKgB,OAAiB,IAACP,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-0c4276df.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,g as r}from"./p-6b122987.js";const i=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}.breadcrumb-parent{display:flex;flex-direction:row;align-items:center;padding:0px;gap:12px;min-height:24px;justify-content:center}.breadcrumb-parent:hover{cursor:pointer}.breadcrumb-parent .breadcrumb-wrapper{display:flex;flex-direction:row;align-items:center;padding:0px;gap:8px;position:relative}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu{display:none;position:absolute;top:20px}.breadcrumb-parent .breadcrumb-wrapper .dropdown-menu.open{display:block}.breadcrumb-parent .breadcrumb-wrapper a{text-decoration:none;color:#1D1D1D;font-family:var(--ifx-font-family);font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;display:flex;align-items:center;color:#1D1D1D;flex-direction:column;justify-content:center;padding:0px;border-bottom:1px solid #1D1D1D}.breadcrumb-parent .breadcrumb-divider{width:10px;height:16px;color:#EEEDED;line-height:13px;font-size:1.25rem;margin-right:12px}';const n=i;const o=class{constructor(t){e(this,t);this.isLastItem=false;this.uniqueId=undefined;this.hasDropdownMenu=false}handleOutsideClick(e){const t=e.composedPath();if(!t.includes(this.el)){this.closeDropdownMenu()}}handleKeyDown(e){if(e.key==="Enter"||e.key===" "){this.toggleDropdownMenu()}else if(e.key==="Escape"){this.closeDropdownMenu()}}getDropdownMenu(){const e=this.el.shadowRoot.querySelector(".dropdown-menu");return e}menuWrapperEventReEmitter(e){this.emittedElement=e.detail}getMenuIconWrapper(){return this.emittedElement}handleClassList(e,t,r){e.classList[t](r)}closeDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","show")}}toggleDropdownMenu(){if(this.hasDropdownMenu){const e=this.getDropdownMenu();const t=this.getMenuIconWrapper();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","show")}}isDropdownMenuOpen(){const e=this.getDropdownMenu();return this.hasDropdownMenu&&e&&e.classList.contains("open")}handleLastItem(){const e=this.el.closest("ifx-breadcrumb").querySelectorAll("ifx-breadcrumb-item");if(this.el===e[e.length-1]){this.isLastItem=true}else this.isLastItem=false}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("breadcrumb-dropdown")}this.handleLastItem()}componentDidUpdate(){this.handleLastItem()}componentWillRender(){this.setHasDropdownMenuState()}setHasDropdownMenuState(){const e=this.getIfxDropdownMenuComponent();if(e){this.hasDropdownMenu=!!e}}getIfxDropdownMenuComponent(){const e=this.el.querySelector("ifx-dropdown-menu");return e}componentDidLoad(){const e=this.getIfxDropdownMenuComponent();if(!this.hasDropdownMenu){const e=this.getMenuIconWrapper();this.handleClassList(e,"toggle","hide")}else{e.isOpen=true}}render(){return t("li",{key:"5779bbe0854a084c33c1bb535655fe484165784e",class:"breadcrumb-parent","aria-current":`${this.isLastItem?"page":""}`},t("li",{key:"63e956424dda4002a84c7da17bfe42b3f7f830b0",role:"button",tabindex:this.hasDropdownMenu?0:-1,class:"breadcrumb-wrapper",onClick:()=>this.toggleDropdownMenu(),"aria-controls":this.uniqueId,"aria-haspopup":"menu","aria-label":"Toggle dropdown menu"},t("slot",{key:"14f66501d9ac8efc9ff9e6b771757e30c70814a6",name:"label"}),t("div",{key:"9620ab0608dc5c74aa39fe321a332421ee4c76b3",id:this.uniqueId,class:"dropdown-menu","aria-expanded":this.isDropdownMenuOpen(),"aria-label":"Dropdown menu"},t("slot",{key:"c4e6e9b1650f2467876f7824201139b369625b3d"}))),!this.isLastItem&&t("span",{key:"5c028ab8720841b8a2777a84d7ad3f933ab43b79",class:"breadcrumb-divider","aria-hidden":"true"},"/"))}get el(){return r(this)}};o.style=n;export{o as ifx_breadcrumb_item};
-//# sourceMappingURL=p-0c4276df.entry.js.map

package/dist/infineon-design-system-stencil/p-0c4276df.entry.js.map

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

package/dist/infineon-design-system-stencil/p-189c89c3.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s}from"./p-6b122987.js";const i="";const l=i;const h=class{constructor(s){e(this,s);this.ifxFilterSelect=t(this,"ifxFilterSelect",7);this.filterName=undefined;this.filterLabel=undefined;this.placeholder=undefined;this.type="text";this.options=undefined;this.filterValues=[]}handleTextInputChange(e){const t=e.target;const s=t.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[s],type:this.type})}handleSingleSelectChange(e){const t=e.detail.value;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:[t],type:this.type})}handleMultiselectOptionChange(e){this.filterValues=e.detail;this.ifxFilterSelect.emit({filterName:this.filterName,filterValues:this.filterValues,type:this.type})}render(){switch(this.type){case"text":return s("ifx-text-field",{error:false,disabled:false,placeholder:this.placeholder,onIfxInput:e=>this.handleTextInputChange(e)},this.filterLabel);case"single-select":return s("ifx-select",{placeholder:"true","search-enabled":"true","search-placeholder-value":"Search...",onIfxSelect:e=>this.handleSingleSelectChange(e),"ifx-placeholder-value":this.placeholder,"ifx-label":this.filterLabel,"ifx-options":this.options});case"multi-select":return s("ifx-multiselect",{label:this.filterLabel,placeholder:this.placeholder,options:this.options,onIfxSelect:e=>this.handleMultiselectOptionChange(e)});default:return null}}};h.style=l;export{h as ifx_set_filter};
-//# sourceMappingURL=p-189c89c3.entry.js.map

package/dist/infineon-design-system-stencil/p-189c89c3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["setFilterCss","IfxSetFilterStyle0","SetFilter","handleTextInputChange","event","target","value","this","ifxFilterSelect","emit","filterName","filterValues","type","handleSingleSelectChange","detail","handleMultiselectOptionChange","render","h","error","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect","options","label"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail; // Assuming that ifx-multiselect emits an array of selected options\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            options={this.options}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          />\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"],"mappings":"kDAAA,MAAMA,EAAe,GACrB,MAAAC,EAAeD,E,MCOFE,EAAS,M,oKAIsC,O,yCAExB,E,CAKlC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBC,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAc,CAACL,GAAQM,KAAML,KAAKK,M,CAI7F,wBAAAC,CAAyBT,GACvB,MAAME,EAAQF,EAAMU,OAAOR,MAC3BC,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAc,CAACL,GAAQM,KAAML,KAAKK,M,CAI7F,6BAAAG,CAA8BX,GAC5BG,KAAKI,aAAeP,EAAMU,OAC1BP,KAAKC,gBAAgBC,KAAK,CAAEC,WAAYH,KAAKG,WAAYC,aAAcJ,KAAKI,aAAcC,KAAML,KAAKK,M,CAIvG,MAAAI,GACE,OAAQT,KAAKK,MACX,IAAK,OACH,OACEK,EAAA,kBAAgBC,MAAO,MAAOC,SAAU,MAAOC,YAAab,KAAKa,YAC/DC,WAAYjB,GAASG,KAAKJ,sBAAsBC,IAChDG,KAAKe,aAEX,IAAK,gBACH,OACEL,EAAA,cACEG,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAanB,GAASG,KAAKM,yBAAyBT,GAAM,wBACnCG,KAAKa,YAAW,YAC5Bb,KAAKe,YAAW,cACdf,KAAKiB,UAGxB,IAAK,eACH,OACEP,EAAA,mBACEQ,MAAOlB,KAAKe,YACZF,YAAab,KAAKa,YAClBI,QAASjB,KAAKiB,QACdD,YAAanB,GAASG,KAAKQ,8BAA8BX,KAG/D,QACE,OAAO,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-18f5a5e3.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c,g as a}from"./p-6b122987.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=d;const b=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.innerHTML=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.innerHTML=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.innerHTML=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"94ef0cd5e94c2cd278b42251bd942ef7bed3bc9e",class:"container"},c("header",{key:"29fa237275093d906d19dd7c4f7ef103ebe23a91",class:"header"},c("div",{key:"983ce63f77dafd26ed5b25da2cc518f8b7834e35",class:"header__info-wrapper"},c("div",{key:"6a909d8f1fbd3efdc928ae99aace2fbe2d6ce888",class:"title"},"DDS Components Overview"),c("div",{key:"95ec497b9e4b65d6e1e48a9dd8754a052ee79281",class:"infoboard__wrapper"},c("div",{key:"fedd769a5cda6dcc7320d0b259d58e9482f750a3",class:"basic__info"},c("div",{key:"18e40e6b586afeae9ca1ec9a9edb4c849acad717"},"Total Number:"),c("div",{key:"0327edd0557b74ef60a1fde6a4f4b1b66b190cb2"},c("ifx-number-indicator",{key:"37206eb3e0e30bc54906745c45b312805cdc9453",id:"number__indicator-total"}))),c("div",{key:"92d6dea0710d1e2d2193049543530b205e514bd3",class:"basic__info"},c("div",{key:"497953be0cb32f373757140ad4f39f087e83d41c"},"Completed:"),c("div",{key:"5d353eedddeb5adc70b8f2cdfaa7d82eb5358587"},c("ifx-number-indicator",{key:"837f9bb96855ea0c8bc6a58017bf2b93f22527d4",id:"number__indicator-completed"}))),c("div",{key:"8dee70161f789692a569643bf24fac938b06539a",class:"basic__info"},c("div",{key:"26f4a5ea75d6d3f91cf3fcd301807a43ae1b132a"},"In Progress:"),c("div",{key:"6b36c07112366eb3ea0d12f4704823ead18a892c"},c("ifx-number-indicator",{key:"454c1b760527366374b46a32a7f9a26e6746399a",id:"number__indicator-planned"})))))),c("div",{key:"4e2349c5d71032a0fc4ec18bf3753ffc4ebb9bfd",class:"view"},c("div",{key:"201ded58bf4b595562445677c08cff1944426ea2",class:"wrapper"},c("table",{key:"a27ee204659d8ad1ca6bfd2015ab2a6dfc42954c"},c("thead",{key:"0fe9b4e836cf884e708a40e98711e397e9988268"},c("tr",{key:"9189ba17125982fda16a0a05dbbe73279b0d81f8"},c("th",{key:"67d5182d415ee892696b7a33ff4024824e53046c",class:"sticky-col second-col"},"Component"),c("th",{key:"6f546e2b5681d14124e7f6c7be96194eb7156771"},c("div",{key:"cb01f34d8d0d05e553bbc1cee742bd46a238b149",class:"version__wrapper"},c("span",{key:"92aa213436a98e7794f37ba573cc0e7e1ea1524d"},"Version 1"))),c("th",{key:"df61570f92d456836c3755ab0f62dd7fd4d89426"},c("div",{key:"50489ed3424003794a5b8344422f2b0a624d75d3",class:"version__wrapper"},c("span",{key:"78629e20c10b5bac6e4293a361b8a0067d3d940c"},"Version 2"))),c("th",{key:"6c8115976c082ba1122f922d9cdaa72df2791b1b"},"Version 3"))),c("tbody",{key:"0a6455ddce92d1c25b3bd45db290af7deefe3707"},c("tr",{key:"b598af041a6f3e51094a200c4b3084dbceb1c555"},c("td",{key:"e795f6e5abf128f2fcf1336d114bf77468f28a96",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e1c3ecf42c3433a1708e0ae5d9088b99536496d5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"40ebc65154f49ee09f504ef5782c4191bba27e92"},c("ul",{key:"60d9ee3c1a25fad5edf6c5bf0f2313a8d263f973"},c("li",{key:"37f79e0e57c08d7dcb9f25ad86884038fdc79ff2"},c("span",{key:"be049cf79476587d212746e0c1a5914eab273eb7"},c("ifx-icon",{key:"dc61a02131094abf32fb715b593e439ce596a9b9",class:"check__icon",icon:"check12"})),c("span",{key:"d5a2d994fccedeadc8cb0ecd3d8e6efe71314e05"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"457b623dc3fcd451ba736a7c8f327817b6574e87"},c("span",{key:"5cbe8527c814ff3e5689ad5875f2c959882d5c2c"},c("ifx-icon",{key:"faeab4af2670659cf2f58ceeb87b6d2f8a978ce8",class:"check__icon",icon:"check12"})),c("span",{key:"ebd7a5db84eca81da34d77ba2522a3659221de03"},"Adheres to web standards")),c("li",{key:"cb4a6d8ae95e77adce24376eb42acd21a64cdb6a"},c("span",{key:"ec31aaff74855da2ac91c18f1fbaea34d8f4dc69"},c("ifx-icon",{key:"6b48f88000731fc782b514b97b987b7ac22ce5c0",class:"check__icon",icon:"check12"})),c("span",{key:"7a2949072e16cf4467798477ca393dc4c0f6ae88"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"c61fde63a81278555182cbb27991ab5461c6611e"},c("ul",{key:"5ee77d58854bad176f43011292e958e1dbd27dda"},c("li",{key:"e95be64eb112ee39495e2c6fbcba20676cbb747f"},c("span",{key:"f8f1570fed7d9e829d8c3503d2e41986617eea24"},c("ifx-icon",{key:"45baa82725ca721045d65cce34792fa65a353b83",class:"check__icon",icon:"check12"})),c("span",{key:"6c3ce948145b2a9d3ceb70dfcbfac7e56f0cbe47"},"Auto collapse feature")),c("li",{key:"2698e9963be778a4ac34424d3444ffd67c7ef788"},c("span",{key:"b08e4aaf2273da66bdae9be6dd0397e7d713f8dd"},c("ifx-icon",{key:"f422aa2a0185ad088f3613f8feacef03f9f5c11a",class:"check__icon",icon:"check12"})),c("span",{key:"a4adfa592feec11645a5454fe2afe4bd98b336fa"},"Initial collapse feature")),c("li",{key:"4d3edb6fe01f8d753f2defbb012e0dbb7896046b"},c("span",{key:"4150c87dec05ff04cf89761038fb33977933b195"},c("ifx-icon",{key:"ccf693d2aef10d111c6a1ab3a401f7e0c54cdc41",class:"check__icon",icon:"check12"})),c("span",{key:"eed5a5b3e1709fbf49e34d96d05610890f9180c5"},"React, Vue and Angular wrapper integration")))),c("td",{key:"928dbf258b958e858b056f8ed3584711e7c283c0"})),c("tr",{key:"42535b2c12485e7a213ccd721a733ac70c996c32"},c("td",{key:"0052287ec495d253bd4c012c4b9da78e3cc66d15",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"0f027f26ecc5ba509e92caa43873b1b8921d2c94",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"69243d98a53e6acd24575e914b215ca4961877f4"},c("ul",{key:"1af9ff86ac0eb84705b14cc246afeb9d387e6ec1"},c("li",{key:"eddeb4c11d034ece0ca658b09d7257956582d42f"},c("span",{key:"0e73c3cdbb0528837055fe515cd2d02ba92317b6"},c("ifx-icon",{key:"9c6068398ac45636bb058ec023019b3e29c05678",class:"check__icon",icon:"check12"})),c("span",{key:"bc9353bc9c18a19e792834c73aae38ee2758440e"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"8cfefe626c93e464e502ffca2cdf94f52c9ac88f"},c("span",{key:"7b00ac3fc8a8d8ccd49654d2d704e7441259fa06"},c("ifx-icon",{key:"cc58cd630c7336f0ae7d87ccc9150046df8dca22",class:"check__icon",icon:"check12"})),c("span",{key:"ce428ab59abc1d5febc458a1b2b94f4f951ad30e"},"Adheres to web standards")))),c("td",{key:"40128f668e879d4cc63ae71994dab826217eea9f"},c("ul",{key:"54ae983a69edbc9917a65740ce2797e538f09188"},c("li",{key:"a4ea0f0b88664e87ab77aee96195806cdc677c47"},c("span",{key:"ec96ce45f2be131790a7d34db1d332f821841e1f"},c("ifx-icon",{key:"e264dac478022217205a442580521a297dc88fab",class:"check__icon",icon:"check12"})),c("span",{key:"7a0f0646a2769fecdfc2b6f70ea115975f6823b9"},"Configurable close button")),c("li",{key:"a8f745131d982aa5b35e3cddc469f23d959ae763"},c("span",{key:"f3a48f12774d4a5e40143891c0b58f65692595e1"},c("ifx-icon",{key:"db45b84b32389ff4366856304a929dd82899d78e",class:"check__icon",icon:"check12"})),c("span",{key:"fcf7143a144e46b4f951c61f5f42e0de51c73acd"},"Additional Info variant")),c("li",{key:"f061934669df125b1bc644e780a4502d7658e091"},c("span",{key:"2bedaf5fa2c3ce77aac7a618d98b4654d62cb4bc"},c("ifx-icon",{key:"1ab37982bb0390df92e96a6d3dd475e569e3d5b3",class:"check__icon",icon:"check12"})),c("span",{key:"7e6a1031e3668eaa688eae46a8b229bd6517a50e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7e2b72ba9c3aa90d871d8dae4fb9a1e75adab631"})),c("tr",{key:"a912b471325929c5c4e98a8ac23d11dad38562b2"},c("td",{key:"12c144973a5787b9af186e0f453c3377a9a854d2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"18925f2858448cc69ceeadb4ad0e8367146df30e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"0266b9a7306d83836324a8e9644ed0f652dbe076"},c("ul",{key:"df73eb97dba110daf14f05f821b976eec8179558"},c("li",{key:"943918ba87c3e42c961bad97c7105eb1d13729d7"},c("span",{key:"709f65596aa279f72b59fe0bef047ddcb20079cd"},c("ifx-icon",{key:"e921c062a3ca815159a31592802419a073db1188",class:"check__icon",icon:"check12"})),c("span",{key:"21083e88f63ccd7e0887852495c091cf1809f99c"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"70ee9c1ad01837ba045f1c7934760de863dc31bf"},c("span",{key:"86d1d054ebe753a1e03c04706beebed45bc0a5c3"},c("ifx-icon",{key:"78406b1778129d994ec2431387477e4390d028c2",class:"check__icon",icon:"check12"})),c("span",{key:"805c8fe88d898eeaeec23cb907b422549bbe2b83"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"6c83cb9b1f8277c67c5b8ce035436dd14ab6e9c9"},c("ul",{key:"8d75a3f4909d2dffe373d892eb8010672442e2f6"},c("li",{key:"5b77fea0b304db06f29189463ec46398fab6e64c"},c("span",{key:"3e3d35cd4b75a412c6d67dacb262d1595e1ef99e"},c("ifx-icon",{key:"280665ef569e73f344855b07f089f5d164b59090",class:"check__icon",icon:"check12"})),c("span",{key:"7e0e13d3c2a36f7a71646d0f0bc64708d4a51f4d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a86b3c17d08b071cb10b11b55f85c5deb3f59550"})),c("tr",{key:"88bfaebe869023ef94a9b54f274e6aa159caba95"},c("td",{key:"af9bec690861fac6be6d31207dd4c9b0c0af8369",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6d6ac5ffa4e1ec3f11ce6bfb93a999dc2a99e69b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"a629edab0452e8873d8b22ee3e33377fc75169e0"},c("ul",{key:"280b762ab5aa19ca05c1e1db28e0368413dc5217"},c("li",{key:"2c60125c0ac3f67eeea8480a135d1b6f26803312"},c("span",{key:"803c59b077ad0d8eb2f31b575f73d22e7b73cddd"},c("ifx-icon",{key:"2008d8469a576f5fab435c1e75ea7eb05204057b",class:"check__icon",icon:"check12"})),c("span",{key:"9d1331cadb11f207534c99d3f565b1f4d4543165"},"Provides a simple and customizable way to display a sequential trail of links or indicators,  representing the user's current location within a hierarchy of content")),c("li",{key:"44476725da6b6d0ae2b0398e21eb24f0d4bc5695"},c("span",{key:"b17fdabaa095dc599066b4fd68c93d5f4e3b7344"},c("ifx-icon",{key:"7b8a58bee3f180c17e3f0ca636ffd3e54e63e48f",class:"check__icon",icon:"check12"})),c("span",{key:"d1519645e6d2f28cb3ee6a289163303e321241d3"},"Adheres to web standards")))),c("td",{key:"ea8cb1822e12f785bcfb544d64567ad274530376"},c("ul",{key:"aac603b96593e05989dfbc01a4183234aa07d02b"},c("li",{key:"3e78b3aa72cff2718928050f3ccfbbc00193cdd5"},c("span",{key:"459b5a0a5252d638f88a79b6ff9a849e950b1502"},c("ifx-icon",{key:"c696691ce31ec51d784ad4eb8b1d427e2327f6c3",class:"check__icon",icon:"check12"})),c("span",{key:"8cbfb840e7a7b261c7dae636acc10025b5b9798c"},"Possibility to add an icon")),c("li",{key:"d1ddd1f1bfc1c1a155eb85558dad34bd4b35703e"},c("span",{key:"aefdd11b822003eb68b264de592763efe6ab8fc9"},c("ifx-icon",{key:"0152b25b6d4e1bfc46446ba45c84c79f29a3f06d",class:"check__icon",icon:"check12"})),c("span",{key:"91b0c2ab2f373e2849806f61cd637c87b1646e99"},"Incorporated dropdown-menu for individual items")),c("li",{key:"eb5ec0e139cc0106b9e78136c84ad3f660b965b2"},c("span",{key:"08128db435df9fb59ddd734e33fd178725bc1119"},c("ifx-icon",{key:"26d71651eb3ba22501b1fb43900b24cdc1e4df5f",class:"check__icon",icon:"check12"})),c("span",{key:"fb53e44ce6d5e563f33f53bb96f337a0b08c88b6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"530c4772c140f8cb6fee0e7757c8bfeb3bce2881"})),c("tr",{key:"e9869f920d1dbade1a67c4721f49303bd73bdff9"},c("td",{key:"a51b7e1cfcb1990107cfa0f647b1afb59dfb13a5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f6232318bc58777423bbb449e10b46d16c2b8ae1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"fcdefdf15949b715d961159c2dcddf504fbdd673"},c("ul",{key:"36d525e48a7df25afdd447996b04bc9d73ec96cd"},c("li",{key:"0493b3ffb5d9a72b16bb9d8878cf402173b500e6"},c("span",{key:"5791ef78a6cecc527f44dba3013bcfb2fbc49cd2"},c("ifx-icon",{key:"18deb22a8638d3483dab2fc356ddaac739b5f5c3",class:"check__icon",icon:"check12"})),c("span",{key:"5bf054b09332de983bf5563940ecfd9cefc73d87"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"43b43b6d21392fdd420e4d5de9156527d0be0d6b"},c("span",{key:"21c8e421b141575855735e9e6883910a39c7bec4"},c("ifx-icon",{key:"57579c0ff62da49adcdf3cddb1e3bf1e84b71a1f",class:"check__icon",icon:"check12"})),c("span",{key:"78d641b6f05eeeb6a814be86863fd609e2eb78aa"},"Adheres to web standards")))),c("td",{key:"e151102e6d1086c310415a2c33f3b80008f68e2b"},c("ul",{key:"b6e177c354f511b6c3827d609bae988d93dde3ac"},c("li",{key:"97dfc9b18ea758002589fb71e2c7a9e46caaf216"},c("span",{key:"af8bfb54a35f066c0b958457255ae70882018d5a"},c("ifx-icon",{key:"950e77cc7939c6d18f5b4ca2fcc8e089283980a3",class:"check__icon",icon:"check12"})),c("span",{key:"8e62043c26ad0ce65ad41bba072cd0e600ec0b11"},"fullWidth feature")),c("li",{key:"d78251795f4ca2cfe931bf7c7aa1662679573d73"},c("span",{key:"de20563fd28bc87fb2854638b744b66529723733"},c("ifx-icon",{key:"0f19319f77093efc0ac7c41456ae52087b9ea85d",class:"check__icon",icon:"check12"})),c("span",{key:"85bbe99ff7aca59084ac3a8014f5b66b019d729b"},"Icon integration")),c("li",{key:"6ad8b71217454fad5aff9b2a80ea35cc88563484"},c("span",{key:"ccbecb192b20f199dfbb2ba67ce1af7c339c438b"},c("ifx-icon",{key:"997c35faa553f3907df4c0876be728b3651e4f5d",class:"check__icon",icon:"check12"})),c("span",{key:"dd0d5db341741435ad450343b7c305747b92018c"},"Link integration")),c("li",{key:"c5eaaff12880b0196783b191574dc44f92421bea"},c("span",{key:"c96eec7fe549c422c508c2dc994ea01663ef5c5a"},c("ifx-icon",{key:"eadbb622bf64b9a3c8ae949fc3a5938891223875",class:"check__icon",icon:"check12"})),c("span",{key:"588b5199a7062d6bab67056c9b87932d54125c98"},"React, Vue and Angular wrapper integration")))),c("td",{key:"908d173f46640ecb4cc5c3e315c87047a45d2c05"},c("ul",{key:"0271a6c781fc850752e27c9446f66ca11145676b"},c("li",{key:"2ecad646d03baa8e0a8ef505dde2235b3ac08869"},c("span",{key:"eb059f2484d52054d1217e97170f759b30e2143c"},c("ifx-icon",{key:"0950cde5d1888a74672786a9c03a0f1939d8b800",class:"check__icon",icon:"check12"})),c("span",{key:"58ffac6e58bbe36fcae213f6ad6e8e7b2dcae08d"},"Form integration"))))),c("tr",{key:"62bf201d672843a3659742c3c0974a1df03fa610"},c("td",{key:"b81dcfae5ef6d64e75ad2c13d3e94dd774e4fe13",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"17c2850979ff42007cf91a06aee453967aef790a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"f8f10063b913ae90d4a31832849c2d51098225f1"},c("ul",{key:"276a9bc25010aa7059b7898041e3e8f9d4685213"},c("li",{key:"91be80d95e13731290db11fbf126c9296b1cd835"},c("span",{key:"804f1cd8dc601820957e5d5937b018ac5b85ddfa"},c("ifx-icon",{key:"117355d111a36a824c3531c1d05563552ae00ad5",class:"check__icon",icon:"check12"})),c("span",{key:"1137a5058d66e16c642b53f6085a18be127206f9"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"27af1fcde3f2d03958e91b47f64cd3dd4f8f5b06"},c("span",{key:"f390da2994a4afd01554a04128b4f5bda3169953"},c("ifx-icon",{key:"1d835e545a75e4600d9ac57841aa21228727beac",class:"check__icon",icon:"check12"})),c("span",{key:"2b476badd5bd2d7d587d59fac8f8da7001537241"},"Adheres to web standards")),c("li",{key:"c29e2cb4c31129893e8da47923ca4915d545b3b1"},c("span",{key:"3798871acd1a68b512fb1f358b99fe25b9b2031e"},c("ifx-icon",{key:"ff4bfe8132064cea4a20a86cc505567a828fea90",class:"check__icon",icon:"check12"})),c("span",{key:"4610fe22f9b666d5cabca62353d3f7296ad079c4"},"Horizontal and Vertical layout")))),c("td",{key:"515164d2489a6183cd3639ca2498637fe1f212c4"},c("ul",{key:"9cd69b209a60cac0bd7d4a37cfc5b1e6f574f593"},c("li",{key:"6e43f28144571ffd461f461a210e7d392d9302b8"},c("span",{key:"d5f86e578029475ea732117f9900affdc5fb8789"},c("ifx-icon",{key:"ca2f09237e82b74dd82707c1967e547f2345d194",class:"check__icon",icon:"check12"})),c("span",{key:"d7b8d78858342803b0ec1d1f7ecb8ece8951ab0c"},"Possibility to embed multiple buttons")),c("li",{key:"3162580c38dd88ecdc5966502d867d4092119b1e"},c("span",{key:"5a3da3fea3f8aca11e216958e654fcfbe46912e6"},c("ifx-icon",{key:"e01cc056299fa160bfadb63a75878ab3f798de87",class:"check__icon",icon:"check12"})),c("span",{key:"2a127996bdf745d267a3d8904ae8f39d13c6d76e"},"A switch between a Link and a Button")),c("li",{key:"82f487e46d51cfc47433f230d91059ad2fcffdab"},c("span",{key:"8fcdb02e90b02067f5a0f45747adeea010d1da93"},c("ifx-icon",{key:"d31d54ea56f73b8bf30894e3bd2086f40d24b441",class:"check__icon",icon:"check12"})),c("span",{key:"6671674f90a9509e3e9c7ed5456d6046ad5b5de4"},"Enhanced stylying behavior")),c("li",{key:"e7623c3195b7fa278db2669fc35785a83de64f73"},c("span",{key:"b4e1ee37c8c9100afcd46db6964ce743dc3f6761"},c("ifx-icon",{key:"3d6c530613323a145f5c190c4d4b61cd4452f4aa",class:"check__icon",icon:"check12"})),c("span",{key:"8ad6e6fa5718aadd8647aa5083910f52f2ee1b77"},"React, Vue and Angular wrapper integration")))),c("td",{key:"44e5bac77cc8037d5d25c93283fc3554e2f93e21"})),c("tr",{key:"482c4a07fa26b97e37930b7e86d43c22aba7cd58"},c("td",{key:"1da5efdbb5e692ad09b0eac4cae20d5446b0b8c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"54c5609814760b280633bc6cc5648ea946c6e20e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"327d5d5a57c216b127505b0e964ffd743e705136"},c("ul",{key:"06f7ca321b5e1c9a3310ac10d4c9012bba74173e"},c("li",{key:"c1be0d6ba7f2833938d0691d1e20a597c5603936"},c("span",{key:"d4477a320c3dbb92a564cb67f48faec32929faa8"},c("ifx-icon",{key:"15954e9093eb86ffa19e1ea91e2a827e5b4752d6",class:"check__icon",icon:"check12"})),c("span",{key:"df80e616dfd039834ff2e45534cfe23ec691bc55"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"c8ea1229a046f0d0e23f87661a6ca192ea9f819d"},c("span",{key:"eb6534e61918e63b7b2f93c566bba5751ba31829"},c("ifx-icon",{key:"03f9abd29e525ad819aacb4b37d3da4cf6bfc9fb",class:"check__icon",icon:"check12"})),c("span",{key:"867c6b854b755bb0cc7be8bffd6e999763e00e8f"},"Adheres to web standards")))),c("td",{key:"2fd48fc3135c39abf065e0f5d03c0fe31a96cdb1"},c("ul",{key:"a888984d2df2c404fecbd709ba3a3c3808af2461"},c("li",{key:"d9220a36335ff4a65f9813ee3ebc0606a486c3f4"},c("span",{key:"757377e5060d96c44a2ff169925ddd3d35b357e4"},c("ifx-icon",{key:"e937e4a6c47680e83162f00e7f745ab532d11173",class:"check__icon",icon:"check12"})),c("span",{key:"4363044a97c05fdd68e2d7b74eb8b96260909f11"},"Indeterminate state variant")),c("li",{key:"a5105da5764d95915a3c5ae2e3e479219ad90e78"},c("span",{key:"b37f8591962c25ca24f0d2968117005acf85bc1e"},c("ifx-icon",{key:"11e3aabfc01dec22157fb258d64b808cc87a0b40",class:"check__icon",icon:"check12"})),c("span",{key:"c0c8d800db702e3fd2f53641a15c533b802ecd44"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8c1793f4998ff4f3741f2931145bf718d5fa89ab"})),c("tr",{key:"f6f571ad63ba685376e98b51933c6999f574054f"},c("td",{key:"0d1dcaa8f774d63a53b09ad03a3e9d12c11c2671",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"355792182617c017fb87936e322b4c52748c60c7",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"0fa5cbfc9fb379ff9d1a93ae234987625d320f12"},c("ul",{key:"1113170a696cba283594825f786d12595f67c252"},c("li",{key:"5e25521216fffdb373c5b137147e54adf5f07b45"},c("span",{key:"436eb79c84c27c43640ae5a91c134ae6d66dfd39"},c("ifx-icon",{key:"f3fc8d01abce2c270a1c0febfc9f66bf92751308",class:"check__icon",icon:"check12"})),c("span",{key:"ae690e461a8319a098ffbd26f5a50f635b5123d3"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"9921d90399b8f11634b2637f15eae4c45f6142f4"},c("span",{key:"52f0519a23f8b5e136dd07476f144badafb86c6b"},c("ifx-icon",{key:"2ca127b36bb11d81639c6683091fe7a870bc9e9c",class:"check__icon",icon:"check12"})),c("span",{key:"f1a027d5a78a468622c4b53e801673d7b866ab9f"},"Adheres to web standards")))),c("td",{key:"d59a3f50cc59e0acde1b726dfc8f9935e555b935"},c("ul",{key:"3ce7ac973c5e4306a1ad0128e14d9105679d1a56"},c("li",{key:"e3e4d1092c7a53e34580de4bd3a19544119ee4a2"},c("span",{key:"5050a30e808713707bc8857178a7e17f6a0b5a08"},c("ifx-icon",{key:"30dc35bd1fea23d7298afe3fe366cd9d67b288e9",class:"check__icon",icon:"check12"})),c("span",{key:"fb60be48055dc83babf6d435edd9a8989266cf35"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"5b6edab1edeb9fa7a3cb16d484404764948ec112"},c("span",{key:"01cf48db9323ed58660e8de6669c218c23138e21"},c("ifx-icon",{key:"6f712b193c14388ede4615ceeae0dab06627757d",class:"check__icon",icon:"check12"})),c("span",{key:"e6eacc979b07f468d9bf49bcc73ee28d49bb23a0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"beb7d2a2aa21113378eaadbc0cda48cf0bbad5f4"})),c("tr",{key:"49e6b4769c2ba4319d3b0ec052ea4f74a6e448a9"},c("td",{key:"e193176fad7f1fa7d1c84c193dbc8f3b47c970f0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"20bbed9a7ab0c8fd3d2a70742540cecc689b332f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"6b23022ba9b820cae9bdc153a4271f1914f08c88"},c("ul",{key:"2bcd78af106ae04e6b5128c47a9f5b3ab6039afd"},c("li",{key:"2980e14f53b99deccbc0c4c8845543e1c647900c"},c("span",{key:"e6b3496809a94d214d580f941c010c467ab5d549"},c("ifx-icon",{key:"e9645270065d9745e5523427699b7e8f54662f9d",class:"check__icon",icon:"check12"})),c("span",{key:"f0cda89dcdda2e115d8f5ffbf35ef8fe4f1c20ca"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"c6ca28a3978257ba2619b19406e7e7f81155ae0d"},c("span",{key:"f2c6f0e9f4416365cc75e0c7430e0a7af3cc1643"},c("ifx-icon",{key:"bb56f728c795450f5023d2e9dcd19f21fdfe385c",class:"check__icon",icon:"check12"})),c("span",{key:"80b94dfdc93f2823e34f7cd52f0ce9dadf819448"},"Cross browser compatibility")),c("li",{key:"8f645e32c0f72f43347a07623b2304c672fa70db"},c("span",{key:"a93bad2033f92f43a03499713f421c9fb4eac3bc"},c("ifx-icon",{key:"9e6d9e617d8ad0e1e01c9b829efc6759f801769a",class:"check__icon",icon:"check12"})),c("span",{key:"faba747262a06d53aa7ca8d583d82144ae992eb2"},"Form integration")),c("li",{key:"c12e9657c1787f548c3734f93126ae3c6b3e11b9"},c("span",{key:"2c37bc6b43d1262c5f6d23f9c4e28bad4e4846df"},c("ifx-icon",{key:"f8698a13a004ab4c63e6faaa53e1851b14cee9a7",class:"check__icon",icon:"check12"})),c("span",{key:"5020f035c8b9f2f3ad49ed9092a3c77cb602cd37"},"Adheres to web standards")))),c("td",{key:"392404ca7627f9b1d0e66dbb5dc2a8530fd542a6"},c("ul",{key:"891b9291e1bfbf3c5836a8ae544c81918a0b6f7c"})),c("td",{key:"c139a8f9ffb46b7386581c9aa0a6c28fbb0bd5af"})),c("tr",{key:"e44ff916a39710289e0a444793751b9ccad39380"},c("td",{key:"567566ef534594919ce673ae4140df40a4e07d7b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c451695485a1f623b566d30009352bf0ad439e07",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"95193f92205b27b50a6ad575e539421521ba83bf"},c("ul",{key:"feef40944c1ad9ac455fc58fe5b8f1485ba3e32a"},c("li",{key:"8f1457cdf0610f66ce790c553a623b1c60010afa"},c("span",{key:"a466cb739050acaf288d74866c4da6caad8906d5"},c("ifx-icon",{key:"7ca4e74d9fc3798116d3d3adbeb76883c9fa6b44",class:"check__icon",icon:"check12"})),c("span",{key:"82d530aa2f6951c0d5eba1fa0726858377528682"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"923543da3cd0f6bc073dcd287fd3aa39383e6322"},c("span",{key:"f0e1b3f7def06f728121972555e947189631cd7f"},c("ifx-icon",{key:"b2c3fe4c3d76b800cbc38c10230e114d2dec0737",class:"check__icon",icon:"check12"})),c("span",{key:"57d90ecfba886068a3d53027a8dd4bd5c1cd7497"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"d5e814c400a681484f122c94d29f98870e615544"},c("ul",{key:"6471b37fcc6c0a22abd597375bf7840654eb552f"},c("li",{key:"c5b07279dcb78736de48b8a5784b2b1bfc90c11c"},c("span",{key:"bc985c43e9cda8bba83808fc2f176dbbacf1df13"},c("ifx-icon",{key:"1da95fa81da61610eb3f2ff3a5b2a70f4e5cacc3",class:"check__icon",icon:"check12"})),c("span",{key:"fc3c5ce60b5fa49cccf4e2a12d3513256c404604"},"Search filter")),c("li",{key:"b442adbbc1bbb3861e37ee927c3386cd7705ae97"},c("span",{key:"78f800918f837a5af49a9cfdd61f877565e4ff00"},c("ifx-icon",{key:"8d603ef01a089f3e721287c6eddf85cddaae447e",class:"check__icon",icon:"check12"})),c("span",{key:"ea5f22400d6542d76f0c83b1c2de8879010dcc5f"},"Header section")),c("li",{key:"33c4b5dffa1b9d236cc215da2a87e1348b3e9914"},c("span",{key:"f33df46940f26762a3d9b8000b7cee614c444043"},c("ifx-icon",{key:"30a6394b71c138f1e6b26ad838b5ab3e5e9b820d",class:"check__icon",icon:"check12"})),c("span",{key:"5722eb4a20cd1ed32255618e6d66b1367d80768a"},"Menu Item Divider")),c("li",{key:"67529d67ab04bac2e49434a8819f0b5f534b21f5"},c("span",{key:"d0b78895707a9aa1311413c35db7aaab632b4625"},c("ifx-icon",{key:"60e166497d8062db30d3c55385737c31a38f9016",class:"check__icon",icon:"check12"})),c("span",{key:"9cfc50cec84ed59e3371de0743e8d45c4b0fd787"},"Icon incorporated")),c("li",{key:"0301c64cc58a7743fa7f34ffd4cd9faff90368b5"},c("span",{key:"b0e792fa8a3d5d82b954f0a4b883cd2371c954f5"},c("ifx-icon",{key:"bed85becd424e7f53c1861938b3833233b61242e",class:"check__icon",icon:"check12"})),c("span",{key:"28ca4c2f3489ceff111d0b6e6360a6fb0b303f78"},"Extended customization and configurations")),c("li",{key:"12c59c6d360c7702af24111300f6b2758d7ace84"},c("span",{key:"0638e790c9095413aa4896b6fda70240b3511297"},c("ifx-icon",{key:"c8b6c4c7a17517345d3fd6871004f238e2a86b2b",class:"check__icon",icon:"check12"})),c("span",{key:"d0fc2c09b8ab834d1a90141d0d728b68dccb873b"},"Separate label trigger")),c("li",{key:"f22b404fef6c1d1de432340299537109cc36657f"},c("span",{key:"4518abde1d5b8c38d32908c543dffe5b5d1fb1e8"},c("ifx-icon",{key:"0808beda85f74e980be7948cbec02d2db9dc9c06",class:"check__icon",icon:"check12"})),c("span",{key:"818c5554b6586473979f28fc52ae34d8c2681346"},"React, Vue and Angular wrapper integration")))),c("td",{key:"da1378f890d022d00357cb55a3924e48ad583897"})),c("tr",{key:"9fb46ee1437a004a039d2433cd83d214dce2afd5"},c("td",{key:"728315afb2baffdcbde414c0485bd5f0a390ef37",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"95ce76bbad0f4e8cf2eb0618c0cdd818877d29ea",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"14651310e86444ee431e0cd6d0b72e0c325dc04f"},c("ul",{key:"dff90b2b1b1c7ca69c428bab06bd2117ca376481"},c("li",{key:"5bd24e9b739f12321ca536f6915262715b4ddcde"},c("span",{key:"34e68cdd1839d4941f40bfe5cd543702991dae2e"},c("ifx-icon",{key:"aaad6b102a653cf250e9310105f614a76a074eae",class:"check__icon",icon:"check12"})),c("span",{key:"ae959ff906f0ab99a04895b557af608e636f6a49"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"187730323dd1da4b23e579d276d78627a9bee9f8"},c("span",{key:"25095ddf1eede47d17fe8f8735235529ad988f16"},c("ifx-icon",{key:"999f1c4bf75a609ff9620001b82e25e88059c3d1",class:"check__icon",icon:"check12"})),c("span",{key:"3a387ba813b4619a87d93df238db1a410fb40084"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"61cffdf3d651b8c0ba60d0dbb0a31c97458cd429"},c("span",{key:"37c17a81551e7f55e7e668afc5b5789e93e5bf02"},c("ifx-icon",{key:"e50568269e95ccde30cf989e96c084fbe2d80205",class:"check__icon",icon:"check12"})),c("span",{key:"e430c879ed1b814e5e38b9bedb4f041e8d37c2e4"},"Adheres to web standards")))),c("td",{key:"f6970a978a911cc105f85c9778782ab39e602af7"},c("ul",{key:"ca199580b08200265132596d44940277abd34536"},c("li",{key:"b65e3385a917ab17334d62bdc3fbe01a31bc3a88"},c("span",{key:"e1a01da293a1cd4b0ae22ed1693b0b05df0d346a"},c("ifx-icon",{key:"54c5e7b436c4162b8e8dd1356c738dc946059da6",class:"check__icon",icon:"check12"})),c("span",{key:"142dbc4946406db985e96f0dbea26c90e3e8c159"},"Small, Medium and Large variants")),c("li",{key:"3d145fb5fb39ebacb36a4a82bc66b3408dfdab00"},c("span",{key:"e77bc6cee9539684188a6dbf603e6faf953ec023"},c("ifx-icon",{key:"4e847d240e18bba21591dff32df658b06ad666f4",class:"check__icon",icon:"check12"})),c("span",{key:"597fd4eda0e8747de872ca6d6efb9df53de53fe8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"00b8e85052f2f2bfbea1581a32d602698b49b93b"},c("ul",{key:"fbff99b6afce07866fe6fbf4a241841d68771cc6"},c("li",{key:"aa8e3cc8a8206836bba05ff62129a7a07b3a16ae"},c("span",{key:"0398b8e944d3c4e1bc98b22c51df55d9629431ba"},c("ifx-icon",{key:"615c6c346082cfa09e9d7269dfbd7bebac942ca9",class:"check__icon",icon:"check12"})),c("span",{key:"c9972926283d45e489408438e15ffe327eef245b"},"Customizable and removable links"))))),c("tr",{key:"aabb8165009b711e910701510a3b9ff8d7e4a0cd"},c("td",{key:"ae8128b4b0b104077eb826e8691d34d150b6d2c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7c3c8117f0d8f0c2a3e8d1754f75239c4ec3dd5f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"5b39734ac076a7842fb8ffe0c4034ceb36f093cd"},c("ul",{key:"62ca73ce89113a7f7aa763c38e1475ee9e9b81f6"},c("li",{key:"9131318cc5588d85cc1ada5d76621693b83fc949"},c("span",{key:"1f0e07277fcf2b9f0d787345a557186980edf1ca"},c("ifx-icon",{key:"40a92d82bace94832531b3e8bc3f521ea3370715",class:"check__icon",icon:"check12"})),c("span",{key:"9d278561527e50f1a3a580197d231418ea5f9944"},"Offers a compact and interactive icon-based button element")),c("li",{key:"792f39e47a5c1155e1413be2f90edc0c77dbe372"},c("span",{key:"9b5ab00b94bca814b35698df4811ab49e2742204"},c("ifx-icon",{key:"96d5c74385a059593df6f88724baca3e3796e71e",class:"check__icon",icon:"check12"})),c("span",{key:"41d88ca4562e5bbf2fadafc7002dc7ebb25b9c65"},"Provides a limited scope of customization")),c("li",{key:"1740655a1952a744925a0be6866fcd2808f201ec"},c("span",{key:"ea7feeb90ccbb213e5ebe1bd32da8f19f8f92be7"},c("ifx-icon",{key:"be9a053aa12341d6ee69ea61c14a0cb822cc18c6",class:"check__icon",icon:"check12"})),c("span",{key:"9fe177014d285632b8fa16f132025d910cb67859"},"Adheres to web standards")))),c("td",{key:"5a2c6ea0dcab3a5e1a31e58aa845c723df5cd0bd"},c("ul",{key:"c900d15f7ae3e8bfe7fd67fd7fdcbe12dbf8104a"},c("li",{key:"8771b7e7261bbbb85be9f7dc884e6245553b5526"},c("span",{key:"affdb864318d8a889af20b9d5c02c94857aa97e6"},c("ifx-icon",{key:"789764f990b34973c3d371bc2eed34d79c4447aa",class:"check__icon",icon:"check12"})),c("span",{key:"99c9a38830078e9be8e3cfb984fe18ec4b266e5f"},"Additional Round and Square shape variants")),c("li",{key:"ebb0923282865af0337fcb60149fa6c2387db2da"},c("span",{key:"2ed1bff80ffff006f4fbca27abdf535e3fdf17a6"},c("ifx-icon",{key:"0ecbfb8d3e7adc79c61985ccc9cbcd52ec427887",class:"check__icon",icon:"check12"})),c("span",{key:"f32cc9a65897d14c5f2f284a3f59ccb4d9c00ccc"},"Small, Medium and Large size")),c("li",{key:"6249ba6c5b7a5b36968962c6b2c3575e1b7d2be6"},c("span",{key:"2fd8a3e6f45853f5c8f269b5b554435571d88d98"},c("ifx-icon",{key:"84861f34fbf304feaf36f92dc5134de615795b89",class:"check__icon",icon:"check12"})),c("span",{key:"791b79f8bba7e2682a92f1651a3f56bfd9190cec"},"React, Vue and Angular wrapper integration")))),c("td",{key:"35466bf352a20534a45d6b302f8ef1a8bdb2901f"})),c("tr",{key:"c8c884181e2e1574ea751856109303fea6c5c06c"},c("td",{key:"ef50a3d35efe264cf1997bf2127a7a7c49ef91b5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"977d0fad03d3f40fb9f6265b7bb8c54713293f05",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"3f92b6c293cc76e428e4710906a62d520c7bbe5f"},c("ul",{key:"0d84b5f30bdfdf32dcbff863d62a087bbc133bb7"},c("li",{key:"1c838e64aca217aaa3a3cdd6a1b50dad70096ec1"},c("span",{key:"3f55e2f2ed6e4076109bef4b4f8388b7723df6a2"},c("ifx-icon",{key:"2daa206af9f4acf854729c5cbf07046c32bc7832",class:"check__icon",icon:"check12"})),c("span",{key:"d38f99a632534d3cea23b062613c1ea7f9ef15e4"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"a6f1a4fb5a0b54c84e939cca5455bd1f0bb2a8c0"},c("ul",{key:"d39b2fa701dc0a9deb6fb95115972d2e5652bcbc"},c("li",{key:"c73e5cf56a548486ec0f784463e3b64eaaee8700"},c("span",{key:"e0514cd27447dfe1cc25124a553574c8603cf1df"},c("ifx-icon",{key:"ddddea0e675de187eba1ce281cd110be2083654a",class:"check__icon",icon:"check12"})),c("span",{key:"1ab3150fa51702ab47f1be11a514e769ce39a743"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9e6ed2fed1d756f6cd79484c9e2dd6b388f2786b"})),c("tr",{key:"a03cdfb8b6509a8baf6c5e82543e290944d467f0"},c("td",{key:"3f6371271680d895cfdc2bfb379423c96724409d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a78b2068d9ca9e29712f645c635263ae041a85e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"e75934d89b80451a85c3b774ed6a2ae140d73240"},c("ul",{key:"2145967a05bb9fb968394df03c23ce00348c6c9e"},c("li",{key:"0115e88a5101e19a904db699a24a67d5695106dd"},c("span",{key:"ac17b81c9b61a936b11fa8f3d939e3550a51a7f8"},c("ifx-icon",{key:"cdbc2b9369830dbadf2a761f27117139b19d4bc3",class:"check__icon",icon:"check12"})),c("span",{key:"e4d904d2ce63dbd3ddb6dc8532b6b180322e047f"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"8d2cf03d3a1d94da802cd018a50edbcc9193312f"},c("span",{key:"59411689802bfc642b1b437b6be2aaca27b39cb8"},c("ifx-icon",{key:"af09857c248349ab2f457e15ae4c9f5b74e3fa90",class:"check__icon",icon:"check12"})),c("span",{key:"ef059fa2433a442b686e6799d19563e0515a1b99"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"f87c2a2871e103ea505a0413f33eca19324e2424"},c("span",{key:"ab74be5a0fe21eaafcdd2d2e671358a32c26edaf"},c("ifx-icon",{key:"a1a077033b342133424f19f355d88d192166d338",class:"check__icon",icon:"check12"})),c("span",{key:"7f41fd1a240658b821aad73a40a7d8b5af1fca9e"},"Adheres to web standards")))),c("td",{key:"dc077f0e1dcbb72b817b66b48e754eec7bc32690"},c("ul",{key:"66780bb8ce5a58c9917d14b00a56a8110cb86fff"},c("li",{key:"5191ac9d2f1380c611fd8ae244f2935d083b62f1"},c("span",{key:"61b48545fa5c9d647610f96415c9fb76a7b33ecb"},c("ifx-icon",{key:"c2ae470d0953c27fc02bdab0858f6f42df9aef9b",class:"check__icon",icon:"check12"})),c("span",{key:"5ef7249d515a5401b958c1fa2edd3a3951231441"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"d2ce60893009285863e9b80c06a48c46421e426e"},c("span",{key:"f48701a964420e68d2491b87d0d1736c5e5f3e93"},c("ifx-icon",{key:"4c77456de4a3d78fc041bd4ab17cba45c42a7b1b",class:"check__icon",icon:"check12"})),c("span",{key:"f27f3d83563b8a4de48d694a3c9bcaa373eaaf3d"},"Icon incorporated")),c("li",{key:"e5b1ddca259685a8683eefa3da26502d1edf6991"},c("span",{key:"c9fd9dd671d43836f2d152232dce5c4f73cba1aa"},c("ifx-icon",{key:"35a96227d1652e3f0e78818f000bd18371b2c4cc",class:"check__icon",icon:"check12"})),c("span",{key:"aee622a84e2cf4e75ce71937746ea74345c791eb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5568236a74dd8fafa877a9d71f76ff8e92d1bc8c"},c("ul",{key:"e11deec1925bf77bdd1e4bfaa3331dbd43316348"},c("li",{key:"ff2f8269c0efaa641bf0aeb4803d6885707c2550"},c("span",{key:"111206f28aa392032ecac3e167ab993edaf48852"},c("ifx-icon",{key:"a2ace7418053c31aeb299b68e3030dca94e5abe3",class:"check__icon",icon:"check12"})),c("span",{key:"101f2cfeaae94062770c42144c8919e5a900fd67"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"05ec0bc42c07d499aa2153b1a55561c54b774ea5"},c("td",{key:"6ae6ca48d3b4314b4426b46e40c813c02746bd80",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"646457b1e32173b290d975f5ef041314842a5d0f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"dd84665956480727649b9837acf199b30b1d4210"},c("ul",{key:"d8850db37bf5b4eb93faa36c9e365d83e7725e06"},c("li",{key:"cf85f1dc2e0489f5181f21bc460cfb5a719ef007"},c("span",{key:"cc405355a081971fd8fad050855e7df162f61977"},c("ifx-icon",{key:"4313f0e89c582edfa22ae9f7ec8226fbea4af8d2",class:"check__icon",icon:"check12"})),c("span",{key:"019838eda51bda3fdd7cff1463e08ab7a58d71b7"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"c930ccbcdf43ca3bb789d518d31eeec3b89c1c0b"},c("span",{key:"9389eb10ef01adbd55a762bad7d730545789b021"},c("ifx-icon",{key:"52e8621ca25391d7a50016214343be9165fad428",class:"check__icon",icon:"check12"})),c("span",{key:"debd7c0e40f7af90749b5481224aad3ced96c5fa"},"Adheres to webstandards")))),c("td",{key:"17d0610b952a6be9f4f054c53965ee26b7d995fa"},c("ul",{key:"d4b18830d393082fd44169c8a8aced1ba019f3a8"},c("li",{key:"e93132160fd9e25d4189babc5a1143149eeb5870"},c("span",{key:"032d1d84c315ffed90399a3d469ed92f63a413cc"},c("ifx-icon",{key:"98422e673011df1cfb3bc70e4d29ead686c5d104",class:"check__icon",icon:"check12"})),c("span",{key:"5dd465ad11c62f22884b1002dea3240a03c41b87"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"70f62c812d67ce313c3836f34ef5c2b8163faa3f"},c("span",{key:"f00d79d076b3fe41b7521fee77f98c6749d324d4"},c("ifx-icon",{key:"f572c38c6aa6c7e9527596de2761e0933dc59261",class:"check__icon",icon:"check12"})),c("span",{key:"43c67bd5971c33fa1a2a652f84f45813e1fd80de"},"Extended customization")),c("li",{key:"401914a7937e0b6465c5270b88264fc1a368e8b0"},c("span",{key:"fe9f1273ed287d68401b60d89c2325db5ba34749"},c("ifx-icon",{key:"d172f64e06d93764e0be226e961eb61de7d3bb3f",class:"check__icon",icon:"check12"})),c("span",{key:"80dce73e8b107684bb7d79972bb1c4991bee63fc"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b169b20d3390352f82cfb9960e48e1ca36ed35ac"},c("ul",{key:"7dc92ccce6118f9adef2ba08e178e3d271ae0307"},c("li",{key:"749bfb9e44dba4a8312a90d676780a071c86cb52"},c("span",{key:"dc3e2891ddf3bbe1c42f216a8d66c3d1ea627d86"},c("ifx-icon",{key:"8d80a0dd9308f193bc1b604a511df4d9f1c2167e",class:"check__icon",icon:"check12"})),c("span",{key:"c475a0fb5bde06583c0af8aa96cfbc39025150a2"},"Removable close button"))))),c("tr",{key:"18774968cc39062d0dcd127ddadd24a718963442"},c("td",{key:"06e2a109d7de454118f2120ae30ba8d482c8fbb2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e4480ba9286525b3c0e1a7f4e1249a69b48cde45",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"748ab8290bd5406ae1f84fdb2a4f626f262818b5"},c("ul",{key:"a97c767eea79f29093603796787a95eb2cef8683"},c("li",{key:"3a3aa1adc318f98022c914e7adabdcbbc10e31f2"},c("span",{key:"e38628da0a0f09f9deb9e61aa631bff67817b98e"},c("ifx-icon",{key:"7856aac9f6c198b012e3f8f021f673c4fddcc04d",class:"check__icon",icon:"check12"})),c("span",{key:"2cac67f2c58138bce98ed86cd6a3c5bb5687c3b1"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"464ff6c7cae0d629e4af74bdcce0387250829364"},c("span",{key:"c3ef7338f56d8aaf816e1bd3286939f6aa32b1ba"},c("ifx-icon",{key:"94c771c2ef01ca174a0e41ce5bbbc535ea39bbcd",class:"check__icon",icon:"check12"})),c("span",{key:"b79d05c15cc0aaca5c7dd54d979cc4e21048e419"},"Adheres to web stadards")))),c("td",{key:"ce9af8c9562fc0bb8e773bec28926cf1732bf6d0"},c("ul",{key:"8d98b973f057e9eef8a877deadb1063bd5c7ed3a"},c("li",{key:"37a9ea9cc97bbb9a7bdd67e6e686232161c64dcc"},c("span",{key:"18553da2626a8b96b305388cc29344c035644c66"},c("ifx-icon",{key:"b20f7b8cd837576211807d198813d6f8a382440d",class:"check__icon",icon:"check12"})),c("span",{key:"321bddfd42af078e320997302811ce8a41a37730"},"Navbar-profile component")),c("li",{key:"cac53b8190e8ff7d68f438a3f7965046d1d6ac15"},c("span",{key:"358b47c2ce49d78f59afec750e78370672b63f5f"},c("ifx-icon",{key:"d0659384fa6c92dbbc99cf38cc03a18e8b09c21b",class:"check__icon",icon:"check12"})),c("span",{key:"bad0bde68ca10b5d0683ed6ba2da9f412043703c"},"Mobile Responsiveness")),c("li",{key:"3f06ae63684373be411714917e065db04e3d7d79"},c("span",{key:"1c8157402de4310bf83397760d6bb00d1c80c96b"},c("ifx-icon",{key:"b2c075d83dd68aff5e27e83e165e473d6cf46e13",class:"check__icon",icon:"check12"})),c("span",{key:"3163f33910d907c3500b660fd54e3a1504eca5e5"},"Mobile Sidebar")),c("li",{key:"ab254d6379f2ab1efac9941b88725093650fbe9d"},c("span",{key:"37b8dc21effc07da002fa722070643ac3a1cfa84"},c("ifx-icon",{key:"9c937cfc47f2d81c94e95e67db78cac578eeaef6",class:"check__icon",icon:"check12"})),c("span",{key:"aa60428ee5f15cf5143cabee20af9383e422284e"},"Extended customization")),c("li",{key:"72d19e238bde800a7f2eb35c8f17a5539bbff04a"},c("span",{key:"2b3041bf00dfe560950606d1d9c906b3a60774a5"},c("ifx-icon",{key:"8aea4cc1eb87ae757cdba81514258ac28847b68d",class:"check__icon",icon:"check12"})),c("span",{key:"a9905731b8880220bc6a34e04e7df228c3c609ee"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9d1284ac73571fcc7f1dcf6ab1afcd879200a98c"})),c("tr",{key:"b2cd02b083757b577cb0984a6d1bdf551933a428"},c("td",{key:"6361379b147922cf3dcb6d813238d4861b9f7c09",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e14560ae384528fce680c486a6a2ca57a64c50ba",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-number-indicator--development",size:"s",variant:"bold"},"Number Indicator")),c("td",{key:"e5db543fe8d92e86dce6048db61fed937f7da132"},c("ul",{key:"de1e5a69f3a3b9b556b2e356203b050f587d615d"},c("li",{key:"b09cba833d9c43a0472aedc723a9809eb4c9a374"},c("span",{key:"a9230aadb49f69deba72c371006a3ea3e2e3dc47"},c("ifx-icon",{key:"a80453b4068e2bed48e82001d852f3d4332d182c",class:"check__icon",icon:"check12"})),c("span",{key:"9789215477f9c49b028e9f3c7d502cf4551504b0"},"Provides a compact and configurable display for showcasing numeric data")),c("li",{key:"107e6268161cb4527ea0e93246cffa67b87eec8b"},c("span",{key:"57bb8b0dbbc72c53d855091b785559b109b08d7b"},c("ifx-icon",{key:"500bd24a19cd14d0acc2e7b2558dda73c050af65",class:"check__icon",icon:"check12"})),c("span",{key:"62f4d3308d6d5aeae291277aa6008687faf2a3fa"},"Adheres to web standards")))),c("td",{key:"1d111ca3a521d1779eb4264a4fd61ecce272f99f"},c("ul",{key:"9131f667ccec07f243b9fdf59a0eef968ebcfdcc"},c("li",{key:"3008d1774f640e292261c166389d8c5f02342ad8"},c("span",{key:"ff2a33f311c6de5f7d3cc6723f373fca995230b5"},c("ifx-icon",{key:"a14288bd6364b5724cd6d42c58b9afc52e27c1c6",class:"check__icon",icon:"check12"})),c("span",{key:"5773089f863acdf09fef8506a4a7895422422932"},"Inverted option")),c("li",{key:"0adb390f5579caef3dd239ebe7490889a2d0609e"},c("span",{key:"b6393942de9b358c90b9f065ff2b7b9ec6cb52ac"},c("ifx-icon",{key:"74270825d9886fda257ad65ed4d8a8ac4400e565",class:"check__icon",icon:"check12"})),c("span",{key:"b9e23dec31991efc41cfa25ddd17a249b53163d3"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8099b05b2a7359f57e73547f73ebb0ecff00c1e6"})),c("tr",{key:"6208fa654a59d2be77e3641907a652985610317c"},c("td",{key:"5c20585b3257397de70435a1305b343ffa0bcfc1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ca097601979a9729bf2c797b0c187ce697c12d5a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"7a26eb27da63191d0d6afd57101ba51940bce14e"},c("ul",{key:"8944927c6119433d51a3ba25d5783820be311b0a"},c("li",{key:"ee4c3cdb64b6b6bbc8dda6bb8ac3478f60f56ae1"},c("span",{key:"5d1d2de64e69b1e4d8009925599faf727954f1f5"},c("ifx-icon",{key:"d74e8911696b97f4f19da779149367d9b8f184ab",class:"check__icon",icon:"check12"})),c("span",{key:"392346157874184bc56e7460d844075fa4907c52"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"9ba67762225bc2f33c650fa81b7bc0d5db2da8ed"},c("span",{key:"a45bb7bf8bf9ca6b6234d038b4656a80328e1cd2"},c("ifx-icon",{key:"fd7dd2581191b438df6b1d657f488a9b9453d807",class:"check__icon",icon:"check12"})),c("span",{key:"efce0c23625ac31544e048d5bb2add7a7d37c171"},"Adheres to web standards")))),c("td",{key:"e9381bf74aa2a06d7be98540462bf5909ce1b95c"},c("ul",{key:"31b458963338a1b6f784f85bc84f97f58f34303e"},c("li",{key:"a4200e1fb90fb88c72331fb6c82f395aafaabb17"},c("span",{key:"b88ae065b2fe2d223c0eb288bea5d099057246d1"},c("ifx-icon",{key:"262c845c7410a1b65b5793fb83e64c75f08246e6",class:"check__icon",icon:"check12"})),c("span",{key:"dc50da4465bf3798deadfc097ba293c802724a5c"},"Extended customization")),c("li",{key:"ab31505b7af7559424cd8582a0e77d1a12619f06"},c("span",{key:"05140888564e08ad487f03ccb142c986acde996a"},c("ifx-icon",{key:"ba2c584e1741dfc9fc25cf610d5d54ab5a899b5a",class:"check__icon",icon:"check12"})),c("span",{key:"72354d76f21fe658ea22e2d2c915efb7efaa852e"},"Configurable Results Per Page option")),c("li",{key:"b57641dc098d5f76a5ddbd0c9bde2eaeb36f2e80"},c("span",{key:"90439299e92b4e0a46cf04fb135cad8ad045f025"},c("ifx-icon",{key:"aacc8f26e411f22718ae1add447dc3ebcca4eff8",class:"check__icon",icon:"check12"})),c("span",{key:"aa7e7a5f2599e0fb36c1adb5d2925abce91793c9"},"React, Vue and Angular wrapper integration")))),c("td",{key:"61f2cc3a46bca6430e8c6d8bcaf2a583173cf942"})),c("tr",{key:"e25838f6be8a55337423bfbc0ccc551dd5df3247"},c("td",{key:"f8b7b857550b93d33e39346013a38cc537e982cb",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9b13557e130768e2aa0772fa30d80ce8810586ae",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"fac1af56f63b261f8ff9a63eb91e8fe83bc7a110"},c("ul",{key:"c12c4b5e2d3d430e143e90cd0952eb0b02523ef6"},c("li",{key:"4cc977e63405eeea0fb090f07d24ebdf7f756c87"},c("span",{key:"bc42129ad6825a91983fdb9e60d55785332df617"},c("ifx-icon",{key:"0b75e22c7a7cd0ffa27c04a330c4dbf2a53a6829",class:"check__icon",icon:"check12"})),c("span",{key:"14778b24a2921d0a7ec5820b000b0ba3ea608f74"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"b1cce934d2f912aa34c24d487103002fd5614ef4"},c("span",{key:"5c7b14b2974d43f7673c8031350d941dff8845c0"},c("ifx-icon",{key:"d15a686a1233837be9a2687b9ae492c1f047a586",class:"check__icon",icon:"check12"})),c("span",{key:"94c777a8744278398ba4ae0176ba123af00efdb0"},"Adheres to web standards")))),c("td",{key:"1ede2e834cc7ca623b92c9a2dacb43027482ae16"},c("ul",{key:"829866392d02e19f1640567209a2724bd22ed0b4"},c("li",{key:"e53e2ef0cec285bdec46e322ef0c5bc7fa7a2696"},c("span",{key:"bbd92e6743dc4b42394308bf24cf900fd8f253fc"},c("ifx-icon",{key:"c477c1ba1090bebf1e9e7e90e7270497e1cd3bd9",class:"check__icon",icon:"check12"})),c("span",{key:"cd77fc94eb8b221cb5608f229589110dd189781f"},"Extended customization")),c("li",{key:"194ef786af8bf3792658f353cd32efaca1f80c71"},c("span",{key:"30d3bd5ff52c9330dc2867edfa7f0f0c2bdc8210"},c("ifx-icon",{key:"a381138f9324efcfe2736bf0af4d6bae9dc23d42",class:"check__icon",icon:"check12"})),c("span",{key:"70df5120c9a334407cf5a10a862d3af53420a2d2"},"Show percentage option")),c("li",{key:"892984b3cc22f9ca049fe2fd44f9201790d39283"},c("span",{key:"8f656f68faf0b9802f570dcac620e8d650031b0d"},c("ifx-icon",{key:"12fa30ea60e0924333616c97725048fcbae7a506",class:"check__icon",icon:"check12"})),c("span",{key:"859fbc8067254c8055d55f003e52232db580aad5"},"Small and With Label variants included")),c("li",{key:"5a949fa214f9a1325197012a5d3ed871420dfc04"},c("span",{key:"4fb9c8564416cfc605b906114ac30551914a4f6c"},c("ifx-icon",{key:"333cbfee01ebc6daa676f33dc247b2fc1583c200",class:"check__icon",icon:"check12"})),c("span",{key:"d835dffb139c677425b913c854e235e6c42aba29"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f1e65eaac1ab3186a36f51eee7b891f70c129e55"})),c("tr",{key:"a313b8830dc08fc873c446311cc5cd8120b449d3"},c("td",{key:"4af6c9c21232ba14ceadd60732dc32e4c98c9824",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ba17401fa1a0080a23092742111cebe836ef7eee",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"f826bb923fe53c104fc59b59c3f65491c4237a45"},c("ul",{key:"c89394d1d790a26b57b42da2aeb52bb2dbe07e7d"},c("li",{key:"14f83d9cfc01b9bdfb0fc3dceb7ee8d7e70c2678"},c("span",{key:"2439fba6de8877054e181256834b80cd0b36a544"},c("ifx-icon",{key:"9c0f854506bf6bebaec1c9ce650f2e357fb7e5f6",class:"check__icon",icon:"check12"})),c("span",{key:"bd2dd2655db92a155295f0e1dd1d83bb095b03e3"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"eddb8ea6d720043c6012171c752041a0f6a10c5b"},c("span",{key:"4f20f215d39c7542a4016eb09143a2c0896de7c4"},c("ifx-icon",{key:"96f7b8fb29cad4a9054995bd95e05fa95d66d0f7",class:"check__icon",icon:"check12"})),c("span",{key:"82990e6590b672f7150216cd037f2e4c31e7209f"},"Adheres to web standards")))),c("td",{key:"a10f835f10ae7ae5fa2c0836be37c36d12ac43bc"},c("ul",{key:"bc0e1c0acb92c0e292ea174c7eebecf0f0265ec4"},c("li",{key:"cf3cdfb54ae68430856f72f6fbbf9ba733e1dbd3"},c("span",{key:"c1aa9b1ba070b3436328f7fddcabac9513277ffb"},c("ifx-icon",{key:"982442e4738884f2375bdad1d061abcd4b0394f5",class:"check__icon",icon:"check12"})),c("span",{key:"b93792daea1a9ef489b3147fb9523007da9abdc8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a17d6b5b855970415ce388207e7ffb7911006994"})),c("tr",{key:"89e0b2fb93142b41aad906158ae92fbbe9edb92f"},c("td",{key:"d47f79a4e73a0b54017b78cd566ee0dc1f22f694",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e28b68a8acbf871a7ff2549b307c7e4a6ba8e51b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"1d76b89a94a570b8263a5c44f63c96346a60e48b"},c("ul",{key:"6831c75da3f9af5e3c3333cac316932dae1adb00"},c("li",{key:"b811e74485d2a49a45facf094732ba091a163936"},c("span",{key:"597e2002f6cac92432a5cea1491933e8325eef5a"},c("ifx-icon",{key:"3d1db5419eb2c0ddc5a92f1e52be46de120b39bc",class:"check__icon",icon:"check12"})),c("span",{key:"67407793dfe18d939258601caff7d3d7855362af"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"f0f0d83a0ff42252ffc088e21926fa2e001d7f33"},c("span",{key:"19e92abeb2aa6874d428cf310b0ea771686ba84a"},c("ifx-icon",{key:"bda978fd1eeb362dd1e6630b2bd8fb4f64f2778a",class:"check__icon",icon:"check12"})),c("span",{key:"cb372daf89cfe467da1beeca51f172f8f1c6c46e"},"Adheres to web standards")))),c("td",{key:"101381c9e77dbed42a392a7050e40727c422d466"},c("ul",{key:"2515be70bb9b545b4d20d7ee04c698b9ef214106"},c("li",{key:"743dc27eb46d91f6cf290613c6973a41c97f4977"},c("span",{key:"d8ef23e76fc4566d5820a8c59136c6c7a6234819"},c("ifx-icon",{key:"34e890bde4a2776c0d0ce0d22aa02d9a51ee746d",class:"check__icon",icon:"check12"})),c("span",{key:"c8bbf39e2fb679d8bec4d52b29d54b15974f512b"},"Collapsable option")),c("li",{key:"848d3059d1558bd6b214d9c4be7bb44626e63ffd"},c("span",{key:"ef2082fd97c022a0dbb2967cdb5e418d6d0e79b1"},c("ifx-icon",{key:"44d5e29e221f1eae4bd06922b14e73735ec9592c",class:"check__icon",icon:"check12"})),c("span",{key:"245e42e6b7d73b9ae4ee3dcd118aa81c5b3dee12"},"React, Vue and Angular wrapper integration")))),c("td",{key:"faddf648847bc24df7b11fda4e7a28bd24822cc2"})),c("tr",{key:"b5dc391136e162b64f57fdedb126b917d2a72df7"},c("td",{key:"023f28d2f79d368939be9a5a901603f41fcff66b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2d7e0a269cd3df67d27748875f04b33f3097eb7f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"31a156b2b4ddbf8bafb51b3a3a0b592c60a7a733"},c("ul",{key:"1b8e593199a0a113da12ab79987c417b799db5e6"},c("li",{key:"bf15e109d7b4cc685d82dec4f7675f33bd29105a"},c("span",{key:"86a75c8f3d4b668d025f6a26787fbd84fe13f1d6"},c("ifx-icon",{key:"7111319cceff05c14e4a060ab92a59679182d799",class:"check__icon",icon:"check12"})),c("span",{key:"7213bf4d64dcea845714efebdfcb28f487132cfa"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"bf2a380b3373f723dc287dcab58d8b015c63652f"},c("span",{key:"38ae6db8fb80f8b64824cf19e5a4c375959c4f90"},c("ifx-icon",{key:"816083ff03d92257e2fd0d9af9a2d0081b85c4fc",class:"check__icon",icon:"check12"})),c("span",{key:"40b6cd9595cebe4371041b6a266c6d32f02e92dd"},"Adheres to web standards")))),c("td",{key:"e3c71b960bbd782518423c5b862c673e3ba8803e"},c("ul",{key:"46de47dc6cf3cc31ff1bc9cfe5b2b9adda19eaba"},c("li",{key:"46928495a960be3d3c59949c2c7016585b82182a"},c("span",{key:"b183936adb39333e6084979f267f69061d67846f"},c("ifx-icon",{key:"3d6486b9509a7cc2e731c759b9fdbeb9e93400ce",class:"check__icon",icon:"check12"})),c("span",{key:"923d224fc2d2d706d0d96e6a43e7d69d32cd943e"},"Show Delete Icon option")),c("li",{key:"01a7f07b1b2813e5df76c63fa591ad6901a6dd5b"},c("span",{key:"af1c98ffad3cb5b0dba99b60fab976edfa29f961"},c("ifx-icon",{key:"c223b1f3e93ac60f4674d949d896ee3b6b7de8ec",class:"check__icon",icon:"check12"})),c("span",{key:"33d10a0d1b718c8ea29758ff9818aa85c0ab7604"},"React, Vue and Angular wrapper integration")))),c("td",{key:"76f81bf3a936805f0e30fd8a7e2623512af5531e"})),c("tr",{key:"5aecb528424559e728a9a6a1654c1419c5eafe69"},c("td",{key:"f4d42db01992c178fe984893f032af2668d455fa",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b90845079f70c75bd70740f277c6cecab014a8ca",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"4c17958ffbe33f76ad70935cf59fa9dc8cfad987"},c("ul",{key:"192e32e8d8d311572c9a8065613829b2a1d1235c"},c("li",{key:"25546c68dcce792f3543504310918d7b5c1b7cf2"},c("span",{key:"833e82aa4932646ebf13b19c4f62a76f185a8c5e"},c("ifx-icon",{key:"9dd657ea14e05e4af5deb3e183679e97c2740fa8",class:"check__icon",icon:"check12"})),c("span",{key:"98724750cf988e28b728ad4d0e5638fea5d35abf"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"e90367a95551eb5be87f3775f266c3484945967a"},c("ul",{key:"e41861425c7fb6ab8a508077016933117e826b1c"},c("li",{key:"f29004816faabdc9d2e0b634d8706ad6fd459653"},c("span",{key:"d335fc6e550246c8e582b83ff73fce242d8f85ef"},c("ifx-icon",{key:"994dbb3a01628847c4fdd1ee51cf71a8810ddf55",class:"check__icon",icon:"check12"})),c("span",{key:"cd843622131a11c458e18f62f5d32d1f2de4baa1"},"Extended customization")),c("li",{key:"fd8a5d19aea87ecee072cc18c0eb6d05debc61ea"},c("span",{key:"3f36e498b0bdbaceaba4479c43e50246f122dcc7"},c("ifx-icon",{key:"b286be96cfb98c24a12302050aae3f7a4bbf8a57",class:"check__icon",icon:"check12"})),c("span",{key:"a6f7d91dac450e0238eea0d47d76a3c8db5f2f27"},"Option to enable and disable the search")),c("li",{key:"e5dbe1c58a66dd41143317281bb2e70ba7fc1b8f"},c("span",{key:"4bd6ae0932accb86df129dd98f10162c1a11d598"},c("ifx-icon",{key:"e0917d27f2309eff36c8723bdf65b0b571a45504",class:"check__icon",icon:"check12"})),c("span",{key:"a506c1b421b61dc89a2c5656dde8604d746aa00f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"34bef425acce2a771ae1f2fe280ea5252a03ecb9"})),c("tr",{key:"f512db444aa994d1cfd920acc71482c236f20776"},c("td",{key:"0cdf04af9e1fc2c9a8986ebe0c2b5b3a4d5cc8dd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6b45c9fed530db669a5c21d2c11d633d4232e9f8",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"aeda84b983aae4a1270d821477222571cae9c2d3"},c("ul",{key:"a305d4f314de6801056f0ef8d8c23b893bb99a20"},c("li",{key:"35c023525a43c9f52f6ff510450f00c65953697f"},c("span",{key:"078870f05db7fe29cb019298a559cb5d528845a3"},c("ifx-icon",{key:"9d2fb18d65a1617a5e352060e9f08b81c3e5d61c",class:"check__icon",icon:"check12"})),c("span",{key:"5cb8aed542b571720922fbb11ac5305b51eee7bd"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"8e3a261555924dce06e83cf977995b2ae9418999"},c("span",{key:"dddbb7c67bc85ac02df189d545af8dbe9b4b2ce8"},c("ifx-icon",{key:"3aede00d4f2f792839341fe7a31510020a2e6df6",class:"check__icon",icon:"check12"})),c("span",{key:"6b535c214be3053fc9750c70004ee940420c504f"},"Adheres to web standards")))),c("td",{key:"15165a36f9a1201483bc71ffe0b0059f91a2d917"},c("ul",{key:"6e5b4506197ac9a0322fecc0fdd0a59f08d73f5e"},c("li",{key:"665f7f9d64340580a484a5b8a9ca56821cf0fd4d"},c("span",{key:"896e396cac37c63e522e42fd11ddb98498809fc6"},c("ifx-icon",{key:"61aeacd4a5e3efdc74a599a2eb9c4a4f6109e438",class:"check__icon",icon:"check12"})),c("span",{key:"45ba48261f1f876a2557f1c8dc8812c62b500527"},"Extended customization")),c("li",{key:"1b84455d0acc9327a5bef58677684812b60867d9"},c("span",{key:"c28934fe25a422a1a16f3156a97b652d24322681"},c("ifx-icon",{key:"bd7e08b5f53f428a2a75e8dfd0715061c0d30b5d",class:"check__icon",icon:"check12"})),c("span",{key:"a12de59e4da55301d99b5f1d863900e02d4ec776"},"Nestable options")),c("li",{key:"8904c109df64ec59dc537b24904fcf3c1d8e707f"},c("span",{key:"bec64906f3b761dadb2b7a1867e1a4c82daad619"},c("ifx-icon",{key:"f7769570bd66a415dfcf6dfd39597e3334510ba6",class:"check__icon",icon:"check12"})),c("span",{key:"9dd091e833b973f41d383f7f271b9d5bf1074cb4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5d3e55ab33c31133dd7ce4f7d338c82f8ac24b29"},c("ul",{key:"1d4b7a786ade0a52a78d8a0253229caf2a225eee"},c("li",{key:"1712fe7eae66901f7ec29c99a02edd6425fa64be"},c("span",{key:"54015814c3b3d6d30cd5cf8aab7ef3282d1c2bf5"},c("ifx-icon",{key:"0c6efeeb5ce6aa7273604606a3a5a8176e84739c",class:"check__icon",icon:"check12"})),c("span",{key:"4855f3613c1ac3f10c3ef36b1f00bdbd28921dba"},"Option to enable and disable the search"))))),c("tr",{key:"705e0ae33b011c5ec6104c15108b340dd3dbdc9e"},c("td",{key:"f7f74ae2b3ee074d704e9e8439ab402116e2ebe0",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"883d33b56a2d5ffc71c56c1135ac6416f6497457",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"d0fcf6b2918402d3e20f32b691251aa1f8899086"},c("ul",{key:"7517f26f825bb4b57bc262079604924bb3ee795b"},c("li",{key:"21df1a9ef8c18ecbb2062b38aebe3b2da1c4d0b8"},c("span",{key:"d1fc4cc2d3aa7bf334904fcac19bffe0d92b422f"},c("ifx-icon",{key:"8b7f8553ed55b70fac053292f3217728fbd09668",class:"check__icon",icon:"check12"})),c("span",{key:"1467d81198ec7acb94bd845ac06fe8301e139eb9"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"29f569e4603dd561702dcba35f17018886d9eccf"},c("span",{key:"6a61a701a372df41aa8deff400ceb35b98967db5"},c("ifx-icon",{key:"9b053ab00e7dff3aecbaa4270e16435d6585bc5b",class:"check__icon",icon:"check12"})),c("span",{key:"61dea4eaffac3b08629afba66da6e71136cf1126"},"Adheres to web standards")))),c("td",{key:"d93724a43c465832029606dd036ee195c8c14f31"},c("ul",{key:"428658c01c721d41852dbf0207f111af20becd3e"},c("li",{key:"e016687ec82f217ab27e34a594baf42a69b05392"},c("span",{key:"bc2f2db4f1ac69a6babfe40d305356f689166a42"},c("ifx-icon",{key:"78039e0e07002f88d8f5ad465ea55bf72ae10993",class:"check__icon",icon:"check12"})),c("span",{key:"d1dc47b26a7e35b7a51626ef29f951ce426df786"},"Extended customization")),c("li",{key:"819b300d0907a8f96b42cd6ffea1ce0958cc468b"},c("span",{key:"b1a93dfd6a92af85d684a36b3bf311ea6ba0e2e5"},c("ifx-icon",{key:"e0d470745fc59ccedbe9a6d399a394b1b2e28271",class:"check__icon",icon:"check12"})),c("span",{key:"8ae7a74b2a7d3b0c8eef64e1c3739738175bce8a"},"Multi-layer nestable items and menu")),c("li",{key:"b97633ee34767b7f02d2ffd32827d1907725479a"},c("span",{key:"c304fa20d795bec822f8010acd539d8c2e785d9f"},c("ifx-icon",{key:"27e821bc73925542a673f00c777bbbe87b1f6a68",class:"check__icon",icon:"check12"})),c("span",{key:"aca669f77ac196eea4e5d4051cdcf44a6988aa10"},"Initial collapse option")),c("li",{key:"179cd2518d5acd8b2d330f88f2f749d865a285d7"},c("span",{key:"d2047b88cd12795dafcd557bfb96371a5cda8a80"},c("ifx-icon",{key:"de995764ed654e3a26911c8e6e312b6bf2fce1f6",class:"check__icon",icon:"check12"})),c("span",{key:"1b9eface102342c43e214ab5d626a9e726656759"},"Active and action item feature")),c("li",{key:"6d9ab8036cc4ccab722b9d60135af646c7991a53"},c("span",{key:"fda7a810ec2be79c716b0f3c7485293b819f0e9e"},c("ifx-icon",{key:"3ca1ead9554ddeae68bba2ad625ed7cb2ffac64a",class:"check__icon",icon:"check12"})),c("span",{key:"f27ebeccd63e99f65d632f59102cee327b6624e6"},"Number indicator integration")),c("li",{key:"eb791399f4c7981e061822baddf22992a10028d6"},c("span",{key:"55e57c644ad645f8abf340fabd451e4fcccb9b76"},c("ifx-icon",{key:"5052e466f52153ca7071a6800a84c5b988e22bce",class:"check__icon",icon:"check12"})),c("span",{key:"f008b9262196bc5bb82d43eb407a187509e25df0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"2d0f01d01c967d60de2ecbec05cbb09712442051"},c("ul",{key:"aad7ff5ea9a7862d21e040623ae916f67aa02f59"},c("li",{key:"6efd67354909ad8fb19a255cb1aa1fccddfca5c8"},c("span",{key:"fa61eeff2a18086bed52e3c48310408806fa5a73"},c("ifx-icon",{key:"a92aba79c3098cb24bf04fb0c0236144082fcdc7",class:"check__icon",icon:"check12"})),c("span",{key:"7eeb86d2301144e72f8baa3b0ff3edef57441459"},"Removable Footer, Header and Logo")),c("li",{key:"117721a53a337720cea2b52feb243a25651e00c6"},c("span",{key:"812c1464713b7944cd745ae74d66a38f54b3d2bf"},c("ifx-icon",{key:"339b3ae2715feeeb25871e81573011b9e4c0804b",class:"check__icon",icon:"check12"})),c("span",{key:"d43480c555c381be8a782b3fad72bc9d5c5303cf"},"Removable and customizable Links"))))),c("tr",{key:"b6d565fbb3896f8e413b935736dee4c46203dd3d"},c("td",{key:"5aff960ff40e9a31dc53bd6caf9d48e35dad1eca",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bf51507b750e2887862e00fc4fb70959fcf7adbd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"714a90696a65b5bd8001416d5156535a731b82c9"},c("ul",{key:"4715bd811c98ab35ba91ab9ec9a56c647e745d54"},c("li",{key:"10bb8ce975801c5ccbd767d656121208fc0c597a"},c("span",{key:"4cac73583cc2bdc5b77b1abdaa8a4c8824beb994"},c("ifx-icon",{key:"d07cd9d48a697d206b6afa1a15594b6b2dc6513d",class:"check__icon",icon:"check12"})),c("span",{key:"7efc03d0f89ad9dfd309139669a98aca4bd4423a"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"c8b1c1b7b2d41b6e3ec96fa60ee5ec2f50165e05"},c("span",{key:"6ad1e950a1b4e45fcfe34e3ac5e78872e54b3af5"},c("ifx-icon",{key:"afa3e5cf6da01d89fbae5a67af7d076934212852",class:"check__icon",icon:"check12"})),c("span",{key:"0b60db41b1d6675bcf1dfa756b6202c05678ea52"},"Adheres to web standards")))),c("td",{key:"7df54e3214cf2d023d4b90888445f715fccd54f7"},c("ul",{key:"e82e4a2520b3ef2d1eef9656649af34af821aa34"},c("li",{key:"4240953213c7859754b5f9531b20b5b60e5a8692"},c("span",{key:"d303ca46baef7fba05cf39eb4e7584b33ef6eee8"},c("ifx-icon",{key:"8940c381e2d3981c5f730398288dc36440908015",class:"check__icon",icon:"check12"})),c("span",{key:"5cbeb5566a9d631c5d7c766f505ff49138f6aada"},"Icon incorporated")),c("li",{key:"683ab12b7c1f65f9e41ca666ea9dc203006c8ea7"},c("span",{key:"afc0b1c83683c530a0ee926a584857c509920419"},c("ifx-icon",{key:"b932ddbb5c5370c1845aac4ae74d260e46445d31",class:"check__icon",icon:"check12"})),c("span",{key:"1ff0cce43f8eeaec4b95acb37910142b9136a05b"},"Percentage variant")),c("li",{key:"0903ada5988fb0d82ee8b78f89cdd6819c5b432d"},c("span",{key:"4a7ca53f027818e707e422f6bae013a071e58a56"},c("ifx-icon",{key:"10b714082de13aac9e3809c7dc88260cd32a4ae6",class:"check__icon",icon:"check12"})),c("span",{key:"ea1ed6c2006124409e9369e8da7a18ba0d687255"},"Text variant")),c("li",{key:"904ff32cc32e09884f7c1fafa5ef4e3abf27ff8a"},c("span",{key:"e4560732d7dd0f64f41d329457169e8866dc13de"},c("ifx-icon",{key:"0e3e1fd9c5b86026491d02d19ba4c2bea89f2867",class:"check__icon",icon:"check12"})),c("span",{key:"012bc0c65cce31eb15b27f2e8cd2ed9802c7ea77"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fec8fbaf2f8af680ff488fabc9c04415a1dc3ca0"})),c("tr",{key:"ad617ef4815e3c164a38a864055c1ac85280a676"},c("td",{key:"41b57c25825ad4282fa51d7ed8e377df52a7ec88",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6528a672f3866745458ef444e9b82c91731b9140",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"a075b4a52686495bfbb8fe627ffc5ff4ed887506"},c("ul",{key:"7ea9ba74a1caef6d17ff591af45cea8eacde9674"},c("li",{key:"289d692e06965e75fa112977b0e1dc6589820037"},c("span",{key:"2dda7116ac195bf2ce9c381df741f221e3971f39"},c("ifx-icon",{key:"94245cac5e26e815c0a19166df201f1ae04f25fa",class:"check__icon",icon:"check12"})),c("span",{key:"fd8fa184a21f40c25795d99f6b2681aace38d680"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"9c229c4b12704a07816eb7c955edd7958b04b3e7"},c("span",{key:"2a96311c6970c6c30f22b83a2bcf4cc57f7eb632"},c("ifx-icon",{key:"ba0ad02c4ca388cc0cef4747767b87cc197a30d4",class:"check__icon",icon:"check12"})),c("span",{key:"688c8faca39ecfc2be82783fee93d87243470423"},"Adheres to web standards")))),c("td",{key:"d4d22caaaa9fe0aa6e979aec7ddb5d1600a5df82"},c("ul",{key:"2ccd8a338377b830de3bd63d5a2f745dab85252e"},c("li",{key:"9b9f430acde27a9dc87a6de5e2a0bed33cff2263"},c("span",{key:"759edd8a8a8a828ef75a0280a78da9a7c6340509"},c("ifx-icon",{key:"2ae24ab7ffd672aa50a4175a2414d7ee52a226b7",class:"check__icon",icon:"check12"})),c("span",{key:"1a75297eb4bac13e3dd50533be945119355b7fb2"},"Brand variant")),c("li",{key:"9a860b4dada8c3c3d40e0a9b2cf9ced8b0ec619d"},c("span",{key:"38fcad81591154cd7217e94047e5bdb51af8079f"},c("ifx-icon",{key:"0878623da1241ab8b67ab86eb6a83ade71aa4f86",class:"check__icon",icon:"check12"})),c("span",{key:"7c4008954f20a96e50ac9ed1f52c68095bc0a617"},"React, Vue and Angular wrapper integration")))),c("td",{key:"48a56752e8e76e8f01cf4cc4d1d1abacf8071513"})),c("tr",{key:"84dac3fa1bd3847a327b1b3d8695f68e41545b86"},c("td",{key:"113a762249bb467f3eff9ba2d8de52b41ab482ad",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"60695ef6333e66db539afdff08c457987575838a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"50684105947a4f44d4d75c13bb4619f431fce16b"},c("ul",{key:"e263feda2e675d950adba8d902a5186266c78063"},c("li",{key:"eb06528b7f5c29d09a338f16adcd3a58e0d10343"},c("span",{key:"4fe3174ed0aa369be7030a7aab611fed436c5b26"},c("ifx-icon",{key:"8cfdba8541131804d2e2963b1950bb29ea4af642",class:"check__icon",icon:"check12"})),c("span",{key:"40860196cca96989572c89af6ff4913bff7bdb9e"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"cdaa6336dcf81f46bb1c6e00ce42e9e2a1a9e085"},c("ul",{key:"6bf64b66dbdba395071dd881d914291f7c66e627"},c("li",{key:"31cf384d045928fe0ad6fdc64b9e4b45f7b23302"},c("span",{key:"5104a2c2512126079cc053444c7984428159a8bd"},c("ifx-icon",{key:"a0e766279cf3ff66cbceaec94c756c42e2ceb89f",class:"check__icon",icon:"check12"})),c("span",{key:"da39e0abab29af669b598e8ade2afe72cefbab4a"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"eb7f2d3ff667650fb8d9acfd92ac392ff69e07d1"},c("span",{key:"8b4c4c1c33afdced1493f03ee3f7840631b4547d"},c("ifx-icon",{key:"450bfde70c116b74c09be67dad864538fcfd5db1",class:"check__icon",icon:"check12"})),c("span",{key:"d6bcab3cd5794dc3dcf69bc69d98d43b8c25f103"},"Removable border")),c("li",{key:"8a05fe9ca7dbb8ee9e6ed233de64567dee5b5fc0"},c("span",{key:"d946fac84b02d53c43db0ad2842e46412f8d00bf"},c("ifx-icon",{key:"6a88e2f04df562c958970b4cfaca831273075d58",class:"check__icon",icon:"check12"})),c("span",{key:"e6ee0410cad390db7e769e6f73c6f9949baaff7b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0e77f61cd8d5dca0063471b6dc062e8a9244da7c"})),c("tr",{key:"ab42c9ad253485a5f50e840394f0cda8b18f3db0"},c("td",{key:"00d027e169c97b3d714917b4fe35c54fadb56ec8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"5ee1af1f884c3618bcdb4777d8a399b3fee2b523",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"9ccda34e7f607671333ea2d6de759af73e52ff0e"},c("ul",{key:"305f7de029f21b1e6da63fa620defd43ebf96ff6"},c("li",{key:"f800e2f88e30f3b57ace9864577cd60911f7f131"},c("span",{key:"8060f6d094f292e5853172809a785c3261d4b953"},c("ifx-icon",{key:"9473a08395e2b9f141e077725c094a4a0ddaef56",class:"check__icon",icon:"check12"})),c("span",{key:"0d9dd8e071c051e7b621dc6efb8e4ab285b9e2d1"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"8d2b3f92e0b17fd439e7e2f2da1c3d83aa6d2df9"},c("span",{key:"4755c8b56dc5e20a3ab54d1e8dd743d9e20d18ac"},c("ifx-icon",{key:"7c484c5a78d4df50ae455a414dabd4c65cec660c",class:"check__icon",icon:"check12"})),c("span",{key:"9f4c4b2bc529d8b65ea1b21c19e677a02d96d9fa"},"Default and Compact variants")),c("li",{key:"3cc335e46a4c2eae3d815a71b4a2f50bd657bbe6"},c("span",{key:"fe5b04ee183dbc24c068c5bd97e431083466d0f9"},c("ifx-icon",{key:"9b30cbcd2bd83735ec793227006716d71d2fb816",class:"check__icon",icon:"check12"})),c("span",{key:"d79cc50ea4794614bde8b20ca8122b31541afdd7"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c9bf97c163620be6c792e86dfd8957e37de2d619"},c("ul",{key:"a624efcba7e6fd71f03e67db5b8d0d2a3cd9aa13"},c("li",{key:"68f419d2bdecf68fa81e437807bb6999fe90f4a6"},c("span",{key:"8bbe95bd02424f931678969b5b042515890f3578"},c("ifx-icon",{key:"6c03771e48eda2db8cdfcc7daee9354b724267b4",class:"check__icon",icon:"check12"})),c("span",{key:"67c4207024a50a4631daa84e4a75370baf574848"},"Vertical variant")))),c("td",{key:"bb3162c2522e4d9ae4b6390416d4a09167d7981e"})),c("tr",{key:"2d1cceb0bf3964a8376845fd0e8e51debadb877b"},c("td",{key:"a48721e5d63dcff5ea98c9d24393fff3b8b3068c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3218029f18c9912e8bb63af07d64212c858bed73",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"af0344b52b10abcd795c6f4cd8d24587c4f12199"},c("ul",{key:"bf2ad056a5453553c0ef57b207854c076703c178"},c("li",{key:"579c7ca7c61ca8a491cdeb2085ac97c4236455e1"},c("span",{key:"2542b7ee798e8e0b44975560bc856225e964f5be"},c("ifx-icon",{key:"101045e320703f606c3fa18c9286d72713f8c626",class:"check__icon",icon:"check12"})),c("span",{key:"b183aee580eb3714a0fe8b010041b55087a61770"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"94d75af962f9470432f278b93deaba97f1177975"},c("span",{key:"481cc366f76e5e84b2162a1ed5f4fda4244d4cc1"},c("ifx-icon",{key:"4ab2f6865d61f541cce85ce6b29c70415bfd7894",class:"check__icon",icon:"check12"})),c("span",{key:"48614460f8da0223cc51a7c89443044fa85689a9"},"Adheres to web standards")))),c("td",{key:"d59296cef49fce838d8746dd70f9b2199eb9839d"},c("ul",{key:"ba6871f7eeb3b51e9010e854225cb74f52163f77"},c("li",{key:"95a2733f5f228fa3bb3eda6635904d421bb7fa47"},c("span",{key:"667b7d1e8ea066c777db97e44892a26bebfa183c"},c("ifx-icon",{key:"6b6ad61bdadb8179e93ba2a978ceb5504b9a433f",class:"check__icon",icon:"check12"})),c("span",{key:"31a395f88371406a758944a830ebc26352d6b968"},"Incorporated label feature")),c("li",{key:"ed5219b05c29bbaa6b37353702291425ec207042"},c("span",{key:"31ce7a259f7935f3491b2d5c7f78e38dc49f98ed"},c("ifx-icon",{key:"5e78ee4743154b17053a03f74714389ab9125726",class:"check__icon",icon:"check12"})),c("span",{key:"c3aecfe6b6cf9860083d79150360b9e94cad192f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"dd365640adb41fbbfa4472ff19dda01a5a4bfeb7"})),c("tr",{key:"3e627d5b0bce1e97b13538517a46cafbc8945193"},c("td",{key:"d6a3de87b88372f5e27bc468618dd5d573ff9368",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"94167b5011d190faeb9bc0c17c0947082c39eb96",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"75092d0dad6b80e02895a24df5594cbe7e3c2fa9"},c("ul",{key:"85488d8a3fe93e411d5ceecc7f83fa0020ea37a4"},c("li",{key:"41c94c80411ad6b24156b2912a28f55f71c0cba5"},c("span",{key:"6fe13c04b2d220afd2be9ef3d67d078eabd65cb5"},c("ifx-icon",{key:"f62974cb1f9f27e3d849dd3d19f67eb82190303c",class:"check__icon",icon:"check12"})),c("span",{key:"90f3e4d16168643f9f91a562ff6730afb1ac44f2"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"46ee1e89ceadf93a088488e50496725bd8b5d700"},c("span",{key:"d4810fd5dc78a86e21e143b64f8ebe6c1441d0b5"},c("ifx-icon",{key:"e17eba9ca43e375ac60594b291e821b63204cddc",class:"check__icon",icon:"check12"})),c("span",{key:"9c5f234c87412dce38733e5f447569878fe4e7a9"},"Includes basic features such as column sorting")))),c("td",{key:"223aaa0faa8ff75b75745ecedbcec8f98b884b4d"},c("ul",{key:"cf8b543323c76f8a26c33daf841ee849b75de5c2"},c("li",{key:"6209562e87d12f9b82a509d9db6c547527aa5054"},c("span",{key:"8df09f4ba5fd652294340489c8d725466f5aefe8"},c("ifx-icon",{key:"a76fc27aab98d9b54dc8753f35d934b447dcf86d",class:"check__icon",icon:"check12"})),c("span",{key:"fb3311069a6bf72132ea374fee90ba6368072410"},"Compact and Default variant")),c("li",{key:"2614077bb988b9314fe0824c4c55dd65ef4f10ec"},c("span",{key:"6ca9734520d0dab1a144c23fae6dc95fe93ffd3e"},c("ifx-icon",{key:"e494ef1aecfa45cc47a5cd87dfe0eddbbc5ee480",class:"check__icon",icon:"check12"})),c("span",{key:"dc291bd7b1ccc963cb8ec219ed31a3709f316bfa"},"React, Vue and Angular wrapper integration")))),c("td",{key:"21815db3b6a0f8ea0644061ef97f1a9e754cf5c3"})),c("tr",{key:"114ddbe2717131708792a38c087876242661a6fe"},c("td",{key:"813c3639842b203c5a36a05b2887e9bd0c5129fe",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bd564718599921c0dd0d02c29327bf80f994933f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"77e83448d0e5b1e65da1e1ebb43fecf254c0fc6f"},c("ul",{key:"e98d4d6fcdb69c2dc2e458cfef5f88c95befa239"},c("li",{key:"bb78c32c7c96e15e478bed0d836c8d7ea35bf5d7"},c("span",{key:"a8a9eae0c3f7797ae9ea9607408e5a97edb8af3b"},c("ifx-icon",{key:"98d643d989bcc8fe9a0ebf64272fa6b5b6f56d2b",class:"check__icon",icon:"check12"})),c("span",{key:"f401baa434c4c701761e4503d4d0b59ebd16b59e"},"Pagination")),c("li",{key:"3780cba51cd4f1c5a55d1ec9db3ea7160fce92ba"},c("span",{key:"9abd9ee12ddb92c51c35d84d5b688370692f0a06"},c("ifx-icon",{key:"8a5c01d0c98a8726fdceb93de586d8aa39940f42",class:"check__icon",icon:"check12"})),c("span",{key:"2e5ee8140b6f97ac898a003f202ef8a84fb0dc2c"},"Sidebar filter")),c("li",{key:"2b7bfc0a8612aecd35e8f53ee597d9e373e2d233"},c("span",{key:"cfdd3c33629f3ccfd5347f8a3f9af2b39db34fcd"},c("ifx-icon",{key:"8fbab33e435b1a101a4e85c2c07bb4b7e05b4e8d",class:"check__icon",icon:"check12"})),c("span",{key:"0af9c4e64287a01f6dc95ac5dd04c53a8d00fd37"},"Topbar filter")),c("li",{key:"de6ace9b471905eeae01bc624ac39c5f33c4ecc1"},c("span",{key:"3fc574499bbe0da91084da6049b007f8147c03af"},c("ifx-icon",{key:"b509d0c51d83d4f3cca196bc3b9f9bc7e84be69a",class:"check__icon",icon:"check12"})),c("span",{key:"33eaf5b4707e6b2a0e32c7711a579d926c467b76"},"Nestable buttons")))),c("td",{key:"86be1b64e8eec16bbffd11d17926c066a871c102"}),c("td",{key:"d35b8211d646094ea32abd0d5b5549d2bdfaef3a"})),c("tr",{key:"7bd77abc04f415bb744f4f4bb6fec9bcdc6b2240"},c("td",{key:"de6b94bf6ae5786780c4e2af73f91faaef4ef8c2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"7419e4064938920e12ef3c8792f5724c7e908e25",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"12298e76dc41262fb52d1d6a8e899afa4c0d04b2"},c("ul",{key:"f7855012b31fb52dd966a3d990c7cda9d0cfafab"},c("li",{key:"5605eaae73fc6383d4ace29af3572d455abe1d9e"},c("span",{key:"0c060ad8d7f2ea07a522d30676308626a32e34c0"},c("ifx-icon",{key:"23f778fe1251c052bd3ffe2f8f671f415c4fd4de",class:"check__icon",icon:"check12"})),c("span",{key:"ceca875ba701010900ed515416dfb6978abcb8f2"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"8eebfadbfdc315e4f8c143b81cfe80b1881ae266"},c("span",{key:"dfb71ba2058808ae3aaff1d42130925b390a3dc0"},c("ifx-icon",{key:"91272f29c61520846b02fa380b0c0ae3c52662f2",class:"check__icon",icon:"check12"})),c("span",{key:"c43c8ce40b4d85b4fc36015252ac6e9a67770079"},"Adheres to web standards")))),c("td",{key:"d62fc8b51caa0203256c517226162251e145e749"},c("ul",{key:"8ca1886cf23d623b2b7c96d797f5d5108cd70819"},c("li",{key:"ae7c73d7b7ad9efc05ab177e5673174a887a955b"},c("span",{key:"552d68604aa42888a8466a6bf4c98d117b92714c"},c("ifx-icon",{key:"715e2aeb13010e31e77cd806161791cb98ccad25",class:"check__icon",icon:"check12"})),c("span",{key:"28b8bcd345ec57345565f230807b4cce54d5178c"},"Horizontal and Vertical orientation")),c("li",{key:"70f5f429829397b0169720bbcf6c214852c87260"},c("span",{key:"7bfca205468dc4842534de13b8f7f3fdcfa14c1c"},c("ifx-icon",{key:"5ac4563ab3ec0945b8e94f9b35b109e63f9b5af0",class:"check__icon",icon:"check12"})),c("span",{key:"2e5eccf140b9420c474219f2d32a2dd1e76e2461"},"Extended customization")),c("li",{key:"80071c2fce5a293865e7b6d8643400fedb537909"},c("span",{key:"e170e1d2037966589466b111b8f8e2fef8f9a294"},c("ifx-icon",{key:"38d7b651e69812b5ba98b32cb199910279859d9f",class:"check__icon",icon:"check12"})),c("span",{key:"2dccec6c3220ee92e7ae946091e0abd1c33d0f1e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"613114b61f39d33b3ed7836a3f79b951bcc05210"})),c("tr",{key:"c84be0a62d1223ada11705760e44829499bb8421"},c("td",{key:"259f6fe66ff8d728ef112ca4668735bef26c744e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d056b9b536e5dde80cbae5be78a3bfb17d14e447",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"43a9032e4b210e0da3f928e1db720f72a1b36954"},c("ul",{key:"4315595ebb3931b45ef2e30d599a858f18df5a6f"},c("li",{key:"9051203c54c82194d855dd55b0a7332ce802fe4d"},c("span",{key:"317f00d34c516df7e5cecdd56e9eab8c25619b67"},c("ifx-icon",{key:"151f5d16b4c8200b5700acd8a18f341256374653",class:"check__icon",icon:"check12"})),c("span",{key:"6ef0da0c30ce95873186c97fff17d284c44f27da"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"68c43bf99ebef86fe3978b974f0270a7336b18af"},c("ul",{key:"1f9483705a7abd1857e36cf7d5e593af5223a30b"},c("li",{key:"6d732637aeaaff0f5bd6ced17c6ee26162f3e406"},c("span",{key:"97365b9946fbc64b9b095158fdc63ab613a57110"},c("ifx-icon",{key:"8ff5c746d6e9827c283f80d18f84fa6fe9aa0993",class:"check__icon",icon:"check12"})),c("span",{key:"064245a73940d14d6df654a7075caccc48bf8664"},"Icon incorporated")),c("li",{key:"123b7611d3da42afff7ff992875fe8f92bb7c750"},c("span",{key:"f66a8d8c76ffa49a75bffb0f87a1fc49115c5994"},c("ifx-icon",{key:"cbc28a408f3b9959dc363564a097cf99132bc6c9",class:"check__icon",icon:"check12"})),c("span",{key:"ec8d1f7c28986daba654f005d0215a222a410466"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5e49928bb6558a688a00e031d58f4f6384c8838b"})),c("tr",{key:"e8bae905dd890e601cff045b1c73125d3344715c"},c("td",{key:"b7d8f7d5d27ba586118160de2c9c92b36e68054e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"19278a56f5ec7bda647275882d81bce86b3175e4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"6e64dc8e83e1bbc6cf2787c43726a8ed2990aa1c"},c("ul",{key:"aa082bf48d258036a8a96deb8fd486bec44f5537"},c("li",{key:"9c47715bc641cb143b5c136e6575acbf54c671d0"},c("span",{key:"ecc6f497195e7f3e9d6033a0ea6f847aef8aa05a"},c("ifx-icon",{key:"d7481b776fbdc59879e976c5007ec3ecf9c0d884",class:"check__icon",icon:"check12"})),c("span",{key:"ff59473f213279b5175057e601bfb9c9dfd77953"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"2c3a689380aacd589484249ea966e89bce0c7231"},c("span",{key:"f4322b4872c0bc6cf0940cae43e32e6456ae2307"},c("ifx-icon",{key:"ea7ad7f037d8192b45b934d054f47d88d098504f",class:"check__icon",icon:"check12"})),c("span",{key:"2bc7b82ec13416f4859dd273abd77fd41dd76acf"},"Adheres to web standards")))),c("td",{key:"6336a675f45a79eb17d751c5be4f35f8a77aa8dd"},c("ul",{key:"6c6a273a03c29e6b9b74cb0c49b0c07d4ccdb30c"},c("li",{key:"a3799d68b2b5a4dfeb0f4524d8f6c660ff337a81"},c("span",{key:"edfd3fa4e40be482e45ed2b13d50ac4e19bbc375"},c("ifx-icon",{key:"60b94b305a2913cd0ddf996968e4a18f5d3ce1a9",class:"check__icon",icon:"check12"})),c("span",{key:"8afc08a29120e4459cdeb24719ed8b78d6002b6c"},"Extended customization")),c("li",{key:"f66b5c8ab755fa5d1eb19599ffce03d0589b6993"},c("span",{key:"3137a35291099a50684aa42a825f975714655327"},c("ifx-icon",{key:"2c72eaf13795ffa2757cb52be2ebc06d837f8f59",class:"check__icon",icon:"check12"})),c("span",{key:"77bd783a82173da337bc2825addc02170909389c"},"Possibility for icon configuration")),c("li",{key:"6087cfa2d8affa80c1fcf46d31f3f1d220ad4587"},c("span",{key:"ad11531ef4c3f577f900a42cde7497365918e377"},c("ifx-icon",{key:"57a0f39ef15cc0abfe01c9ac7c105675f8e31b6c",class:"check__icon",icon:"check12"})),c("span",{key:"6e1aa9f9688ef95957297b457d976b052a2655fe"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f25c630824d071dcf571fe73407fe3cc19a9ad96"},c("ul",{key:"e6e0ccb07967398c7199c4dd5d80ef997557f54a"},c("li",{key:"569916a7e9ac68eac126687e9e8dcc963ec5e053"},c("span",{key:"60e019c2ca1c56abb26474cb751a421ef0cfd1de"},c("ifx-icon",{key:"13c94a1458aa67428ba9962323b8a173e9072236",class:"check__icon",icon:"check12"})),c("span",{key:"d31e35e2d9ff3be0ec7ac1b3d34745136c8fb8ed"},"Form integration"))))),c("tr",{key:"588cfcf955b3c6e46df2bd5f55b290665354d435"},c("td",{key:"74478b54a6e939d5f53544f2b3059fe72da013e9",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"bb86be0a547b84627d1e67bcf063ced127a0e0d9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"93bcc5ac55fda6d2ede81ba78bb95d65e138d1ad"},c("ul",{key:"f66c010f72574815ca39f0edebcb50e4c688b195"},c("li",{key:"610548e0f5610df70248f060a6152a5e4f195d91"},c("span",{key:"ae88a9dab205273b6eaa5739473c752f3fb71e4a"},c("ifx-icon",{key:"3fcc0f8ee36653604a6382408f0d21ee8169d7d3",class:"check__icon",icon:"check12"})),c("span",{key:"47fc470ff7cbafe196f010f2180985595387b672"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"2c0936ebb7c050f91bbb7832100b9ce737f2f137"},c("span",{key:"c78b82ebe46a5701e51d032c7e7cd0dfef84f0af"},c("ifx-icon",{key:"5e8db58ae2fb2246a488664e09c0924a041fa439",class:"check__icon",icon:"check12"})),c("span",{key:"01bce1d870072b1e3f20477f9c4b3a20c8ae8ef0"},"Adheres to web standards")))),c("td",{key:"5b682a5c01a6733fc0e54f8d752ba8caa7f27c51"},c("ul",{key:"564889ccd8603346a3d83443c1ee1777d32d33e6"},c("li",{key:"c7615b70ff6fa436da82764031a9dcfdd132613d"},c("span",{key:"16061d76fb6727ef158d3ef8c4bf5dbf6c562c74"},c("ifx-icon",{key:"78fb4818352bf7c65b1511fb4ca0aebbcc914ac3",class:"check__icon",icon:"check12"})),c("span",{key:"fb2b29b92fb6548fde95b161124541213a00a8e5"},"Compact, dismissible and Extended variants")),c("li",{key:"be8c59f265282cd7175eeeb776012de77b158042"},c("span",{key:"f9972567b3c9e0f355a2abe6ad74017a72f9dd12"},c("ifx-icon",{key:"3b7ba05fed1eb68a9f97890cacacdb8ec490a97f",class:"check__icon",icon:"check12"})),c("span",{key:"925087968d81459b0a1f96df491f32c116e44ac6"},"Auto-adjusting position")),c("li",{key:"4f4c88bdfcd5a1898618be048d716f98ea52470d"},c("span",{key:"f89f9db8d828033d3d6d198f2f365ced29584cdb"},c("ifx-icon",{key:"2ca886e14984ddefbfa58daa4924c86ce21138b1",class:"check__icon",icon:"check12"})),c("span",{key:"7c5bc05aa1503494f7c72a1589444ebb49d841db"},"Icon incorporated")),c("li",{key:"a9cab61bee68861de82ea300cbbaa17ac6ca71ea"},c("span",{key:"6e58f43cb12039a3f6b9c400f65cc2949fc978e1"},c("ifx-icon",{key:"653ac365b7bef261514bd9eff8d6d6cc45698b63",class:"check__icon",icon:"check12"})),c("span",{key:"8220fdcceaeb579c8e625761482cce0e0e0372e8"},"React, Vue and Angular wrapper integration")))),c("td",{key:"aa7521d7ba06645fb1f670c9e271de7bc0ab6b12"})),c("tr",{key:"aa83d1e9163cfe78e25e2675c347cb44890a028a"},c("td",{key:"4005a7a3951dcb52a52a33d15063849b77524499",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"68ab9e095b0a3bf2b8dcff5c4bee9d5c2489a08a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"3e1472164ba823d84996e42ba121f01dd8281d63"},c("ul",{key:"47b5c409bd58a13f00b75ebe023d3255393a565e"},c("li",{key:"cd47ab66fb342317264ef99b90e464ca7db99b86"},c("span",{key:"d356ab976a493e7e3f34cf16f644768d2c748800"},c("ifx-icon",{key:"b01b5eb3e79d31664e35132ba89578ce968382ea",class:"check__icon",icon:"check12"})),c("span",{key:"068b27577015cb43295154d37aeb82f0585d6211"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"72cba783aa291368d4f03f063d10be4946184147"},c("span",{key:"4cd4393718207a4d9076e2ea311d41f50514b222"},c("ifx-icon",{key:"bc98ef0971b01e37ff532c5fba5f067d3849df1a",class:"check__icon",icon:"check12"})),c("span",{key:"33ece591dc82767c5c291788532030c41e722796"},"Adheres to web standards")))),c("td",{key:"7a8f8dec5813e5f080020d23fbdbd2cdfd5ea34f"}),c("td",{key:"ad6c7a98bf08d77e96e2a68c5d977da2175df9f0"})),c("tr",{key:"74c401d2bf614a501b912146fc50924259e5f414"},c("td",{key:"ac4f14121718442d908803a2f9552cea59e7ac52",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"87498c093a0a7c54e5bd798b3a4bab8546819931",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"e79ef48d7c317b98f2e6e741f6a7f59ef5e94107"},c("ul",{key:"7081fda18dce309726ac78154d7e87744fb475e2"},c("li",{key:"d8c473a038a82ed99475cb0af359cc9c824b82d7"},c("span",{key:"6750d6baf81297c5c736389d8f8e51adb62a14d7"},c("ifx-icon",{key:"95c3f1f879be3c900731441dde9bd2dc1d116aa4",class:"check__icon",icon:"check12"})),c("span",{key:"148f7ca2beb4f07074146ded1009b90b60596b0e"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"e6ffac829347dcb3c155591543e020c4b6c4e247"},c("span",{key:"2c9f891d3795a8fd691d22f2dc7bd8ea7f1950d3"},c("ifx-icon",{key:"d402fae7b081c621d86510b16747d9224c2c9ab3",class:"check__icon",icon:"check12"})),c("span",{key:"e762af68490045183d9f6a1b79e234b7650edbe4"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"6afad5378fe6c505874c8d1a4068a888c908e35d"},c("span",{key:"ce03646e071a931584d829e8974425fbba8a8090"},c("ifx-icon",{key:"462e7208ec66939bb85ea257836123c98cb7fddf",class:"check__icon",icon:"check12"})),c("span",{key:"8b7905119c7076d0ac586ad5a0c5d4a91c963afd"},"Adheres to web standards")))),c("td",{key:"76d13d87fc704862e12cda08b6f36ddd53c36475"}),c("td",{key:"01f18bb756a894bff9da033e958bbccdbf30c65e"})),c("tr",{key:"e0ee06ddfbf6a3a5a09f886dc3837b318bd92040"},c("td",{key:"f1108afd6e803aeb9eabb89eb327dd68eb328e7c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ae1fefe4a095ad36548a92b482bf687e625f9c8b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"91b2be355933d2b4ea38d7ea0e127be37600090e"},c("ul",{key:"cce35b3a55c29d9b9402feca3f6a2b2472b4a833"},c("li",{key:"1679a63cfd25854ce03bc13488d972bbb34939d2"},c("span",{key:"f67fd18196e14381ec9d8bfcf9904efaeaa02d35"},c("ifx-icon",{key:"d5d35d3dfceba76f69125c8fa0f9ccd81fdcc65b",class:"check__icon",icon:"check12"})),c("span",{key:"b8a7afe9ef863f0a8a0a5942df02a2f1d66a56e1"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"01ce9438af356c8eff3ea7f648b777ee35591eb7"},c("span",{key:"c8d2c37a0e01207fbc554eba3f136551aac5926f"},c("ifx-icon",{key:"8ca5520e8d2b865084a738988540c87959458374",class:"check__icon",icon:"check12"})),c("span",{key:"12a36cd1db507fa85b4ea2408357b3629e9b662b"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"e3c5a590b5da285f3393fd1d25c0056a09746fcb"},c("span",{key:"7f8bc720de71c19e1dd7c00cc42a54d40bc5f5bb"},c("ifx-icon",{key:"9c0b77c746e1f1c12807103468146d8495e1d171",class:"check__icon",icon:"check12"})),c("span",{key:"a1be543abbd64ad15f4f8e7b8e1f74207823eea1"},"Adheres to web standards")))),c("td",{key:"43296fbd4746b7c22cc0eed607efc279162089ec"}),c("td",{key:"36edf5fc0d4d11be7e1eee16161d05f62362debc"})),c("tr",{key:"9d8c4ddeabbba7c7fff4c07241186d064973d8c2"},c("td",{key:"faea8cef696f4fb72f742600794c395cdd4806e7",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1086d8d459b16dd8fa6d2c33aa1a27a84dab4d81",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"8a1d299dae87128934b08139ddde6e77d110d946"},c("ul",{key:"f7cc8f0384a7fdac87050d66062f9ed839bcd7d8"},c("li",{key:"1a605c7c35e43e01739870b8392c9f0982868b81"},c("span",{key:"3ffeceebc9a765bc51720de126d686f812f68ec7"},c("ifx-icon",{key:"70220c7716dc638acf5659b6bb99297f0bb79ff0",class:"check__icon",icon:"check12"})),c("span",{key:"75445dfcb5d6fec62f78eba96cf55b88f083e8a3"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"4a2bd2168fe9c81c89b4ffb8b6fe1fbfaff1c45c"},c("span",{key:"010d8fcfaf74dfda3d15da7e9557bac859f20a40"},c("ifx-icon",{key:"8bbcfaedaeac9f64a83396a1e7d18917b61972c7",class:"check__icon",icon:"check12"})),c("span",{key:"3ea2add2ed48e99ee01b739121366a902eeef56b"},"Form integration")))),c("td",{key:"48e8a62e11e70af3fcdafaebb6b08566304cd823"}),c("td",{key:"046a92062d5512c84c234f43bf97e23373595c81"})),c("tr",{key:"ef5f0a67adf64a474d06027bb387b29b5ea9076a"},c("td",{key:"0967c3523d56204d17aa6dcc97afd86fe151cd86",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"4f2c2dd154c5dd0d4a58bfde1e7019bcbf464236",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"e467f5a55bf58bafebb7c77ee1a2feca11c78425"},c("ul",{key:"648ea6e12ed5b3b164a67e57765f218133a4a688"},c("li",{key:"2182e53ae8fb82d885ad2ca44c8c14902fd753de",class:"planned__component-wrapper"},c("span",{key:"5e2e9ed5560946ba53a0261336a9bf259b818760"},c("ifx-icon",{key:"0401fc8661a42cb176478cbc8bb73dfc969d7607",class:"planned__icon",icon:"clock24"})),c("span",{key:"38748e9d68def3fbf93a58985c05169ed14062f3"},"On Hold")))),c("td",{key:"95da21efed48691e92f7ff596de7912b64b7f102"}),c("td",{key:"75c24066b7fbcddd6b5bf671c252617287b101f8"})),c("tr",{key:"3ef2df6b2df5e41c97aeaf08b613bdbf3a59053a"},c("td",{key:"fdb75fd44d68ccbf38bd711c632da61e78f8521e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"67d388b187d0ac81c1646a1f727f3cafb206cd6f",href:"",size:"s",variant:"bold"},"Advanced Date Picker")),c("td",{key:"5152b89ee2acbbdbdaa98be8e3004ed3c9603dac"},c("ul",{key:"859733b009d75cc11312b28175c5da3cb795f2d2"},c("li",{key:"b1b3d65103332a0c0b52e00c54c3b7911bc435e5",class:"planned__component-wrapper"},c("span",{key:"530327318e0864cd3df33f3251abba1066e3c437"},c("ifx-icon",{key:"6650610c4b04a8ee88876fd450ea8dd620ea4dff",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"5d2a3e9865ac82e62b8ec8518addb10fef1b9034"},"In Progress")))),c("td",{key:"1e8d14ddbbbb3164caa02d8b12a698cc0bb27ff4"}),c("td",{key:"6acfa6eded08a9f94d3d50c241214aa0a873ee47"})),c("tr",{key:"ff7df586aca1a3c72342bb4c77f1f1501806c2c3"},c("td",{key:"1b170045badbe42bfec7b47a81429d7335a30218",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"44a42f34b747f671a322856254fc1caeeef9d317",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"2ecaf3a6e5c54f896827d30234f2ad16c15bba92"},c("ul",{key:"9e4e36dd9e095be8d149605649c81b1df779e3e9"},c("li",{key:"4196752fd4778c4713f17cf41ec7e20c5d3a9e37",class:"planned__component-wrapper"},c("span",{key:"dfcd312fde2b976ce5d84643f1bfa7ae65cdfc66"},c("ifx-icon",{key:"a1069119c52b340bf930d28b8a7ca1cdb03ef736",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"40d3bffc46155d349e9e99a836a93bdc95835574"},"In Progress")))),c("td",{key:"03df88d158be82fce55098b4afff9fa810df783c"}),c("td",{key:"e1872576858dc8f91011840577f08744be4fb3d2"})),c("tr",{key:"f4f548ff8b7efa253a17287cc0ad63fe33319b59"},c("td",{key:"fabcbfb17e48be84489bfe3ec0729632436b4fe2",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"28cb080849629a13b320a3894557af044f40c66e",href:"",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"b26a30ad9863db3f16c5506264248d5c905fa17e"},c("ul",{key:"aeeb78e332d5096a097bbac6b51b2b0ae7ca5333"},c("li",{key:"8ff79d8cea2dfb8d69398c4545b00970455df08b",class:"planned__component-wrapper"},c("span",{key:"3cfbff1f115cc695a0991275df101e704b0fdb16"},c("ifx-icon",{key:"5db5902ec16f7dbe800b7cd31688dfbc30d29e93",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"f7bde841295bfb35647d6d71d320dd027208e68d"},"In Progress")))),c("td",{key:"3f77a89dd8564e2da0cfd6b5b951fdc1c33773c2"}),c("td",{key:"edb1e6b8333412636c51e700cbe944715d2a23f6"})),c("tr",{key:"3a40cf1c9d2c003e876a22f1c0a17a0aad32679f"},c("td",{key:"5cea57e4b22051d14cd3c31da3e25ab54269069b",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"bd35f5f5e00c44ce715943b7bc737d17b9ff6db9",href:"",size:"s",variant:"bold"},"Radio Group")),c("td",{key:"ea55f5108f24e306ecc43e373d5eb076c9714f59"},c("ul",{key:"9e6b1e483b45f9e6450aca744f580fb5fb4130f1"},c("li",{key:"5e06624787cde846ef69c5d3cb76f9763630cf69",class:"planned__component-wrapper"},c("span",{key:"04c2ffb2d89a440ee619af326c17eba3f68b2e87"},c("ifx-icon",{key:"6c4a29997b2ee517b1d466ddd1744a1d0d0805be",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"077fe01b2350c9dc356b2a6c9b73c897b7107140"},"In Progress")))),c("td",{key:"9b3d733f585b93e44a17adb9f3e5600f1060ff09"}),c("td",{key:"3ba88df9105918659c48c721baeb73b80a92356d"})),c("tr",{key:"2ec71f898c70a754d242ad370624345b15d90786"},c("td",{key:"e39031cdeffb72da83045f31da2bff753048b016",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"22af53f5860c0c3abb72b821d8fcc508e9566f00",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"f9aabc4fd6f5a87123bb4e0170cbe97818d70bcf"},c("ul",{key:"b938cca97cdafa7b4aa8033c996fc1fc1afe232d"},c("li",{key:"e851182a4c5750f8f333cbcff098af51554394a1",class:"planned__component-wrapper"},c("span",{key:"84159ba390fea003752bd8fd49a1d67ca6982d86"},c("ifx-icon",{key:"0e7dd85ceb7b3352764ca04e63ad06ab2d0a17ff",class:"planned__icon",icon:"roboticarm24"})),c("span",{key:"2cc9b6ecb5c3049f1343cc39c0efb163e57ae1d9"},"In Progress")))),c("td",{key:"02ed0181094204e0d9de74d78d47f75a02ceb11c"}),c("td",{key:"c55d488d64b4dcfcdd6c4f778e2db173fc38c2a6"})),c("tr",{key:"f69b27cbde3b02899f454ddb5bbc5b1f33e8ddcb"},c("td",{key:"1cb31362ce2a3edbb137be2a6b5a8533caaa7a8e",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"fb893b2adb32fe8e5e8dfedaad80796001eefaca",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"1a1231803fcbac78d7340cdfb1838d8b6c856225"},c("ul",{key:"6db01514d6c62396a51c72c8327f94782fb70685"},c("li",{key:"9200e2111d37cf5bfc5f8ea8f62b99875cab4deb",class:"planned__component-wrapper"},c("span",{key:"87ca51b415f2da81c0f57b609ec8ba8edaf436be"},c("ifx-icon",{key:"5d4e4598d57b59a0aab153c67ff655cd84de3291",class:"planned__icon",icon:"clock24"})),c("span",{key:"368664401eafa27407113b4b94f97454e793da24"},"On Hold")))),c("td",{key:"7d7f29264f374481d5cd1420f11d78904b575592"}),c("td",{key:"a9d816f9ae4fb8f5fea38c70bb68f7ab800f1c28"})))))))}get el(){return a(this)}};b.style=f;export{b as ifx_overview_table};
-//# sourceMappingURL=p-18f5a5e3.entry.js.map

package/dist/infineon-design-system-stencil/p-1aed7d45.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,a as r,g as d}from"./p-6b122987.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:1px solid #EEEDED;border-radius:1px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const i=o;const t=class{constructor(a){e(this,a);this.noBtns=undefined;this.direction="vertical";this.alignment=undefined;this.noImg=undefined;this.href="";this.internalHref="";this.target="_self";this.AriaLabel=undefined}setImgPosition(e){this.alignment=e.detail}handleComponentAdjustment(){const e=this.el.querySelector("ifx-card-image");const a=this.el.querySelector("ifx-card-links");if(!e){this.noImg=true}else this.noImg=false;if(!a){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.internalHref=undefined}else this.internalHref=this.href}handleClassList(e,a,r){e.classList[a](r)}componentWillLoad(){this.handleComponentAdjustment()}componentWillUpdate(){this.handleComponentAdjustment()}render(){return a(r,{key:"01e7592f9bf887e80837db93ab637fa77fb1ce1f"},a("div",{key:"8b784dff18da8f47e57a293554dc18af013293f4","aria-label":this.AriaLabel,class:`card \n          ${this.noBtns?"noBtns":""}\n          ${this.direction} \n          ${this.alignment}`,role:"region"},this.direction==="horizontal"&&a("div",{key:"69e234c4c3302dd8bf6b5133016e3c0642cf0034",class:"horizontal"},a("a",{key:"c4e4288637327e7e0f68b68a3ee750e3567c327d",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"d119095e1e71d459b160744276a2987b9596d076",name:"img"})),a("div",{key:"53b3816544b90daec193ced7b084aa2dfa12f7c6",class:"lower__body-wrapper"},a("a",{key:"61477913ea24a2bdc3765771bf60af809a5643f5",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},a("slot",{key:"aa49da1c6b7cefefb5d9f36f72f3166e09c2e494"})),a("div",{key:"da9e12e7e215397ed699f3158676235d3ec1e05c"},a("slot",{key:"dd43320f7bc1d0dce6f3c6a3bbf4de31c60d9f77",name:"buttons"})))),this.direction==="vertical"&&a("div",{key:"81a7e3a57402983a7544cb80c37609ca1189b8cd",class:"vertical"},a("a",{key:"3835c2cbb6de0e6b518f72d7752033e71e62e5f6",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},a("div",{key:"57f555a369c10897d75058780993a45d0dc4b1da",class:`card-img ${this.noImg?"noImage":""}`},a("slot",{key:"fc23cd2f3575e0c8bf9dc4e50581527175d3dfa5",name:"img"})),a("div",{key:"abc7faafe9cb34acba6cd6db1daca948438511e9",class:"upper-body"},a("slot",{key:"9f8ed0bfa8ac124368b0fc0af24037ab9549d26b"}))),a("div",{key:"f13ded514016af3d5975224049db6c84c32e7c03",class:"lower__body-wrapper"},a("slot",{key:"3a6875e3f2daa209ad56bc5417facd8835af3ea0",name:"buttons"})))))}get el(){return d(this)}};t.style=i;export{t as ifx_card};
-//# sourceMappingURL=p-1aed7d45.entry.js.map

package/dist/infineon-design-system-stencil/p-1aed7d45.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","IfxCardStyle0","Card","setImgPosition","event","this","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","href","trim","internalHref","undefined","handleClassList","type","className","classList","componentWillLoad","componentWillUpdate","render","h","Host","key","AriaLabel","class","direction","role","name","target"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  border-radius: 1px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family);\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() AriaLabel: string;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    if (!image) {\n      this.noImg = true;\n    } else this.noImg = false;\n\n    if (!links) {\n      this.noBtns = true;\n    } else this.noBtns = false;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n  }\n\n\n  componentWillLoad() {\n    this.handleComponentAdjustment()\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment()\n  }\n\nrender() {\n    return (\n      <Host>\n        <div aria-label={this.AriaLabel} class={\n          `card \n          ${this.noBtns ? 'noBtns' : \"\"}\n          ${this.direction} \n          ${this.alignment}`\n        }\n        role=\"region\">\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a class={`upper-body ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref}>\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} href={this.internalHref} target={this.target}>\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body'>\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAU,+1DAChB,MAAAC,EAAeD,E,MCQFE,EAAI,M,8DAGgC,W,wDAGxB,G,kBACS,G,YACP,Q,yBAIzB,cAAAC,CAAeC,GACbC,KAAKC,UAAYF,EAAMG,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQJ,KAAKK,GAAGC,cAAc,kBACpC,MAAMC,EAAQP,KAAKK,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVJ,KAAKQ,MAAQ,I,MACRR,KAAKQ,MAAQ,MAEpB,IAAKD,EAAO,CACVP,KAAKS,OAAS,I,MACTT,KAAKS,OAAS,MAErB,GAAIT,KAAKU,KAAKC,SAAW,GAAI,CAC3BX,KAAKY,aAAeC,S,MACfb,KAAKY,aAAeZ,KAAKU,I,CAGlC,eAAAI,CAAgBT,EAAIU,EAAMC,GACxBX,EAAGY,UAAUF,GAAMC,E,CAIrB,iBAAAE,GACElB,KAAKG,2B,CAGP,mBAAAgB,GACEnB,KAAKG,2B,CAGT,MAAAiB,GACI,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAiBvB,KAAKwB,UAAWC,MAC/B,oBACEzB,KAAKS,OAAS,SAAW,iBACzBT,KAAK0B,yBACL1B,KAAKC,YAET0B,KAAK,UAEF3B,KAAK0B,YAAc,cAClBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,YAAYzB,KAAKQ,MAAQ,UAAY,MAAMR,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,cACtGS,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAGbP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,cAAczB,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,cACzES,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMK,KAAK,eAKlB5B,KAAK0B,YAAc,YAClBL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,uBAAuBzB,KAAKY,aAAe,YAAc,KAAMF,KAAMV,KAAKY,aAAciB,OAAQ7B,KAAK6B,QAC7GR,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAYzB,KAAKQ,MAAQ,UAAY,MAC/Ca,EAAA,QAAAE,IAAA,2CAAMK,KAAK,SAGbP,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,QAAAE,IAAA,2CAAMK,KAAK,e","ignoreList":[]}