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

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

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

package/dist/infineon-design-system-stencil/{p-a8632f44.entry.js → p-ff4cc197.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as n,d as o,a as i}from"./p-PqnYwNKt.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as s}from"./p-Bw2fh5LT.js";import{c as a}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const d=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const b=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}updateIcon(t){this.internalIcon=t}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}this.internalIcon=this.icon}async componentDidLoad(){if(!s(this.el)){const t=e();r("ifx-icon-button",await t)}}render(){return n(o,{key:"fed25bf7da7733702a1a614480b716f9bf697c38","aria-disabled":this.disabled,"aria-label":this.ariaLabel},this.href?n("a",{ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.internalIcon})):n("button",{class:this.getClassNames(),type:"button",disabled:this.disabled},n("ifx-icon",{icon:this.internalIcon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return a("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return i(this)}static get watchers(){return{icon:["updateIcon"]}}};b.style=d;export{b as ifx_icon_button};
-//# sourceMappingURL=p-a8632f44.entry.js.map
+import{r as t,h as n,d as o,a as i}from"./p-PqnYwNKt.js";import{d as e,t as r}from"./p-DcmcuUOA.js";import{i as s}from"./p-Bw2fh5LT.js";import{c as a}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const d=":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";const b=class{constructor(n){t(this,n);this.target="_self";this.shape="round"}handleClick(t){if(this.disabled){t.stopImmediatePropagation()}}updateIcon(t){this.internalIcon=t}async setFocus(){this.focusableElement.focus()}componentWillLoad(){if(this.shape===""){this.shape="round"}this.internalIcon=this.icon}async componentDidLoad(){if(!s(this.el)){const t=e();r("ifx-icon-button",await t)}}render(){return n(o,{key:"2a31f0c17ad2f648807b6da75e145f6b028f6858","aria-disabled":this.disabled,"aria-label":this.ariaLabel},this.href?n("a",{ref:t=>this.focusableElement=t,class:this.getClassNames(),href:!this.disabled?this.href:undefined,target:this.target,rel:this.target==="_blank"?"noopener noreferrer":undefined},n("ifx-icon",{icon:this.internalIcon})):n("button",{class:this.getClassNames(),type:"button",disabled:this.disabled},n("ifx-icon",{icon:this.internalIcon})))}getVariantClass(){return`${this.variant}`==="secondary"?`secondary`:`${this.variant}`==="tertiary"?`tertiary`:`primary`}getSizeClass(){if(`${this.size}`==="xs"){return"xs"}else if(`${this.size}`==="s"){return"s"}else if(`${this.size}`==="l"){return"l"}else return""}getClassNames(){return a("btn icon-button",`btn-${this.shape}`,this.size&&`btn-${this.getSizeClass()}`,`btn-${this.getVariantClass()}`,this.disabled?"disabled":"")}get el(){return i(this)}static get watchers(){return{icon:["updateIcon"]}}};b.style=d;export{b as ifx_icon_button};
+//# sourceMappingURL=p-ff4cc197.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IconButton","constructor","hostRef","this","target","shape","handleClick","event","disabled","stopImmediatePropagation","updateIcon","newIcon","internalIcon","setFocus","focusableElement","focus","componentWillLoad","icon","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","Host","key","ariaLabel","href","ref","class","getClassNames","undefined","rel","type","getVariantClass","variant","getSizeClass","size","classNames"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: inline-flex;\n}\n\n.btn {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: tokens.$ifxSize500;\n  padding: 8px;\n  gap: tokens.$ifxSpace100;\n  color: tokens.$ifxColorBaseWhite;\n  flex-direction: row;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  border-radius: tokens.$ifxBorderRadius12;\n  line-height: tokens.$ifxLineHeightM;\n  outline: none;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n  text-decoration: none;\n  user-select: none;\n  border: 1px solid rgba(0, 0, 0, 0);\n  font-size: tokens.$ifxFontSizeM;\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\n}\n\n.btn:not(.disabled) {\n  cursor: pointer;\n}\n\n.btn-primary {\n  color: tokens.$ifxColorBaseWhite;\n  background-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorBaseWhite;\n    pointer-events: none;\n\n  }\n}\n\n\n.btn-secondary {\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border-color: tokens.$ifxColorOcean500;\n\n  &:disabled,\n  &.disabled {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n\n  }\n}\n\n.btn-tertiary {\n  background-color: transparent;\n  color: tokens.$ifxColorBaseBlack;\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    pointer-events: none;\n  }\n}\n\n\n.btn {\n\n  &.icon-button {\n    min-width: initial;\n    min-height: initial;\n    width: tokens.$ifxSize500;\n    height: tokens.$ifxSize500;\n    padding: 0;\n    justify-content: center;\n\n    &.btn-round {\n      border-radius: 100px;\n    }\n\n    &.btn-square {\n      border-radius: tokens.$ifxBorderRadius12;\n    }\n\n    &.btn-s {\n      width: tokens.$ifxSize400;\n      height: tokens.$ifxSize400;\n      padding: 8px;\n    }\n\n\n    &.btn-l {\n      width: tokens.$ifxSize600;\n      height: tokens.$ifxSize600;\n      padding: 8px;\n    }\n  }\n\n  &.btn-primary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n\n  &.btn-secondary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      background-color: tokens.$ifxColorOcean600;\n      border-color: tokens.$ifxColorOcean600;\n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    &:active,\n    &.active {\n      background-color: tokens.$ifxColorOcean700;\n      border-color: tokens.$ifxColorOcean700;\n    }\n  }\n\n  &.btn-tertiary:not(:disabled, .disabled) {\n    &:focus:not(:active, .active) {\n      outline: none;\n      color: tokens.$ifxColorBaseBlack;\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\n    }\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active,\n    &.active {\n      color: tokens.$ifxColorOcean600;\n    }\n  }\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'ifx-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\n\nexport class IconButton {\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n  @Prop() size: string;\n  @Prop() disabled: boolean;\n  @Prop() icon: string;\n  @Prop() href: string;\n  @Prop() target: string = '_self';\n  @Prop() shape: string = 'round';\n  @Prop() ariaLabel: string | null;\n  @State() internalIcon: string;\n  @Element() el;\n\n  private focusableElement: HTMLElement;\n  \n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Watch('icon')\n  updateIcon(newIcon: string) { \n    this.internalIcon = newIcon;\n  }\n\n  @Method()\n  async setFocus() {\n    this.focusableElement.focus();\n  }\n\n  componentWillLoad() {\n    if (this.shape === '') {\n      this.shape = 'round';\n    }\n    this.internalIcon = this.icon;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-icon-button', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <Host \n        aria-disabled={this.disabled}\n        aria-label={this.ariaLabel}> \n        {this.href ? (\n          <a\n            ref={(el) => (this.focusableElement = el)}\n            class={this.getClassNames()}\n            href={!this.disabled ? this.href : undefined} \n            target={this.target}\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </a>\n        ) : (\n          <button\n            class={this.getClassNames()}\n            type=\"button\"\n            disabled={this.disabled}\n          >\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  getVariantClass() {\n    return `${this.variant}` === \"secondary\"\n      ? `secondary`\n      : `${this.variant}` === 'tertiary'\n        ? `tertiary`\n        : `primary`;\n  }\n\n  getSizeClass() {\n    if (`${this.size}` === \"xs\") {\n      return \"xs\"\n    }\n    else if (`${this.size}` === \"s\") {\n      return \"s\"\n    }\n    else if (`${this.size}` === \"l\") {\n      return \"l\"\n    }\n    else return \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'btn icon-button',\n      `btn-${this.shape}`,\n      this.size && `btn-${this.getSizeClass()}`,\n      `btn-${this.getVariantClass()}`,\n      this.disabled ? 'disabled' : ''\n    );\n  }\n}"],"mappings":"oMAAA,MAAMA,EAAgB,y4E,MCYTC,EAAU,MANvB,WAAAC,CAAAC,G,UAYUC,KAAMC,OAAW,QACjBD,KAAKE,MAAW,OAgGzB,CAxFC,WAAAC,CAAYC,GACV,GAAIJ,KAAKK,SAAU,CACjBD,EAAME,0B,EAKV,UAAAC,CAAWC,GACTR,KAAKS,aAAeD,C,CAItB,cAAME,GACJV,KAAKW,iBAAiBC,O,CAGxB,iBAAAC,GACE,GAAIb,KAAKE,QAAU,GAAI,CACrBF,KAAKE,MAAQ,O,CAEfF,KAAKS,aAAeT,KAAKc,I,CAG3B,sBAAMC,GACJ,IAAIC,EAAuBhB,KAAKiB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,wBAAyBF,E,EAI5C,MAAAG,GACE,OACEC,EAACC,EACgB,CAAAC,IAAA,2DAAAxB,KAAKK,SAAQ,aAChBL,KAAKyB,WAChBzB,KAAK0B,KACJJ,EAAA,KACEK,IAAMV,GAAQjB,KAAKW,iBAAmBM,EACtCW,MAAO5B,KAAK6B,gBACZH,MAAO1B,KAAKK,SAAWL,KAAK0B,KAAOI,UACnC7B,OAAQD,KAAKC,OACb8B,IAAK/B,KAAKC,SAAW,SAAW,sBAAwB6B,WAExDR,EAAA,YAAUR,KAAMd,KAAKS,gBAGvBa,EACE,UAAAM,MAAO5B,KAAK6B,gBACZG,KAAK,SACL3B,SAAUL,KAAKK,UAEfiB,EAAU,YAAAR,KAAMd,KAAKS,gB,CAO/B,eAAAwB,GACE,MAAO,GAAGjC,KAAKkC,YAAc,YACzB,YACA,GAAGlC,KAAKkC,YAAc,WACpB,WACA,S,CAGR,YAAAC,GACE,GAAI,GAAGnC,KAAKoC,SAAW,KAAM,CAC3B,MAAO,I,MAEJ,GAAI,GAAGpC,KAAKoC,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,GAAI,GAAGpC,KAAKoC,SAAW,IAAK,CAC/B,MAAO,G,MAEJ,MAAO,E,CAGd,aAAAP,GACE,OAAOQ,EACL,kBACA,OAAOrC,KAAKE,QACZF,KAAKoC,MAAQ,OAAOpC,KAAKmC,iBACzB,OAAOnC,KAAKiC,oBACZjC,KAAKK,SAAW,WAAa,G","ignoreList":[]}

