@infineon/infineon-design-system-stencil 35.4.3--canary.1941.c9a5e850bd5cf754cf4864a37f2bcf38ec080efe.0 → 35.5.0--canary.1904.0d4b003852c0b770dd57c6a1f84fbed5c045769e.0

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

package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,g as i}from"./p-b7a462e5.js";const a=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const o=a;const n=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const i=this.getSegments();i.forEach((i=>{if(i.selected){if(i.segmentIndex!==e){i.selected=false;t=i.value}else{s=i.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}))}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}componentDidLoad(){this.setActiveSegment()}render(){return s("div",{key:"457f1ff3d1035a563716cd6f122cefe00478f1a5","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"6d447d98f9fe9d1bc37e3664bd11e6f9a2e606a3",class:"group__label"},this.label.trim()),s("div",{key:"7d982526d1f2dd696e799a010b345438900686a4",class:"group__controls"},s("slot",{key:"86342c60b0fbbd955c6e34b5dd03ccab1381606f"})),this.caption.trim()&&s("div",{key:"fd818c6ec5152bb22abd8cb66415ba7fd9dc9e0d",class:"group__caption"},s("ifx-icon",{key:"05472adcc835a253772046f3e6ca7aa72a15ff79",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return i(this)}};n.style=o;export{n as ifx_segmented_control};
-//# sourceMappingURL=p-5b5c144f.entry.js.map

package/dist/infineon-design-system-stencil/p-5b5c144f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["segmentedControlCss","IfxSegmentedControlStyle0","SegmentedControl","constructor","hostRef","this","caption","label","size","selectedValue","onSegmentSelect","event","previousValue","unselectPreviousSegment","detail","ifxChange","emit","newSelectedIndex","segments","getSegments","forEach","control","selected","segmentIndex","value","querySelectorAll","setActiveSegment","activeSegmentedControlFound","idx","setSegmentSize","shadowRoot","querySelector","classList","add","componentDidLoad","render","h","key","class","trim","icon","componentDidRender"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    gap: tokens.$ifxSpace150;\n}\n\n.group__label {\n    font: tokens.$ifxBodyBody05;\n\n    &:empty {\n        display: none;\n    }\n}\n\n.group__controls {\n    display: flex;\n    flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n    margin-left: -1px;\n    margin-top: -1px;\n}\n\n.group__caption {\n    display: flex;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    \n    font: tokens.$ifxBodyBody05;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\n\n@Component ({\n    tag: 'ifx-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    componentDidLoad() {\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"],"mappings":"yDAAA,MAAMA,EAAsB,gbAC5B,MAAAC,EAAeD,E,MCOFE,EAAgB,MAN7B,WAAAC,CAAAC,G,+CAWYC,KAAAC,QAAkB,GAClBD,KAAAE,MAAgB,GAChBF,KAAAG,KAA4B,UAS5BH,KAAAI,cAAwB,E,CANhC,eAAAC,CAAgBC,GACZ,MAAMC,cAAEA,EAAaH,cAAEA,GAAkBJ,KAAKQ,wBAAwBF,EAAMG,QAC5ET,KAAKI,cAAgBA,EACrBJ,KAAKU,UAAUC,KAAK,CAAEJ,gBAAeH,iB,CAKzC,uBAAAI,CAAwBI,GACpB,IAAIL,EACJ,IAAIH,EAEJ,MAAMS,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACd,GAAIA,EAAQC,SAAU,CAClB,GAAID,EAAQE,eAAiBN,EAAkB,CAC3CI,EAAQC,SAAW,MACnBV,EAAgBS,EAAQG,K,KACrB,CACHf,EAAgBY,EAAQG,K,MAKpC,MAAO,CAAEZ,gBAAeH,gB,CAG5B,WAAAU,GACI,OAAOd,KAAKH,iBAAiBuB,iBAAiB,c,CAGlD,gBAAAC,GACI,MAAMR,EAAqBb,KAAKc,cAChC,IAAIQ,EAA8B,MAClCT,EAASE,SAAQ,CAACC,EAAgCO,KAC9CP,EAAQE,aAAeK,EACvB,GAAID,EAA6B,CAC7B,GAAIN,EAAQC,SAAUD,EAAQC,SAAW,K,KACtC,CACH,GAAID,EAAQC,SAAU,CAClBK,EAA8B,KAC9BtB,KAAKI,cAAgBY,EAAQG,K,MAM7C,cAAAK,GACI,MAAMX,EAAqBb,KAAKc,cAChCD,EAASE,SAASC,IACdA,EAAQS,WAAWC,cAAc,YAAYC,UAAUC,IAAI,YAAY5B,KAAKG,OAAO,G,CAI3F,gBAAA0B,GACI7B,KAAKqB,kB,CAGT,MAAAS,GACI,OACIC,EAAA,OAAAC,IAAA,wDAAiBhC,KAAKI,cAAa,aAAa,oBAAoB6B,MAAM,SACtEF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACLjC,KAAKE,MAAMgC,QAGjBH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACPF,EAAA,QAAAC,IAAA,8CAIAhC,KAAKC,QAAQiC,QACbH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,kBACPF,EAAA,YAAAC,IAAA,2CAAUG,KAAK,cAAuB,IAAGnC,KAAKC,QAAQiC,Q,CAO1E,kBAAAE,GACIpC,KAAKwB,gB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-65fe2246.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as n,a as e}from"./p-b7a462e5.js";import{g as o}from"./p-27d2afb4.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon=""}updateIcon(t){this.internalIcon=t;this.setIcon()}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const o=n("path",e);s.push(o);if(t.firstChild){const e=t.querySelectorAll("path");const o=t.querySelectorAll("path").length;for(let t=0;t<o;t++){let o=this.convertHtmlToObject(e[t]);let i=n("path",o);s.push(i)}}return s}getSVG(t){const s=this.convertStringToHtml(this.ifxIcon);const e=s.getAttribute("width");const o=s.getAttribute("height");const i=s.getAttribute("fill");const c=s.getAttribute("viewBox");return n("svg",{class:"inline-svg",width:e,height:o,xmlns:"http://www.w3.org/2000/svg",fill:i,viewBox:c},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}setIcon(){const t=t=>t.replace(/[-_]+(.)/g,((t,s)=>s.toUpperCase())).replace(/^(.)/,(t=>t.toLowerCase()));const s=t(this.internalIcon);this.ifxIcon=o(s)}componentWillLoad(){this.internalIcon=this.icon;this.setIcon()}render(){return n(e,{key:"28a16b1fa9ecc7e956d9012e18e0d7ca71d839b2"},this.constructIcon())}static get watchers(){return{icon:["updateIcon"]}}};r.style=c;export{r as ifx_icon};
-//# sourceMappingURL=p-65fe2246.entry.js.map

package/dist/infineon-design-system-stencil/p-65fe2246.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["infineonIconStencilCss","IfxIconStyle0","InfineonIconStencil","constructor","hostRef","this","icon","updateIcon","newIcon","internalIcon","setIcon","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","ifxIcon","width","getAttribute","height","fill","viewBox","class","xmlns","constructIcon","SVG","console","error","consoleError","emit","toCamelCase","str","replace","_","chr","toUpperCase","m","toLowerCase","iconName","getIcon","componentWillLoad","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n  display: inline-flex;\n  justify-content: center;\n\n  &:empty {\n    display: none;\n  }\n}","import { Component, Prop, h, Host, Event, EventEmitter, Watch, State } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n  tag: 'ifx-icon',\n  styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n  @Prop({ mutable: true }) icon: string = \"\"\n  @Prop({ mutable: true }) ifxIcon: any;\n  @State() internalIcon: string;\n  @Event() consoleError: EventEmitter<boolean>;\n\n   @Watch('icon')\n    updateIcon(newIcon: string) { \n      this.internalIcon = newIcon;\n      this.setIcon()\n    }\n\n  convertStringToHtml(htmlString) { \n    const div = document.createElement('div')\n    div.innerHTML = htmlString\n    return div.firstChild\n  }\n\n  convertHtmlToObject(htmlElement) { \n    let pathToObject = Array\n      .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n      .reduce((acc, current) => {\n        acc[current.name] = current.value\n        return acc\n      }, {})\n\n    return pathToObject\n  }\n\n  convertPathsToVnode(htmlPath) { \n    let svgPaths = []\n    const parentPath = this.convertHtmlToObject(htmlPath);\n    const parentPathToVnode = h(\"path\", parentPath);\n    svgPaths.push(parentPathToVnode)\n    if(htmlPath.firstChild) { \n      const paths = htmlPath.querySelectorAll('path');\n      const pathLength = htmlPath.querySelectorAll('path').length;\n      for(let i = 0; i < pathLength; i++) { \n        let pathToObject = this.convertHtmlToObject(paths[i])\n        let objToVnode = h(\"path\", pathToObject)\n        svgPaths.push(objToVnode)\n      }      \n    }\n    return svgPaths\n  }\n\n  getSVG(svgPath) {\n    const htmlPath = this.convertStringToHtml(this.ifxIcon) as SVGElement;\n    const width = htmlPath.getAttribute('width');\n    const height = htmlPath.getAttribute('height');\n    const fill = htmlPath.getAttribute('fill');\n    const viewBox = htmlPath.getAttribute('viewBox');\n    \n    return <svg class=\"inline-svg\" width={width} height={height} xmlns=\"http://www.w3.org/2000/svg\" fill={fill} viewBox={viewBox}>{...svgPath}</svg>\n  }\n\n  constructIcon() {\n    if(this.ifxIcon) {\n      const htmlPath = this.convertStringToHtml(this.ifxIcon)\n      const svgPath = this.convertPathsToVnode(htmlPath)\n      const SVG = this.getSVG(svgPath)\n      return SVG;\n    } else if(this.icon !== \"\") {\n      console.error('Icon not found!')\n      this.consoleError.emit(true)\n      return;\n    }  else { \n      return;\n    }\n  }\n\nsetIcon() { \n  const toCamelCase = str =>\n    str\n      .replace(/[-_]+(.)/g, (_, chr) => chr.toUpperCase()) // handle - and _ to uppercase\n      .replace(/^(.)/, (m) => m.toLowerCase()); // ensure first letter is lowercase\n\n  const iconName = toCamelCase(this.internalIcon);\n  this.ifxIcon = getIcon(iconName);\n}\n\n  componentWillLoad() {\n    this.internalIcon = this.icon;\n    this.setIcon()\n  }\n\n  render() {\n    return (\n      <Host>\n      {this.constructIcon()}\n      </Host>\n    );\n  }\n}"],"mappings":"6FAAA,MAAMA,EAAyB,mFAC/B,MAAAC,EAAeD,E,MCSFE,EAAmB,MALhC,WAAAC,CAAAC,G,qDAM2BC,KAAAC,KAAe,E,CAMtC,UAAAC,CAAWC,GACTH,KAAKI,aAAeD,EACpBH,KAAKK,S,CAGT,mBAAAC,CAAoBC,GAClB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAYJ,EAChB,OAAOC,EAAII,U,CAGb,mBAAAC,CAAoBC,GAClB,IAAIC,EAAeC,MAChBC,KAAKH,EAAYI,YAAY,EAAGC,OAAMC,YAAO,CAAQD,OAAMC,YAC3DC,QAAO,CAACC,EAAKC,KACZD,EAAIC,EAAQJ,MAAQI,EAAQH,MAC5B,OAAOE,CAAG,GACT,IAEL,OAAOP,C,CAGT,mBAAAS,CAAoBC,GAClB,IAAIC,EAAW,GACf,MAAMC,EAAa3B,KAAKa,oBAAoBY,GAC5C,MAAMG,EAAoBC,EAAE,OAAQF,GACpCD,EAASI,KAAKF,GACd,GAAGH,EAASb,WAAY,CACtB,MAAMmB,EAAQN,EAASO,iBAAiB,QACxC,MAAMC,EAAaR,EAASO,iBAAiB,QAAQE,OACrD,IAAI,IAAIC,EAAI,EAAGA,EAAIF,EAAYE,IAAK,CAClC,IAAIpB,EAAef,KAAKa,oBAAoBkB,EAAMI,IAClD,IAAIC,EAAaP,EAAE,OAAQd,GAC3BW,EAASI,KAAKM,E,EAGlB,OAAOV,C,CAGT,MAAAW,CAAOC,GACL,MAAMb,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMC,EAAQf,EAASgB,aAAa,SACpC,MAAMC,EAASjB,EAASgB,aAAa,UACrC,MAAME,EAAOlB,EAASgB,aAAa,QACnC,MAAMG,EAAUnB,EAASgB,aAAa,WAEtC,OAAOZ,EAAA,OAAKgB,MAAM,aAAaL,MAAOA,EAAOE,OAAQA,EAAQI,MAAM,6BAA6BH,KAAMA,EAAMC,QAASA,MAAaN,E,CAGpI,aAAAS,GACE,GAAG/C,KAAKuC,QAAS,CACf,MAAMd,EAAWzB,KAAKM,oBAAoBN,KAAKuC,SAC/C,MAAMD,EAAUtC,KAAKwB,oBAAoBC,GACzC,MAAMuB,EAAMhD,KAAKqC,OAAOC,GACxB,OAAOU,C,MACF,GAAGhD,KAAKC,OAAS,GAAI,CAC1BgD,QAAQC,MAAM,mBACdlD,KAAKmD,aAAaC,KAAK,MACvB,M,KACM,CACN,M,EAIN,OAAA/C,GACE,MAAMgD,EAAcC,GAClBA,EACGC,QAAQ,aAAa,CAACC,EAAGC,IAAQA,EAAIC,gBACrCH,QAAQ,QAASI,GAAMA,EAAEC,gBAE9B,MAAMC,EAAWR,EAAYrD,KAAKI,cAClCJ,KAAKuC,QAAUuB,EAAQD,E,CAGvB,iBAAAE,GACE/D,KAAKI,aAAeJ,KAAKC,KACzBD,KAAKK,S,CAGP,MAAA2D,GACE,OACEnC,EAACoC,EAAI,CAAAC,IAAA,4CACJlE,KAAK+C,gB","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-676fb63a.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as s}from"./p-b7a462e5.js";import{c as r}from"./p-5cdc6210.js";const t=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:flex}.search-field{box-sizing:border-box;background-color:#FFFFFF;width:100%;font-family:var(--ifx-font-family)}.search-field .search-field__wrapper{box-sizing:border-box;height:40px;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;padding:8px 16px;gap:12px;flex:none;order:0;align-self:stretch;flex-grow:0;position:relative;width:100%;outline:none;color:#8D8786}.search-field .search-field__wrapper.focused{border:1px solid #0A8276}.search-field .search-field__wrapper.focused ifx-icon{color:#575352}.search-field .search-field__wrapper.search-field__wrapper-s{height:36px}.search-field .search-field__wrapper:hover:not(.focused,:focus){border:1px solid #3C3A39}.search-field .search-field__wrapper:focus{outline:none;border:1px solid #0A8276}.search-field .search-field__wrapper .delete-icon{right:12px;cursor:pointer}.search-field .search-field__wrapper input[type=text]{font-style:normal;font-weight:400;font-size:16px;color:#8D8786;border:none;width:100%;outline:none;height:16px}.search-field .search-field__wrapper input[type=text]:focus{outline:none;color:#1d1d1d}.search-field .search-field__wrapper input[type=text]:disabled{background-color:#EEEDED}.search-field .search-field__wrapper:has(input[disabled]){background-color:#EEEDED}';const a=t;const h=class{constructor(s){e(this,s);this.ifxInput=i(this,"ifxInput",7);this.value="";this.insideDropdown=false;this.showDeleteIcon=false;this.showDeleteIconInternalState=false;this.disabled=false;this.size="l";this.isFocused=false;this.placeholder="Search...";this.autocomplete="on";this.maxlength=null;this.handleInput=()=>{const e=this.inputElement.value;this.value=e;this.ifxInput.emit(this.value)};this.handleDelete=()=>{this.inputElement.value="";this.value="";this.ifxInput.emit(this.value)}}handleOutsideClick(e){const i=e.composedPath();if(!i.includes(this.inputElement)){this.isFocused=false}}valueWatcher(e){if(e!==this.inputElement.value){this.inputElement.value=e}}focusInput(){this.inputElement.focus();this.isFocused=true}componentWillUpdate(){if(this.value!==""){this.showDeleteIconInternalState=true}else this.showDeleteIconInternalState=false}render(){return s("div",{key:"1c934e49ec338b1143beb1b38cbc81fc4b9143f7","aria-label":"a search field for user input","aria-disabled":this.disabled,"aria-value":this.value,class:"search-field"},s("div",{key:"ee18e7140c47744ac35f15afef353162e36743df",class:this.getWrapperClassNames(),tabindex:1,onFocus:()=>this.focusInput(),onClick:()=>this.focusInput()},s("ifx-icon",{key:"80b1068a48da7f09ba2587889b121acdaeee4559",icon:"search-16",class:"search-icon"}),s("input",{key:"006e6806d44fe10331b051b1f44f310276026ffe",ref:e=>this.inputElement=e,type:"text",autocomplete:this.autocomplete,onInput:()=>this.handleInput(),placeholder:this.placeholder,disabled:this.disabled,maxlength:this.maxlength,value:this.value}),this.showDeleteIcon&&this.showDeleteIconInternalState?s("ifx-icon",{icon:"cRemove16",class:"delete-icon",onClick:this.handleDelete}):null))}getSizeClass(){return`${this.size}`==="s"?"search-field__wrapper-s":""}getWrapperClassNames(){return r(`search-field__wrapper`,`search-field__wrapper ${this.getSizeClass()}`,`${this.isFocused?"focused":""}`)}static get watchers(){return{value:["valueWatcher"]}}};h.style=a;export{h as ifx_search_field};
-//# sourceMappingURL=p-676fb63a.entry.js.map

package/dist/infineon-design-system-stencil/p-676fb63a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["searchFieldCss","IfxSearchFieldStyle0","SearchField","constructor","hostRef","this","value","insideDropdown","showDeleteIcon","showDeleteIconInternalState","disabled","size","isFocused","placeholder","autocomplete","maxlength","handleInput","query","inputElement","ifxInput","emit","handleDelete","handleOutsideClick","event","path","composedPath","includes","valueWatcher","newValue","focusInput","focus","componentWillUpdate","render","h","key","class","getWrapperClassNames","tabindex","onFocus","onClick","icon","ref","el","type","onInput","getSizeClass","classNames"],"sources":["src/components/search-field/search-field.scss?tag=ifx-search-field&encapsulation=shadow","src/components/search-field/search-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: flex;\n}\n\n.search-field {\n  box-sizing: border-box;\n  background-color: tokens.$ifxColorBaseWhite;\n  width: 100%;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n\n  .search-field__wrapper {\n    box-sizing: border-box;\n    height: tokens.$ifxSize500;\n    display: flex;\n    align-items: center;\n    border: 1px solid #8D8786;\n    border-radius: tokens.$ifxBorderRadius12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    gap: tokens.$ifxSpace150;\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n    position: relative;\n    width: 100%;\n    outline: none;\n    color: tokens.$ifxColorEngineering400;\n\n    &.focused {\n      border: 1px solid tokens.$ifxColorOcean500;\n\n      & ifx-icon {\n        color: tokens.$ifxColorEngineering500;\n      }\n    }\n\n    &.search-field__wrapper-s {\n      height: 36px;\n    }\n\n\n    &:hover:not(.focused, :focus) {\n      border: 1px solid #3C3A39;\n    }\n\n    &:focus {\n      outline: none;\n      border: 1px solid #0A8276;\n    }\n\n\n    .delete-icon {\n      right: 12px;\n      cursor: pointer;\n    }\n\n    input[type='text'] {\n      font-style: normal;\n      font-weight: 400;\n      font-size: 16px;\n      //line-height: 24px;\n      color: #8D8786;\n      border: none;\n      width: 100%;\n      outline: none;\n      //height: 100%;\n      height: 16px;\n\n      &:focus {\n        outline: none;\n        color: #1d1d1d;\n      }\n\n      &:disabled {\n        background-color: #EEEDED;\n      }\n    }\n\n    &:has(input[disabled]) {\n      background-color: #EEEDED;\n    }\n  }\n}","import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() autocomplete: string = \"on\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            autocomplete={this.autocomplete}\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cRemove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"],"mappings":"sFAAA,MAAMA,EAAiB,m0CACvB,MAAAC,EAAeD,E,MCWFE,EAAW,MAPxB,WAAAC,CAAAC,G,6CAS2BC,KAAAC,MAAgB,GAGhCD,KAAAE,eAA0B,MAE3BF,KAAAG,eAA0B,MACzBH,KAAAI,4BAAuC,MACxCJ,KAAAK,SAAoB,MACpBL,KAAAM,KAAe,IACdN,KAAAO,UAAqB,MACtBP,KAAAQ,YAAsB,YACtBR,KAAAS,aAAuB,KACvBT,KAAAU,UAAqB,KAkB7BV,KAAAW,YAAc,KACZ,MAAMC,EAAQZ,KAAKa,aAAaZ,MAChCD,KAAKC,MAAQW,EACbZ,KAAKc,SAASC,KAAKf,KAAKC,MAAM,EAGhCD,KAAAgB,aAAe,KACbhB,KAAKa,aAAaZ,MAAQ,GAC1BD,KAAKC,MAAQ,GACbD,KAAKc,SAASC,KAAKf,KAAKC,MAAM,C,CAxBhC,kBAAAgB,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,IAAKD,EAAKE,SAASrB,KAAKa,cAAe,CACrCb,KAAKO,UAAY,K,EAKrB,YAAAe,CAAaC,GACX,GAAIA,IAAavB,KAAKa,aAAaZ,MAAO,CACxCD,KAAKa,aAAaZ,MAAQsB,C,EAiB9B,UAAAC,GACExB,KAAKa,aAAaY,QAClBzB,KAAKO,UAAY,I,CAMnB,mBAAAmB,GACE,GAAI1B,KAAKC,QAAU,GAAI,CACrBD,KAAKI,4BAA8B,I,MAC9BJ,KAAKI,4BAA8B,K,CAG5C,MAAAuB,GACE,OACEC,EAAA,OAAAC,IAAA,wDAAgB,gCAA+B,gBAAgB7B,KAAKK,SAAQ,aAAcL,KAAKC,MAAO6B,MAAM,gBAC1GF,EAAA,OAAAC,IAAA,2CAAKC,MAAO9B,KAAK+B,uBACfC,SAAU,EACVC,QAAS,IAAMjC,KAAKwB,aACpBU,QAAS,IAAMlC,KAAKwB,cAEpBI,EAAA,YAAAC,IAAA,2CAAUM,KAAK,YAAYL,MAAM,gBACjCF,EAAA,SAAAC,IAAA,2CACEO,IAAMC,GAAQrC,KAAKa,aAAewB,EAClCC,KAAK,OACL7B,aAAcT,KAAKS,aACnB8B,QAAS,IAAMvC,KAAKW,cACpBH,YAAaR,KAAKQ,YAClBH,SAAUL,KAAKK,SACfK,UAAWV,KAAKU,UAChBT,MAAOD,KAAKC,QAEbD,KAAKG,gBAAkBH,KAAKI,4BAC3BwB,EAAA,YAAUO,KAAK,YAAYL,MAAM,cAAcI,QAASlC,KAAKgB,eAE3D,M,CAMZ,YAAAwB,GACE,MAAO,GAAGxC,KAAKM,SAAW,IACtB,0BACA,E,CAIN,oBAAAyB,GACE,OAAOU,EACL,wBACA,yBAAyBzC,KAAKwC,iBAC9B,GAAGxC,KAAKO,UAAY,UAAY,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-6790d912.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,a as r,g as o}from"./p-b7a462e5.js";const d=':root{--ifx-font-family:"Source Sans 3", "Arial, 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=d;const t=class{constructor(e){a(this,e);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(a){this.alignment=a.detail}handleComponentAdjustment(){const a=this.el.querySelector("ifx-card-image");const e=this.el.querySelector("ifx-card-links");if(!a){this.noImg=true}else this.noImg=false;if(!e){this.noBtns=true}else this.noBtns=false;if(this.href.trim()===""){this.internalHref=undefined}else this.internalHref=this.href}handleClassList(a,e,r){a.classList[e](r)}componentWillLoad(){this.handleComponentAdjustment()}componentWillUpdate(){this.handleComponentAdjustment()}render(){return e(r,{key:"aac222aafe681f2024929060a46f5b044b65e772"},e("div",{key:"9c2f93b40bad857af634c16a9a0459763fada288","aria-label":this.ariaLabel,class:`card \n          ${this.noBtns?"noBtns":""}\n          ${this.direction} \n          ${this.alignment}`,role:"region"},this.direction==="horizontal"&&e("div",{key:"a9ecc08c4a5f7c2f7830256e289f485f6422160a",class:"horizontal"},e("a",{key:"09b1ebffcb703fe8c72224575dd5fe172b741533",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},e("slot",{key:"1e7bf2700feecf9e35a2aed787f476317252413e",name:"img"})),e("div",{key:"15dda4cdf697bd72673fecc3ad939d30136ca82f",class:"lower__body-wrapper"},e("a",{key:"6a20bfbed8fb327cb8f2df9caa7197966362a98f",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref},e("slot",{key:"a8d8aa70a1ec0e06f6dcea7e34cab24563465d50"})),e("div",{key:"70697a5b69ba9588cd6d81fcdf47cb59d3537461"},e("slot",{key:"186152dfa577d47b1edf242a27044de3470f8ae5",name:"buttons"})))),this.direction==="vertical"&&e("div",{key:"7e213f66b9c1ce9d0ab67623a3c125783dd0035b",class:"vertical"},e("a",{key:"3431f72726f0e0019f3dd67fb3290c7003c22ed4",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},e("div",{key:"1ec3dcd109dda21e13aa45ca679159f5b7b6e91d",class:`card-img ${this.noImg?"noImage":""}`},e("slot",{key:"64a6aae3e828e1741fd55d6fc8b53de5fbf5b3b9",name:"img"})),e("div",{key:"128d6712a7792d33ad77c3761aa3a9c4702cbd49",class:"upper-body"},e("slot",{key:"8e8ea25bfb8409692b0579393045a0f5e117e0f3"}))),e("div",{key:"5989e1234a290faf4e1676dc53a5c009eb1e35b4",class:"lower__body-wrapper"},e("slot",{key:"c06013bd5b0db5b8b40251bf6a2960d60205f2a0",name:"buttons"})))))}get el(){return o(this)}};t.style=i;export{t as ifx_card};
-//# sourceMappingURL=p-6790d912.entry.js.map

package/dist/infineon-design-system-stencil/p-6790d912.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","IfxCardStyle0","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","handleClassList","type","className","classList","componentWillLoad","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name"],"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); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } from '@stencil/core';\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 | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image')\n    const links = this.el.querySelector('ifx-card-links')\n\n    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,q0DAChB,MAAAC,EAAeD,E,MCQFE,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAAAC,UAAuC,WAGvCD,KAAAE,KAAe,GACdF,KAAAG,aAAuB,GACxBH,KAAAI,OAAiB,O,CAIzB,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpC,IAAKF,EAAO,CACVV,KAAKc,MAAQ,I,MACRd,KAAKc,MAAQ,MAEpB,IAAKD,EAAO,CACVb,KAAKe,OAAS,I,MACTf,KAAKe,OAAS,MAErB,GAAIf,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,MACfjB,KAAKG,aAAeH,KAAKE,I,CAGlC,eAAAgB,CAAgBP,EAAIQ,EAAMC,GACxBT,EAAGU,UAAUF,GAAMC,E,CAIrB,iBAAAE,GACEtB,KAAKS,2B,CAGP,mBAAAc,GACEvB,KAAKS,2B,CAGT,MAAAe,GACI,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAiB3B,KAAK4B,UAAWC,MAC/B,oBACE7B,KAAKe,OAAS,SAAW,iBACzBf,KAAKC,yBACLD,KAAKO,YAETuB,KAAK,UAEF9B,KAAKC,YAAc,cAClBwB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,YAAY7B,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACtGsB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,cAAc7B,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,cACzEsB,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlB/B,KAAKC,YAAc,YAClBwB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,YACTJ,EAAA,KAAAE,IAAA,2CAAGE,MAAO,uBAAuB7B,KAAKG,aAAe,YAAc,KAAMD,KAAMF,KAAKG,aAAcC,OAAQJ,KAAKI,QAC7GqB,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAY7B,KAAKc,MAAQ,UAAY,MAC/CW,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,cACTJ,EAAA,QAAAE,IAAA,+CAIJF,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uBACTJ,EAAA,QAAAE,IAAA,2CAAMI,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-6bdca580.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as s,g as t}from"./p-b7a462e5.js";const l=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{font-family:var(--ifx-font-family, sans-serif)}.file-upload-wrapper{display:flex;flex-direction:column}.file-upload-wrapper.disabled{pointer-events:none}.file-upload-wrapper.disabled label,.file-upload-wrapper.disabled .file-upload-info{color:#575352}.file-upload-label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#1D1D1D}.file-upload-label .required{display:inline-block;margin-left:4px}.file-upload-label .required.error{color:#CD002F}.upload-dropzone{border:1px dashed #BFBBBB;padding:40px;text-align:center;cursor:pointer;color:#1D1D1D;transition:border-color 0.3s ease;border-radius:1px;background:#FFFFFF}.upload-dropzone ifx-icon{color:#0A8276}.upload-dropzone:hover{border:1px dashed #8D8786}.upload-dropzone.drag-over{border:1px solid #0A8276;background:#F7F7F7}.upload-dropzone.drag-over.error{border:1px solid #0A8276}.upload-dropzone.error{border-color:#CD002F}.disabled .upload-dropzone{pointer-events:none;border-color:#BFBBBB;color:#BFBBBB}.disabled .upload-dropzone ifx-icon{color:#BFBBBB}.upload-dropzone input{display:none}.file-upload-info{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0em;color:#1D1D1D;margin:0;margin-top:4px}.file-upload-status{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;margin-top:8px}.file-upload-status.file-upload-status__error{display:flex;align-items:center;color:#CD002F}.file-upload-status.file-upload-status__error ifx-icon{position:relative;top:-1px;color:#CD002F;margin-right:8px}.upload-heading{font:600 1.125rem/1.625rem "Source Sans 3";margin-bottom:8px}.file-list-wrapper{margin-top:16px}.file-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}.file-item{border:1px solid #BFBBBB;padding-top:12px;padding-right:16px;padding-bottom:8px;padding-left:16px;display:flex;gap:8px}.file-info{width:100%;min-width:0}.file-top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:-8px}.file-top-row ifx-icon{flex-shrink:0}.file-name-wrapper{display:flex;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;font-weight:400;font-size:0.875rem}.file-name-base{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.file-name-ext{flex-shrink:0;margin-left:0}.file-middle-row{display:flex;align-items:center;font-size:0.75rem;line-height:1rem;flex-wrap:wrap;color:#575352}.file-middle-row .file-status{margin-left:12px}.file-middle-row .file-status ifx-icon{margin-right:8px}.file-progress-row{margin-top:4px}.file-progress-row ifx-progress-bar{width:100%}.upload-success{border-color:#0A8276}.upload-success .file-status ifx-icon{position:relative;top:1px;color:#4CA460}.upload-failed{border-color:#CD002F}.upload-failed .file-status{color:#CD002F;margin-left:0}';const a=l;const o=class{constructor(s){i(this,s);this.ifxFileUploadAdd=e(this,"ifxFileUploadAdd",7);this.ifxFileUploadRemove=e(this,"ifxFileUploadRemove",7);this.ifxFileUploadChange=e(this,"ifxFileUploadChange",7);this.ifxFileUploadError=e(this,"ifxFileUploadError",7);this.ifxFileUploadInvalid=e(this,"ifxFileUploadInvalid",7);this.ifxFileUploadStart=e(this,"ifxFileUploadStart",7);this.ifxFileUploadComplete=e(this,"ifxFileUploadComplete",7);this.ifxFileUploadAllComplete=e(this,"ifxFileUploadAllComplete",7);this.ifxFileUploadAbort=e(this,"ifxFileUploadAbort",7);this.ifxFileUploadDrop=e(this,"ifxFileUploadDrop",7);this.ifxFileUploadClick=e(this,"ifxFileUploadClick",7);this.ifxFileUploadMaxFilesExceeded=e(this,"ifxFileUploadMaxFilesExceeded",7);this.ifxFileUploadValidation=e(this,"ifxFileUploadValidation",7);this.ifxFileUploadRetry=e(this,"ifxFileUploadRetry",7);this.dragAndDrop=false;this.required=false;this.disabled=false;this.maxFileSizeMB=7;this.allowedFileTypes=["jpg","jpeg","png","pdf","mov","mp3","mp4"];this.additionalAllowedFileTypes=[];this.label="Label";this.labelRequiredError="At least one file must be uploaded";this.labelBrowseFiles="Browse files";this.labelDragAndDrop="Drag & Drop or browse files to upload";this.labelUploadedFilesHeading="Uploaded files";this.labelFileTooLarge="Upload failed. Max file size: {{size}}MB.";this.labelUnsupportedFileType="Unsupported file type.";this.labelUploaded="Successfully uploaded";this.labelUploadFailed="Upload failed. Please try again.";this.labelSupportedFormatsTemplate="Supported file formats: {{types}}. Max file size: {{size}}MB.";this.labelFileSingular="file";this.labelFilePlural="files";this.labelMaxFilesInfo="Up to {{count}} {{files}}.";this.labelMaxFilesExceeded="Upload limit exceeded. Only {{count}} {{files}} allowed.";this.ariaLabelBrowseFiles="Browse files";this.ariaLabelDropzone="Upload area. Click to browse or drag and drop files.";this.ariaLabelFileInput="Upload file";this.ariaLabelRemoveFile="Remove file";this.ariaLabelCancelUpload="Cancel upload";this.ariaLabelRetryUpload="Retry upload";this.ariaLabelUploadingStatus="Upload in progress";this.ariaLabelUploadedStatus="Upload completed";this.ariaLabelUploadFailedStatus="Upload failed";this.internalId=`ifx-file-upload-${Math.random().toString(36).substr(2,9)}`;this.isDragOver=false;this.files=[];this.uploadTasks=[];this.rejectedSizeFiles=[];this.rejectedTypeFiles=[];this.requiredError=false;this.statusMessage=null;this.fileInputEl=null;this.extensionToMimeMap={jpg:"image/jpeg",jpeg:"image/jpeg",png:"image/png",gif:"image/gif",svg:"image/svg+xml",webp:"image/webp",pdf:"application/pdf",doc:"application/msword",docx:"application/vnd.openxmlformats-officedocument.wordprocessingml.document",xls:"application/vnd.ms-excel",xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",ppt:"application/vnd.ms-powerpoint",pptx:"application/vnd.openxmlformats-officedocument.presentationml.presentation",txt:"text/plain",csv:"text/csv",json:"application/json",mp3:"audio/mpeg",wav:"audio/wav",mp4:"video/mp4",mov:"video/quicktime",webm:"video/webm",zip:"application/zip",rar:"application/vnd.rar",tar:"application/x-tar",gz:"application/gzip",xml:"application/xml",html:"text/html",css:"text/css",js:"application/javascript"}}get maxFiles(){return this._maxFiles}set maxFiles(i){if(typeof i==="number"&&i<1){console.warn("Invalid `maxFiles` value. Must be >= 1. Value ignored.");this._maxFiles=undefined}else{this._maxFiles=i}}validateRequired(){var i,e;if(this.required&&this.files.length===0){this.requiredError=true;if(((i=this.statusMessage)===null||i===void 0?void 0:i.text)!==this.labelRequiredError){this.statusMessage={type:"error",text:this.labelRequiredError}}this.ifxFileUploadValidation.emit({valid:false})}else{this.requiredError=false;if(((e=this.statusMessage)===null||e===void 0?void 0:e.text)===this.labelRequiredError){this.statusMessage=null}this.ifxFileUploadValidation.emit({valid:true})}}pluralize(i){return i===1?this.labelFileSingular:this.labelFilePlural}getNormalizedFileTypes(){if(Array.isArray(this.allowedFileTypes)){return this.allowedFileTypes}try{return JSON.parse(this.allowedFileTypes)}catch(i){return this.allowedFileTypes.split(",").map((i=>i.trim()))}}getLabelFromMimeType(i){for(const[e,s]of Object.entries(this.extensionToMimeMap)){if(s===i){return e.toUpperCase()}}return i}handleFileChange(i){const e=i.target;if(!e.files)return;this.processFiles(e.files)}handleDrop(i){var e;if(this.disabled)return;i.preventDefault();i.stopPropagation();this.isDragOver=false;if((e=i.dataTransfer)===null||e===void 0?void 0:e.files){const e=Array.from(i.dataTransfer.files);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];e.forEach((i=>{const e=s.includes(i.type);const a=i.size<=this.maxFileSizeMB*1024*1024;if(e&&a)t.push(i);else l.push(i)}));this.ifxFileUploadDrop.emit({droppedFiles:e,acceptedFiles:t,rejectedFiles:l});this.processFiles(i.dataTransfer.files)}}handleDragOver(i){if(this.disabled)return;i.preventDefault();this.isDragOver=true}handleDragLeave(i){if(this.disabled)return;i.preventDefault();this.isDragOver=false}processFiles(i){const e=Array.from(i);const s=[...this.getNormalizedFileTypes().map((i=>this.extensionToMimeMap[i.toLowerCase()])).filter(Boolean),...this.getAdditionalMimeTypes()];const t=[];const l=[];const a=[];e.forEach((i=>{const e=s.includes(i.type);const o=i.size<=this.maxFileSizeMB*1024*1024;const r=this.files.some((e=>e.name===i.name&&e.size===i.size));if(r){this.ifxFileUploadInvalid.emit({file:i,reason:"duplicate"});this.ifxFileUploadError.emit({file:i,errorType:"duplicate",message:`File "${i.name}" is already added`,reason:"duplicate"});return}if(e&&o){t.push(i)}else{if(!e){a.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-type"})}if(!o){l.push(i.name);this.ifxFileUploadInvalid.emit({file:i,reason:"invalid-size"})}this.ifxFileUploadError.emit({file:i,errorType:!e?"invalid-type":"file-too-large",message:"Invalid file rejected",reason:!e?"unsupported-type":"file-too-large"})}}));this.rejectedSizeFiles=[...this.rejectedSizeFiles,...l];this.rejectedTypeFiles=[...this.rejectedTypeFiles,...a];if(this.maxFiles&&this.files.length+t.length>this.maxFiles){const i=this.maxFiles-this.files.length;const e=t.slice(0,Math.max(i,0));const s=t.slice(i);this.files=[...this.files,...e];e.forEach((i=>this.startUpload(i)));if(e.length>0){this.ifxFileUploadAdd.emit({addedFiles:e,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}s.forEach((i=>{this.ifxFileUploadInvalid.emit({file:i,reason:"too-many-files"});this.ifxFileUploadError.emit({file:i,errorType:"too-many-files",message:`Upload limit exceeded. Max ${this.maxFiles} files allowed.`,reason:"too-many-files"})}));if(s.length>0){this.statusMessage={type:"error",text:this.labelMaxFilesExceeded.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",this.pluralize(this.maxFiles))};this.ifxFileUploadMaxFilesExceeded.emit({maxFiles:this.maxFiles,attempted:this.files.length+t.length})}return}t.forEach((i=>this.startUpload(i)));this.files=[...this.files,...t];if(t.length>0){this.ifxFileUploadAdd.emit({addedFiles:t,files:this.files});this.ifxFileUploadChange.emit({files:this.files})}this.validateRequired()}retryUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){this.uploadTasks.splice(e,1);this.uploadTasks=[...this.uploadTasks]}this.ifxFileUploadRetry.emit({file:i});this.startUpload(i)}startUpload(i){this.ifxFileUploadStart.emit({file:i});const e={file:i,progress:3,intervalId:null,completed:false};this.uploadTasks=[...this.uploadTasks,e];if(this.uploadHandler){this.uploadHandler(i,(i=>{if(i>e.progress){e.progress=Math.min(100,i);this.uploadTasks=[...this.uploadTasks]}})).then((()=>{e.progress=100;e.completed=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}})).catch((()=>{e.error=true;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadError.emit({file:i,errorType:"upload-failed",message:"Upload handler rejected file",reason:"custom"})}))}else{const s=i.size;const t=1e5;let l=0;e.intervalId=window.setInterval((()=>{l+=t/5;const a=Math.min(100,Math.round(l/s*100));e.progress=a;this.uploadTasks=[...this.uploadTasks];if(a>=100){clearInterval(e.intervalId);e.completed=true;e.intervalId=null;this.uploadTasks=[...this.uploadTasks];this.ifxFileUploadComplete.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.uploadTasks.every((i=>i.completed))){this.ifxFileUploadAllComplete.emit({files:this.files})}}}),200)}this.uploadTasks=[...this.uploadTasks,e]}cancelUpload(i){const e=this.uploadTasks.findIndex((e=>e.file.name===i.name));if(e!==-1){const i=this.uploadTasks[e];if((i===null||i===void 0?void 0:i.intervalId)!==null){clearInterval(i.intervalId)}this.uploadTasks=this.uploadTasks.filter(((i,s)=>s!==e))}this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadAbort.emit({file:i});this.ifxFileUploadChange.emit({files:this.files});if(this.fileInputEl){this.fileInputEl.value=""}this.validateRequired()}removeFile(i){var e;this.uploadTasks=this.uploadTasks.filter((e=>e.file.name!==i.name));this.files=this.files.filter((e=>e.name!==i.name));this.ifxFileUploadRemove.emit({removedFile:i,files:this.files});this.ifxFileUploadChange.emit({files:this.files});this.validateRequired();if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles&&((e=this.statusMessage)===null||e===void 0?void 0:e.text)!==this.labelRequiredError){this.statusMessage=null}}clearRejectedFile(i,e){if(e==="size"){this.rejectedSizeFiles=this.rejectedSizeFiles.filter((e=>e!==i))}else{this.rejectedTypeFiles=this.rejectedTypeFiles.filter((e=>e!==i))}if(this.fileInputEl){this.fileInputEl.value=""}if(this.maxFiles&&this.files.length<this.maxFiles){this.statusMessage=null}this.validateRequired()}splitFileNameParts(i){const e=i.name;const s=e.lastIndexOf(".");if(s===-1)return{base:e,ext:""};return{base:e.substring(0,s),ext:e.substring(s)}}getFileIcon(i){var e;const s=(e=i.name.split(".").pop())===null||e===void 0?void 0:e.toLowerCase();switch(s){case"pdf":return"file-pdf-16";case"jpg":case"jpeg":return"file-jpg-16";case"png":return"file-png-16";case"mov":return"file-mov-16";case"mp3":return"file-mp3-16";case"mp4":return"file-mp4-16";default:return"file-16"}}formatSize(i){if(i>=1024*1024*1024){return`${(i/(1024*1024*1024)).toFixed(1)} GB`}else if(i>=1024*1024){return`${(i/(1024*1024)).toFixed(1)} MB`}else if(i>=1024){return`${(i/1024).toFixed(0)} KB`}else{return`${i} B`}}getAcceptAttribute(){const i=this.getNormalizedFileTypes().map((i=>"."+i.toLowerCase()));const e=this.getAdditionalMimeTypes();return[...i,...e].join(",")}getFormattedProgressText(i){const e=Math.round(i.progress/100*i.file.size);const s=this.formatSize(e);const t=this.formatSize(i.file.size);return`${s} / ${t} uploaded`}getAdditionalMimeTypes(){if(!this.additionalAllowedFileTypes)return[];if(Array.isArray(this.additionalAllowedFileTypes))return this.additionalAllowedFileTypes;return this.additionalAllowedFileTypes.split(",").map((i=>i.trim()))}getSupportedFileText(){const i=this.getNormalizedFileTypes().map((i=>i.toUpperCase()));const e=this.getAdditionalMimeTypes().map((i=>this.getLabelFromMimeType(i)));const s=[...i,...e];const t=s.join(", ");let l=this.labelSupportedFormatsTemplate.replace("{{types}}",t).replace("{{size}}",this.maxFileSizeMB.toString());if(this.labelMaxFilesInfo&&this.maxFiles){const i=this.pluralize(this.maxFiles);const e=this.labelMaxFilesInfo.replace("{{count}}",this.maxFiles.toString()).replace("{{files}}",i);l+=` ${e}`}return l}getFormattedFileTooLargeText(){return this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())}renderStatusMessage(){if(!this.statusMessage)return null;return s("div",{class:`file-upload-status file-upload-status__${this.statusMessage.type}`},this.statusMessage.type==="error"&&s("ifx-icon",{icon:"c-warning-16"}),this.statusMessage.text)}isInputDisabled(){return this.disabled||this.maxFiles!==undefined&&this.files.length>=this.maxFiles}componentDidLoad(){if(this.hostElement.hasAttribute("show-demo-states")){this.showDemoStates=true}if(this.showDemoStates){this.injectDemoState()}}async injectDemoState(){const i=new Array(5e4).fill("a").join("");const e=i+i;const s=new File([i],"Image.jpg",{type:"image/jpeg"});const t=new File([e],"File.pdf",{type:"application/pdf"});const l=new File([i],"Text.docx",{type:"application/vnd.openxmlformats-officedocument.wordprocessingml.document"});const a=new File([e+e+e],"Video.mp4",{type:"video/mp4"});const o=new File(["demo"],"Script.exe",{type:"application/x-msdownload"});this.files=[t,s,l];this.uploadTasks=[{file:t,progress:100,intervalId:null,completed:true},{file:s,progress:40,intervalId:null,completed:false},{file:l,progress:80,intervalId:null,completed:false,error:true}];this.rejectedSizeFiles=[a.name];this.rejectedTypeFiles=[o.name]}async triggerDemoValidation(){this.validateRequired()}render(){return s("div",{key:"f8edbd56edf372f509c97c7e162f9c247c91110d",class:{"file-upload-wrapper":true,disabled:this.disabled}},this.label&&s("label",{key:"9258dd4a34a28443665e798845cefe87ab471abb",class:"file-upload-label",htmlFor:this.internalId},this.label,this.required&&s("span",{key:"62e786769e41ddb7d412a22157e4504719ac3900",class:`required ${this.requiredError?"error":""}`},"*")),this.dragAndDrop?this.renderDragAndDropArea():this.renderUploadArea(),(this.files.length>0||this.rejectedSizeFiles.length>0||this.rejectedTypeFiles.length>0)&&s("div",{key:"f07d24d2f3cf47e44e244d85fede4d5c5a7ea4ff",class:"file-list-wrapper"},s("div",{key:"a2d6c4ce19e828d44dbf1f54e86d3964ad3cd442",class:"upload-heading"},this.labelUploadedFilesHeading),s("ul",{key:"2c76503b9c39be82596f869e46052762f6ab7ac1",class:"file-list"},this.rejectedSizeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-size-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"size")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelFileTooLarge.replace("{{size}}",this.maxFileSizeMB.toString())},this.getFormattedFileTooLargeText())))))),this.rejectedTypeFiles.map((i=>s("li",{class:"file-item upload-failed",key:`rejected-type-${i}`},s("div",{class:"file-icon"},s("ifx-icon",{icon:"file-16"})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},this.splitFileNameParts({name:i}).base),s("span",{class:"file-name-ext"},this.splitFileNameParts({name:i}).ext)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.clearRejectedFile(i,"type")}))),s("div",{class:"file-middle-row"},s("span",{class:"file-status","aria-label":this.labelUnsupportedFileType},this.labelUnsupportedFileType)))))),this.files.map((i=>{var e;const t=this.uploadTasks.find((e=>e.file.name===i.name));const l=(e=t===null||t===void 0?void 0:t.progress)!==null&&e!==void 0?e:100;const a=t&&!t.completed;const o=(t===null||t===void 0?void 0:t.error)===true;const r=o?"file-item upload-failed":a?"file-item uploading":"file-item upload-success";const n=`${i.name}-${i.size}`;const{base:h,ext:d}=this.splitFileNameParts(i);return s("li",{class:r,key:n},s("div",{class:"file-icon"},s("ifx-icon",{icon:this.getFileIcon(i)})),s("div",{class:"file-info"},s("div",{class:"file-top-row"},s("span",{class:"file-name-wrapper"},s("span",{class:"file-name-base"},h),s("span",{class:"file-name-ext"},d)),s("div",{class:"file-actions"},s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"refresh-16",size:"s","aria-label":this.ariaLabelRetryUpload,onClick:()=>this.retryUpload(i),style:{display:o?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"cross-16",size:"s","aria-label":this.ariaLabelCancelUpload,onClick:()=>this.cancelUpload(i),style:{display:a?"inline-flex":"none"}}),s("ifx-icon-button",{shape:"square",variant:"tertiary",icon:"delete-forever-16",size:"s","aria-label":this.ariaLabelRemoveFile,onClick:()=>this.removeFile(i),style:{display:!a?"inline-flex":"none"}}))),s("div",{class:"file-middle-row"},a&&t&&!t.error&&s("span",{class:"file-uploading","aria-label":this.ariaLabelUploadingStatus},this.getFormattedProgressText(t)),!a&&!o&&s("span",null,s("span",{class:"file-size"},this.formatSize(i.size)),s("span",{class:"file-status","aria-label":this.ariaLabelUploadedStatus},s("ifx-icon",{icon:"check-16"}),this.labelUploaded)),o&&s("span",{class:"file-status","aria-label":this.ariaLabelUploadFailedStatus},this.labelUploadFailed)),a&&t&&!t.error&&s("div",{class:"file-progress-row"},s("ifx-progress-bar",{size:"s",value:l,"show-label":"true"}))))})))))}renderUploadArea(){const i=i=>{this.fileInputEl=i};return s("div",{class:{"upload-button":true}},s("ifx-button",{variant:"secondary",onClick:()=>{var i;return(i=this.fileInputEl)===null||i===void 0?void 0:i.click()},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelBrowseFiles},s("ifx-icon",{icon:"upload-16"}),this.labelBrowseFiles),s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),style:{display:"none"},disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}),s("p",{class:"file-upload-info"},this.getSupportedFileText()),this.renderStatusMessage())}renderDragAndDropArea(){const i=i=>{this.fileInputEl=i};const e=()=>{if(this.fileInputEl){this.fileInputEl.click()}};return s("div",{class:{disabled:this.isInputDisabled()}},s("div",{class:{"upload-dropzone":true,"drag-over":this.isDragOver,error:this.requiredError},onClick:e,onDragOver:i=>this.handleDragOver(i),onDragLeave:i=>this.handleDragLeave(i),onDrop:i=>this.handleDrop(i),role:"button",tabIndex:0,"aria-label":this.ariaLabelDropzone},s("ifx-icon",{icon:"upload-16",class:"custom-icon"}),s("p",null,this.labelDragAndDrop),s("p",{class:"file-upload-info"},this.getSupportedFileText()),s("div",{style:{height:"0px",overflow:"hidden"}},s("input",{id:this.internalId,ref:i,type:"file",accept:this.getAcceptAttribute(),multiple:true,onChange:i=>this.handleFileChange(i),disabled:this.isInputDisabled(),"aria-label":this.ariaLabelFileInput}))),this.renderStatusMessage())}get hostElement(){return t(this)}};o.style=a;export{o as ifx_file_upload};
-//# sourceMappingURL=p-6bdca580.entry.js.map

package/dist/infineon-design-system-stencil/p-6bdca580.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileUploadCss","IfxFileUploadStyle0","FileUpload","constructor","hostRef","this","dragAndDrop","required","disabled","maxFileSizeMB","allowedFileTypes","additionalAllowedFileTypes","label","labelRequiredError","labelBrowseFiles","labelDragAndDrop","labelUploadedFilesHeading","labelFileTooLarge","labelUnsupportedFileType","labelUploaded","labelUploadFailed","labelSupportedFormatsTemplate","labelFileSingular","labelFilePlural","labelMaxFilesInfo","labelMaxFilesExceeded","ariaLabelBrowseFiles","ariaLabelDropzone","ariaLabelFileInput","ariaLabelRemoveFile","ariaLabelCancelUpload","ariaLabelRetryUpload","ariaLabelUploadingStatus","ariaLabelUploadedStatus","ariaLabelUploadFailedStatus","internalId","Math","random","toString","substr","isDragOver","files","uploadTasks","rejectedSizeFiles","rejectedTypeFiles","requiredError","statusMessage","fileInputEl","extensionToMimeMap","jpg","jpeg","png","gif","svg","webp","pdf","doc","docx","xls","xlsx","ppt","pptx","txt","csv","json","mp3","wav","mp4","mov","webm","zip","rar","tar","gz","xml","html","css","js","maxFiles","_maxFiles","value","console","warn","undefined","validateRequired","length","_a","text","type","ifxFileUploadValidation","emit","valid","_b","pluralize","count","getNormalizedFileTypes","Array","isArray","JSON","parse","split","map","t","trim","getLabelFromMimeType","mime","ext","knownMime","Object","entries","toUpperCase","handleFileChange","event","input","target","processFiles","handleDrop","preventDefault","stopPropagation","dataTransfer","droppedFiles","from","allowedMimes","toLowerCase","filter","Boolean","getAdditionalMimeTypes","acceptedFiles","rejectedFiles","forEach","file","isValidType","includes","isValidSize","size","push","ifxFileUploadDrop","handleDragOver","handleDragLeave","fileList","selectedFiles","validFiles","rejectedSize","rejectedType","isDuplicate","some","existing","name","ifxFileUploadInvalid","reason","ifxFileUploadError","errorType","message","availableSlots","limitedFiles","slice","max","overflowFiles","startUpload","ifxFileUploadAdd","addedFiles","ifxFileUploadChange","replace","ifxFileUploadMaxFilesExceeded","attempted","retryUpload","taskIndex","findIndex","splice","ifxFileUploadRetry","ifxFileUploadStart","task","progress","intervalId","completed","uploadHandler","percent","min","then","ifxFileUploadComplete","every","ifxFileUploadAllComplete","catch","error","totalSize","fakeUploadSpeed","uploaded","window","setInterval","round","clearInterval","cancelUpload","_","i","f","ifxFileUploadAbort","removeFile","ifxFileUploadRemove","removedFile","clearRejectedFile","fileName","splitFileNameParts","dotIndex","lastIndexOf","base","substring","getFileIcon","extension","pop","formatSize","bytes","toFixed","getAcceptAttribute","extensionTypes","mimeTypes","join","getFormattedProgressText","uploadedSize","uploadedText","totalText","getSupportedFileText","extensions","allTypes","typesLabel","fileWord","maxFilesText","getFormattedFileTooLargeText","renderStatusMessage","h","class","icon","isInputDisabled","componentDidLoad","hostElement","hasAttribute","showDemoStates","injectDemoState","dummyContent","fill","bigContent","uploading","File","failed","tooLarge","unsupported","triggerDemoValidation","render","key","htmlFor","renderDragAndDropArea","renderUploadArea","shape","variant","onClick","find","isUploading","isError","itemClass","uniqueKey","style","display","handleInputRef","el","click","id","ref","accept","multiple","onChange","e","triggerInputClick","onDragOver","onDragLeave","onDrop","role","tabIndex","height","overflow"],"sources":["src/components/file-upload/file-upload.scss?tag=ifx-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  // TODO remove\n  font-family: var(--ifx-font-family, sans-serif);\n}\n\n.file-upload-wrapper {\n  display: flex;\n  flex-direction: column;\n\n  &.disabled {\n    pointer-events: none;\n\n    label,\n    .file-upload-info {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n}\n\n.file-upload-label {\n  font-style: normal;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightM;\n  color: tokens.$ifxColorBaseBlack;\n\n  .required {\n    display: inline-block;\n    margin-left: 4px;\n\n    &.error {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n}\n\n.upload-dropzone {\n  border: 1px dashed tokens.$ifxColorEngineering300;\n  padding: tokens.$ifxSpace500;\n  text-align: center;\n  cursor: pointer;\n  color: tokens.$ifxColorBaseBlack;\n  transition: border-color 0.3s ease;\n  border-radius: tokens.$ifxBorderRadius12;\n  background: tokens.$ifxColorBaseWhite;\n\n  ifx-icon {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover {\n    border: 1px dashed tokens.$ifxColorEngineering400;\n  }\n\n  &.drag-over {\n    border: 1px solid tokens.$ifxColorOcean500;\n    background: tokens.$ifxColorEngineering100;\n\n    &.error {\n      border: 1px solid tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  .disabled & {\n    pointer-events: none;\n    border-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n\n    ifx-icon {\n      color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.upload-dropzone input {\n  display: none;\n}\n\n.file-upload-info {\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  letter-spacing: tokens.$ifxLetterSpacingDefault;\n  color: tokens.$ifxColorBaseBlack;\n  margin: 0;\n  margin-top: tokens.$ifxSpace50;\n}\n\n.file-upload-status {\n  font-style: normal;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  letter-spacing: 0.2px;\n  margin-top: tokens.$ifxSpace100;\n\n  &.file-upload-status__error {\n    display: flex;\n    align-items: center;\n    color: tokens.$ifxColorRed500;\n\n    ifx-icon {\n      position: relative;\n      top: - tokens.$ifxSpace12;\n      color: tokens.$ifxColorRed500;\n      margin-right: tokens.$ifxSpace100;\n    }\n  }\n}\n\n.upload-heading {\n  font: tokens.$ifxHeadingHeading06;\n  margin-bottom: tokens.$ifxSpace100;\n}\n\n.file-list-wrapper {\n  margin-top: tokens.$ifxSpace200;\n}\n\n.file-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace200;\n}\n\n.file-item {\n  border: 1px solid tokens.$ifxColorEngineering300;\n  padding-top: tokens.$ifxSpace150;\n  padding-right: tokens.$ifxSpace200;\n  padding-bottom: tokens.$ifxSpace100;\n  padding-left: tokens.$ifxSpace200;\n  display: flex;\n  gap: tokens.$ifxSpace100;\n}\n\n.file-info {\n  width: 100%;\n  min-width: 0;\n}\n\n.file-top-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: tokens.$ifxSpace200;\n  margin-top: - tokens.$ifxSpace100;\n}\n\n.file-top-row ifx-icon {\n  flex-shrink: 0;\n}\n\n.file-name-wrapper {\n  display: flex;\n  min-width: 0;\n  max-width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  font-weight: tokens.$ifxFontWeightRegular;\n  font-size: tokens.$ifxFontSizeS;\n}\n\n.file-name-base {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.file-name-ext {\n  flex-shrink: 0;\n  margin-left: 0;\n}\n\n.file-middle-row {\n  display: flex;\n  align-items: center;\n  font-size: tokens.$ifxFontSizeXs;\n  line-height: tokens.$ifxLineHeightXs;\n  flex-wrap: wrap;\n  color: tokens.$ifxColorEngineering500;\n\n  .file-status {\n    margin-left: tokens.$ifxSpace150;\n\n    ifx-icon {\n      margin-right: tokens.$ifxSpace100;\n    }\n  }\n}\n\n.file-progress-row {\n  margin-top: tokens.$ifxSpace50;\n}\n\n.file-progress-row ifx-progress-bar {\n  width: 100%;\n}\n\n.upload-success {\n  border-color: tokens.$ifxColorOcean500;\n\n  .file-status {\n    ifx-icon {\n      position: relative;\n      top: tokens.$ifxSpace12;\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n}\n\n.upload-failed {\n  border-color: tokens.$ifxColorRed500;\n\n  .file-status {\n    color: tokens.$ifxColorRed500;\n    margin-left: 0;\n  }\n}\n","import { Component, h, State, Event, EventEmitter, Prop, Method, Element } from '@stencil/core';\n\ninterface UploadTask {\n  file: File;\n  progress: number;\n  intervalId: number | null;\n  completed: boolean;\n  error?: boolean;\n}\n\nexport type FileUploadErrorReason =\n  | 'network-error'\n  | 'timeout'\n  | 'file-too-large'\n  | 'unsupported-type'\n  | 'invalid-type'\n  | 'custom'\n  | (string & {});\n\n@Component({\n  tag: 'ifx-file-upload',\n  styleUrl: 'file-upload.scss',\n  shadow: true\n})\nexport class FileUpload {\n  @Element() hostElement: HTMLElement;\n\n  @Prop() dragAndDrop: boolean = false;\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() maxFileSizeMB: number = 7;\n  /** Default set of allowed file extensions (used internally). Can be extended using `additionalAllowedFileTypes`. */\n  @Prop() allowedFileTypes: string | string[] = ['jpg', 'jpeg', 'png', 'pdf', 'mov', 'mp3', 'mp4'];\n  @Prop() additionalAllowedFileTypes?: string | string[] = [];\n  @Prop() uploadHandler?: (file: File, onProgress?: (progress: number) => void) => Promise<void>;\n\n  private _maxFiles?: number;\n  @Prop()\n  get maxFiles(): number | undefined {\n    return this._maxFiles;\n  }\n  set maxFiles(value: number | undefined) {\n    if (typeof value === 'number' && value < 1) {\n      console.warn('Invalid `maxFiles` value. Must be >= 1. Value ignored.');\n      this._maxFiles = undefined;\n    } else {\n      this._maxFiles = value;\n    }\n  }\n\n  @Prop() label: string = 'Label';\n  @Prop() labelRequiredError: string = 'At least one file must be uploaded';\n  @Prop() labelBrowseFiles: string = 'Browse files';\n  @Prop() labelDragAndDrop: string = 'Drag & Drop or browse files to upload';\n  @Prop() labelUploadedFilesHeading: string = 'Uploaded files';\n  @Prop() labelFileTooLarge: string = 'Upload failed. Max file size: {{size}}MB.';\n  @Prop() labelUnsupportedFileType: string = 'Unsupported file type.';\n  @Prop() labelUploaded: string = 'Successfully uploaded';\n  @Prop() labelUploadFailed: string = 'Upload failed. Please try again.';\n  @Prop() labelSupportedFormatsTemplate: string = 'Supported file formats: {{types}}. Max file size: {{size}}MB.';\n  @Prop() labelFileSingular: string = 'file';\n  @Prop() labelFilePlural: string = 'files';\n  @Prop() labelMaxFilesInfo?: string = 'Up to {{count}} {{files}}.';\n  @Prop() labelMaxFilesExceeded: string = 'Upload limit exceeded. Only {{count}} {{files}} allowed.';\n\n  @Prop() ariaLabelBrowseFiles: string = 'Browse files';\n  @Prop() ariaLabelDropzone: string = 'Upload area. Click to browse or drag and drop files.';\n  @Prop() ariaLabelFileInput: string = 'Upload file';\n  @Prop() ariaLabelRemoveFile: string = 'Remove file';\n  @Prop() ariaLabelCancelUpload: string = 'Cancel upload';\n  @Prop() ariaLabelRetryUpload: string = 'Retry upload';\n  @Prop() ariaLabelUploadingStatus: string = 'Upload in progress';\n  @Prop() ariaLabelUploadedStatus: string = 'Upload completed';\n  @Prop() ariaLabelUploadFailedStatus: string = 'Upload failed';\n\n  private showDemoStates?: boolean;\n  private internalId = `ifx-file-upload-${Math.random().toString(36).substr(2, 9)}`;\n\n  @State() isDragOver: boolean = false;\n  @State() files: File[] = [];\n  @State() uploadTasks: UploadTask[] = [];\n  @State() rejectedSizeFiles: string[] = [];\n  @State() rejectedTypeFiles: string[] = [];\n  @State() requiredError: boolean = false;\n  @State() statusMessage: { type: 'error' | 'info' | 'success'; text: string } | null = null;\n\n\n  @Event() ifxFileUploadAdd: EventEmitter<{ addedFiles: File[]; files: File[] }>;\n  @Event() ifxFileUploadRemove: EventEmitter<{ removedFile: File; files: File[] }>;\n  @Event() ifxFileUploadChange: EventEmitter<{ files: File[] }>;\n  @Event() ifxFileUploadError: EventEmitter<{ errorType: string; file: File; message: string; reason?: string; }>;\n  @Event() ifxFileUploadInvalid: EventEmitter<{ file: File; reason: string }>;\n  @Event() ifxFileUploadStart: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadComplete: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadAllComplete: EventEmitter<{ files: File[] }>;\n  @Event() ifxFileUploadAbort: EventEmitter<{ file: File }>;\n  @Event() ifxFileUploadDrop: EventEmitter<{ droppedFiles: File[]; acceptedFiles: File[]; rejectedFiles: File[] }>;\n  @Event() ifxFileUploadClick: EventEmitter<void>;\n  @Event() ifxFileUploadMaxFilesExceeded: EventEmitter<{ maxFiles: number; attempted: number }>;\n  @Event() ifxFileUploadValidation: EventEmitter<{ valid: boolean }>;\n  @Event() ifxFileUploadRetry: EventEmitter<{ file: File }>;\n\n  private fileInputEl: HTMLInputElement | null = null;\n\n  private extensionToMimeMap: Record<string, string> = {\n    /**\n     * Maps file extensions to MIME types.\n     * This is only used for translating `allowedFileTypes` (extensions) into MIME types,\n     * and for labeling in the UI. It does NOT define which files are globally allowed.\n     */\n\n    // Images\n    jpg: 'image/jpeg',\n    jpeg: 'image/jpeg',\n    png: 'image/png',\n    gif: 'image/gif',\n    svg: 'image/svg+xml',\n    webp: 'image/webp',\n\n    // Documents\n    pdf: 'application/pdf',\n    doc: 'application/msword',\n    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\n    xls: 'application/vnd.ms-excel',\n    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\n    ppt: 'application/vnd.ms-powerpoint',\n    pptx: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',\n    txt: 'text/plain',\n    csv: 'text/csv',\n    json: 'application/json',\n\n    // Audio/Video\n    mp3: 'audio/mpeg',\n    wav: 'audio/wav',\n    mp4: 'video/mp4',\n    mov: 'video/quicktime',\n    webm: 'video/webm',\n\n    // Archive / Code\n    zip: 'application/zip',\n    rar: 'application/vnd.rar',\n    tar: 'application/x-tar',\n    gz: 'application/gzip',\n\n    // Sonstiges\n    xml: 'application/xml',\n    html: 'text/html',\n    css: 'text/css',\n    js: 'application/javascript'\n  };\n\n  private validateRequired(): void {\n    if (this.required && this.files.length === 0) {\n      this.requiredError = true;\n\n      if (this.statusMessage?.text !== this.labelRequiredError) {\n        this.statusMessage = {\n          type: 'error',\n          text: this.labelRequiredError\n        };\n      }\n\n      this.ifxFileUploadValidation.emit({ valid: false });\n    } else {\n      this.requiredError = false;\n\n      if (this.statusMessage?.text === this.labelRequiredError) {\n        this.statusMessage = null;\n      }\n\n      this.ifxFileUploadValidation.emit({ valid: true });\n    }\n  }\n\n  private pluralize(count: number): string {\n    return count === 1 ? this.labelFileSingular : this.labelFilePlural;\n  }\n\n  private getNormalizedFileTypes(): string[] {\n    if (Array.isArray(this.allowedFileTypes)) {\n      return this.allowedFileTypes;\n    }\n    try {\n      return JSON.parse(this.allowedFileTypes);\n    } catch {\n      return this.allowedFileTypes.split(',').map(t => t.trim());\n    }\n  }\n\n  private getLabelFromMimeType(mime: string): string {\n    for (const [ext, knownMime] of Object.entries(this.extensionToMimeMap)) {\n      if (knownMime === mime) {\n        return ext.toUpperCase();\n      }\n    }\n    return mime; // fallback: show raw MIME\n  }\n\n  handleFileChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    if (!input.files) return;\n    this.processFiles(input.files);\n  }\n\n  handleDrop(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n    if (event.dataTransfer?.files) {\n      const droppedFiles = Array.from(event.dataTransfer.files);\n      const allowedMimes = [\n        ...this.getNormalizedFileTypes()\n          .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n          .filter(Boolean),\n        ...this.getAdditionalMimeTypes()\n      ];\n\n      const acceptedFiles: File[] = [];\n      const rejectedFiles: File[] = [];\n\n      droppedFiles.forEach(file => {\n        const isValidType = allowedMimes.includes(file.type);\n        const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n        if (isValidType && isValidSize) acceptedFiles.push(file);\n        else rejectedFiles.push(file);\n      });\n\n      this.ifxFileUploadDrop.emit({\n        droppedFiles,\n        acceptedFiles,\n        rejectedFiles\n      });\n\n      this.processFiles(event.dataTransfer.files);\n    }\n  }\n\n  handleDragOver(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.isDragOver = true;\n  }\n\n  handleDragLeave(event: DragEvent) {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.isDragOver = false;\n  }\n\n  processFiles(fileList: FileList) {\n    const selectedFiles = Array.from(fileList);\n    const allowedMimes = [\n      ...this.getNormalizedFileTypes()\n        .map(ext => this.extensionToMimeMap[ext.toLowerCase()])\n        .filter(Boolean),\n      ...this.getAdditionalMimeTypes()\n    ];\n\n    const validFiles: File[] = [];\n    const rejectedSize: string[] = [];\n    const rejectedType: string[] = [];\n\n    selectedFiles.forEach(file => {\n      const isValidType = allowedMimes.includes(file.type);\n      const isValidSize = file.size <= this.maxFileSizeMB * 1024 * 1024;\n      const isDuplicate = this.files.some(existing =>\n        existing.name === file.name && existing.size === file.size\n      );\n\n      if (isDuplicate) {\n        this.ifxFileUploadInvalid.emit({ file, reason: 'duplicate' });\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'duplicate',\n          message: `File \"${file.name}\" is already added`,\n          reason: 'duplicate'\n        });\n        return;\n      }\n\n      if (isValidType && isValidSize) {\n        validFiles.push(file);\n      } else {\n        if (!isValidType) {\n          rejectedType.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-type' });\n        }\n        if (!isValidSize) {\n          rejectedSize.push(file.name);\n          this.ifxFileUploadInvalid.emit({ file, reason: 'invalid-size' });\n        }\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: !isValidType ? 'invalid-type' : 'file-too-large',\n          message: 'Invalid file rejected',\n          reason: !isValidType ? 'unsupported-type' : 'file-too-large'\n        });\n      }\n    });\n\n    this.rejectedSizeFiles = [...this.rejectedSizeFiles, ...rejectedSize];\n    this.rejectedTypeFiles = [...this.rejectedTypeFiles, ...rejectedType];\n\n    if (this.maxFiles && this.files.length + validFiles.length > this.maxFiles) {\n      const availableSlots = this.maxFiles - this.files.length;\n      const limitedFiles = validFiles.slice(0, Math.max(availableSlots, 0));\n      const overflowFiles = validFiles.slice(availableSlots);\n\n      this.files = [...this.files, ...limitedFiles];\n\n      limitedFiles.forEach(file => this.startUpload(file));\n\n      if (limitedFiles.length > 0) {\n        this.ifxFileUploadAdd.emit({ addedFiles: limitedFiles, files: this.files });\n        this.ifxFileUploadChange.emit({ files: this.files });\n      }\n\n      overflowFiles.forEach(file => {\n        this.ifxFileUploadInvalid.emit({ file, reason: 'too-many-files' });\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'too-many-files',\n          message: `Upload limit exceeded. Max ${this.maxFiles} files allowed.`,\n          reason: 'too-many-files'\n        });\n      });\n\n      if (overflowFiles.length > 0) {\n        this.statusMessage = {\n          type: 'error',\n          text: this.labelMaxFilesExceeded\n            .replace('{{count}}', this.maxFiles.toString())\n            .replace('{{files}}', this.pluralize(this.maxFiles))\n        };\n        this.ifxFileUploadMaxFilesExceeded.emit({\n          maxFiles: this.maxFiles,\n          attempted: this.files.length + validFiles.length\n        });\n      }\n\n      return;\n    }\n\n\n    validFiles.forEach(file => this.startUpload(file));\n    this.files = [...this.files, ...validFiles];\n\n    if (validFiles.length > 0) {\n      this.ifxFileUploadAdd.emit({ addedFiles: validFiles, files: this.files });\n      this.ifxFileUploadChange.emit({ files: this.files });\n    }\n\n    this.validateRequired();\n  }\n\n  retryUpload(file: File) {\n    const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n    if (taskIndex !== -1) {\n      this.uploadTasks.splice(taskIndex, 1);\n      this.uploadTasks = [...this.uploadTasks];\n    }\n    this.ifxFileUploadRetry.emit({ file });\n    this.startUpload(file);\n  }\n\n  startUpload(file: File) {\n    this.ifxFileUploadStart.emit({ file });\n\n    const task: UploadTask = {\n      file,\n      progress: 3, // Start with initial progress for better UX\n      intervalId: null,\n      completed: false,\n    };\n\n    this.uploadTasks = [...this.uploadTasks, task];\n\n    if (this.uploadHandler) {\n      this.uploadHandler(file, (percent: number) => {\n        if (percent > task.progress) {\n          task.progress = Math.min(100, percent);\n          this.uploadTasks = [...this.uploadTasks];\n        }\n      }).then(() => {\n        task.progress = 100;\n        task.completed = true;\n        this.uploadTasks = [...this.uploadTasks];\n        this.ifxFileUploadComplete.emit({ file });\n        this.ifxFileUploadChange.emit({ files: this.files });\n\n        if (this.uploadTasks.every(t => t.completed)) {\n          this.ifxFileUploadAllComplete.emit({ files: this.files });\n        }\n      }).catch(() => {\n        task.error = true;\n        this.uploadTasks = [...this.uploadTasks];\n        this.ifxFileUploadError.emit({\n          file,\n          errorType: 'upload-failed',\n          message: 'Upload handler rejected file',\n          reason: 'custom'\n        });\n      });\n    } else {\n      const totalSize = file.size;\n      const fakeUploadSpeed = 100000;\n      let uploaded = 0;\n\n      task.intervalId = window.setInterval(() => {\n        uploaded += fakeUploadSpeed / 5;\n        const progress = Math.min(100, Math.round((uploaded / totalSize) * 100));\n        task.progress = progress;\n        this.uploadTasks = [...this.uploadTasks];\n\n        if (progress >= 100) {\n          clearInterval(task.intervalId!);\n          task.completed = true;\n          task.intervalId = null;\n          this.uploadTasks = [...this.uploadTasks];\n          this.ifxFileUploadComplete.emit({ file });\n          this.ifxFileUploadChange.emit({ files: this.files });\n\n          if (this.uploadTasks.every(t => t.completed)) {\n            this.ifxFileUploadAllComplete.emit({ files: this.files });\n          }\n        }\n      }, 200);\n    }\n\n    this.uploadTasks = [...this.uploadTasks, task];\n  }\n\n  cancelUpload(file: File) {\n    const taskIndex = this.uploadTasks.findIndex(t => t.file.name === file.name);\n    if (taskIndex !== -1) {\n      const task = this.uploadTasks[taskIndex];\n      if (task?.intervalId !== null) {\n        clearInterval(task.intervalId);\n      }\n      this.uploadTasks = this.uploadTasks.filter((_, i) => i !== taskIndex);\n    }\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadAbort.emit({ file });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n    this.validateRequired();\n  }\n\n  removeFile(file: File) {\n    this.uploadTasks = this.uploadTasks.filter(task => task.file.name !== file.name);\n    this.files = this.files.filter(f => f.name !== file.name);\n    this.ifxFileUploadRemove.emit({ removedFile: file, files: this.files });\n    this.ifxFileUploadChange.emit({ files: this.files });\n    this.validateRequired();\n\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n\n    if (\n      this.maxFiles &&\n      this.files.length < this.maxFiles &&\n      this.statusMessage?.text !== this.labelRequiredError\n    ) {\n      this.statusMessage = null;\n    }\n  }\n\n\n  clearRejectedFile(fileName: string, type: 'size' | 'type') {\n    if (type === 'size') {\n      this.rejectedSizeFiles = this.rejectedSizeFiles.filter(f => f !== fileName);\n    } else {\n      this.rejectedTypeFiles = this.rejectedTypeFiles.filter(f => f !== fileName);\n    }\n\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n\n    if (this.maxFiles && this.files.length < this.maxFiles) {\n      this.statusMessage = null;\n    }\n\n    this.validateRequired();\n  }\n\n  splitFileNameParts(file: File): { base: string; ext: string } {\n    const name = file.name;\n    const dotIndex = name.lastIndexOf('.');\n    if (dotIndex === -1) return { base: name, ext: '' };\n    return {\n      base: name.substring(0, dotIndex),\n      ext: name.substring(dotIndex)\n    };\n  }\n\n  getFileIcon(file: File): string {\n    const extension = file.name.split('.').pop()?.toLowerCase();\n    switch (extension) {\n      case 'pdf': return 'file-pdf-16';\n      case 'jpg':\n      case 'jpeg': return 'file-jpg-16';\n      case 'png': return 'file-png-16';\n      case 'mov': return 'file-mov-16';\n      case 'mp3': return 'file-mp3-16';\n      case 'mp4': return 'file-mp4-16';\n      default: return 'file-16';\n    }\n  }\n\n  formatSize(bytes: number): string {\n    if (bytes >= 1024 * 1024 * 1024) {\n      return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n    } else if (bytes >= 1024 * 1024) {\n      return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n    } else if (bytes >= 1024) {\n      return `${(bytes / 1024).toFixed(0)} KB`;\n    } else {\n      return `${bytes} B`;\n    }\n  }\n\n  getAcceptAttribute(): string {\n    const extensionTypes = this.getNormalizedFileTypes().map(ext => '.' + ext.toLowerCase());\n    const mimeTypes = this.getAdditionalMimeTypes();\n\n    return [...extensionTypes, ...mimeTypes].join(',');\n  }\n\n  private getFormattedProgressText(task: UploadTask): string {\n    const uploadedSize = Math.round((task.progress / 100) * task.file.size);\n    const uploadedText = this.formatSize(uploadedSize);\n    const totalText = this.formatSize(task.file.size);\n    return `${uploadedText} / ${totalText} uploaded`;\n  }\n\n  private getAdditionalMimeTypes(): string[] {\n    if (!this.additionalAllowedFileTypes) return [];\n    if (Array.isArray(this.additionalAllowedFileTypes)) return this.additionalAllowedFileTypes;\n    return this.additionalAllowedFileTypes.split(',').map(t => t.trim());\n  }\n\n  private getSupportedFileText(): string {\n    const extensions = this.getNormalizedFileTypes().map(ext => ext.toUpperCase());\n    const mimeTypes = this.getAdditionalMimeTypes().map(mime => this.getLabelFromMimeType(mime));\n    const allTypes = [...extensions, ...mimeTypes];\n    const typesLabel = allTypes.join(', ');\n\n    let text = this.labelSupportedFormatsTemplate\n      .replace('{{types}}', typesLabel)\n      .replace('{{size}}', this.maxFileSizeMB.toString());\n\n    if (this.labelMaxFilesInfo && this.maxFiles) {\n      const fileWord = this.pluralize(this.maxFiles);\n      const maxFilesText = this.labelMaxFilesInfo\n        .replace('{{count}}', this.maxFiles.toString())\n        .replace('{{files}}', fileWord);\n      text += ` ${maxFilesText}`;\n    }\n\n    return text;\n  }\n\n  private getFormattedFileTooLargeText(): string {\n    return this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString());\n  }\n\n  private renderStatusMessage() {\n    if (!this.statusMessage) return null;\n\n    return (\n      <div class={`file-upload-status file-upload-status__${this.statusMessage.type}`}>\n        {this.statusMessage.type === 'error' && (\n          <ifx-icon icon=\"c-warning-16\"></ifx-icon>\n        )}\n        {this.statusMessage.text}\n      </div>\n    );\n  }\n\n  private isInputDisabled(): boolean {\n    return this.disabled || (this.maxFiles !== undefined && this.files.length >= this.maxFiles);\n  }\n\n  componentDidLoad() {\n    if (this.hostElement.hasAttribute('show-demo-states')) {\n      this.showDemoStates = true;\n    }\n\n    if (this.showDemoStates) {\n      this.injectDemoState();\n    }\n  }\n\n  // Storybook Demo\n  @Method()\n  async injectDemoState() {\n    const dummyContent = new Array(50000).fill('a').join(''); // ~50 KB\n    const bigContent = dummyContent + dummyContent; // ~100 KB\n\n    const uploading = new File([dummyContent], 'Image.jpg', { type: 'image/jpeg' }); // ~50 KB\n    const uploaded = new File([bigContent], 'File.pdf', { type: 'application/pdf' }); // ~100 KB\n    const failed = new File([dummyContent], 'Text.docx', { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // ~50 KB\n    const tooLarge = new File([bigContent + bigContent + bigContent], 'Video.mp4', { type: 'video/mp4' }); // ~300 KB\n    const unsupported = new File(['demo'], 'Script.exe', { type: 'application/x-msdownload' }); // very small\n\n    this.files = [uploaded, uploading, failed];\n    this.uploadTasks = [\n      { file: uploaded, progress: 100, intervalId: null, completed: true },\n      { file: uploading, progress: 40, intervalId: null, completed: false },\n      { file: failed, progress: 80, intervalId: null, completed: false, error: true }\n    ];\n    this.rejectedSizeFiles = [tooLarge.name];\n    this.rejectedTypeFiles = [unsupported.name];\n  }\n\n\n\n  // Storybook Demo\n  @Method()\n    async triggerDemoValidation(): Promise<void> {\n      this.validateRequired();\n    }\n\n  render() {\n    return (\n      <div\n        class={{\n          'file-upload-wrapper': true,\n          'disabled': this.disabled\n        }}\n      >\n        {this.label && (\n          <label class=\"file-upload-label\" htmlFor={this.internalId}>\n            {this.label}\n            {this.required && (\n              <span class={`required ${this.requiredError ? 'error' : ''}`}>*</span>\n            )}\n          </label>\n        )}\n\n        {this.dragAndDrop ? this.renderDragAndDropArea() : this.renderUploadArea()}\n\n        {(this.files.length > 0 || this.rejectedSizeFiles.length > 0 || this.rejectedTypeFiles.length > 0) && (\n          <div class=\"file-list-wrapper\">\n            <div class=\"upload-heading\">{this.labelUploadedFilesHeading}</div>\n            <ul class=\"file-list\">\n              {this.rejectedSizeFiles.map(fileName => (\n                <li class=\"file-item upload-failed\" key={`rejected-size-${fileName}`}>\n                  <div class=\"file-icon\">\n                    <ifx-icon icon=\"file-16\"></ifx-icon>\n                  </div>\n                  <div class=\"file-info\">\n                    <div class=\"file-top-row\">\n                      <span class=\"file-name-wrapper\">\n                        <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                        <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                      </span>\n                      <div class=\"file-actions\">\n                        <ifx-icon-button\n                          shape=\"square\"\n                          variant=\"tertiary\"\n                          icon=\"delete-forever-16\"\n                          size=\"s\"\n                          aria-label={this.ariaLabelRemoveFile}\n                          onClick={() => this.clearRejectedFile(fileName, 'size')}\n                        ></ifx-icon-button>\n                      </div>\n                    </div>\n                    <div class=\"file-middle-row\">\n                      <span class=\"file-status\" aria-label={this.labelFileTooLarge.replace('{{size}}', this.maxFileSizeMB.toString())}>\n                        {this.getFormattedFileTooLargeText()}\n                      </span>\n                    </div>\n                  </div>\n                </li>\n              ))}\n\n              {this.rejectedTypeFiles.map(fileName => (\n                <li class=\"file-item upload-failed\" key={`rejected-type-${fileName}`}>\n                  <div class=\"file-icon\">\n                    <ifx-icon icon=\"file-16\"></ifx-icon>\n                  </div>\n                  <div class=\"file-info\">\n                    <div class=\"file-top-row\">\n                      <span class=\"file-name-wrapper\">\n                        <span class=\"file-name-base\">{this.splitFileNameParts({ name: fileName } as File).base}</span>\n                        <span class=\"file-name-ext\">{this.splitFileNameParts({ name: fileName } as File).ext}</span>\n                      </span>\n                      <div class=\"file-actions\">\n                        <ifx-icon-button\n                          shape=\"square\"\n                          variant=\"tertiary\"\n                          icon=\"delete-forever-16\"\n                          size=\"s\"\n                          aria-label={this.ariaLabelRemoveFile}\n                          onClick={() => this.clearRejectedFile(fileName, 'type')}\n                        ></ifx-icon-button>\n                      </div>\n                    </div>\n                    <div class=\"file-middle-row\">\n                      <span class=\"file-status\" aria-label={this.labelUnsupportedFileType}>\n                        {this.labelUnsupportedFileType}\n                      </span>\n                    </div>\n                  </div>\n                </li>\n              ))}\n\n              {this.files.map((file) => {\n                const task = this.uploadTasks.find(t => t.file.name === file.name);\n                const progress = task?.progress ?? 100;\n                const isUploading = task && !task.completed;\n                const isError = task?.error === true;\n                const itemClass = isError ? 'file-item upload-failed' : isUploading ? 'file-item uploading' : 'file-item upload-success';\n                const uniqueKey = `${file.name}-${file.size}`;\n                const { base, ext } = this.splitFileNameParts(file);\n\n                return (\n                  <li class={itemClass} key={uniqueKey}>\n                    <div class=\"file-icon\">\n                      <ifx-icon icon={this.getFileIcon(file)}></ifx-icon>\n                    </div>\n                    <div class=\"file-info\">\n                      <div class=\"file-top-row\">\n                        <span class=\"file-name-wrapper\">\n                          <span class=\"file-name-base\">{base}</span>\n                          <span class=\"file-name-ext\">{ext}</span>\n                        </span>\n                        <div class=\"file-actions\">\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"refresh-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelRetryUpload}\n                            onClick={() => this.retryUpload(file)}\n                            style={{ display: isError ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"cross-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelCancelUpload}\n                            onClick={() => this.cancelUpload(file)}\n                            style={{ display: isUploading ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                          <ifx-icon-button\n                            shape=\"square\"\n                            variant=\"tertiary\"\n                            icon=\"delete-forever-16\"\n                            size=\"s\"\n                            aria-label={this.ariaLabelRemoveFile}\n                            onClick={() => this.removeFile(file)}\n                            style={{ display: !isUploading ? 'inline-flex' : 'none' }}\n                          ></ifx-icon-button>\n                        </div>\n                      </div>\n\n                      <div class=\"file-middle-row\">\n                        {isUploading && task && !task.error && (\n                          <span class=\"file-uploading\" aria-label={this.ariaLabelUploadingStatus}>\n                            {this.getFormattedProgressText(task)}\n                          </span>\n                        )}\n                        {!isUploading && !isError && (\n                          <span>\n                            <span class=\"file-size\">{this.formatSize(file.size)}</span>\n                            <span class=\"file-status\" aria-label={this.ariaLabelUploadedStatus}>\n                              <ifx-icon icon=\"check-16\"></ifx-icon>\n                              {this.labelUploaded}\n                            </span>\n                          </span>\n                        )}\n                        {isError && (\n                          <span class=\"file-status\" aria-label={this.ariaLabelUploadFailedStatus}>\n                            {this.labelUploadFailed}\n                          </span>\n                        )}\n                      </div>\n\n                      {isUploading && task && !task.error && (\n                        <div class=\"file-progress-row\">\n                          <ifx-progress-bar\n                            size=\"s\"\n                            value={progress}\n                            show-label=\"true\"\n                          ></ifx-progress-bar>\n                        </div>\n                      )}\n                    </div>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderUploadArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    return (\n      <div class={{ 'upload-button': true }}>\n        <ifx-button\n          variant=\"secondary\"\n          onClick={() => this.fileInputEl?.click()}\n          disabled={this.isInputDisabled()}\n          aria-label={this.ariaLabelBrowseFiles}\n        >\n          <ifx-icon icon=\"upload-16\"></ifx-icon>\n          {this.labelBrowseFiles}\n        </ifx-button>\n        <input\n          id={this.internalId}\n          ref={handleInputRef}\n          type=\"file\"\n          accept={this.getAcceptAttribute()}\n          multiple\n          onChange={(e) => this.handleFileChange(e)}\n          style={{ display: 'none' }}\n          disabled={this.isInputDisabled()}\n          aria-label={this.ariaLabelFileInput}\n        />\n        <p class=\"file-upload-info\">\n          {this.getSupportedFileText()}\n        </p>\n        {this.renderStatusMessage()}\n      </div>\n    );\n  }\n\n\n  renderDragAndDropArea() {\n    const handleInputRef = (el: HTMLInputElement | null) => {\n      this.fileInputEl = el;\n    };\n\n    const triggerInputClick = () => {\n      if (this.fileInputEl) {\n        this.fileInputEl.click();\n      }\n    };\n\n    return (\n      <div class={{ 'disabled': this.isInputDisabled() }}>\n        <div\n          class={{ 'upload-dropzone': true, 'drag-over': this.isDragOver, 'error': this.requiredError }}\n          onClick={triggerInputClick}\n          onDragOver={(e) => this.handleDragOver(e)}\n          onDragLeave={(e) => this.handleDragLeave(e)}\n          onDrop={(e) => this.handleDrop(e)}\n          role=\"button\"\n          tabIndex={0}\n          aria-label={this.ariaLabelDropzone}\n        >\n          <ifx-icon icon=\"upload-16\" class=\"custom-icon\"></ifx-icon>\n          <p>{this.labelDragAndDrop}</p>\n          <p class=\"file-upload-info\">\n            {this.getSupportedFileText()}\n          </p>\n          <div style={{ height: '0px', overflow: 'hidden' }}>\n            <input\n              id={this.internalId}\n              ref={handleInputRef}\n              type=\"file\"\n              accept={this.getAcceptAttribute()}\n              multiple\n              onChange={(e) => this.handleFileChange(e)}\n              disabled={this.isInputDisabled()}\n              aria-label={this.ariaLabelFileInput}\n            />\n          </div>\n        </div>\n        {this.renderStatusMessage()}\n      </div>\n    );\n  }\n\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-702a48f8.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as r}from"./p-b7a462e5.js";const e=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-block}.container{display:flex;min-height:1.25em;align-items:center;padding:0 8px;border-radius:9999px;font-family:var(--ifx-font-family)}.container.no-border{padding:0}.container.border-engineering-100{border:1px solid #F7F7F7}.container.border-engineering-200{border:1px solid #EEEDED}.container.border-engineering-300{border:1px solid #BFBBBB}.container.border-engineering-400{border:1px solid #8D8786}.container.border-engineering-500{border:1px solid #575352}.container.border-engineering-600{border:1px solid #3C3A39}.container.border-ocean-100{border:1px solid #DFF4F3}.container.border-ocean-200{border:1px solid #B8DEDA}.container.border-ocean-300{border:1px solid #6CB4AD}.container.border-ocean-400{border:1px solid #3B9B91}.container.border-ocean-500{border:1px solid #0A8276}.container.border-ocean-600{border:1px solid #08665C}.container.border-ocean-700{border:1px solid #06534B}.container.border-red-500{border:1px solid #CD002F}.container.border-red-600{border:1px solid #A2001E}.container.border-red-700{border:1px solid #900021}.container.border-orange-500{border:1px solid #E16B25}.container.border-green-500{border:1px solid #4CA460}.container.border-lawn-400{border:1px solid #B9D257}.container.border-lawn-500{border:1px solid #9BBA43}.container.border-lawn-700{border:1px solid #3C6C0F}.container.border-berry-400{border:1px solid #BE3283}.container.border-berry-500{border:1px solid #9C216E}.container.border-sun-400{border:1px solid #FF9737}.container.border-sun-500{border:1px solid #F97414}.container.border-sand-400{border:1px solid #FBE273}.container.border-sand-500{border:1px solid #FCD442}.text{margin:0;padding-left:4px;font-style:normal;font-weight:600;font-size:1rem;line-height:1.25rem;display:inline;color:#1D1D1D}.dot{display:inline-block;width:8px;height:8px;border-radius:9999px}.dot.engineering-100{background-color:#F7F7F7}.dot.engineering-200{background-color:#EEEDED}.dot.engineering-300{background-color:#BFBBBB}.dot.engineering-400{background-color:#8D8786}.dot.engineering-500{background-color:#575352}.dot.engineering-600{background-color:#3C3A39}.dot.ocean-100{background-color:#DFF4F3}.dot.ocean-200{background-color:#B8DEDA}.dot.ocean-300{background-color:#6CB4AD}.dot.ocean-400{background-color:#3B9B91}.dot.ocean-500{background-color:#0A8276}.dot.ocean-600{background-color:#08665C}.dot.ocean-700{background-color:#06534B}.dot.red-500{background-color:#CD002F}.dot.red-600{background-color:#A2001E}.dot.red-700{background-color:#900021}.dot.orange-500{background-color:#E16B25}.dot.green-500{background-color:#4CA460}.dot.lawn-400{background-color:#B9D257}.dot.lawn-500{background-color:#9BBA43}.dot.lawn-700{background-color:#3C6C0F}.dot.berry-400{background-color:#BE3283}.dot.berry-500{background-color:#9C216E}.dot.sun-400{background-color:#FF9737}.dot.sun-500{background-color:#F97414}.dot.sand-400{background-color:#FBE273}.dot.sand-500{background-color:#FCD442}';const n=e;const d=class{constructor(r){o(this,r);this.border=false;this.color="orange-500"}render(){var o;const e=((o=this.color)===null||o===void 0?void 0:o.trim())?this.color:"orange-500";const n=this.border?`container border-${e}`:"container no-border";return r("div",{key:"5efa5a76a481840dfd1224684a01c619ad62c528","aria-label":"a status indicator","aria-value":this.label,class:n},r("span",{key:"d150facf484bfe50ffa876c40d13e8f5d4880ecc",class:`dot ${e}`}),r("p",{key:"5594b7360e7b3b6af14c906e5f69990bda009675",class:"text"},this.label))}};d.style=n;export{d as ifx_status};
-//# sourceMappingURL=p-702a48f8.entry.js.map

package/dist/infineon-design-system-stencil/p-702a48f8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["statusCss","IfxStatusStyle0","Status","constructor","hostRef","this","border","color","render","effectiveColor","_a","trim","containerClass","h","key","label","class"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"mappings":"2CAAA,MAAMA,EAAY,87FAClB,MAAAC,EAAeD,E,MCQFE,EAAM,MANnB,WAAAC,CAAAC,G,UAQUC,KAAAC,OAAkB,MAClBD,KAAAE,MAAgB,Y,CAGxB,MAAAC,G,MACE,MAAMC,IAAiBC,EAAAL,KAAKE,SAAK,MAAAG,SAAA,SAAAA,EAAEC,QAASN,KAAKE,MAAQ,aACzD,MAAMK,EAAiBP,KAAKC,OAAS,oBAAoBG,IAAmB,sBAE5E,OACEI,EAAA,OAAAC,IAAA,wDAAgB,qBAAoB,aAAaT,KAAKU,MAAOC,MAAOJ,GAClEC,EAAA,QAAAC,IAAA,2CAAME,MAAO,OAAOP,MACpBI,EAAA,KAAAC,IAAA,2CAAGE,MAAM,QAAQX,KAAKU,O","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,g as r}from"./p-b7a462e5.js";const a='.date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}.date__picker-input{font-family:"Source Sans 3";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#575352;background-color:#EEEDED}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}';const s=a;const o=class{constructor(i){e(this,i);this.ifxDate=t(this,"ifxDate",7);if(i.$hostElement$["s-ei"]){this.internals=i.$hostElement$["s-ei"]}else{this.internals=i.$hostElement$.attachInternals();i.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-date-picker-${++n}`;this.size="s";this.error=false;this.success=false;this.disabled=false;this.type="date";this.required=false;this.autocomplete="on"}getDate(e){const t=e.target.value;const i=new Date(t);const r=i.getDate();const a=i.getMonth()+1;const s=i.getFullYear();if(!t){this.internals.setFormValue(null);if(this.type==="datetime-local"){const e=i.getHours();const t=i.getMinutes();this.ifxDate.emit({day:r,month:a,year:s,hours:e,minutes:t})}else{this.ifxDate.emit({day:r,month:a,year:s})}return}const o=this.el.shadowRoot.querySelector(".date__picker-input");o.classList.add("has-value");this.internals.setFormValue(i.toISOString().substring(0,10));if(this.type==="datetime-local"){const e=i.getHours();const t=i.getMinutes();this.ifxDate.emit({day:r,month:a,year:s,hours:e,minutes:t})}else{this.ifxDate.emit({day:r,month:a,year:s})}}handleInputFocusOnIconClick(){const e=this.el.shadowRoot.querySelector(".date__picker-input");if(e){e.focus()}}getBrowser(){if(navigator.userAgent.indexOf("Chrome")!=-1){return"Chrome"}else if(navigator.userAgent.indexOf("Opera")!=-1){return"Opera"}else if(navigator.userAgent.indexOf("MSIE")!=-1){return"IE"}else if(navigator.userAgent.indexOf("Firefox")!=-1){return"Firefox"}else{return"unknown"}}setFireFoxClasses(){const e=this.getBrowser();const t=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){t.classList.add("firefox__classes")}else if(t.classList.contains("firefox__classes")){t.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses()}componentWillUpdate(){if(this.value){this.getDate({target:{value:this.value}})}}formResetCallback(){this.internals.setFormValue(null)}render(){var e,t;return i("div",{key:"4fd623e58f74d41cc7871b4971b4bd3806f310b2",class:`date__picker-container ${this.error?"error":""} ${this.disabled?"disabled":""}`},i("label",{key:"75f325296e0733fbe2021718b580ed1049248ffa",class:"label__wrapper",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim(),i("span",{key:"02de17b70b3d0af8d59cb2d13ec7b17ea939f2db",class:`asterisk ${this.required?"required":""} ${this.error?"error":""}`},"*")),i("div",{key:"7bf28947be09f941fb0bf4972e0c8c105366488b",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":""}`},i("input",{key:"b2413ef548765a108c54c9b338c7274dde36b3f6",type:this.type,autocomplete:this.autocomplete,class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,disabled:this.disabled?true:undefined,"aria-invalid":this.error?true:undefined,"aria-label":this.ariaLabel,max:this.max,min:this.min,value:this.value,required:this.required,onChange:e=>this.getDate(e)}),i("div",{key:"87880933e1ec373376f2ff4dde170ad29bd326bf",class:"icon__wrapper",role:"button",onClick:()=>this.handleInputFocusOnIconClick()},i("ifx-icon",{key:"81bd4154b84f9c1bb48fc6ac6574a915aca0dfce",icon:"calendar16","aria-hidden":"true"}))),((t=this.caption)===null||t===void 0?void 0:t.trim())&&i("div",{key:"371a538db6b4c5e119e436b9dfccff1c5ad35cf1",class:"caption__wrapper"},this.caption.trim()))}static get formAssociated(){return true}get el(){return r(this)}};let n=0;o.style=s;export{o as ifx_date_picker};
-//# sourceMappingURL=p-741ee6fd.entry.js.map

package/dist/infineon-design-system-stencil/p-741ee6fd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","constructor","hostRef","this","inputId","datePickerId","size","error","success","disabled","type","required","autocomplete","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","hours","getHours","minutes","getMinutes","ifxDate","emit","input","el","shadowRoot","querySelector","classList","add","toISOString","substring","handleInputFocusOnIconClick","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","contains","remove","componentDidLoad","componentWillUpdate","formResetCallback","render","h","key","class","htmlFor","_a","label","trim","undefined","ariaLabel","max","min","onChange","role","onClick","icon","_b","caption"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n  display: flex;\n  flex-direction: column;\n\n  & .label__wrapper {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n\n    & .asterisk { \n      display: none;\n      &.required {\n        display: inline;\n        margin-left: 4px;\n        \n        &.error {\n          color: #CD002F;\n        }\n      }\n    }\n\n  }\n\n  &.disabled {\n    .label__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  &.error {\n    .caption__wrapper {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.disabled {\n    .caption__wrapper {\n      color: tokens.$ifxColorEngineering500;\n    }\n  }\n\n  & .caption__wrapper {\n    margin-top: tokens.$ifxSpace50;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n  }\n}\n\n.date__picker-input {\n  font-family: 'Source Sans 3';\n  outline: none;\n  width: 100%;\n  cursor: pointer;\n  border-radius: 1px;\n  border: 1px solid tokens.$ifxColorEngineering400;\n  height: 100%;\n\n  &.firefox__classes {\n    padding: 8px 16px;\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    text-transform: uppercase;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    cursor: pointer;\n  }\n\n  &:focus:not(.error, .success) {\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  &:hover:not(:disabled, :focus, .error, .success) {\n    border-color: tokens.$ifxColorEngineering500;\n  }\n\n  &:disabled {\n    border-color: tokens.$ifxColorEngineering500;\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.error {\n    border-color: tokens.$ifxColorRed500;\n  }\n\n  &.success:not(.error) {\n    border-color: tokens.$ifxColorGreen500;\n  }\n\n  &::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorEngineering400;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n  }\n\n  &.has-value::-webkit-datetime-edit-text {\n    color: tokens.$ifxColorBaseBlack;\n  }\n\n  &.has-value::-webkit-datetime-edit {\n    color: tokens.$ifxColorBaseBlack;\n  }\n}\n\n::-webkit-datetime-edit {\n  color: tokens.$ifxColorEngineering400;\n  font-size: 16px;\n  text-transform: uppercase;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 8px 16px;\n  padding-bottom: 9px;\n  transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n  display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n  position: absolute;\n  right: 15px;\n  font-size: 19px;\n  cursor: pointer;\n  border-radius: 1px;\n  &:focus-within {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n}\n\n.input__wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  background: tokens.$ifxColorBaseWhite;\n  position: relative;\n  &.large {\n    height: 40px;\n  }\n\n  &.small {\n    height: 36px;\n  }\n\n  &.disabled {\n    & .icon__wrapper {\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  }\n}\n\n.icon__wrapper {\n  position: absolute;\n  right: 17px;\n  padding: 2px;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  z-index: 100;\n  background-color: tokens.$ifxColorBaseWhite;\n  line-height: 16px;\n\n  & ifx-icon {\n    vertical-align: middle;\n  }\n}\n","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n  formAssociated: true,\n})\n\nexport class DatePicker {\n  private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n  @Element() el: HTMLElement;\n  @Prop() size: string = 's';\n  @Prop() error: boolean = false;\n  @Prop() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() ariaLabel: string | null;\n  @Prop() value: string;\n  @Prop() type: string = 'date'\n  @Prop() max: string;\n  @Prop() min: string;\n  @Prop() required: boolean = false;\n  @Prop() label: string;\n  @Prop() caption: string;\n  @Prop() autocomplete: string = 'on';\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event() ifxDate: EventEmitter;\n\n  getDate(e) { \n    const inputValue = e.target.value;\n    const selectedDate = new Date(inputValue);\n    const day = selectedDate.getDate();\n    const month = selectedDate.getMonth() + 1; \n    const year = selectedDate.getFullYear();\n\n \n      \n    if (!inputValue) {\n      this.internals.setFormValue(null);\n\n      if(this.type === 'datetime-local') { \n        const hours = selectedDate.getHours();\n        const minutes = selectedDate.getMinutes();\n        this.ifxDate.emit({day, month, year, hours, minutes});\n      } else { \n        this.ifxDate.emit({day, month, year});\n      }\n      return;\n    }\n\n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    input.classList.add('has-value');\n\n    this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n    if(this.type === 'datetime-local') { \n      const hours = selectedDate.getHours();\n      const minutes = selectedDate.getMinutes();\n      this.ifxDate.emit({day, month, year, hours, minutes});\n    } else { \n      this.ifxDate.emit({day, month, year})\n    }\n  }\n\n  handleInputFocusOnIconClick() { \n    const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n    if(input) { \n      input.focus()\n    }\n  }\n\n getBrowser() {\n    if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n      return \"Chrome\";\n    } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n      return \"Opera\";\n    } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n      return \"IE\";\n    } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n      return \"Firefox\";\n    } else {\n      return \"unknown\";\n    }\n  }\n\n  setFireFoxClasses() { \n    const browser = this.getBrowser()\n    const input = this.el.shadowRoot.querySelector('.date__picker-input');\n\n    if(browser === 'Firefox') { \n      input.classList.add('firefox__classes')\n    } else if(input.classList.contains('firefox__classes')) { \n      input.classList.remove('firefox__classes')\n    }\n  }\n\n  componentDidLoad() { \n    this.setFireFoxClasses()\n  }\n\n  componentWillUpdate() { \n    if (this.value) {\n      this.getDate({ target: { value: this.value } });\n    }\n  }\n\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n        <label class='label__wrapper' htmlFor={ this.inputId }>\n          { this.label?.trim() }\n          <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n        </label>\n\n        <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n          <input\n          type={this.type}\n          autocomplete={this.autocomplete}\n          class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n          disabled={this.disabled ? true : undefined}\n          aria-invalid={this.error ? true : undefined}\n          aria-label={this.ariaLabel}\n          max={this.max}\n          min={this.min}\n          value={this.value}\n          required={this.required}\n          onChange={(e) => this.getDate(e)} />\n          <div class=\"icon__wrapper\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n            <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n          </div>\n        </div>\n\n        { this.caption?.trim() && (\n            <div class='caption__wrapper'>\n              { this.caption.trim() }\n            </div> \n          )}\n      </div>\n    )\n  }\n}\n\nlet datePickerId = 0;"],"mappings":"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","ignoreList":[]}