package/dist/types/components/checkbox/checkbox.d.ts

@@ -27,6 +27,6 @@ export declare class Checkbox {
      * Callback for form association.
      * Called whenever the form is reset.
      */
-    getCheckedClassName(): "error" | "" | "checked" | "checked error";
+    getCheckedClassName(): "" | "error" | "checked" | "checked error";
     render(): any;
 }

package/dist/types/components/link/link.d.ts

@@ -15,7 +15,7 @@ export declare class Link {
     handleKeyDown(event: KeyboardEvent): void;
     componentDidLoad(): Promise<void>;
     render(): any;
-    getSizeClass(): "" | "small" | "medium" | "large" | "extraLarge";
+    getSizeClass(): "" | "medium" | "large" | "small" | "extraLarge";
     getVariantClass(): "bold" | "title" | "menu" | "underlined";
     linkClassNames(): string;
 }

package/dist/types/components/navigation/navbar/navbar-item.d.ts

@@ -44,7 +44,7 @@ export declare class NavbarItem {
     getItemMenu(): any;
     getParentItemMenu(): any;
     closeItemMenu(): void;
-    getItemMenuPosition(): "right" | "left";
+    getItemMenuPosition(): "left" | "right";
     toggleItemMenu(): void;
     handleNestedLayerMenu(e: any): void;
     private isFocusWithinComponent;

package/dist/types/components/select/single-select/types/choices.d.ts

@@ -1,2 +1,2 @@
-// Globally defined Choices
-declare var Choices: new (arg0: any, arg1: object) => any;
+// Globally defined Choices
+declare var Choices: new (arg0: any, arg1: object) => any;

package/dist/types/components/table-advanced-version/list/list.d.ts

@@ -32,7 +32,7 @@ export declare class List {
         label: string;
         value: string;
         type: string;
-        element: HTMLIfxListEntryElement;
+        element: Element;
     }[];
     handleCheckedChange: (event?: CustomEvent) => void;
     private renderList;

package/dist/types/components/table-advanced-version/table.d.ts

@@ -43,6 +43,7 @@ export declare class Table {
     enableSelection: boolean;
     selectedRows: Set<string>;
     selectAll: boolean;
+    selectedRowsData: Map<string, any>;
     showLoading: boolean;
     private container;
     host: HTMLElement;

package/dist/types/components/tooltip/tooltip.d.ts

@@ -14,7 +14,7 @@ export declare class Tooltip {
     componentWillLoad(): void;
     componentDidLoad(): Promise<void>;
     initializePopper(): void;
-    determineBestPosition(): "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    determineBestPosition(): "top" | "left" | "right" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
     positionChanged(newVal: any): void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;

package/dist/types/global.d.ts

@@ -1,4 +1,4 @@
-// src/global.d.ts or types/global.d.ts
-interface Window {
-    _paq?: any[];
+// src/global.d.ts or types/global.d.ts
+interface Window {
+    _paq?: any[];
   }

package/dist/types/loader.d.ts

@@ -1,2 +1,2 @@
-// packages/components/src/types/loader.d.ts
+// packages/components/src/types/loader.d.ts
 export const defineCustomElements: (win: any) => Promise<void>;

package/package.json

@@ -1,111 +1,111 @@
-{
-  "name": "@infineon/infineon-design-system-stencil",
-  "version": "39.4.4-canary.0",
-  "private": false,
-  "description": "Infineon design system Stencil web components",
-  "homepage": "https://infineon.github.io/infineon-design-system-stencil",
-  "bugs": {
-    "url": "https://github.com/Infineon/infineon-design-system-stencil/issues"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.js",
-  "es2015": "dist/esm/index.mjs",
-  "es2017": "dist/esm/index.mjs",
-  "types": "dist/types/index.d.ts",
-  "collection": "dist/collection/collection-manifest.json",
-  "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js",
-  "files": [
-    "dist/",
-    "loader/"
-  ],
-  "scripts": {
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "build:storybook": "npm run build:stencil && npm run copy:storybook-fonts && storybook build",
-    "build:stencil": "stencil build --docs && npm run postbuild",
-    "process:design-tokens": "npx sass-export ../../node_modules/@infineon/design-system-tokens/dist/_tokens.scss -o ./.storybook/exported-sass-array.json -a",
-    "copy:storybook-fonts": "ncp \"../../node_modules/@infineon/design-system-tokens/dist/fonts\" \"./public-storybook/fonts\"",
-    "copy-www-fonts": "ncp \"../../node_modules/@infineon/design-system-tokens/dist/fonts\" \"./www/build/fonts\"",
-    "postbuild": "npm run copy-www-fonts",
-    "dev:stencil": "stencil build --serve --watch",
-    "watch:stencil": "stencil build  --watch",
-    "index": "stencil build --serve --watch --dev",
-    "dev": "run-p dev:stencil dev:storybook",
-    "dev:storybook": "wait-on ./dist && storybook dev -p 6262",
-    "storybook": "npm run process:design-tokens && npm run dev"
-  },
-  "dependencies": {
-    "@infineon/design-system-tokens": "5.0.0",
-    "@infineon/infineon-icons": "^4.4.1",
-    "@popperjs/core": "^2.11.8",
-    "@stencil/angular-output-target": "^0.9.0",
-    "@stencil/vue-output-target": "^0.8.9",
-    "@storybook/cli": "^8.3.0",
-    "@storybook/test": "^8.3.0",
-    "babel-prettier-parser": "^0.10.8",
-    "classnames": "^2.3.2",
-    "glob": "^11.0.0",
-    "i": "^0.3.7",
-    "lerna": "8.1.9",
-    "npm-run-all": "^4.1.5"
-  },
-  "peerDependencies": {
-    "@floating-ui/dom": "^1.4.5",
-    "ag-grid-community": "^31.0.3",
-    "choices.js": "^10.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@stencil/core": "4.36.3",
-    "@stencil/react-output-target": "^0.7.1",
-    "@stencil/sass": "^3.2.2",
-    "@storybook/addon-actions": "^8.3.0",
-    "@storybook/addon-docs": "^8.3.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/addon-mdx-gfm": "^8.3.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/core-events": "^8.3.0",
-    "@storybook/html": "^8.3.0",
-    "@storybook/html-webpack5": "^8.3.0",
-    "@storybook/manager-api": "^8.3.0",
-    "@storybook/theming": "^8.3.0",
-    "@storybook/web-components-webpack5": "^8.3.0",
-    "@types/jest": "30.0.0",
-    "@types/node": "^20.12.7",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^12.0.2",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "30.0.5",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-stencil-runner": "0.0.6",
-    "jest-transform-stub": "2.0.0",
-    "ncp": "^2.0.0",
-    "prettier": "^2.8.8",
-    "puppeteer": "^24.0.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.78.0",
-    "sass-export": "^2.1.2",
-    "sass-loader": "^16.0.1",
-    "storybook": "^8.6.14",
-    "wait-on": "^7.2.0"
-  },
-  "license": "MIT",
-  "auto": {
-    "plugins": [
-      "npm",
-      "released"
-    ]
-  },
-  "packageManager": "npm@11.3.0"
-}
+{
+  "name": "@infineon/infineon-design-system-stencil",
+  "version": "39.5.0",
+  "private": false,
+  "description": "Infineon design system Stencil web components",
+  "homepage": "https://infineon.github.io/infineon-design-system-stencil",
+  "bugs": {
+    "url": "https://github.com/Infineon/infineon-design-system-stencil/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "build:storybook": "npm run build:stencil && npm run copy:storybook-fonts && storybook build",
+    "build:stencil": "stencil build --docs && npm run postbuild",
+    "process:design-tokens": "npx sass-export ../../node_modules/@infineon/design-system-tokens/dist/_tokens.scss -o ./.storybook/exported-sass-array.json -a",
+    "copy:storybook-fonts": "ncp \"../../node_modules/@infineon/design-system-tokens/dist/fonts\" \"./public-storybook/fonts\"",
+    "copy-www-fonts": "ncp \"../../node_modules/@infineon/design-system-tokens/dist/fonts\" \"./www/build/fonts\"",
+    "postbuild": "npm run copy-www-fonts",
+    "dev:stencil": "stencil build --serve --watch",
+    "watch:stencil": "stencil build  --watch",
+    "index": "stencil build --serve --watch --dev",
+    "dev": "run-p dev:stencil dev:storybook",
+    "dev:storybook": "wait-on ./dist && storybook dev -p 6262",
+    "storybook": "npm run process:design-tokens && npm run dev"
+  },
+  "dependencies": {
+    "@infineon/design-system-tokens": "5.0.0",
+    "@infineon/infineon-icons": "^4.4.1",
+    "@popperjs/core": "^2.11.8",
+    "@stencil/angular-output-target": "^0.9.0",
+    "@stencil/vue-output-target": "^0.8.9",
+    "@storybook/cli": "^8.3.0",
+    "@storybook/test": "^8.3.0",
+    "babel-prettier-parser": "^0.10.8",
+    "classnames": "^2.3.2",
+    "glob": "^11.0.0",
+    "i": "^0.3.7",
+    "lerna": "8.1.9",
+    "npm-run-all": "^4.1.5"
+  },
+  "peerDependencies": {
+    "@floating-ui/dom": "^1.4.5",
+    "ag-grid-community": "^31.0.3",
+    "choices.js": "^10.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@stencil/core": "4.36.3",
+    "@stencil/react-output-target": "^0.7.1",
+    "@stencil/sass": "^3.2.2",
+    "@storybook/addon-actions": "^8.3.0",
+    "@storybook/addon-docs": "^8.3.0",
+    "@storybook/addon-essentials": "^8.3.0",
+    "@storybook/addon-interactions": "^8.3.0",
+    "@storybook/addon-links": "^8.3.0",
+    "@storybook/addon-mdx-gfm": "^8.3.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.3.0",
+    "@storybook/core-events": "^8.3.0",
+    "@storybook/html": "^8.3.0",
+    "@storybook/html-webpack5": "^8.3.0",
+    "@storybook/manager-api": "^8.3.0",
+    "@storybook/theming": "^8.3.0",
+    "@storybook/web-components-webpack5": "^8.3.0",
+    "@types/jest": "30.0.0",
+    "@types/node": "^20.12.7",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "identity-obj-proxy": "3.0.0",
+    "jest": "30.0.5",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-stencil-runner": "0.0.6",
+    "jest-transform-stub": "2.0.0",
+    "ncp": "^2.0.0",
+    "prettier": "^2.8.8",
+    "puppeteer": "^24.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.78.0",
+    "sass-export": "^2.1.2",
+    "sass-loader": "^16.0.1",
+    "storybook": "^8.6.14",
+    "wait-on": "^7.2.0"
+  },
+  "license": "MIT",
+  "auto": {
+    "plugins": [
+      "npm",
+      "released"
+    ]
+  },
+  "packageManager": "npm@11.3.0"
+}

package/dist/components/p-B5v9D54X.js.map

@@ -1 +0,0 @@
-{"file":"p-B5v9D54X.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/select/multi-select/multiselect.scss?tag=ifx-multiselect&encapsulation=shadow","src/components/select/multi-select/multiselect.tsx"],"sourcesContent":["// @import '~choices.js/public/assets/styles/choices.css';\r\n@use '~@infineon/design-system-tokens/dist/tokens';\r\n@use '../../../global/font.scss';\r\n\r\n.ifx-multiselect-container {\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  font-family: var(--ifx-font-family);\r\n  \r\n\r\n  &.disabled {\r\n    & .ifx-label-wrapper {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    & .ifx-multiselect-wrapper {\r\n      background: tokens.$ifxColorEngineering300;\r\n      color: tokens.$ifxColorBaseWhite;\r\n      border-color: tokens.$ifxColorEngineering300;\r\n      cursor: default;\r\n      -webkit-user-select: none;\r\n      -ms-user-select: none;\r\n      user-select: none;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  .ifx-label-wrapper {\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    white-space: pre-wrap;\r\n    word-wrap: break-word;\r\n    overflow-wrap: anywhere;\r\n    max-width: 100%;\r\n\r\n    & .required {\r\n      margin-left: 4px;\r\n\r\n      &.error {\r\n        color: #CD002F;\r\n      }\r\n    }\r\n  }\r\n\r\n  .multi__select-caption {\r\n    font-style: normal;\r\n    font-weight: tokens.$ifxFontWeightRegular;\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    line-height: tokens.$ifxLineHeightXs;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    flex: none;\r\n    order: 1;\r\n    align-self: stretch;\r\n    flex-grow: 0;\r\n\r\n    &.error {\r\n      color: tokens.$ifxColorRed500;\r\n    }\r\n\r\n    &.disabled {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  .ifx-multiselect-wrapper {\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    border: 1px solid tokens.$ifxColorEngineering400;\r\n    border-radius: tokens.$ifxBorderRadius12;\r\n    width: 100%;\r\n    font-weight: 400;\r\n    font-style: normal;\r\n    height: 40px;\r\n    line-height: 24px;\r\n    padding: 8px 16px;\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n\r\n    &:focus-visible {\r\n      outline: none;\r\n    }\r\n\r\n    &:focus-visible:not(.active):not(:active) {\r\n      outline: none;\r\n\r\n      &::before {\r\n        content: '';\r\n        position: absolute;\r\n        width: calc(100% + 4px);\r\n        height: calc(100% + 4px);\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        border: 2px solid tokens.$ifxColorOcean500;\r\n        border-radius: 2px;\r\n      }\r\n    }\r\n\r\n    &.error {\r\n      border-color: tokens.$ifxColorRed500;\r\n    }\r\n\r\n    &.active {\r\n      border-color: tokens.$ifxColorOcean500 !important; // Active border color\r\n\r\n      & .icon-wrapper-up {\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding-left: tokens.$ifxSpace100;\r\n      }\r\n\r\n      & .icon-wrapper-down {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    & .icon-wrapper-up {\r\n      display: none;\r\n    }\r\n\r\n    & .icon-wrapper-down {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding-left: tokens.$ifxSpace100;\r\n    }\r\n\r\n    &.is-flipped {\r\n      .ifx-multiselect-dropdown-menu {\r\n        top: auto;\r\n        bottom: 100%;\r\n      }\r\n    }\r\n  }\r\n\r\n  .ifx-multiselect-input {\r\n    flex-grow: 1;\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n\r\n    &.placeholder {\r\n      opacity: 0.5;\r\n    }\r\n  }\r\n\r\n  .ifx-multiselect-icon-container {\r\n    margin-left: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n\r\n    .ifx-multiselect-icon-container {\r\n      display: flex;\r\n    }\r\n\r\n    .icon-wrapper {\r\n      display: flex;\r\n      align-items: center;\r\n      transition: transform 0.2s ease-in-out;\r\n    }\r\n\r\n    .icon-wrapper--open {\r\n      transform: rotate(180deg);\r\n    }\r\n  }\r\n\r\n  .ifx-clear-button {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  .ifx-multiselect-dropdown-menu {\r\n    box-sizing: border-box;\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    width: 100%;\r\n    margin-top: tokens.$ifxSpace50;\r\n    border: 1px solid tokens.$ifxColorEngineering200;\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    box-shadow: 0px 6px 9px 0px rgba(29, 29, 29, 0.1);\r\n    max-height: 300px;\r\n    z-index: 1000;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n   &:not(.disabled) .ifx-multiselect-wrapper:hover:not(.focus, :focus) {\r\n    border-color: tokens.$ifxColorEngineering500;\r\n  }\r\n}\r\n\r\n.ifx-multiselect-dropdown-functions {\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  border-bottom: 1px solid tokens.$ifxColorEngineering200;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.ifx-multiselect-dropdown-search {\r\n  margin-bottom: tokens.$ifxSpace150;\r\n}\r\n\r\n.ifx-multiselect-dropdown-controls {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n  gap: tokens.$ifxSpace100;\r\n\r\n  .select-all-wrapper {\r\n    display: flex;\r\n  }\r\n\r\n  .expand-collapse-controls {\r\n    display: flex;\r\n    gap: tokens.$ifxSpace150;\r\n  }\r\n\r\n  .control-item {\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active {\r\n      color: tokens.$ifxColorOcean600;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 2px;\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n    }\r\n  }\r\n}\r\n\r\n.ifx-multiselect-options {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding-top: tokens.$ifxSpace150;\r\n  padding-bottom: tokens.$ifxSpace150;\r\n\r\n  &.show-no-results {\r\n    .ifx-multiselect-no-results {\r\n      display: block;\r\n    }\r\n  }\r\n}\r\n\r\n.ifx-multiselect-no-results {\r\n  padding-left: tokens.$ifxSpace200;\r\n  padding-right: tokens.$ifxSpace200;\r\n  display: none;\r\n}\r\n","import { Component, Prop, State, Event, EventEmitter, Element, h, Watch, AttachInternals, Method } from '@stencil/core';\r\nimport { trackComponent } from '../../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../../global/utils/framework-detection';\r\nimport { Option } from './interfaces';\r\n\r\nfunction debounce(func, wait) {\r\n  let timeout;\r\n  return function executedFunction(...args) {\r\n    const later = () => {\r\n      clearTimeout(timeout);\r\n      func(...args);\r\n    };\r\n    clearTimeout(timeout);\r\n    timeout = setTimeout(later, wait);\r\n  };\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-multiselect',\r\n  styleUrl: 'multiselect.scss',\r\n  shadow: true,\r\n  // formAssociated: true\r\n})\r\nexport class Multiselect {\r\n  @Prop() name: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() required: boolean = false;\r\n  @Prop() error: boolean = false;\r\n  @Prop() caption: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() placeholder: string = '';\r\n  @Prop() showSearch: boolean = true;\r\n  @Prop() showSelectAll: boolean = true;\r\n  @Prop() showClearButton: boolean = true;\r\n  @Prop() showExpandCollapse: boolean = true;\r\n  @Prop() noResultsMessage: string = 'No results found.';\r\n  @Prop() showNoResultsMessage: boolean = true;\r\n  @Prop() searchPlaceholder: string = 'Search';\r\n  @Prop() selectAllLabel: string = 'Select all';\r\n  @Prop() expandLabel: string = 'Expand';\r\n  @Prop() collapseLabel: string = 'Collapse';\r\n  @Prop() ariaMultiSelectLabel: string = 'Multi-select dropdown';\r\n  @Prop() ariaMultiSelectLabelledBy: string = '';\r\n  @Prop() ariaMultiSelectDescribedBy: string = '';\r\n  @Prop() ariaSearchLabel: string = 'Search options';\r\n  @Prop() ariaClearLabel: string = 'Clear all selections';\r\n  @Prop() ariaToggleLabel: string = 'Toggle dropdown';\r\n  @Prop() ariaSelectAllLabel: string = 'Select all options';\r\n  @Prop() ariaExpandAllLabel: string = 'Expand all categories';\r\n  @Prop() ariaCollapseAllLabel: string = 'Collapse all categories';\r\n\r\n  @State() internalError: boolean = false;\r\n  @State() persistentSelectedOptions: Option[] = [];\r\n  @State() dropdownOpen = false;\r\n  @State() dropdownFlipped: boolean;\r\n  @State() searchTerm: string = '';\r\n\r\n  @Event() ifxSelect: EventEmitter;\r\n  @Event() ifxOpen: EventEmitter;\r\n\r\n  @Element() el: HTMLElement;\r\n  dropdownElement!: HTMLElement;\r\n\r\n  @AttachInternals() internals: ElementInternals;\r\n  private parseChildOptions(): Option[] {\r\n    const options: Option[] = [];\r\n    const childElements = Array.from(this.el.children);\r\n\r\n    childElements.forEach((child, index) => {\r\n      if (child.tagName === 'IFX-MULTISELECT-OPTION') {\r\n        const option = this.parseOptionElement(child as HTMLElement, index);\r\n        if (option) {\r\n          options.push(option);\r\n        }\r\n      }\r\n    });\r\n\r\n    return options;\r\n  }\r\n\r\n  private parseOptionElement(element: HTMLElement, index: number): Option | null {\r\n    const value = element.getAttribute('value') || `option-${index}`;\r\n    const selected = element.hasAttribute('selected');\r\n    const disabled = element.hasAttribute('disabled');\r\n    const indeterminate = element.hasAttribute('indeterminate');\r\n\r\n    const option: Option = {\r\n      value,\r\n      selected,\r\n      disabled,\r\n      indeterminate,\r\n    };\r\n\r\n    const nestedOptions = Array.from(element.children)\r\n      .filter(child => child.tagName === 'IFX-MULTISELECT-OPTION')\r\n      .map((child, childIndex) => this.parseOptionElement(child as HTMLElement, childIndex))\r\n      .filter(opt => opt !== null) as Option[];\r\n\r\n    if (nestedOptions.length > 0) {\r\n      option.children = nestedOptions;\r\n    }\r\n\r\n    return option;\r\n  }\r\n\r\n  loadInitialOptions() {\r\n    this.internalError = this.error;\r\n    const allOptions = this.parseChildOptions();\r\n    const initiallySelected = this.collectSelectedOptions(allOptions);\r\n    const initiallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));\r\n    this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initiallySelectedNotInState];\r\n  }\r\n\r\n  private collectSelectedOptions(options: Option[]): Option[] {\r\n    let selectedOptions: Option[] = [];\r\n\r\n    for (const option of options) {\r\n      if (option.selected) {\r\n        if (option.children && option.children.length > 0) {\r\n          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));\r\n        } else {\r\n          if (!selectedOptions.some(existingOption => existingOption.value === option.value)) {\r\n            selectedOptions.push(option);\r\n          }\r\n        }\r\n      } else {\r\n        if (option.children && option.children.length > 0) {\r\n          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));\r\n        }\r\n      }\r\n    }\r\n\r\n    return selectedOptions;\r\n  }\r\n\r\n  private collectLeafOptions(children: Option[]): Option[] {\r\n    let leafOptions = [];\r\n\r\n    for (const child of children) {\r\n      if (child.children && child.children.length > 0) {\r\n        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));\r\n      } else {\r\n        leafOptions.push(child);\r\n      }\r\n    }\r\n    return leafOptions;\r\n  }\r\n\r\n  handleSearch = debounce((targetElement: HTMLInputElement) => {\r\n    const searchTerm = targetElement.value.toLowerCase();\r\n    const isSearchActive = searchTerm !== '';\r\n\r\n    this.searchTerm = searchTerm;\r\n\r\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\r\n    if (wrapper) {\r\n      if (isSearchActive) {\r\n        wrapper.classList.remove('active');\r\n      } else {\r\n        const searchField = this.el.shadowRoot.querySelector('ifx-search-field');\r\n        const searchFieldHasFocus = searchField && searchField.matches(':focus-within');\r\n        if (!searchFieldHasFocus) {\r\n          wrapper.classList.add('active');\r\n        }\r\n      }\r\n    }\r\n\r\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\r\n    if (optionsContainer) {\r\n      if (isSearchActive) {\r\n        optionsContainer.classList.add('has-search-filter');\r\n      } else {\r\n        optionsContainer.classList.remove('has-search-filter');\r\n      }\r\n    }\r\n\r\n    requestAnimationFrame(() => {\r\n      const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\r\n      allOptions.forEach(option => {\r\n        const searchEvent = new CustomEvent('ifx-search-filter', {\r\n          detail: { searchTerm, isActive: isSearchActive },\r\n        });\r\n        option.dispatchEvent(searchEvent);\r\n      });\r\n\r\n      if (isSearchActive) {\r\n        setTimeout(() => {\r\n          const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\r\n          let visibleCount = 0;\r\n\r\n          allOptions.forEach(option => {\r\n            const style = window.getComputedStyle(option);\r\n            const rect = option.getBoundingClientRect();\r\n\r\n            if (style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && rect.height > 0) {\r\n              visibleCount++;\r\n            }\r\n          });\r\n\r\n          const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\r\n          if (optionsContainer) {\r\n            if (visibleCount === 0) {\r\n              optionsContainer.classList.add('show-no-results');\r\n            } else {\r\n              optionsContainer.classList.remove('show-no-results');\r\n            }\r\n          }\r\n        }, 200);\r\n      } else {\r\n        const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\r\n        if (optionsContainer) {\r\n          optionsContainer.classList.remove('show-no-results');\r\n        }\r\n      }\r\n    });\r\n  }, 150);\r\n\r\n  private handleSearchFocus(hasFocus: boolean) {\r\n    const wrapper = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper');\r\n    if (wrapper) {\r\n      if (hasFocus || this.searchTerm !== '') {\r\n        wrapper.classList.remove('active');\r\n      } else {\r\n        wrapper.classList.add('active');\r\n      }\r\n    }\r\n  }\r\n\r\n  positionDropdown() {\r\n    const wrapperRect = this.el.shadowRoot.querySelector('.ifx-multiselect-wrapper')?.getBoundingClientRect();\r\n    const spaceBelow = window.innerHeight - wrapperRect.bottom;\r\n    const spaceAbove = wrapperRect.top;\r\n\r\n    if ((spaceAbove > spaceBelow && wrapperRect.height > spaceBelow) || wrapperRect.bottom > window.innerHeight) {\r\n      this.dropdownFlipped = true;\r\n    } else {\r\n      this.dropdownFlipped = false;\r\n    }\r\n  }\r\n\r\n  //private pendingSelectionUpdate = false;\r\n  public updateSlotBasedSelections(emitEvent: boolean = false) {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    const selectedLeafOptions: Option[] = [];\r\n\r\n    allOptionElements.forEach((optionEl: any) => {\r\n      const instance = optionEl['__stencil_instance'];\r\n      if (instance && instance.selected && !instance.hasChildren) {\r\n        selectedLeafOptions.push({\r\n          value: instance.value,\r\n          selected: true,\r\n          disabled: instance.disabled,\r\n          label: instance.getTextContent() || instance.value,\r\n        });\r\n      }\r\n    });\r\n\r\n    this.persistentSelectedOptions = selectedLeafOptions;\r\n\r\n    if (emitEvent) {\r\n      this.ifxSelect.emit(this.persistentSelectedOptions);\r\n    }\r\n  }\r\n\r\n  private updateInitialParentStates() {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    const optionsByDepth = Array.from(allOptionElements)\r\n      .map(el => ({\r\n        element: el,\r\n        instance: (el as any)['__stencil_instance'],\r\n        depth: parseInt(el.getAttribute('data-level') || '0'),\r\n      }))\r\n      .filter(item => item.instance)\r\n      .sort((a, b) => b.depth - a.depth);\r\n\r\n    optionsByDepth.forEach(({ instance }) => {\r\n      if (instance.hasChildren) {\r\n        this.updateParentState(instance);\r\n      }\r\n    });\r\n  }\r\n\r\n  private updateParentState(parentInstance: any) {\r\n    const directChildren = Array.from(parentInstance.el.children as HTMLCollection)\r\n      .filter((child: Element) => child.tagName === 'IFX-MULTISELECT-OPTION')\r\n      .map(child => (child as any)['__stencil_instance'])\r\n      .filter(instance => instance !== null);\r\n\r\n    const selectedCount = directChildren.filter(child => child.selected).length;\r\n    const indeterminateCount = directChildren.filter(child => child.indeterminate).length;\r\n    const totalCount = directChildren.length;\r\n\r\n    if (selectedCount === totalCount && indeterminateCount === 0) {\r\n      parentInstance.selected = true;\r\n      parentInstance.indeterminate = false;\r\n    } else if (selectedCount === 0 && indeterminateCount === 0) {\r\n      parentInstance.selected = false;\r\n      parentInstance.indeterminate = false;\r\n    } else {\r\n      parentInstance.selected = false;\r\n      parentInstance.indeterminate = true;\r\n    }\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-multiselect', await framework);\r\n    }\r\n    setTimeout(() => {\r\n      this.positionDropdown();\r\n    }, 500);\r\n\r\n    this.el.addEventListener('ifx-option-changed', (event: CustomEvent) => {\r\n      const optionInstance = (event.target as any)?.__stencil_instance;\r\n      if (optionInstance && !optionInstance.hasChildren) {\r\n        this.updateSlotBasedSelections(true);\r\n      }\r\n    });\r\n\r\n    setTimeout(() => {\r\n      this.updateSlotBasedSelections(false);\r\n      this.updateInitialParentStates();\r\n    }, 100);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadInitialOptions();\r\n  }\r\n\r\n  @Watch('error')\r\n  updateInternalError() {\r\n    this.internalError = this.error;\r\n  }\r\n\r\n  @Watch('persistentSelectedOptions')\r\n  onSelectionChange(newValue: Option[], _: Option[]) {\r\n    const formData = new FormData();\r\n    newValue.forEach(option => formData.append(this.name, option.value));\r\n    //this.internals.setFormValue(formData);\r\n  }\r\n  collapseAll() {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    allOptionElements.forEach((optionEl: any) => {\r\n      const instance = optionEl['__stencil_instance'];\r\n      if (instance && instance.hasChildren) {\r\n        instance.isExpanded = false;\r\n      }\r\n    });\r\n  }\r\n\r\n  expandAll() {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    allOptionElements.forEach((optionEl: any) => {\r\n      const instance = optionEl['__stencil_instance'];\r\n      if (instance && instance.hasChildren) {\r\n        instance.isExpanded = true;\r\n      }\r\n    });\r\n  }\r\n\r\n  selectAll() {\r\n    this.resetSearch();\r\n\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n\r\n    allOptionElements.forEach((optionEl: any) => {\r\n      const instance = optionEl['__stencil_instance'];\r\n      if (instance) {\r\n        if (instance.hasChildren) {\r\n          instance.isExpanded = true;\r\n        } else {\r\n          instance.selected = true;\r\n        }\r\n      }\r\n    });\r\n\r\n    setTimeout(() => {\r\n      this.updateInitialParentStates();\r\n      this.updateSlotBasedSelections(false);\r\n      this.ifxSelect.emit(this.persistentSelectedOptions);\r\n    }, 0);\r\n  }\r\n\r\n  @Method()\r\n  async clearSelection() {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    allOptionElements.forEach((optionEl: any) => {\r\n      const instance = optionEl['__stencil_instance'];\r\n      if (instance) {\r\n        instance.selected = false;\r\n        instance.indeterminate = false;\r\n        if (instance.hasChildren) {\r\n          instance.isExpanded = false;\r\n        }\r\n      }\r\n    });\r\n\r\n    this.persistentSelectedOptions = [];\r\n\r\n    setTimeout(() => {\r\n      this.updateSlotBasedSelections(false);\r\n      this.ifxSelect.emit(this.persistentSelectedOptions);\r\n    }, 0);\r\n  }\r\n\r\n  handleDocumentClick = (event: Event) => {\r\n    const path = event.composedPath();\r\n    if (!path.includes(this.dropdownElement)) {\r\n      this.dropdownOpen = false;\r\n      document.removeEventListener('click', this.handleDocumentClick);\r\n      this.resetSearch();\r\n      this.ifxOpen.emit(this.dropdownOpen);\r\n    }\r\n  };\r\n\r\n  toggleDropdown() {\r\n    this.dropdownOpen = !this.dropdownOpen;\r\n    setTimeout(() => {\r\n      if (this.dropdownOpen) {\r\n        document.addEventListener('click', this.handleDocumentClick);\r\n      } else {\r\n        this.resetSearch();\r\n      }\r\n      this.ifxOpen.emit(this.dropdownOpen);\r\n    }, 0);\r\n  }\r\n\r\n  private resetSearch() {\r\n    this.searchTerm = '';\r\n\r\n    const searchField = this.el.shadowRoot.querySelector('ifx-search-field') as any;\r\n    if (searchField) {\r\n      searchField.value = '';\r\n    }\r\n\r\n    const optionsContainer = this.el.shadowRoot.querySelector('.ifx-multiselect-options');\r\n    if (optionsContainer) {\r\n      optionsContainer.classList.remove('has-search-filter');\r\n    }\r\n\r\n    const allOptions = this.el.querySelectorAll('ifx-multiselect-option');\r\n    allOptions.forEach(option => {\r\n      const searchEvent = new CustomEvent('ifx-search-filter', {\r\n        detail: { searchTerm: '', isActive: false },\r\n      });\r\n      option.dispatchEvent(searchEvent);\r\n    });\r\n  }\r\n\r\n  handleWrapperClick(event: MouseEvent) {\r\n    this.positionDropdown();\r\n\r\n    if (event.currentTarget === event.target) {\r\n      this.toggleDropdown();\r\n    }\r\n  }\r\n\r\n  handleKeyDown(event: KeyboardEvent) {\r\n    if (this.disabled) return;\r\n\r\n    // If dropdown is closed, only allow opening\r\n    if (!this.dropdownOpen) {\r\n      switch (event.code) {\r\n        case 'Enter':\r\n        case 'Space':\r\n        case 'ArrowDown':\r\n          event.preventDefault();\r\n          this.toggleDropdown();\r\n          break;\r\n      }\r\n      return;\r\n    }\r\n\r\n    // Dropdown is open - handle navigation and controls\r\n    switch (event.code) {\r\n      case 'Escape':\r\n        event.preventDefault();\r\n        this.toggleDropdown();\r\n        break;\r\n      case 'Enter':\r\n      case 'Space':\r\n        // Don't close dropdown when pressing space/enter in controls area\r\n        const target = event.target as HTMLElement;\r\n        if (!target.closest('.ifx-multiselect-dropdown-functions')) {\r\n          event.preventDefault();\r\n          this.toggleDropdown();\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n      case 'ArrowUp':\r\n        // Focus first/last option for navigation\r\n        event.preventDefault();\r\n        this.focusFirstOption();\r\n        break;\r\n    }\r\n  }\r\n\r\n  private focusFirstOption() {\r\n    const firstOption = this.el.querySelector('ifx-multiselect-option:not(.search-hidden)');\r\n    if (firstOption) {\r\n      const labelElement = firstOption.shadowRoot?.querySelector('.option-label') as HTMLElement;\r\n      labelElement?.focus();\r\n    }\r\n  }\r\n\r\n  private renderSelectAll() {\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    const leafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren);\r\n    const selectedLeafOptions = Array.from(allOptionElements).filter((el: any) => !el.hasChildren && el.selected);\r\n\r\n    const allSelected = leafOptions.length > 0 && selectedLeafOptions.length === leafOptions.length;\r\n\r\n    const toggleSelectAll = (event?: Event) => {\r\n      if (event) {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n      }\r\n\r\n      if (allSelected) {\r\n        this.clearSelection();\r\n      } else {\r\n        this.selectAll();\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div class=\"select-all-wrapper\">\r\n        <ifx-checkbox\r\n          id=\"selectAll\"\r\n          checked={allSelected}\r\n          size=\"s\"\r\n          aria-label={this.ariaSelectAllLabel}\r\n          onClick={toggleSelectAll}\r\n          onKeyDown={e => {\r\n            if (e.key === 'Enter' || e.key === ' ') {\r\n              e.preventDefault();\r\n              e.stopPropagation();\r\n              toggleSelectAll(e);\r\n            }\r\n          }}\r\n        >\r\n          {this.selectAllLabel}\r\n        </ifx-checkbox>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private renderNoResultsMessage() {\r\n    return (\r\n      <div class=\"ifx-multiselect-no-results\">\r\n        <div class=\"no-results-content\">\r\n          <span class=\"no-results-text\">{this.noResultsMessage}</span>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const selectedOptionsLabels = this.persistentSelectedOptions.map(option => (option as any).label || option.value).join(', ');\r\n\r\n    const hasSelections = this.persistentSelectedOptions.length > 0;\r\n\r\n    let isFlatMultiselect = false;\r\n    const allOptionElements = this.el.querySelectorAll('ifx-multiselect-option');\r\n    if (allOptionElements.length > 0) {\r\n      isFlatMultiselect = Array.from(allOptionElements).every(option => option.children.length === 0);\r\n    }\r\n\r\n    return (\r\n      <div class={`ifx-multiselect-container ${this.disabled && !this.error ? 'disabled' : ''}`} ref={el => (this.dropdownElement = el as HTMLElement)}>\r\n        {\r\n          <div class=\"ifx-label-wrapper\">\r\n            {this.label && (\r\n              <span class=\"wrapper-label\">\r\n                <span>{this.label}</span>\r\n                {this.required && <span class={`required ${this.error ? 'error' : ''}`}>*</span>}\r\n              </span>\r\n            )}\r\n          </div>\r\n        }\r\n        <div\r\n          class={`ifx-multiselect-wrapper\r\n        ${this.dropdownOpen ? 'active' : ''}\r\n        ${this.dropdownFlipped ? 'is-flipped' : ''}\r\n        ${this.internalError ? 'error' : ''}\r\n        ${this.disabled && !this.error ? 'disabled' : ''}`}\r\n          role=\"combobox\"\r\n          aria-label={this.ariaMultiSelectLabel}\r\n          aria-labelledby={this.ariaMultiSelectLabelledBy || undefined}\r\n          aria-describedby={this.ariaMultiSelectDescribedBy || undefined}\r\n          aria-expanded={this.dropdownOpen}\r\n          aria-haspopup=\"listbox\"\r\n          aria-disabled={this.disabled && !this.error}\r\n          tabindex=\"0\"\r\n          onClick={this.disabled && !this.error ? undefined : event => this.handleWrapperClick(event)}\r\n          onKeyDown={this.disabled && !this.error ? undefined : event => this.handleKeyDown(event)}\r\n        >\r\n          <div\r\n            class={`ifx-multiselect-input\r\n          ${hasSelections ? '' : 'placeholder'}\r\n          `}\r\n            onClick={this.disabled && !this.error ? undefined : () => this.toggleDropdown()}\r\n          >\r\n            {hasSelections ? selectedOptionsLabels : this.placeholder}\r\n          </div>\r\n          {this.dropdownOpen && (\r\n            <div class=\"ifx-multiselect-dropdown-menu\">\r\n              {(this.showSearch || this.showSelectAll || (this.showExpandCollapse && !isFlatMultiselect)) && (\r\n                <div class=\"ifx-multiselect-dropdown-functions\" onClick={e => e.stopPropagation()}>\r\n                  {this.showSearch && (\r\n                    <div class=\"ifx-multiselect-dropdown-search\">\r\n                      <ifx-search-field\r\n                        class=\"search-input\"\r\n                        placeholder={this.searchPlaceholder}\r\n                        size=\"s\"\r\n                        show-delete-icon=\"true\"\r\n                        aria-label={this.ariaSearchLabel}\r\n                        onKeyDown={e => {\r\n                          e.stopPropagation();\r\n                        }}\r\n                        onIfxInput={event => this.handleSearch(event.target)}\r\n                        onFocus={() => this.handleSearchFocus(true)}\r\n                        onBlur={() => this.handleSearchFocus(false)}\r\n                      ></ifx-search-field>\r\n                    </div>\r\n                  )}\r\n\r\n                  <div class=\"ifx-multiselect-dropdown-controls\">\r\n                    {this.showSelectAll && this.renderSelectAll()}\r\n                    {this.showExpandCollapse && !isFlatMultiselect && (\r\n                      <div class=\"expand-collapse-controls\">\r\n                        <span\r\n                          class=\"control-item\"\r\n                          role=\"button\"\r\n                          tabIndex={0}\r\n                          aria-label={this.ariaExpandAllLabel}\r\n                          onClick={e => {\r\n                            e.stopPropagation();\r\n                            this.expandAll();\r\n                          }}\r\n                          onKeyDown={e => {\r\n                            if (e.key === 'Enter' || e.key === ' ') {\r\n                              e.preventDefault();\r\n                              e.stopPropagation();\r\n                              this.expandAll();\r\n                            }\r\n                          }}\r\n                        >\r\n                          {this.expandLabel}\r\n                        </span>\r\n                        <span\r\n                          class=\"control-item\"\r\n                          role=\"button\"\r\n                          tabIndex={0}\r\n                          aria-label={this.ariaCollapseAllLabel}\r\n                          onClick={e => {\r\n                            e.stopPropagation();\r\n                            this.collapseAll();\r\n                          }}\r\n                          onKeyDown={e => {\r\n                            if (e.key === 'Enter' || e.key === ' ') {\r\n                              e.preventDefault();\r\n                              e.stopPropagation();\r\n                              this.collapseAll();\r\n                            }\r\n                          }}\r\n                        >\r\n                          {this.collapseLabel}\r\n                        </span>\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n              )}\r\n\r\n              <div class=\"ifx-multiselect-options\" role=\"listbox\" aria-multiselectable=\"true\">\r\n                <slot />\r\n                {this.searchTerm && this.showNoResultsMessage && this.renderNoResultsMessage()}\r\n              </div>\r\n            </div>\r\n          )}\r\n          <div class=\"ifx-multiselect-icon-container\">\r\n            {/* Clear Button - will show only if there's a selection */}\r\n            {this.persistentSelectedOptions.length > 0 && (\r\n              <div class={`ifx-clear-button ${!this.showClearButton ? 'hide' : ''}`} onClick={this.disabled && !this.error ? undefined : () => this.clearSelection()}>\r\n                <ifx-icon icon=\"cRemove16\"></ifx-icon>\r\n              </div>\r\n            )}\r\n            <div class=\"icon-wrapper-up\" onClick={this.disabled && !this.error ? undefined : () => this.toggleDropdown()}>\r\n              <ifx-icon key=\"icon-up\" icon=\"chevron-up-16\"></ifx-icon>\r\n            </div>\r\n            <div class=\"icon-wrapper-down\" onClick={this.disabled && !this.error ? undefined : () => this.toggleDropdown()}>\r\n              <ifx-icon key=\"icon-down\" icon=\"chevron-down-16\"></ifx-icon>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        {this.caption && <div class={`multi__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}>{this.caption}</div>}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-B61ip_5M.js.map

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

package/dist/components/p-B8O27fA1.js.map

@@ -1 +0,0 @@
-{"file":"p-B8O27fA1.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ukBAAukB;;MCUjlB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;AAEjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAmCnC;IA9BC,YAAY,CAAC,QAAgB,EAAE,QAAgB,EAAA;AAC7C,QAAA,IAAI,QAAQ,KAAK,QAAQ,EAAE;AACzB,YAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;;IAIjC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;IAIvD,MAAM,GAAA;QACJ,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EACN,eAAA,EAAA,IAAI,CAAC,aAAa,EACnB,eAAA,EAAA,GAAG,EACH,eAAA,EAAA,KAAK,gBACP,CAAA,UAAA,EAAa,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,KAAK,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EAClF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,CAAG,EAAA,IAAI,CAAC,aAAa,CAAG,CAAA,CAAA,EAAE,EAAA,EAC7D,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAE,EAAA,CAAA,EAAG,IAAI,CAAC,aAAa,CAAA,CAAA,CAAG,CAAQ,CACrH,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-bar/progress-bar.scss?tag=ifx-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n.progress-bar {\r\n  height: tokens.$ifxSize200;\r\n  bottom: 0;\r\n  right: 0;\r\n  top: 0;\r\n  left: 0;\r\n  display: flex;\r\n  height: tokens.$ifxSize250;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  width: 100%; // Ensure the bar itself can grow up to 100% width\r\n  overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar\r\n  background-color: tokens.$ifxColorEngineering200;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n  \r\n  \r\n  &.s {\r\n    height: 4px;\r\n  }\r\n\r\n  .label {\r\n    font-style: normal;\r\n    font-size: tokens.$ifxFontSizeS;\r\n    font-weight: 400;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorBaseWhite;\r\n  }\r\n  \r\n  .progress {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: fit-content;\r\n    height: 100%;\r\n    background-color: #0A8276;\r\n    transition: width 0.2s ease;\r\n  }\r\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-progress-bar',\r\n  styleUrl: 'progress-bar.scss',\r\n  shadow: true\r\n})\r\nexport class ProgressBar {\r\n  @Element() el: HTMLElement;\r\n  @Prop() value: number = 0;\r\n  @Prop() size: string;\r\n  @Prop() showLabel: boolean = false;\r\n\r\n  @State() internalValue: number;\r\n\r\n  @Watch('value')\r\n  valueChanged(newValue: number, oldValue: number) {\r\n    if (newValue !== oldValue) {\r\n      this.internalValue = newValue;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalValue = this.value;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-progress-bar', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"progressbar\"\r\n        aria-valuenow={this.internalValue}\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\"\r\n        aria-label={`Progress: ${this.internalValue}%`} class={`progress-bar ${this.size}`}>\r\n        <div class=\"progress\" style={{ width: `${this.internalValue}%` }}>\r\n          {this.showLabel && this.size !== \"s\" && this.internalValue !== 0 && <span class=\"label\">{`${this.internalValue}%`}</span>}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/p-BNfoBOb0.js.map

@@ -1 +0,0 @@
-{"file":"p-BNfoBOb0.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,mvBAAmvB;;MCWzvB,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAwClC;AArCC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC;;;IAIlD,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,gBACN,IAAI,CAAC,SAAS,IAAI,SAAS,EACrC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,CAAI,CAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAQ,CAAA,EACnG,IAAI,CAAC,OAAO,KAAK;eACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EAAI,IAAI,CAAC,YAAY,EAAE,CAAE,CAAA,EAAA,EACtF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EAC5F,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAA,CAAG,CAC3wC,CACA,CACF,CACJ;;IAIV,YAAY,GAAA;AACV,QAAA,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,CAAE,KAAK;AACxB,cAAE;cACA,EAAE;;IAGR,aAAa,GAAA;AACX,QAAA,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,CAAA,QAAA,EAAW,IAAI,CAAC,YAAY,EAAE,CAAA,CAAE,CAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n}\r\n\r\n.spinner {\r\n  position: relative;\r\n  width: tokens.$ifxSize500;\r\n  height: tokens.$ifxSize500;\r\n\r\n}\r\n\r\n.spinner.s {\r\n  width: tokens.$ifxSize300;\r\n  height: tokens.$ifxSize300;\r\n}\r\n\r\n.border {\r\n  box-sizing: border-box;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 4px solid transparent;\r\n  border-top-color: tokens.$ifxColorOcean500;\r\n  border-left-color: tokens.$ifxColorOcean500;\r\n  border-right-color: tokens.$ifxColorOcean500;\r\n  border-top-left-radius: 1px;\r\n  border-top-right-radius: 1px;\r\n  border-radius: 50%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  &.inverted {\r\n    border-top-color: tokens.$ifxColorBaseWhite;\r\n    border-left-color: tokens.$ifxColorBaseWhite;\r\n    border-right-color: tokens.$ifxColorBaseWhite;\r\n  }\r\n}\r\n\r\n.semiconductor {\r\n  width: 100%;\r\n  height: 100%;\r\n  animation: spin 2s linear infinite;\r\n\r\n  & svg {\r\n    fill: tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  &.inverted {\r\n    & svg {\r\n      fill: tokens.$ifxColorBaseWhite;\r\n    }\r\n  }\r\n\r\n  &.s {\r\n    & svg {\r\n      width: tokens.$ifxSize300;\r\n      height: tokens.$ifxSize300;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n@keyframes spin {\r\n  0% {\r\n    transform: rotate(0deg);\r\n  }\r\n\r\n  100% {\r\n    transform: rotate(360deg);\r\n  }\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n  tag: 'ifx-spinner',\r\n  styleUrl: 'spinner.scss',\r\n  shadow: true,\r\n})\r\nexport class Spinner {\r\n  @Element() el;\r\n  @Prop() size: string;\r\n  @Prop() variant: string;\r\n  @Prop() inverted: boolean = false;\r\n  @Prop() ariaLabel: string | null;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-spinner', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div role=\"status\" \r\n      aria-label={this.ariaLabel || \"Loading\"}\r\n        class={this.getClassNames()}>\r\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\r\n        {this.variant === 'brand'\r\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\r\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <g id=\"spinner/conductor\">\r\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\r\n              </g>\r\n            </svg>\r\n          </div>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  getSizeClass() {\r\n    return `${this.size}` === \"s\"\r\n      ? \"s\"\r\n      : \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'spinner',\r\n      this.size && `spinner ${this.getSizeClass()}`\r\n    );\r\n  }\r\n}\r\n"],"version":3}