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

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

package/dist/infineon-design-system-stencil/{p-f2c8c7a6.entry.js → p-8f90cc75.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as i,h as t,a as s}from"./p-PqnYwNKt.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const l=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}async componentDidLoad(){if(!n(this.el)){const e=a();r("ifx-slider",await e)}this.updateValuePercent()}render(){return t("div",{key:"7c2fc0dc17ed791dacc5560aac54f45349b4364a",class:"ifx-slider"},this.leftText&&t("span",{key:"be18da410feb261f214532e2701fa2ed1c44ac29",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"591213f83f1b1b812068f380876fe50d501ae5b1",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"Slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalValue,"aria-disabled":this.disabled?"true":"false"}):t("div",{class:"range-slider__wrapper","aria-label":this.ariaLabel,role:"group"},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Minimum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMinValue,"aria-disabled":this.disabled?"true":"false"}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Maximum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMaxValue,"aria-disabled":this.disabled?"true":"false"})),this.rightIcon&&t("ifx-icon",{key:"1ff17b510af51491c4f5bb56d52f8f717ba681ef",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"50ba85011187c8a8d630a40cb1c179243c8b9aa6",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"5311446f7bd5cd7c1ffc72f8c6f720a421983485",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};l.style=h;export{l as ifx_slider};
-//# sourceMappingURL=p-f2c8c7a6.entry.js.map
+import{r as e,c as i,h as t,a as s}from"./p-PqnYwNKt.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const l=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}async componentDidLoad(){if(!n(this.el)){const e=a();r("ifx-slider",await e)}this.updateValuePercent()}render(){return t("div",{key:"371eecfb8677f81cb93e946deccbcc545d922613",class:"ifx-slider"},this.leftText&&t("span",{key:"81ccf507ab7da0c579da14a7ebc5f5bc4610e5e2",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"ec459b65509eac4bffbffd3ad15fe37e629034eb",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"Slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalValue,"aria-disabled":this.disabled?"true":"false"}):t("div",{class:"range-slider__wrapper","aria-label":this.ariaLabel,role:"group"},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Minimum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMinValue,"aria-disabled":this.disabled?"true":"false"}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Maximum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMaxValue,"aria-disabled":this.disabled?"true":"false"})),this.rightIcon&&t("ifx-icon",{key:"f116ec8b8bb8d0693a70da5711c9a82004c1a61d",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"284fb5798405f3588bb7404f3311776450dc7b2b",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"f3ac03e40ed725055a2bf525d14ebed6931877a3",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};l.style=h;export{l as ifx_slider};
+//# sourceMappingURL=p-8f90cc75.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","IfxSlider","constructor","hostRef","this","min","max","step","disabled","showPercentage","type","internalValue","percentage","internalMinValue","internalMaxValue","valueChanged","newValue","updateValuePercent","minValueChanged","maxValueChanged","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","den","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","leftText","leftIcon","icon","ref","onInput","ariaLabel","role","onMouseUp","rightIcon","rightText"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.left-icon,\r\n.right-icon,\r\n.left-text,\r\n.right-text,\r\n.percentage-display {\r\n  font-size: tokens.$ifxFontSizeS;\r\n  color: tokens.$ifxColorEngineering500;\r\n  margin-left: tokens.$ifxSpace100;\r\n\r\n  &.disabled {\r\n    // Add the disabled state for the percentage display\r\n    color: tokens.$ifxColorEngineering300;\r\n  }\r\n}\r\n\r\n.left-icon,\r\n.left-text {\r\n  margin-right: tokens.$ifxSpace100;\r\n}\r\n\r\n.right-icon,\r\n.right-text,\r\n.percentage-display {\r\n  margin-left: tokens.$ifxSpace100;\r\n}\r\n\r\n\r\n.ifx-slider {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\r\n  border-radius: tokens.$ifxBorderRadiusRound;\r\n\r\n  input[type='range'] {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 4px;\r\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\r\n    outline: none;\r\n    cursor: pointer;\r\n    transition: 0.2s;\r\n\r\n    &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n    outline-offset: 4px;}\r\n\r\n    &::-moz-range-thumb {\r\n      width: tokens.$ifxSize250;\r\n      height: tokens.$ifxSize250;\r\n      border-radius: 50%;\r\n      background: tokens.$ifxColorOcean500;\r\n      cursor: pointer;\r\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n    }\r\n    \r\n\r\n    &:not(:disabled)::-webkit-slider-thumb {\r\n      -webkit-appearance: none;\r\n      width: 16px;\r\n      height: 16px;\r\n      background: tokens.$ifxColorOcean500;\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      transition: box-shadow 0.2s;\r\n\r\n      &:hover {\r\n        background: tokens.$ifxColorOcean600;\r\n      }\r\n\r\n      &:active {\r\n        background: tokens.$ifxColorOcean700;\r\n      }\r\n    }\r\n  }\r\n\r\n  input[type='range']:disabled {\r\n    background: tokens.$ifxColorEngineering300;\r\n    cursor: default;\r\n  }\r\n\r\n  input[type='range']:disabled::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    width: 16px;\r\n    height: 16px;\r\n    background: tokens.$ifxColorEngineering300;\r\n    border-radius: 50%;\r\n    cursor: default;\r\n  }\r\n  \r\n  & .range-slider__wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 4px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0px 2px;\r\n    \r\n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\r\n\r\n    &:has(input[type='range']:disabled) {\r\n      background: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    \r\n    @mixin thumb() {\r\n      -webkit-appearance: none;\r\n      border: none; \r\n      pointer-events: auto;\r\n      cursor: pointer;\r\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\r\n    }\r\n    \r\n    @mixin track() {\r\n      -webkit-appearance: none;\r\n      border: none;\r\n      background: none; \r\n      width: 100%;\r\n    }\r\n\r\n    input[type='range'] {\r\n      position: absolute;\r\n      pointer-events: none; \r\n      background: none;\r\n      \r\n      &:focus-visible {\r\n      outline: 2px solid tokens.$ifxColorOcean500;\r\n      outline-offset: 4px;}\r\n\r\n      &::-webkit-slider-thumb { @include thumb; }\r\n      &::-moz-range-thumb { @include thumb; }\r\n      &::-ms-thumb { @include thumb; }\r\n\r\n      &::-webkit-slider-runnable-track { @include track; }\r\n      &::-moz-range-track { @include track; }\r\n    }\r\n  }\r\n  \r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, 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-slider',\r\n  styleUrl: 'slider.scss',\r\n  shadow: true,\r\n})\r\nexport class IfxSlider {\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() step: number = 1;\r\n  @Prop() value: number;\r\n  @Prop() minValueHandle: number;\r\n  @Prop() maxValueHandle: number;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() showPercentage: boolean = false;\r\n  @Prop() leftIcon: string;\r\n  @Prop() rightIcon: string;\r\n  @Prop() leftText: string;\r\n  @Prop() rightText: string;\r\n  @Prop() type: 'single' | 'double' = 'single';\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalValue: number = 0;\r\n  @State() percentage: number = 0;\r\n  @State() internalMinValue: number = 0;\r\n  @State() internalMaxValue: number = 100;\r\n  @Event() ifxChange: EventEmitter;\r\n\r\n  @Element() el;\r\n\r\n  private inputRef: HTMLInputElement;\r\n  private minInputRef: HTMLInputElement;\r\n  private maxInputRef: HTMLInputElement;\r\n                                             \r\n  @Watch('value')\r\n  valueChanged(newValue: number) {\r\n    this.internalValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  @Watch('minValueHandle')\r\n  minValueChanged(newValue: number) {\r\n    this.internalMinValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n  \r\n  @Watch('maxValueHandle')\r\n  maxValueChanged(newValue: number) {\r\n    this.internalMaxValue = newValue;\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  getRangeSliderWrapper() {\r\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\r\n    return rangeSliderWrapper;\r\n  }\r\n\r\n  handleInputChangeOfRangeSlider(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\r\n      if(target.id === 'max-slider') {\r\n        this.maxInputRef.value = this.minInputRef.value;\r\n      }else{\r\n        this.minInputRef.value = this.maxInputRef.value;\r\n      }\r\n    }\r\n    if(target.id === 'max-slider') {\r\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\r\n    } else {\r\n      this.internalMinValue = parseFloat(this.minInputRef.value);\r\n    }\r\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\r\n    this.updateValuePercent();\r\n    this.updateZIndexIfRangeSlider(target.id)\r\n  }\r\n  \r\n  handleOnMouseLeaveOfRangeSlider(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const sliderWrapper = this.getRangeSliderWrapper();\r\n    if(target.id === 'max-slider') {\r\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\r\n    } else {\r\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\r\n    }\r\n  }\r\n\r\n  calculatePercentageValue() {\r\n    const num = (this.internalValue - this.min) * 1.0;\r\n    const den = this.max - this.min;\r\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\r\n  }\r\n\r\n  handleInputChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    this.internalValue = parseFloat(target.value);\r\n    this.ifxChange.emit(this.internalValue);\r\n    this.calculatePercentageValue();\r\n    this.updateValuePercent();\r\n  }\r\n\r\n  private roundToValidStep(value: number) {\r\n    const relativeValue = value - this.min;\r\n    const remainder = relativeValue % this.step;\r\n    if (remainder >= this.step / 2) {\r\n      return this.min + relativeValue + (this.step - remainder);\r\n    } else {\r\n      return this.min + relativeValue - remainder;\r\n    }\r\n  }\r\n\r\n  updateValuePercent() {\r\n    const den = this.max - this.min;\r\n    if(this.type === 'double'){\r\n      if (this.minInputRef) {\r\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\r\n        const minPercent = (num/den) * 100;\r\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\r\n      }\r\n\r\n      if (this.maxInputRef) {\r\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\r\n        const maxPercent = (num/den) * 100;\r\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\r\n      }\r\n\r\n    } else {\r\n\r\n      if (this.inputRef) {\r\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\r\n        const den = this.max - this.min;\r\n        const percentage = (num/den) * 100;\r\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\r\n      }\r\n\r\n    }\r\n  }  \r\n  \r\n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \r\n  // if min and max thumbs take the same value.\r\n  updateZIndexIfRangeSlider(targetId: string = '') {\r\n    if (targetId === 'max-slider') {\r\n      this.minInputRef.style.zIndex = '1';\r\n      this.maxInputRef.style.zIndex = '2';\r\n    } else {\r\n      this.minInputRef.style.zIndex = '2';\r\n      this.maxInputRef.style.zIndex = '1';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if(this.value === undefined) {\r\n      this.internalValue = (this.max-this.min) / 2;\r\n    } else {\r\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\r\n    }\r\n\r\n    this.calculatePercentageValue();\r\n\r\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\r\n    else this.internalMinValue = this.min;\r\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\r\n    else this.internalMaxValue = this.max;\r\n  }\r\n\r\n  async componentDidLoad() {\r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-slider', await framework)\r\n    }\r\n    this.updateValuePercent();\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"ifx-slider\">\r\n        {this.leftText && (\r\n          <span class={`left-text`}>\r\n            {this.leftText}\r\n          </span>\r\n        )}\r\n        {this.leftIcon && (\r\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\r\n        )}\r\n        {\r\n          (this.type !== 'double') ?\r\n            <input\r\n              type=\"range\"\r\n              min={this.min}\r\n              max={this.max}\r\n              step={this.step}\r\n              value={this.internalValue}\r\n              disabled={this.disabled}\r\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\r\n              onInput={(event) => this.handleInputChange(event)}\r\n              aria-label=\"Slider\"\r\n              aria-valuemin={this.min}\r\n              aria-valuemax={this.max}\r\n              aria-valuenow={this.internalValue}\r\n              aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              /> \r\n              :\r\n            <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\r\n              <input \r\n                id='min-slider'\r\n                type='range'\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.internalMinValue}\r\n                disabled={this.disabled}\r\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\r\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n                aria-label=\"Minimum value slider\"\r\n                aria-valuemin={this.min}\r\n                aria-valuemax={this.max}\r\n                aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              />\r\n              <input \r\n                id='max-slider'\r\n                type='range'\r\n                min={this.min}\r\n                max={this.max}\r\n                step={this.step}\r\n                value={this.internalMaxValue}\r\n                disabled={this.disabled}\r\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\r\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\r\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\r\n                aria-label=\"Maximum value slider\"\r\n                aria-valuemin={this.min}\r\n                aria-valuemax={this.max}\r\n                aria-valuenow={this.internalMaxValue}\r\n                aria-disabled={this.disabled ? \"true\" : \"false\"}\r\n              />\r\n            </div>\r\n        }\r\n        {this.rightIcon && (\r\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\r\n        )}\r\n        {this.rightText && (\r\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\r\n            {this.rightText}\r\n          </span>\r\n        )}\r\n\r\n        {this.showPercentage && (this.type !== \"double\") && (\r\n          <span\r\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\r\n          >\r\n            {this.percentage}%\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["setFilterCss","SetFilter","constructor","hostRef","this","type","filterValues","handleTextInputChange","event","target","value","ifxFilterSelect","emit","filterName","handleSingleSelectChange","detail","handleMultiselectOptionChange","map","option","label","render","optionsArray","options","JSON","parse","e","console","error","Array","isArray","h","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\n\n","// SetFilter.tsx\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-set-filter',\n  styleUrl: 'set-filter.scss',\n  shadow: true\n})\nexport class SetFilter {\n  @Prop() filterName: string;\n  @Prop() filterLabel: string;\n  @Prop() placeholder: string;\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\n  @Prop() options: any[] | string;\n  @State() filterValues: string[] = [];\n\n  @Event() ifxFilterSelect: EventEmitter;\n\n\n  handleTextInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const value = target.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n\n  }\n\n  handleSingleSelectChange(event: CustomEvent) {\n    const value = event.detail.value;\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\n  }\n\n\n  handleMultiselectOptionChange(event: CustomEvent) {\n    this.filterValues = event.detail.map(option => ({\n      label: option.value,\n      value: option.value\n    }));\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\n  }\n\n\n  render() {\n    let optionsArray = [];\n\n    // Parse options if it's a string\n    if (typeof this.options === 'string') {\n      try {\n        optionsArray = JSON.parse(this.options);\n      } catch (e) {\n        console.error('Failed to parse options:', e);\n        optionsArray = [];\n      }\n    } else if (Array.isArray(this.options)) {\n      optionsArray = this.options;\n    }\n\n    switch (this.type) {\n      case 'text':\n        return (\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\n            onIfxInput={event => this.handleTextInputChange(event)}\n          >{this.filterLabel}</ifx-text-field>\n        );\n      case 'single-select':\n        return (\n          <ifx-select\n            placeholder=\"true\"\n            search-enabled=\"true\"\n            search-placeholder-value=\"Search...\"\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\n            ifx-placeholder-value={this.placeholder}\n            ifx-label={this.filterLabel}\n            ifx-options={this.options}\n          ></ifx-select>\n        );\n      case 'multi-select':\n        return (\n          <ifx-multiselect\n            label={this.filterLabel}\n            placeholder={this.placeholder}\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\n          >\n            {optionsArray.map(option => (\n              <ifx-multiselect-option value={option.value || option}>\n                {option.label || option}\n              </ifx-multiselect-option>\n            ))}\n          </ifx-multiselect>\n        );\n      default:\n        return null;\n    }\n  }\n}\n\n"],"mappings":"kDAAA,MAAMA,EAAe,G,MCQRC,EAAS,MALtB,WAAAC,CAAAC,G,2DASUC,KAAIC,KAA8C,OAEjDD,KAAYE,aAAa,EA+EnC,CA1EC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,wBAAAS,CAAyBN,GACvB,MAAME,EAAQF,EAAMO,OAAOL,MAC3BN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,6BAAAW,CAA8BR,GAC5BJ,KAAKE,aAAeE,EAAMO,OAAOE,KAAIC,IAAM,CACzCC,MAAOD,EAAOR,MACdA,MAAOQ,EAAOR,UAEhBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAcF,KAAKE,aAAcD,KAAMD,KAAKC,M,CAIvG,MAAAe,GACE,IAAIC,EAAe,GAGnB,UAAWjB,KAAKkB,UAAY,SAAU,CACpC,IACED,EAAeE,KAAKC,MAAMpB,KAAKkB,Q,CAC/B,MAAOG,GACPC,QAAQC,MAAM,2BAA4BF,GAC1CJ,EAAe,E,OAEZ,GAAIO,MAAMC,QAAQzB,KAAKkB,SAAU,CACtCD,EAAejB,KAAKkB,O,CAGtB,OAAQlB,KAAKC,MACX,IAAK,OACH,OACEyB,EAAA,kBAAgBH,MAAO,MAAOI,SAAU,MAAOC,YAAa5B,KAAK4B,YAC/DC,WAAYzB,GAASJ,KAAKG,sBAAsBC,IAChDJ,KAAK8B,aAEX,IAAK,gBACH,OACEJ,EACE,cAAAE,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAa3B,GAASJ,KAAKU,yBAAyBN,GAAM,wBACnCJ,KAAK4B,YACjB,YAAA5B,KAAK8B,YAAW,cACd9B,KAAKkB,UAGxB,IAAK,eACH,OACEQ,EACE,mBAAAX,MAAOf,KAAK8B,YACZF,YAAa5B,KAAK4B,YAClBG,YAAa3B,GAASJ,KAAKY,8BAA8BR,IAExDa,EAAaJ,KAAIC,GAChBY,EAAwB,0BAAApB,MAAOQ,EAAOR,OAASQ,GAC5CA,EAAOC,OAASD,MAK3B,QACE,OAAO,K","ignoreList":[]}
+{"version":3,"names":["setFilterCss","SetFilter","constructor","hostRef","this","type","filterValues","handleTextInputChange","event","target","value","ifxFilterSelect","emit","filterName","handleSingleSelectChange","detail","handleMultiselectOptionChange","map","option","label","render","optionsArray","options","JSON","parse","e","console","error","Array","isArray","h","disabled","placeholder","onIfxInput","filterLabel","onIfxSelect"],"sources":["src/components/table-advanced-version/set-filter/set-filter.scss?tag=ifx-set-filter&encapsulation=shadow","src/components/table-advanced-version/set-filter/setFilter.tsx"],"sourcesContent":["/* set-filter.css */\r\n\r\n","// SetFilter.tsx\r\nimport { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-set-filter',\r\n  styleUrl: 'set-filter.scss',\r\n  shadow: true\r\n})\r\nexport class SetFilter {\r\n  @Prop() filterName: string;\r\n  @Prop() filterLabel: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() type: 'text' | 'single-select' | 'multi-select' = 'text';\r\n  @Prop() options: any[] | string;\r\n  @State() filterValues: string[] = [];\r\n\r\n  @Event() ifxFilterSelect: EventEmitter;\r\n\r\n\r\n  handleTextInputChange(event: Event) {\r\n    const target = event.target as HTMLInputElement;\r\n    const value = target.value;\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n\r\n  }\r\n\r\n  handleSingleSelectChange(event: CustomEvent) {\r\n    const value = event.detail.value;\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: [value], type: this.type }); // Emit an array for consistency with the multi select component\r\n  }\r\n\r\n\r\n  handleMultiselectOptionChange(event: CustomEvent) {\r\n    this.filterValues = event.detail.map(option => ({\r\n      label: option.value,\r\n      value: option.value\r\n    }));\r\n    this.ifxFilterSelect.emit({ filterName: this.filterName, filterValues: this.filterValues, type: this.type });\r\n  }\r\n\r\n\r\n  render() {\r\n    let optionsArray = [];\r\n\r\n    // Parse options if it's a string\r\n    if (typeof this.options === 'string') {\r\n      try {\r\n        optionsArray = JSON.parse(this.options);\r\n      } catch (e) {\r\n        console.error('Failed to parse options:', e);\r\n        optionsArray = [];\r\n      }\r\n    } else if (Array.isArray(this.options)) {\r\n      optionsArray = this.options;\r\n    }\r\n\r\n    switch (this.type) {\r\n      case 'text':\r\n        return (\r\n          <ifx-text-field error={false} disabled={false} placeholder={this.placeholder}\r\n            onIfxInput={event => this.handleTextInputChange(event)}\r\n          >{this.filterLabel}</ifx-text-field>\r\n        );\r\n      case 'single-select':\r\n        return (\r\n          <ifx-select\r\n            placeholder=\"true\"\r\n            search-enabled=\"true\"\r\n            search-placeholder-value=\"Search...\"\r\n            onIfxSelect={event => this.handleSingleSelectChange(event)}\r\n            ifx-placeholder-value={this.placeholder}\r\n            ifx-label={this.filterLabel}\r\n            ifx-options={this.options}\r\n          ></ifx-select>\r\n        );\r\n      case 'multi-select':\r\n        return (\r\n          <ifx-multiselect\r\n            label={this.filterLabel}\r\n            placeholder={this.placeholder}\r\n            onIfxSelect={event => this.handleMultiselectOptionChange(event)}\r\n          >\r\n            {optionsArray.map(option => (\r\n              <ifx-multiselect-option value={option.value || option}>\r\n                {option.label || option}\r\n              </ifx-multiselect-option>\r\n            ))}\r\n          </ifx-multiselect>\r\n        );\r\n      default:\r\n        return null;\r\n    }\r\n  }\r\n}\r\n\r\n"],"mappings":"kDAAA,MAAMA,EAAe,G,MCQRC,EAAS,MALtB,WAAAC,CAAAC,G,2DASUC,KAAIC,KAA8C,OAEjDD,KAAYE,aAAa,EA+EnC,CA1EC,qBAAAC,CAAsBC,GACpB,MAAMC,EAASD,EAAMC,OACrB,MAAMC,EAAQD,EAAOC,MACrBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,wBAAAS,CAAyBN,GACvB,MAAME,EAAQF,EAAMO,OAAOL,MAC3BN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAc,CAACI,GAAQL,KAAMD,KAAKC,M,CAI7F,6BAAAW,CAA8BR,GAC5BJ,KAAKE,aAAeE,EAAMO,OAAOE,KAAIC,IAAM,CACzCC,MAAOD,EAAOR,MACdA,MAAOQ,EAAOR,UAEhBN,KAAKO,gBAAgBC,KAAK,CAAEC,WAAYT,KAAKS,WAAYP,aAAcF,KAAKE,aAAcD,KAAMD,KAAKC,M,CAIvG,MAAAe,GACE,IAAIC,EAAe,GAGnB,UAAWjB,KAAKkB,UAAY,SAAU,CACpC,IACED,EAAeE,KAAKC,MAAMpB,KAAKkB,Q,CAC/B,MAAOG,GACPC,QAAQC,MAAM,2BAA4BF,GAC1CJ,EAAe,E,OAEZ,GAAIO,MAAMC,QAAQzB,KAAKkB,SAAU,CACtCD,EAAejB,KAAKkB,O,CAGtB,OAAQlB,KAAKC,MACX,IAAK,OACH,OACEyB,EAAA,kBAAgBH,MAAO,MAAOI,SAAU,MAAOC,YAAa5B,KAAK4B,YAC/DC,WAAYzB,GAASJ,KAAKG,sBAAsBC,IAChDJ,KAAK8B,aAEX,IAAK,gBACH,OACEJ,EACE,cAAAE,YAAY,OAAM,iBACH,OAAM,2BACI,YACzBG,YAAa3B,GAASJ,KAAKU,yBAAyBN,GAAM,wBACnCJ,KAAK4B,YACjB,YAAA5B,KAAK8B,YAAW,cACd9B,KAAKkB,UAGxB,IAAK,eACH,OACEQ,EACE,mBAAAX,MAAOf,KAAK8B,YACZF,YAAa5B,KAAK4B,YAClBG,YAAa3B,GAASJ,KAAKY,8BAA8BR,IAExDa,EAAaJ,KAAIC,GAChBY,EAAwB,0BAAApB,MAAOQ,EAAOR,OAASQ,GAC5CA,EAAOC,OAASD,MAK3B,QACE,OAAO,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-169f26ae.entry.js → p-9469fe88.entry.js}

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as s,a as e}from"./p-PqnYwNKt.js";import{c as n}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.action-list-item{display:flex;align-items:center;padding:8px 16px;background:#FFFFFF;transition:background-color 0.2s ease;cursor:default}.action-list-item--clickable{cursor:pointer}.action-list-item--clickable:hover:not(.action-list-item--disabled){background:#F7F7F7}.action-list-item--clickable:focus:not(.action-list-item--disabled){outline:none;background:#F7F7F7}.action-list-item--clickable:active:not(.action-list-item--disabled){background:#EEEDED}.action-list-item--disabled ::slotted(ifx-icon){color:#BFBBBB}.action-list-item--disabled ::slotted(*) ifx-icon{color:#BFBBBB}.action-list-item__leading{display:flex;align-items:center;justify-content:center;margin-right:16px;flex-shrink:0}.action-list-item__content{flex:1;min-width:0}.action-list-item__title{font-weight:600;font-size:1rem;line-height:1.5rem;color:#1D1D1D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list-item--disabled .action-list-item__title{color:#BFBBBB}.action-list-item__description{font-size:0.875rem;line-height:1.25rem;color:#575352;margin-top:2px}.action-list-item--disabled .action-list-item__description{color:#BFBBBB}.action-list-item__trailing{display:flex;align-items:center;justify-content:center;margin-left:16px;flex-shrink:0;gap:16px}';const l=class{constructor(s){i(this,s);this.ifxActionListItemClick=t(this,"ifxActionListItemClick",7);this.target="_self";this.disabled=false;this.handleMainClick=i=>{var t,s;if(this.disabled){i.preventDefault();i.stopPropagation();return}const e=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".action-list-item__leading");const n=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector(".action-list-item__trailing");if((e===null||e===void 0?void 0:e.contains(i.target))||(n===null||n===void 0?void 0:n.contains(i.target))){return}this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.handleLeadingClick=i=>{if(this.disabled){i.preventDefault();i.stopPropagation();return}const t=i.target;let s=t;while(s&&s!==this.host){if(this.isInteractiveElement(s)){i.stopPropagation();return}s=s.parentElement}i.stopPropagation();this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.handleTrailingClick=i=>{if(this.disabled){i.preventDefault();i.stopPropagation();return}const t=i.target;let s=t;while(s&&s!==this.host){if(this.isInteractiveElement(s)){i.stopPropagation();return}s=s.parentElement}i.stopPropagation();this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.isInteractiveElement=i=>{const t=i.tagName.toUpperCase();const s=["IFX-BUTTON","IFX-CHECKBOX","IFX-SWITCH"];return s.includes(t)};this.handleMainKeyDown=i=>{if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleMainClick(i)}};this.handleLeadingKeyDown=i=>{var t;if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();const s=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="leading"]');const e=(s===null||s===void 0?void 0:s.assignedElements())||[];const n=e.find((i=>this.isInteractiveElement(i)));if(n){n.focus();n.click()}}};this.handleTrailingKeyDown=i=>{var t;if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();const s=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="trailing"]');const e=(s===null||s===void 0?void 0:s.assignedElements())||[];const n=e.find((i=>this.isInteractiveElement(i)));if(n){n.focus();n.click()}}};this.updateSlotElementsDisabledState=()=>{const i=["ifx-checkbox","ifx-switch","ifx-button"];const t=this.host.querySelectorAll("[slot]");t.forEach((t=>{if(i.includes(t.tagName.toLowerCase())){this.setElementDisabledState(t)}i.forEach((i=>{const s=t.querySelectorAll(i);s.forEach((i=>{this.setElementDisabledState(i)}))}))}))};this.setElementDisabledState=i=>{if(this.disabled){i.setAttribute("disabled","true")}else{i.removeAttribute("disabled")}}}onDisabledChange(){this.updateSlotElementsDisabledState()}hasSlotContent(i){const t=this.host.querySelector(`[slot="${i}"]`);return!!t}componentDidLoad(){this.updateSlotElementsDisabledState()}componentDidUpdate(){this.updateSlotElementsDisabledState()}render(){const i=!this.disabled&&(this.href||this.value);const t=this.itemAriaLabel||`${this.itemTitle}${this.description?` - ${this.description}`:""}`;const e=this.hasSlotContent("leading");const o=this.hasSlotContent("trailing");return s("div",{key:"afc03036455ceb23a99e893ebdc36c052fcc2e64",class:n("action-list-item",this.disabled&&"action-list-item--disabled",i&&"action-list-item--clickable"),role:"listitem",tabIndex:i?0:-1,"aria-label":t,"aria-disabled":this.disabled?"true":undefined,onClick:this.handleMainClick,onKeyDown:this.handleMainKeyDown},e&&s("div",{key:"fbc09a625f124bdcf9137cde295838592925cc93",class:"action-list-item__leading",onClick:this.handleLeadingClick,onKeyDown:this.handleLeadingKeyDown},s("slot",{key:"915fb5467635e391ca3713def64ee031095e784d",name:"leading"})),s("div",{key:"589bd17dcd1f2de8ac7ac1c86db677c9b8eac35e",class:"action-list-item__content"},s("div",{key:"4b0ac3d7e1439cbe8682f9d14411acc4683b2ffe",class:"action-list-item__title"},this.itemTitle),this.description&&s("div",{key:"e5a0481505f637db1f7672fca5e1800a934d4270",class:"action-list-item__description"},this.description)),o&&s("div",{key:"c855aff75b5e1ddba37456c2225f46be3ae17429",class:"action-list-item__trailing",onClick:this.handleTrailingClick,onKeyDown:this.handleTrailingKeyDown},s("slot",{key:"68ff1e04f0bdf90894fa729619c7b7a6f896bad8",name:"trailing"})))}get host(){return e(this)}static get watchers(){return{disabled:["onDisabledChange"]}}};l.style=o;export{l as ifx_action_list_item};
-//# sourceMappingURL=p-169f26ae.entry.js.map
+import{r as i,c as t,h as s,a as e}from"./p-PqnYwNKt.js";import{c as n}from"./p-DMLRPGid.js";import"./p-B85MJLTf.js";const o=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.action-list-item{display:flex;align-items:center;padding:8px 16px;background:#FFFFFF;transition:background-color 0.2s ease;cursor:default}.action-list-item--clickable{cursor:pointer}.action-list-item--clickable:hover:not(.action-list-item--disabled){background:#F7F7F7}.action-list-item--clickable:focus:not(.action-list-item--disabled){outline:none;background:#F7F7F7}.action-list-item--clickable:active:not(.action-list-item--disabled){background:#EEEDED}.action-list-item--disabled ::slotted(ifx-icon){color:#BFBBBB}.action-list-item--disabled ::slotted(*) ifx-icon{color:#BFBBBB}.action-list-item__leading{display:flex;align-items:center;justify-content:center;margin-right:16px;flex-shrink:0}.action-list-item__content{flex:1;min-width:0}.action-list-item__title{font-weight:600;font-size:1rem;line-height:1.5rem;color:#1D1D1D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list-item--disabled .action-list-item__title{color:#BFBBBB}.action-list-item__description{font-size:0.875rem;line-height:1.25rem;color:#575352;margin-top:2px}.action-list-item--disabled .action-list-item__description{color:#BFBBBB}.action-list-item__trailing{display:flex;align-items:center;justify-content:center;margin-left:16px;flex-shrink:0;gap:16px}';const l=class{constructor(s){i(this,s);this.ifxActionListItemClick=t(this,"ifxActionListItemClick",7);this.target="_self";this.disabled=false;this.handleMainClick=i=>{var t,s;if(this.disabled){i.preventDefault();i.stopPropagation();return}const e=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector(".action-list-item__leading");const n=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector(".action-list-item__trailing");if((e===null||e===void 0?void 0:e.contains(i.target))||(n===null||n===void 0?void 0:n.contains(i.target))){return}this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.handleLeadingClick=i=>{if(this.disabled){i.preventDefault();i.stopPropagation();return}const t=i.target;let s=t;while(s&&s!==this.host){if(this.isInteractiveElement(s)){i.stopPropagation();return}s=s.parentElement}i.stopPropagation();this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.handleTrailingClick=i=>{if(this.disabled){i.preventDefault();i.stopPropagation();return}const t=i.target;let s=t;while(s&&s!==this.host){if(this.isInteractiveElement(s)){i.stopPropagation();return}s=s.parentElement}i.stopPropagation();this.ifxActionListItemClick.emit({value:this.value,href:this.href,target:this.target,component:this});if(this.href){if(this.target==="_blank"){window.open(this.href,this.target)}else{window.location.href=this.href}}};this.isInteractiveElement=i=>{const t=i.tagName.toUpperCase();const s=["IFX-BUTTON","IFX-CHECKBOX","IFX-SWITCH"];return s.includes(t)};this.handleMainKeyDown=i=>{if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();this.handleMainClick(i)}};this.handleLeadingKeyDown=i=>{var t;if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();const s=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="leading"]');const e=(s===null||s===void 0?void 0:s.assignedElements())||[];const n=e.find((i=>this.isInteractiveElement(i)));if(n){n.focus();n.click()}}};this.handleTrailingKeyDown=i=>{var t;if(this.disabled)return;if(i.key==="Enter"||i.key===" "){i.preventDefault();const s=(t=this.host.shadowRoot)===null||t===void 0?void 0:t.querySelector('slot[name="trailing"]');const e=(s===null||s===void 0?void 0:s.assignedElements())||[];const n=e.find((i=>this.isInteractiveElement(i)));if(n){n.focus();n.click()}}};this.updateSlotElementsDisabledState=()=>{const i=["ifx-checkbox","ifx-switch","ifx-button"];const t=this.host.querySelectorAll("[slot]");t.forEach((t=>{if(i.includes(t.tagName.toLowerCase())){this.setElementDisabledState(t)}i.forEach((i=>{const s=t.querySelectorAll(i);s.forEach((i=>{this.setElementDisabledState(i)}))}))}))};this.setElementDisabledState=i=>{if(this.disabled){i.setAttribute("disabled","true")}else{i.removeAttribute("disabled")}}}onDisabledChange(){this.updateSlotElementsDisabledState()}hasSlotContent(i){const t=this.host.querySelector(`[slot="${i}"]`);return!!t}componentDidLoad(){this.updateSlotElementsDisabledState()}componentDidUpdate(){this.updateSlotElementsDisabledState()}render(){const i=!this.disabled&&(this.href||this.value);const t=this.itemAriaLabel||`${this.itemTitle}${this.description?` - ${this.description}`:""}`;const e=this.hasSlotContent("leading");const o=this.hasSlotContent("trailing");return s("div",{key:"f4e53ea17c6bdea279fc96b5a954e9f8ef9b0911",class:n("action-list-item",this.disabled&&"action-list-item--disabled",i&&"action-list-item--clickable"),role:"listitem",tabIndex:i?0:-1,"aria-label":t,"aria-disabled":this.disabled?"true":undefined,onClick:this.handleMainClick,onKeyDown:this.handleMainKeyDown},e&&s("div",{key:"9c565d3a24234672ce42c264185aa970204b54c9",class:"action-list-item__leading",onClick:this.handleLeadingClick,onKeyDown:this.handleLeadingKeyDown},s("slot",{key:"965ed004d61c1b38366886ae5b4415c4ee67ab2c",name:"leading"})),s("div",{key:"1c21aaf97464d42c4ce3d4a9a76963ffe73d2121",class:"action-list-item__content"},s("div",{key:"e588b9d0adce7fbbfffeba338efe7c76b60fe3cb",class:"action-list-item__title"},this.itemTitle),this.description&&s("div",{key:"58aa81b18bf0f6070a18180be254fd42270c9a38",class:"action-list-item__description"},this.description)),o&&s("div",{key:"5d5ed9d8d936166beba4fc1790f3e69cd0adcefc",class:"action-list-item__trailing",onClick:this.handleTrailingClick,onKeyDown:this.handleTrailingKeyDown},s("slot",{key:"8a2c8f6f3dde321748310b2d2f0e1ec032c895a3",name:"trailing"})))}get host(){return e(this)}static get watchers(){return{disabled:["onDisabledChange"]}}};l.style=o;export{l as ifx_action_list_item};
+//# sourceMappingURL=p-9469fe88.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["actionListItemCss","ActionListItem","constructor","hostRef","this","target","disabled","handleMainClick","event","preventDefault","stopPropagation","leadingElement","_a","host","shadowRoot","querySelector","trailingElement","_b","contains","ifxActionListItemClick","emit","value","href","component","window","open","location","handleLeadingClick","currentElement","isInteractiveElement","parentElement","handleTrailingClick","element","tagName","toUpperCase","interactiveInfineonComponents","includes","handleMainKeyDown","key","handleLeadingKeyDown","leadingSlot","assignedElements","firstInteractive","find","el","focus","click","handleTrailingKeyDown","trailingSlot","updateSlotElementsDisabledState","interactiveComponents","slots","querySelectorAll","forEach","slottedElement","toLowerCase","setElementDisabledState","componentTag","nestedElements","nestedElement","setAttribute","removeAttribute","onDisabledChange","hasSlotContent","slotName","slot","componentDidLoad","componentDidUpdate","render","isClickable","ariaLabel","itemAriaLabel","itemTitle","description","hasLeadingContent","hasTrailingContent","h","class","classNames","role","tabIndex","undefined","onClick","onKeyDown","name"],"sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list-item {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  transition: background-color 0.2s ease;\r\n  cursor: default;\r\n\r\n  &--clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:focus:not(.action-list-item--disabled) {\r\n      outline: none;\r\n      //outline: 2px solid tokens.$ifxColorOcean500;\r\n      //outline-offset: -2px;\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:active:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering200;\r\n    }\r\n  }\r\n\r\n  &--disabled {\r\n    // Apply disabled color to all slotted icons\r\n    ::slotted(ifx-icon) {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    // Also apply to nested icons within slotted elements\r\n    ::slotted(*) {\r\n      ifx-icon {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__leading {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-right: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  &__content {\r\n    flex: 1;\r\n    min-width: 0; // Allows text to truncate\r\n  }\r\n\r\n  &__title {\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    // Truncate long titles\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__description {\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-top: tokens.$ifxSpace25;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__trailing {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n    gap: 16px;\r\n  }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\n\r\nexport interface ActionListItemClickEvent {\r\n  value?: string;\r\n  href?: string;\r\n  target?: string;\r\n  component?: ActionListItem;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-action-list-item',\r\n  styleUrl: 'action-list-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionListItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The title text displayed in the item\r\n   */\r\n  @Prop() itemTitle: string;\r\n\r\n  /**\r\n   * The description text displayed below the title\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Value associated with this item\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * URL to navigate to when item is clicked\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link navigation\r\n   * @default '_self'\r\n   */\r\n  @Prop() target: string = '_self';\r\n\r\n  /**\r\n   * Controls whether the item is disabled\r\n   * @default false\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() itemAriaLabel?: string;\r\n\r\n  /**\r\n   * Event emitted when the main item area is clicked\r\n   */\r\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\r\n\r\n  @Watch('disabled')\r\n  onDisabledChange() {\r\n    // Update interactive elements when disabled state changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private handleMainClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    // Check if clicked element is inside leading or trailing areas\r\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\r\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\r\n\r\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\r\n      return; // Don't trigger main click if clicking on leading/trailing areas\r\n    }\r\n\r\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate (Link mode)\r\n    // If no href is provided, only the event is emitted (Event mode)\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleLeadingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private isInteractiveElement = (element: HTMLElement): boolean => {\r\n    // Get the tag name, handling both custom elements and standard HTML\r\n    const tagName = element.tagName.toUpperCase();\r\n\r\n    // List of Infineon components that should block main event\r\n    const interactiveInfineonComponents = [\r\n      'IFX-BUTTON',\r\n      'IFX-CHECKBOX',\r\n      'IFX-SWITCH'\r\n    ];\r\n\r\n    // Check if it's an interactive Infineon component\r\n    return interactiveInfineonComponents.includes(tagName);\r\n  };\r\n\r\n  private handleMainKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      // Always trigger main action via keyboard, regardless of interactive elements\r\n      this.handleMainClick(event as any);\r\n    }\r\n  };\r\n\r\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\r\n      const assignedElements = leadingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\r\n      const assignedElements = trailingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private hasSlotContent(slotName: string): boolean {\r\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\r\n    return !!slot;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // Apply disabled state to interactive elements in slots\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Apply disabled state to interactive elements in slots when disabled prop changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private updateSlotElementsDisabledState = () => {\r\n    // Only handle interactive components that should be disabled\r\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\r\n\r\n    // Get all slotted elements\r\n    const slots = this.host.querySelectorAll('[slot]');\r\n\r\n    slots.forEach(slottedElement => {\r\n      // Check if the slotted element itself is an interactive component\r\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\r\n        this.setElementDisabledState(slottedElement as HTMLElement);\r\n      }\r\n\r\n      // Also check for nested interactive components within the slotted element\r\n      interactiveComponents.forEach(componentTag => {\r\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\r\n        nestedElements.forEach(nestedElement => {\r\n          this.setElementDisabledState(nestedElement as HTMLElement);\r\n        });\r\n      });\r\n    });\r\n  };\r\n\r\n  private setElementDisabledState = (element: HTMLElement) => {\r\n    if (this.disabled) {\r\n      element.setAttribute('disabled', 'true');\r\n    } else {\r\n      element.removeAttribute('disabled');\r\n    }\r\n  };  render() {\r\n    const isClickable = !this.disabled && (this.href || this.value);\r\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\r\n    const hasLeadingContent = this.hasSlotContent('leading');\r\n    const hasTrailingContent = this.hasSlotContent('trailing');\r\n\r\n    return (\r\n      <div\r\n        class={classNames(\r\n          'action-list-item',\r\n          this.disabled && 'action-list-item--disabled',\r\n          isClickable && 'action-list-item--clickable'\r\n        )}\r\n        role=\"listitem\"\r\n        tabIndex={isClickable ? 0 : -1}\r\n        aria-label={ariaLabel}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        onClick={this.handleMainClick}\r\n        onKeyDown={this.handleMainKeyDown}\r\n      >\r\n        {/* Leading Item Container - only render if content exists */}\r\n        {hasLeadingContent && (\r\n          <div\r\n            class=\"action-list-item__leading\"\r\n            onClick={this.handleLeadingClick}\r\n            onKeyDown={this.handleLeadingKeyDown}\r\n          >\r\n            <slot name=\"leading\"></slot>\r\n          </div>\r\n        )}\r\n\r\n        {/* Text Container */}\r\n        <div class=\"action-list-item__content\">\r\n          <div class=\"action-list-item__title\">\r\n            {this.itemTitle}\r\n          </div>\r\n          {this.description && (\r\n            <div class=\"action-list-item__description\">\r\n              {this.description}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Trailing Item Container - only render if content exists */}\r\n        {hasTrailingContent && (\r\n          <div\r\n            class=\"action-list-item__trailing\"\r\n            onClick={this.handleTrailingClick}\r\n            onKeyDown={this.handleTrailingKeyDown}\r\n          >\r\n            <slot name=\"trailing\"></slot>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-5b571505.entry.js → p-961940f9.entry.js}

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

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

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

package/dist/infineon-design-system-stencil/{p-ca870353.entry.js → p-962821bc.entry.js}

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

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

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

package/dist/infineon-design-system-stencil/{p-0fb9f42b.entry.js → p-99700497.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,d as o}from"./p-PqnYwNKt.js";const r=".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:var(--ifx-font-family);font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";const c=class{constructor(t){e(this,t);this.selected=false}render(){return t(o,{key:"844da0fa26ea37b9b53d16f70f982fc4daf3bed1"},t("button",{key:"ed5ec4be1c0cd301db79a078fe28f36967a55d85",class:"ifx-content-switcher-item"+(this.selected?" selected":"")},t("slot",{key:"6469c05327408244756a8af3f555c32bae66ace1"})))}};c.style=r;export{c as ifx_content_switcher_item};
-//# sourceMappingURL=p-0fb9f42b.entry.js.map
+import{r as e,h as t,d as o}from"./p-PqnYwNKt.js";const r=".ifx-content-switcher-item{all:unset;height:36px;box-sizing:border-box;border-radius:9999px;border:3px solid transparent;padding:7px 20px;font-family:var(--ifx-font-family);font-weight:600;font-size:14px;line-height:20px;display:flex;justify-content:center;align-items:center;gap:8px;background-color:transparent}.ifx-content-switcher-item.selected{color:#0A8276;background-color:#FFFFFF;border:3px solid #0A8276}.ifx-content-switcher-item:hover{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C;cursor:pointer}.ifx-content-switcher-item:active{color:#08665C;background-color:#FFFFFF;border:3px solid #06534B}.ifx-content-switcher-item:focus{color:#08665C;background-color:#FFFFFF;border:3px solid #08665C}";const i=class{constructor(t){e(this,t);this.selected=false}render(){return t(o,{key:"a9ba319dbf35fb563cc9f92dd19690e4f4de051d"},t("button",{key:"f607a140f0b8ffb5334ecde57f2e9771d8c689d4",class:"ifx-content-switcher-item"+(this.selected?" selected":"")},t("slot",{key:"d86e866d7a798a1c31182ebd902d164efa601a99"})))}};i.style=r;export{i as ifx_content_switcher_item};
+//# sourceMappingURL=p-99700497.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["contentSwitcherItemCss","ContentSwitcherItem","constructor","hostRef","this","selected","render","h","Host","key","class"],"sources":["src/components/content-switcher/content-switcher-item.scss?tag=ifx-content-switcher-item&encapsulation=shadow","src/components/content-switcher/content-switcher-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.ifx-content-switcher-item {\r\n    all: unset;\r\n\r\n    height: tokens.$ifxSize450;\r\n    box-sizing: border-box;\r\n    border-radius: tokens.$ifxBorderRadiusRound;\r\n    border: 3px solid transparent; // avoid jumping around\r\n    padding: 7px tokens.$ifxSize250;\r\n\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxSize175;\r\n    line-height: 20px;\r\n\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: tokens.$ifxSpace100;\r\n    background-color: transparent;\r\n\r\n    &.selected {\r\n        color: tokens.$ifxColorOcean500;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean600;\r\n        cursor: pointer;\r\n    }\r\n\r\n    &:active {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean700;\r\n    }\r\n\r\n    &:focus {\r\n        color: tokens.$ifxColorOcean600;\r\n        background-color: tokens.$ifxColorBaseWhite;\r\n        border: 3px solid tokens.$ifxColorOcean600;\r\n    }\r\n}\r\n","import { Component, h, Host, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-content-switcher-item',\r\n  styleUrl: './content-switcher-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ContentSwitcherItem {\r\n  @Prop() selected: boolean = false;\r\n  @Prop() value: string;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class={'ifx-content-switcher-item' + (this.selected ? ' selected' : '')}>\r\n          <slot></slot>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kDAAA,MAAMA,EAAyB,mtB,MCOlBC,EAAmB,MALhC,WAAAC,CAAAC,G,UAMUC,KAAQC,SAAY,KAY7B,CATC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,6BAA+BN,KAAKC,SAAW,YAAc,KAC1EE,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-dcd0af23.entry.js → p-9a3be43a.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,e as t,h as a,a as s}from"./p-PqnYwNKt.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"625f556bc421af7b7eb482e3516f7792b4c1ef71",class:"templates__container"},a("div",{key:"b4baf8ddbb682ed4c8fd68915d5ade140e0f599f",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"ae7543d14589bedb717e5798d2adfee5466cd7dc",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"62661f884e553205dcb63977c110b5cb8e174e53",class:"alert__wrapper"},a("ifx-alert",{key:"5a9d3c9ed711cb2f3ceebb1baebbc106899f7e1f",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-16"},"All fields are mandatory"))),a("h2",{key:"60fb42f545206c1e19b4d3762c9110270cbd391e",class:"templates__title"},"Choose your template"),a("div",{key:"4d4db713807c60c8cf3d10dde9d7b7b64304a2c5",class:"templates__wrapper"},a("ifx-template",{key:"edacabf2edfc49a2b23bf3a200ac559a6637336d",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"78eb56d6b2ae1f3f3020eaf36b99eeb5fd8b24ea",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};r.style=i;export{r as ifx_templates_ui};
-//# sourceMappingURL=p-dcd0af23.entry.js.map
+import{r as e,e as t,h as a,a as s}from"./p-PqnYwNKt.js";const i="*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";const r=class{constructor(a){e(this,a);this.tableTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);this.wizardTemplate=t(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`)}toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".templates__wrapper").querySelectorAll("ifx-template");t.forEach((t=>{t.toggleTemplate(e)}))}handleError(e){const t=this.el.shadowRoot.querySelector(".alert__wrapper");if(e.detail){t.classList.add("show")}else{t.classList.remove("show")}}filterTemplates(e){const t=this.el.shadowRoot.querySelector(".templates__title");const a=this.el.shadowRoot.querySelector(".back__btn-wrapper");if(e.detail){t.classList.add("hide");if(e.detail!=="details"){a.classList.add("show")}this.toggleTemplate(e.detail)}else{t.classList.remove("hide");a.classList.remove("show");this.toggleTemplate(null)}}closeAlert(){const e=this.el.shadowRoot.querySelector(".alert__wrapper");e.classList.remove("show")}render(){return a("div",{key:"fc3137911fc8299bc0f8ae74a84a71777a64eb50",class:"templates__container"},a("div",{key:"18e0c658819d3f54015ea225324cd84547b610fd",class:"back__btn-wrapper"},a("ifx-icon-button",{key:"38fe366203319f5d9389c47982859f5dd299c039",onClick:()=>this.filterTemplates(false),shape:"round",variant:"tertiary",icon:"arrow-left-16",target:"_blank",size:"m"}),a("div",{key:"d93ea47ff32322c18da387652e0a0588b11c9101",class:"alert__wrapper"},a("ifx-alert",{key:"3eb753278341ff0728c70a5fbc65a49b6b0e736f",onClick:()=>this.closeAlert(),"aria-live":"assertive",variant:"danger",icon:"c-info-16"},"All fields are mandatory"))),a("h2",{key:"785625a3790c5fe645793050429d735057bf5ff6",class:"templates__title"},"Choose your template"),a("div",{key:"e17b970189a89a47962ed5d4ba39c3e2bd9c3220",class:"templates__wrapper"},a("ifx-template",{key:"bc6435e17865c78c0daa837e3d5ecf1123eb121f",name:"template-01",thumbnail:this.tableTemplate}),a("ifx-template",{key:"5979431eb9d74b272c266258a57c7bc0e2fd4498",name:"template-02",thumbnail:this.wizardTemplate})))}static get assetsDirs(){return["assets"]}get el(){return s(this)}};r.style=i;export{r as ifx_templates_ui};
+//# sourceMappingURL=p-9a3be43a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["templatesUiCss","TemplatesUI","constructor","hostRef","this","tableTemplate","getAssetPath","wizardTemplate","toggleTemplate","currTemp","templates","el","shadowRoot","querySelector","querySelectorAll","forEach","template","handleError","e","alertWrapper","detail","classList","add","remove","filterTemplates","title","backBtn","closeAlert","render","h","key","class","onClick","shape","variant","icon","target","size","name","thumbnail"],"sources":["src/components/templates/templates-ui/templates-ui.scss?tag=ifx-templates-ui&encapsulation=shadow","src/components/templates/templates-ui/templates-ui.tsx"],"sourcesContent":["* { \r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.templates__container { \r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n\r\n  & .back__btn-wrapper { \r\n    display: none;\r\n    &.show { \r\n      display: flex;\r\n      justify-content: space-between;\r\n      width: 100%;\r\n    }\r\n\r\n    & .alert__wrapper { \r\n      display: none;\r\n\r\n      &.show { \r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n\r\n  & .templates__wrapper { \r\n    display: flex;\r\n    padding: 20px 0px;\r\n    gap: 20px;\r\n    // justify-content: space-evenly;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  & .templates__title { \r\n    &.hide { \r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n","import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-templates-ui',\r\n  styleUrl: 'templates-ui.scss',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\n\r\nexport class TemplatesUI {\r\n  @Element() el: HTMLElement;\r\n\r\n  private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\r\n  private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\r\n\r\n\r\n  toggleTemplate(currTemp) { \r\n    const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\r\n      templates.forEach((template) => { \r\n        template.toggleTemplate(currTemp)\r\n      })\r\n  }\r\n\r\n  @Listen('fieldError')\r\n  handleError(e) { \r\n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n    if(e.detail) { \r\n      alertWrapper.classList.add('show');\r\n    } else { \r\n      alertWrapper.classList.remove('show');\r\n    }\r\n  }\r\n\r\n  @Listen('toggleTemplates')\r\n  filterTemplates(e) {\r\n    const title = this.el.shadowRoot.querySelector('.templates__title');\r\n    const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\r\n    if(e.detail) { \r\n      title.classList.add('hide');\r\n      if(e.detail !== 'details') { \r\n        backBtn.classList.add('show');\r\n      }\r\n      this.toggleTemplate(e.detail)\r\n    } else { \r\n      title.classList.remove('hide');\r\n      backBtn.classList.remove('show');\r\n      this.toggleTemplate(null)\r\n    }\r\n  }\r\n\r\n  closeAlert() { \r\n    const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n    alertWrapper.classList.remove('show');\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='templates__container'>\r\n        <div class=\"back__btn-wrapper\">\r\n          <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\r\n          <div class=\"alert__wrapper\">\r\n            <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\r\n          </div>\r\n        </div>\r\n        <h2 class=\"templates__title\">Choose your template</h2>\r\n        <div class=\"templates__wrapper\">\r\n          <ifx-template name='template-01' thumbnail={this.tableTemplate} />\r\n          <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAiB,0iB,MCSVC,EAAW,MAPxB,WAAAC,CAAAC,G,UAUUC,KAAAC,cAAgBC,EAAa,+FAC7BF,KAAAG,eAAiBD,EAAa,+FA2DvC,CAxDC,cAAAE,CAAeC,GACb,MAAMC,EAAYN,KAAKO,GAAGC,WAAWC,cAAc,uBAAuBC,iBAAiB,gBACzFJ,EAAUK,SAASC,IACjBA,EAASR,eAAeC,EAAS,G,CAKvC,WAAAQ,CAAYC,GACV,MAAMC,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtD,GAAGK,EAAEE,OAAQ,CACXD,EAAaE,UAAUC,IAAI,O,KACtB,CACLH,EAAaE,UAAUE,OAAO,O,EAKlC,eAAAC,CAAgBN,GACd,MAAMO,EAAQrB,KAAKO,GAAGC,WAAWC,cAAc,qBAC/C,MAAMa,EAAUtB,KAAKO,GAAGC,WAAWC,cAAc,sBACjD,GAAGK,EAAEE,OAAQ,CACXK,EAAMJ,UAAUC,IAAI,QACpB,GAAGJ,EAAEE,SAAW,UAAW,CACzBM,EAAQL,UAAUC,IAAI,O,CAExBlB,KAAKI,eAAeU,EAAEE,O,KACjB,CACLK,EAAMJ,UAAUE,OAAO,QACvBG,EAAQL,UAAUE,OAAO,QACzBnB,KAAKI,eAAe,K,EAIxB,UAAAmB,GACE,MAAMR,EAAef,KAAKO,GAAGC,WAAWC,cAAc,mBACtDM,EAAaE,UAAUE,OAAO,O,CAGhC,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,qBACTF,EAAA,mBAAAC,IAAA,2CAAiBE,QAAS,IAAM5B,KAAKoB,gBAAgB,OAAQS,MAAM,QAAQC,QAAQ,WAAWC,KAAK,gBAAgBC,OAAO,SAASC,KAAK,MACxIR,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACTF,EAAW,aAAAC,IAAA,2CAAAE,QAAS,IAAM5B,KAAKuB,aAAY,YAAY,YAAYO,QAAQ,SAASC,KAAK,aAAgD,8BAG7IN,EAAI,MAAAC,IAAA,2CAAAC,MAAM,oBAA4C,wBACtDF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sBACTF,EAAc,gBAAAC,IAAA,2CAAAQ,KAAK,cAAcC,UAAWnC,KAAKC,gBACjDwB,EAAA,gBAAAC,IAAA,2CAAcQ,KAAK,cAAcC,UAAWnC,KAAKG,kB","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-9b06df76.entry.js → p-9f1ec0af.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,a as n}from"./p-PqnYwNKt.js";const i=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const a=class{constructor(t){e(this,t);this.showLabel=true;this.href="";this.imageUrl="";this.target="_self";this.alt="";this.userName="";this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.internalImageUrl={type:"",value:""};this.defaultProfileImage=`<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>`}handleOutsideClick(e){const t=e.composedPath();const n=this.getItemMenu();if(n){if(n.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}componentWillLoad(){this.setHref();this.setImage();const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}componentDidLoad(){this.setProfileGap();if(this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,t,n){e.classList[t](n);if(t==="contains"){return e.classList.contains(n)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let t;try{t=new URL(e)}catch(e){return false}return t.protocol==="http:"||t.protocol==="https:"}setImage(){if(this.imageUrl.toLowerCase().trim()===""){this.internalImageUrl={type:undefined,value:""}}else if(this.isValidHttpUrl(this.imageUrl)){this.internalImageUrl={type:"url",value:this.imageUrl}}else{this.internalImageUrl={type:"initials",value:this.imageUrl}}}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper");const t=this.el.shadowRoot.querySelector(".label__wrapper");const n=t.querySelector("slot");const i=n.assignedNodes();if(!i.length){this.handleClassList(e,"add","no-gap")}else{this.handleClassList(e,"remove","no-gap")}}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}itemHasNestedItems(){const e=this.el.shadowRoot.querySelector("ifx-navbar-item");if(e){return true}else{return false}}render(){return t("div",{key:"837122b11b554e17b60c07c303944a11b17a1eae",class:"container"},t("a",{key:"fde977c00f830b4a070edad21927393d5a79c117",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${!this.showLabel?"removeLabel":""} ${this.hasChildNavItems?"isParent":""}`},t("div",{key:"d4d190de3cf180bef8579d362a28519ddaa5fe3b",class:"inner__content-wrapper"},t("div",{key:"af01f7621f00de51db3ce906164c008778324ef5",class:`navbar__container-right-content-navigation-item-icon-wrapper`},this.userName.trim()!==""&&t("div",{key:"5df6af9768a82cc9265b252b36f7927c37b51539",class:"username__tooltip"},this.userName),this.internalImageUrl.type!=="initials"&&t("img",{key:"c9748a87892e169c9b472d21fbdb2d4957bb6bfb",src:this.internalImageUrl.type==="url"?this.internalImageUrl.value:`data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`,alt:this.alt}),this.internalImageUrl.type==="initials"&&t("div",{key:"604c7d5245f09daba9b19a890eaabbde87951d8b",class:"initials__wrapper"},t("span",{key:"2bc213ff673fc4af3d10da3caa99275ba38d276c",class:"initials"},this.internalImageUrl.value))),t("span",{key:"e073d5b6763d3b716980c598b78f0ed099fc4791",class:"label__wrapper"},t("slot",{key:"051f2cc80248b847944a03b04651786785d2fa4f",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"cefecb5bef10e87e336aa8c0620cb996da674ea3",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"ae09e66ce2dedcec664c7d1d8c351cfca2c6a647",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}get el(){return n(this)}};a.style=i;export{a as ifx_navbar_profile};
-//# sourceMappingURL=p-9b06df76.entry.js.map
+import{r as e,h as t,a as n}from"./p-PqnYwNKt.js";const i=':host(.hidden){display:none}.navbar__item{position:relative;display:flex;flex-direction:row;align-items:center;padding:0px 8px;flex:none;order:0;flex-grow:0;font-family:var(--ifx-font-family);text-decoration:none;font-weight:400;font-size:16px;color:#1D1D1D}.navbar__item.hide{display:none}.navbar__item.isParent{gap:8px}.navbar__item .navItemIconWrapper{transition:0.3s;display:flex}.navbar__item.open .navItemIconWrapper{transform:rotate(-180deg);transition:0.3s}.navbar__item:hover{color:#0A8276;cursor:pointer}.navbar__item:hover .username__tooltip{display:block}.navbar__item:hover .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{cursor:pointer;background-color:#08665C}.navbar__item.remove{display:none}.navbar__item.removeLabel .label__wrapper{display:none}.navbar__item .number__indicator-wrapper{position:relative;top:-11px}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:8px;flex:none;order:0;flex-grow:0}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .username__tooltip{display:none;position:absolute;top:35px;right:0;text-wrap:nowrap;padding:1px 5px;font-size:13px;font-family:"Source Sans 3";background-color:black;color:#fff;z-index:99}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper:hover .username__tooltip{display:block}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper{display:flex;width:24px;height:24px;justify-content:center;align-items:center;border-radius:100%;background-color:#0A8276}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper .initials__wrapper .initials{color:#FFF;text-align:center;font-family:"Source Sans 3";font-size:14px;font-style:normal;font-weight:600;line-height:20px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper img{width:24px;height:24px;border-radius:100%}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.removeWrapper{display:none}.navbar__item .navbar__container-right-content-navigation-item-icon-wrapper.hide{display:none}.container{position:relative}.container:focus{outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.container .sub__layer-back-button{display:none}.container .sub__layer-back-button.show{display:flex;justify-content:flex-start}.container .sub__layer-back-button.show .back__button-wrapper{display:flex;align-items:center;gap:8px;padding:8px 0 16px 0;color:#0A8276;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.container .sub__layer-back-button.show .back__button-wrapper span:hover,.container .sub__layer-back-button.show .back__button-wrapper ifx-icon:hover{cursor:pointer}.container.hide{display:none}.container .inner__content-wrapper{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px}.container .inner__content-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .navbar__container-right-content-navigation-item-icon-wrapper.no-gap{gap:0px}.container .inner__content-wrapper .number__indicator-wrapper{position:relative;top:-11px}.navbar-menu{position:absolute;display:none;list-style-type:none;visibility:visible;flex-direction:column;width:224px;min-width:224px;background:#FFFFFF;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;padding:8px 0px;font-family:var(--ifx-font-family)}.navbar-menu.open:not(.itemInMobileMenu){display:flex}.navbar-menu.itemInMobileMenu{display:none}.navbar-menu.right{left:100%;top:-40%}.navbar-menu.left{top:-40%;right:100%}.navbar-menu.rightSideItemMenu{left:initial;right:0px}.navbar__item.layer__item-parent{color:#1D1D1D;font-size:24px;font-style:normal;font-weight:600;line-height:32px;letter-spacing:-0.24px;cursor:initial}.navbar__item.layer__item-parent .navbar__container-right-content-navigation-item-icon-wrapper ifx-icon svg{width:24px;height:24px}.navbar__item.sidebarMenuItem{justify-content:space-between;padding:0}.navbar__item.menuItem{text-decoration:none;color:#1D1D1D;display:flex;align-items:center;justify-content:space-between;padding:8px 16px;gap:8px;font-family:var(--ifx-font-family)}.navbar__item.menuItem.hide{display:none}.navbar__item.menuItem .label__wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.navbar__item.menuItem:hover{cursor:pointer;background-color:#EEEDED}.navbar__item.menuItem:active{background-color:#BFBBBB}.sub__layer-menu{padding:5px;display:none}.sub__layer-menu.remove__margin{margin:0;padding:0}.sub__layer-menu.open{display:block}.navbar__item.hide{display:none}.menuItemRightIconWrapper.hide{display:none}.navItemIconWrapper.hide{display:none}';const a=class{constructor(t){e(this,t);this.showLabel=true;this.href="";this.imageUrl="";this.target="_self";this.alt="";this.userName="";this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.internalImageUrl={type:"",value:""};this.defaultProfileImage=`<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect width="48" height="48" fill="#0A8276"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z" fill="white"/>\n</svg>`}handleOutsideClick(e){const t=e.composedPath();const n=this.getItemMenu();if(n){if(n.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}componentWillLoad(){this.setHref();this.setImage();const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}componentDidLoad(){this.setProfileGap();if(this.hasChildNavItems){const e=this.getNavbarItems();this.appendNavItemToMenu(e)}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}handleClassList(e,t,n){e.classList[t](n);if(t==="contains"){return e.classList.contains(n)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}relocateUsingSlot(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}appendNavItemToMenu(e){this.relocateUsingSlot(e)}isValidHttpUrl(e){let t;try{t=new URL(e)}catch(e){return false}return t.protocol==="http:"||t.protocol==="https:"}setImage(){if(this.imageUrl.toLowerCase().trim()===""){this.internalImageUrl={type:undefined,value:""}}else if(this.isValidHttpUrl(this.imageUrl)){this.internalImageUrl={type:"url",value:this.imageUrl}}else{this.internalImageUrl={type:"initials",value:this.imageUrl}}}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}setProfileGap(){const e=this.el.shadowRoot.querySelector(".inner__content-wrapper");const t=this.el.shadowRoot.querySelector(".label__wrapper");const n=t.querySelector("slot");const i=n.assignedNodes();if(!i.length){this.handleClassList(e,"add","no-gap")}else{this.handleClassList(e,"remove","no-gap")}}getItemMenu(){const e=this.el.shadowRoot.querySelector(".navbar-menu");return e}closeItemMenu(){const e=this.getItemMenu();const t=this.getNavBarItem();if(e){this.handleClassList(e,"remove","open");this.handleClassList(t,"remove","open")}}toggleItemMenu(){if(!this.internalHref){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenu();this.handleClassList(e,"add","right")}if(this.hasChildNavItems){const e=this.getItemMenu();const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}itemHasNestedItems(){const e=this.el.shadowRoot.querySelector("ifx-navbar-item");if(e){return true}else{return false}}render(){return t("div",{key:"09755c71c7e46d56a94447445c43a26c7afdea27",class:"container"},t("a",{key:"258b91863549bd58c304861c8690da5daaed02f4",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${!this.showLabel?"removeLabel":""} ${this.hasChildNavItems?"isParent":""}`},t("div",{key:"2eb0ed918c8768defe04ca1891d886110a80112b",class:"inner__content-wrapper"},t("div",{key:"a25a6900785380daa05e7dfd22d0371dfae1b916",class:`navbar__container-right-content-navigation-item-icon-wrapper`},this.userName.trim()!==""&&t("div",{key:"45b50379fa5ffd224d343609728931201361c27e",class:"username__tooltip"},this.userName),this.internalImageUrl.type!=="initials"&&t("img",{key:"d21aaf5d8673b0d15b8ff1c4aa35be96b7cd27dc",src:this.internalImageUrl.type==="url"?this.internalImageUrl.value:`data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`,alt:this.alt}),this.internalImageUrl.type==="initials"&&t("div",{key:"a4cc931179b662a90fa66e91bc42fbfbd609be04",class:"initials__wrapper"},t("span",{key:"be3e056ae6ca08228c90684bb693b052067ae9c0",class:"initials"},this.internalImageUrl.value))),t("span",{key:"abf45497fc5e740d068545d5772ff4fea7a5a6ac",class:"label__wrapper"},t("slot",{key:"178cdc5b7f2168ac27483e81055168a4373e96d3",onSlotchange:()=>this.setProfileGap()})))),this.hasChildNavItems&&t("ul",{key:"a937f2412c2cefe1be4c57467778a6bae664fb20",class:"navbar-menu rightSideItemMenu"}," ",t("slot",{key:"8856b0921c0309ad07cbc190a51c74bf8e7f057b",name:"first__layer"})," "))}static get assetsDirs(){return["assets"]}get el(){return n(this)}};a.style=i;export{a as ifx_navbar_profile};
+//# sourceMappingURL=p-9f1ec0af.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","NavbarProfile","constructor","hostRef","this","showLabel","href","imageUrl","target","alt","userName","internalHref","isMenuItem","hasChildNavItems","internalImageUrl","type","value","defaultProfileImage","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","componentWillLoad","setHref","setImage","sidebarItems","getNavbarItems","length","componentDidLoad","setProfileGap","navItems","appendNavItemToMenu","hideComponent","style","display","showComponent","handleClassList","className","querySelectorAll","getNavBarItem","navItem","shadowRoot","querySelector","relocateUsingSlot","forEach","item","setAttribute","isValidHttpUrl","string","url","URL","_","protocol","toLowerCase","trim","undefined","innerContentWrapper","labelWrapper","labelSlot","nodes","assignedNodes","menu","menuItem","toggleItemMenu","itemHasNestedItems","childNavItem","render","h","key","class","onClick","src","encodeURIComponent","onSlotchange","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-profile&encapsulation=shadow","src/components/navigation/navbar/navbar-profile.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host(.hidden) {\r\n  display: none;\r\n}\r\n\r\n.navbar__item {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 0px 8px;\r\n  flex: none;\r\n  order: 0;\r\n  flex-grow: 0;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  font-weight: 400;\r\n  font-size: 16px;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  \r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  &.isParent { \r\n    gap: 8px;\r\n  }\r\n\r\n  & .navItemIconWrapper { \r\n    transition: .3s;\r\n    display: flex;\r\n  }\r\n\r\n  &.open { \r\n    & .navItemIconWrapper { \r\n      transform: rotate(-180deg);\r\n      transition: .3s;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean500;\r\n    cursor: pointer;\r\n\r\n    & .username__tooltip { \r\n      display: block;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n      & .initials__wrapper { \r\n        cursor: pointer;\r\n        background-color: tokens.$ifxColorOcean600;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.remove {\r\n    display: none;\r\n  }\r\n\r\n  &.removeLabel {\r\n    & .label__wrapper {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  & .number__indicator-wrapper { \r\n    position: relative;\r\n    top: -11px;\r\n  }\r\n\r\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 0px;\r\n    gap: 8px;\r\n    flex: none;\r\n    order: 0;\r\n    flex-grow: 0;\r\n\r\n \r\n    & .username__tooltip { \r\n      display: none;\r\n      position: absolute;\r\n      top: 35px;\r\n      right: 0;\r\n      text-wrap: nowrap;\r\n      padding: 1px 5px;\r\n      font-size: 13px;\r\n      font-family: \"Source Sans 3\";\r\n      background-color: black;\r\n      color: #fff;\r\n      z-index: 99;\r\n    }\r\n\r\n    &:hover { \r\n      & .username__tooltip { \r\n        display: block;\r\n      }\r\n    }\r\n\r\n    & .initials__wrapper { \r\n      display: flex;\r\n      width: 24px;\r\n      height: 24px;\r\n      justify-content: center;\r\n      align-items: center;\r\n      border-radius: 100%;\r\n      background-color: tokens.$ifxColorOcean500;\r\n\r\n\r\n      & .initials { \r\n        color: #FFF;\r\n        text-align: center;\r\n        font-family: \"Source Sans 3\";\r\n        font-size: 14px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 20px; \r\n\r\n        -webkit-touch-callout: none;\r\n        -webkit-user-select: none;\r\n        -khtml-user-select: none;\r\n        -moz-user-select: none;\r\n        -ms-user-select: none;\r\n        user-select: none;\r\n      \r\n      }\r\n    }\r\n\r\n    & img { \r\n      width: 24px; \r\n      height: 24px;\r\n      border-radius: 100%;\r\n    }\r\n\r\n    &.removeWrapper {\r\n      display: none;\r\n    }\r\n\r\n    &.hide {\r\n      display: none;\r\n    }\r\n  }\r\n}\r\n\r\n.container { \r\n  position: relative;\r\n  \r\n       &:focus{\r\n    outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n  }\r\n\r\n  & .sub__layer-back-button { \r\n    display: none;\r\n    &.show { \r\n      display: flex;\r\n      justify-content: flex-start;\r\n\r\n      & .back__button-wrapper { \r\n        display: flex;\r\n        align-items: center;\r\n        gap: tokens.$ifxSpace100;\r\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\r\n        color: tokens.$ifxColorOcean500;\r\n        font-size: 16px;\r\n        font-style: normal;\r\n        font-weight: 600;\r\n        line-height: 24px;\r\n\r\n        & span, & ifx-icon { \r\n          &:hover { \r\n            cursor: pointer;\r\n          }\r\n        }\r\n\r\n      }\r\n    }\r\n  }\r\n\r\n  &.hide { \r\n    display: none;\r\n  }\r\n\r\n  & .inner__content-wrapper { \r\n    position: relative;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 8px;\r\n    &.no-gap { \r\n      gap: 0px;\r\n    }\r\n\r\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\r\n      &.no-gap { \r\n        gap: 0px;\r\n      }\r\n    }\r\n\r\n    & .number__indicator-wrapper { \r\n      position: relative;\r\n      top: -11px;\r\n    }\r\n\r\n  }\r\n}\r\n\r\n.navbar-menu  {\r\n  position: absolute;\r\n  display: none;\r\n  list-style-type: none;\r\n  visibility: visible;\r\n  flex-direction: column;\r\n  width: 224px;\r\n  min-width: 224px;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  padding: 8px 0px;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n\r\n  &.open:not(.itemInMobileMenu) {\r\n    display: flex;\r\n  }\r\n\r\n  &.itemInMobileMenu { \r\n    display: none;\r\n  }\r\n\r\n  &.right { \r\n    left: 100%;\r\n    top: -40%;\r\n  }\r\n\r\n  &.left { \r\n    top: -40%;\r\n    right: 100%;\r\n  }\r\n\r\n  &.rightSideItemMenu { \r\n    left: initial;\r\n    right: 0px;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n    &.layer__item-parent { \r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 24px;\r\n      font-style: normal;\r\n      font-weight: 600;\r\n      line-height: 32px; \r\n      letter-spacing: -0.24px;\r\n      cursor: initial;\r\n\r\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \r\n        & ifx-icon { \r\n          & svg { \r\n            width: 24px;\r\n            height: 24px;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n\r\n  &.sidebarMenuItem { \r\n    justify-content: space-between;\r\n    padding: 0;\r\n  }\r\n\r\n\r\n  &.menuItem {\r\n    text-decoration: none;\r\n    color: tokens.$ifxColorBaseBlack;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding: 8px 16px;\r\n    gap: 8px;\r\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  \r\n    &.hide {\r\n      display: none;\r\n    }\r\n  \r\n    & .label__wrapper {\r\n      color: tokens.$ifxColorBaseBlack;\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: 24px;\r\n    }\r\n  \r\n    &:hover {\r\n      cursor: pointer;\r\n      background-color: tokens.$ifxColorEngineering200;\r\n    }\r\n  \r\n    &:active {\r\n      background-color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n}\r\n\r\n.sub__layer-menu { \r\n  padding: 5px;\r\n  display: none;\r\n\r\n  &.remove__margin { \r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n \r\n  &.open { \r\n    display: block;\r\n  }\r\n}\r\n\r\n.navbar__item { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.menuItemRightIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n.navItemIconWrapper { \r\n  &.hide { \r\n    display: none;\r\n  }\r\n}\r\n\r\n","import { Component, h, Element, Prop, State, Listen, Method } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: 'ifx-navbar-profile',\r\n  styleUrl: 'navbar-item.scss',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\n\r\nexport class NavbarProfile {\r\n\r\n  @Element() el;\r\n  @Prop() showLabel: boolean = true;\r\n  @Prop() href: string = \"\"\r\n  @Prop() imageUrl: string = \"\"\r\n  @Prop() target: string = \"_self\";\r\n  @Prop() alt: string = \"\"\r\n  @Prop() userName: string = \"\";\r\n  @State() internalHref: string = \"\"\r\n  @State() isMenuItem: boolean = false;\r\n  @State() hasChildNavItems: boolean = false;\r\n  @State() internalImageUrl: any = {type: \"\", value: \"\"}\r\n \r\n  private defaultProfileImage = `<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<rect width=\"48\" height=\"48\" fill=\"#0A8276\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M24 14C21.7909 14 20 15.7909 20 18C20 20.2091 21.7909 22 24 22C26.2091 22 28 20.2091 28 18C28 15.7909 26.2091 14 24 14ZM18 18C18 14.6863 20.6863 12 24 12C27.3137 12 30 14.6863 30 18C30 21.3137 27.3137 24 24 24C20.6863 24 18 21.3137 18 18ZM16.5869 28.3984C18.2683 27.0179 20.7466 26 24 26C27.2541 26 29.7324 27.0209 31.4134 28.4024C33.0562 29.7526 34 31.5119 34 33V35C34 35.5523 33.5523 36 33 36H15C14.4477 36 14 35.5523 14 35V33C14 31.5074 14.9433 29.7479 16.5869 28.3984ZM17.8561 29.9441C16.5187 31.0421 16 32.2826 16 33V34H32V33C32 32.2881 31.4818 31.0474 30.1436 29.9476C28.8436 28.8791 26.8219 28 24 28C21.1774 28 19.1557 28.8771 17.8561 29.9441Z\" fill=\"white\"/>\r\n</svg>`\r\n\r\n  @Listen('mousedown', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    const path = event.composedPath();\r\n    const itemMenu = this.getItemMenu()\r\n    if(itemMenu) { \r\n      if(itemMenu.classList.contains('open')) { \r\n        if (!path.includes(this.el)) {\r\n          this.closeItemMenu();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.setHref()\r\n    this.setImage()\r\n    const sidebarItems = this.getNavbarItems();\r\n    if (sidebarItems.length !== 0) {\r\n      this.hasChildNavItems = true;\r\n    } else {\r\n      this.hasChildNavItems = false;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() { \r\n    this.setProfileGap()\r\n    if(this.hasChildNavItems) { \r\n      const navItems = this.getNavbarItems();\r\n      this.appendNavItemToMenu(navItems)\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async hideComponent() { \r\n    this.el.style.display = 'none';\r\n  }\r\n\r\n  @Method()\r\n  async showComponent() { \r\n    this.el.style.display = '';\r\n  }\r\n\r\n  handleClassList(el, type, className) {\r\n    el.classList[type](className)\r\n    if (type === 'contains') {\r\n      return el.classList.contains(className)\r\n    }\r\n  }\r\n\r\n  getNavbarItems() {\r\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\r\n    return navItems;\r\n  }\r\n  \r\n  getNavBarItem() { \r\n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\r\n    return navItem;\r\n  }\r\n\r\n  relocateUsingSlot(navItems) { \r\n    navItems.forEach(item => {\r\n     item.setAttribute('slot', 'first__layer')\r\n   })\r\n }\r\n\r\n  appendNavItemToMenu(navItems) { \r\n    this.relocateUsingSlot(navItems)\r\n  }\r\n\r\n  isValidHttpUrl(string) {\r\n    let url;\r\n    \r\n    try {\r\n      url = new URL(string);\r\n    } catch (_) {\r\n      return false;  \r\n    }\r\n  \r\n    return url.protocol === \"http:\" || url.protocol === \"https:\";\r\n  }\r\n\r\n  setImage() { \r\n    if (this.imageUrl.toLowerCase().trim() === \"\") {\r\n      this.internalImageUrl = {type: undefined, value: \"\"}\r\n    } else if(this.isValidHttpUrl(this.imageUrl)) {\r\n      this.internalImageUrl = { type: 'url', value: this.imageUrl}\r\n    } else { \r\n      this.internalImageUrl = { type: 'initials', value: this.imageUrl}\r\n    }\r\n  }\r\n\r\n  setHref() {\r\n    if (this.href.toLowerCase().trim() === \"\") {\r\n      this.internalHref = undefined;\r\n    } else this.internalHref = this.href;\r\n  }\r\n\r\n  setProfileGap() { \r\n    const innerContentWrapper = this.el.shadowRoot.querySelector('.inner__content-wrapper')\r\n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper')\r\n    const labelSlot = labelWrapper.querySelector('slot')\r\n    const nodes = labelSlot.assignedNodes();\r\n    if(!nodes.length) { \r\n      this.handleClassList(innerContentWrapper, 'add', 'no-gap')\r\n    } else { \r\n      this.handleClassList(innerContentWrapper, 'remove', 'no-gap')\r\n    }\r\n  }\r\n\r\n  getItemMenu() { \r\n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\r\n    return menu;\r\n  }\r\n\r\n  closeItemMenu() { \r\n    const itemMenu = this.getItemMenu()\r\n    const menuItem = this.getNavBarItem()\r\n    if(itemMenu) { \r\n      this.handleClassList(itemMenu, 'remove', 'open')\r\n      this.handleClassList(menuItem, 'remove', 'open')\r\n    }\r\n  }\r\n\r\n  toggleItemMenu() {\r\n    if(!this.internalHref) {     \r\n      if(this.isMenuItem && this.hasChildNavItems) { \r\n        const itemMenu = this.getItemMenu()\r\n        this.handleClassList(itemMenu, 'add', 'right')\r\n      }\r\n   \r\n      if(this.hasChildNavItems) { \r\n        const itemMenu = this.getItemMenu();\r\n        const menuItem = this.getNavBarItem()\r\n        this.handleClassList(itemMenu, 'toggle', 'open');\r\n        this.handleClassList(menuItem, 'toggle', 'open');\r\n      } \r\n    }\r\n  }\r\n\r\n  itemHasNestedItems() { \r\n    const childNavItem = this.el.shadowRoot.querySelector('ifx-navbar-item')\r\n    if(childNavItem) { \r\n      return true;\r\n    } else {\r\n      return false;\r\n    }\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"container\">\r\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${!this.showLabel ? 'removeLabel' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\r\n          <div class=\"inner__content-wrapper\">\r\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper`}>\r\n             {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>}\r\n\r\n             {this.internalImageUrl.type !== 'initials' && \r\n              <img src={ this.internalImageUrl.type === 'url' ? this.internalImageUrl.value : `data:image/svg+xml,${encodeURIComponent(this.defaultProfileImage)}`} alt={this.alt} />}\r\n\r\n              {this.internalImageUrl.type === 'initials' && \r\n              <div class=\"initials__wrapper\">\r\n                <span class=\"initials\">{this.internalImageUrl.value}</span>\r\n              </div>}\r\n              \r\n            </div>\r\n            <span class=\"label__wrapper\">\r\n              <slot onSlotchange={() => this.setProfileGap()} />\r\n            </span>\r\n          </div>\r\n          {/* {this.userName.trim() !== \"\" && <div class='username__tooltip'>{this.userName}</div>} */}\r\n        </a>\r\n        \r\n        {this.hasChildNavItems && <ul class='navbar-menu rightSideItemMenu'> <slot name=\"first__layer\" /> </ul>}\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"kDAAA,MAAMA,EAAgB,k1J,MCSTC,EAAa,MAP1B,WAAAC,CAAAC,G,UAUUC,KAASC,UAAY,KACrBD,KAAIE,KAAW,GACfF,KAAQG,SAAW,GACnBH,KAAMI,OAAW,QACjBJ,KAAGK,IAAW,GACdL,KAAQM,SAAW,GAClBN,KAAYO,aAAW,GACvBP,KAAUQ,WAAY,MACtBR,KAAgBS,iBAAY,MAC5BT,KAAgBU,iBAAQ,CAACC,KAAM,GAAIC,MAAO,IAE3CZ,KAAAa,oBAAsB,q2BAsL/B,CAhLC,kBAAAC,CAAmBC,GACjB,MAAMC,EAAOD,EAAME,eACnB,MAAMC,EAAWlB,KAAKmB,cACtB,GAAGD,EAAU,CACX,GAAGA,EAASE,UAAUC,SAAS,QAAS,CACtC,IAAKL,EAAKM,SAAStB,KAAKuB,IAAK,CAC3BvB,KAAKwB,e,IAMb,iBAAAC,GACEzB,KAAK0B,UACL1B,KAAK2B,WACL,MAAMC,EAAe5B,KAAK6B,iBAC1B,GAAID,EAAaE,SAAW,EAAG,CAC7B9B,KAAKS,iBAAmB,I,KACnB,CACLT,KAAKS,iBAAmB,K,EAI5B,gBAAAsB,GACE/B,KAAKgC,gBACL,GAAGhC,KAAKS,iBAAkB,CACxB,MAAMwB,EAAWjC,KAAK6B,iBACtB7B,KAAKkC,oBAAoBD,E,EAK7B,mBAAME,GACJnC,KAAKuB,GAAGa,MAAMC,QAAU,M,CAI1B,mBAAMC,GACJtC,KAAKuB,GAAGa,MAAMC,QAAU,E,CAG1B,eAAAE,CAAgBhB,EAAIZ,EAAM6B,GACxBjB,EAAGH,UAAUT,GAAM6B,GACnB,GAAI7B,IAAS,WAAY,CACvB,OAAOY,EAAGH,UAAUC,SAASmB,E,EAIjC,cAAAX,GACE,MAAMI,EAAWjC,KAAKuB,GAAGkB,iBAAiB,mBAC1C,OAAOR,C,CAGT,aAAAS,GACE,MAAMC,EAAU3C,KAAKuB,GAAGqB,WAAWC,cAAc,iBACjD,OAAOF,C,CAGT,iBAAAG,CAAkBb,GAChBA,EAASc,SAAQC,IAChBA,EAAKC,aAAa,OAAQ,eAAe,G,CAI5C,mBAAAf,CAAoBD,GAClBjC,KAAK8C,kBAAkBb,E,CAGzB,cAAAiB,CAAeC,GACb,IAAIC,EAEJ,IACEA,EAAM,IAAIC,IAAIF,E,CACd,MAAOG,GACP,OAAO,K,CAGT,OAAOF,EAAIG,WAAa,SAAWH,EAAIG,WAAa,Q,CAGtD,QAAA5B,GACE,GAAI3B,KAAKG,SAASqD,cAAcC,SAAW,GAAI,CAC7CzD,KAAKU,iBAAmB,CAACC,KAAM+C,UAAW9C,MAAO,G,MAC5C,GAAGZ,KAAKkD,eAAelD,KAAKG,UAAW,CAC5CH,KAAKU,iBAAmB,CAAEC,KAAM,MAAOC,MAAOZ,KAAKG,S,KAC9C,CACLH,KAAKU,iBAAmB,CAAEC,KAAM,WAAYC,MAAOZ,KAAKG,S,EAI5D,OAAAuB,GACE,GAAI1B,KAAKE,KAAKsD,cAAcC,SAAW,GAAI,CACzCzD,KAAKO,aAAemD,S,MACf1D,KAAKO,aAAeP,KAAKE,I,CAGlC,aAAA8B,GACE,MAAM2B,EAAsB3D,KAAKuB,GAAGqB,WAAWC,cAAc,2BAC7D,MAAMe,EAAe5D,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,MAAMgB,EAAYD,EAAaf,cAAc,QAC7C,MAAMiB,EAAQD,EAAUE,gBACxB,IAAID,EAAMhC,OAAQ,CAChB9B,KAAKuC,gBAAgBoB,EAAqB,MAAO,S,KAC5C,CACL3D,KAAKuC,gBAAgBoB,EAAqB,SAAU,S,EAIxD,WAAAxC,GACE,MAAM6C,EAAOhE,KAAKuB,GAAGqB,WAAWC,cAAc,gBAC9C,OAAOmB,C,CAGT,aAAAxC,GACE,MAAMN,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB,GAAGxB,EAAU,CACXlB,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,EAI7C,cAAAC,GACE,IAAIlE,KAAKO,aAAc,CACrB,GAAGP,KAAKQ,YAAcR,KAAKS,iBAAkB,CAC3C,MAAMS,EAAWlB,KAAKmB,cACtBnB,KAAKuC,gBAAgBrB,EAAU,MAAO,Q,CAGxC,GAAGlB,KAAKS,iBAAkB,CACxB,MAAMS,EAAWlB,KAAKmB,cACtB,MAAM8C,EAAWjE,KAAK0C,gBACtB1C,KAAKuC,gBAAgBrB,EAAU,SAAU,QACzClB,KAAKuC,gBAAgB0B,EAAU,SAAU,O,GAK/C,kBAAAE,GACE,MAAMC,EAAepE,KAAKuB,GAAGqB,WAAWC,cAAc,mBACtD,GAAGuB,EAAc,CACf,OAAO,I,KACF,CACL,OAAO,K,EAKX,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAG,KAAAC,IAAA,2CAAArE,KAAMF,KAAKO,aAAcH,OAAQJ,KAAKI,OAAQqE,QAAS,IAAMzE,KAAKkE,iBAAkBM,MAAU,iBAAiBxE,KAAKC,UAAY,cAAgB,MAAMD,KAAKS,iBAAmB,WAAa,MAC5L6D,EAAK,OAAAC,IAAA,2CAAAC,MAAM,0BACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAO,gEACVxE,KAAKM,SAASmD,SAAW,IAAMa,EAAK,OAAAC,IAAA,2CAAAC,MAAM,qBAAqBxE,KAAKM,UAEpEN,KAAKU,iBAAiBC,OAAS,YAC/B2D,EAAA,OAAAC,IAAA,2CAAKG,IAAM1E,KAAKU,iBAAiBC,OAAS,MAAQX,KAAKU,iBAAiBE,MAAQ,sBAAsB+D,mBAAmB3E,KAAKa,uBAAwBR,IAAKL,KAAKK,MAE/JL,KAAKU,iBAAiBC,OAAS,YAChC2D,EAAK,OAAAC,IAAA,2CAAAC,MAAM,qBACTF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAYxE,KAAKU,iBAAiBE,SAIlD0D,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBACVF,EAAA,QAAAC,IAAA,2CAAMK,aAAc,IAAM5E,KAAKgC,qBAMpChC,KAAKS,kBAAoB6D,EAAI,MAAAC,IAAA,2CAAAC,MAAM,iCAA+B,IAAEF,EAAM,QAAAC,IAAA,2CAAAM,KAAK,iBAAuB,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-9f51c51a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,a}from"./p-PqnYwNKt.js";import{i as t}from"./p-CmdmgBUp.js";const n='.container{display:flex;flex-direction:column;gap:10px}.alert__wrapper{margin-bottom:40px}.snippet__wrapper{display:flex;flex-direction:column;gap:5px;position:sticky;top:0;left:0;z-index:99;background-color:white}.html-wrapper{background:rgb(38, 38, 38);padding:20px;color:white;font-family:monospace}.html-wrapper button{position:absolute;right:0px;bottom:0px;background:rgba(0, 0, 0, 0.85);color:#C9CDCF;border:0 none;padding:4px 10px;font-size:0.75rem;font-family:"Nunito Sans";font-weight:700;border-top:1px solid rgba(255, 255, 255, 0.1);border-left:1px solid rgba(255, 255, 255, 0.1);margin-left:-1px;border-radius:4px 0 0 0;cursor:pointer}.html-wrapper .component-name{color:#A8FF60}.html-wrapper .attribute-name{color:rgb(150, 203, 254)}.html-wrapper .attribute-value{color:rgb(180, 116, 221)}.preview__container{box-sizing:border-box;display:flex;align-items:center;padding:2px;flex-wrap:wrap;gap:4px}.preview__container .no-results{width:100%;text-align:center}.preview__container .preview__container-item{display:flex;justify-content:center;align-items:center;border:1px solid #f1f1f1;padding:2px;width:50px;height:50px;position:relative}.preview__container .preview__container-item:active{border-color:#378375}.preview__container .preview__container-item:hover{cursor:pointer}.preview__container .preview__container-item.copied::after{z-index:50;content:"copied!";position:absolute;top:0;left:50px;background-color:#000;color:white;padding:3px;border-radius:4px}';const o=class{constructor(i){e(this,i);this.iconsArray=[];this.isCopied=false;this.copiedIcon=null;this.htmlTag='<ifx-icon icon="calendar-16"></ifx-icon>';this.iconName=`""`;this.searchTerm=""}handleCopiedText(){this.isCopied=true;setTimeout((()=>{this.isCopied=false}),2e3)}copyIconText(e){this.htmlTag=`<ifx-icon icon="${e}"></ifx-icon>`;this.iconName=`"${e}"`;this.copiedIcon=e}copyHtmlString(){const e=`<ifx-icon icon=${this.iconName}></ifx-icon>`;navigator.clipboard.writeText(e);this.handleCopiedText()}get filteredIcons(){const e=this.searchTerm.toLowerCase().trim();if(!e)return this.iconsArray;return this.iconsArray.filter((i=>i.toLowerCase().includes(e)))}getIconIndex(e){return this.iconsArray.indexOf(e)}handleIconFilter(){const e=this.el.shadowRoot.querySelector("#search__field");e.addEventListener("ifxInput",(e=>{this.searchTerm=e.detail}))}componentWillLoad(){this.iconsArray=Object.keys(t)}componentDidLoad(){this.handleIconFilter()}render(){return i("div",{key:"e666e3280c175252cb2ac5cde1169ea41bcb24d4",class:"container"},i("div",{key:"ac61e08dfaaa008b0637957af4ee656cf597fd41",class:"alert__wrapper"},i("ifx-notification",{key:"0d42e27cb1efe0e97765391071b197aa445d631e",icon:"c-check-16",variant:"neutral","link-text":"Figma icon library","link-href":"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0","link-target":"_blank"},"You can also find the UI icons in Figma for use in mockups.")),i("div",{key:"2618b897fa79c422a095dd9263332d28ebb4db75",class:"snippet__wrapper"},i("div",{key:"c75d8b81f0c3ff6c96565675112dbad049a8012a",class:"search__wrapper"},i("ifx-search-field",{key:"1081c41f8cdc5ad0470837599c9d172ff50b2c2c",id:"search__field",size:"m","show-delete-icon":"true",value:"",autocomplete:"on",placeholder:"Search icon"})),i("div",{key:"c9cc3a3aca0105fd296d2735644158bd1ec350ec",class:"html-wrapper"},i("span",{key:"fcaa0a2e86e4e5d0394d46af7239e8e284b9acf5",class:"html-tag"},"<"),i("span",{key:"16a3c1146793b366e875e36b1bb5b7e0495860ca",class:"component-name"},"ifx-icon"),i("span",{key:"7019361f770390a98f4bb1f1f4e028eb1a65c438",class:"attribute-name"}," icon"),"=",i("span",{key:"258e0b53956a9b280a49cbb74afb5b4816f048f6",class:"attribute-value"},this.iconName),i("span",{key:"c8d007dfd3e0261be88766463a5bf828a96ed7ae",class:"html-tag"},">"),i("span",{key:"891ca64df634ba0bcacf27fb5c4f7dc5dd39f0a2",class:"html-tag"},"</"),i("span",{key:"c605e35e086170d6cfe63634f1932fe8caf068f3",class:"component-name"},"ifx-icon"),i("span",{key:"9f3f6dd560bd4636368a1ad88daf01bf41b598fc",class:"html-tag"},">"),i("button",{key:"dbcb93abeb70b44f2d78e6221278b7da1845e18f",onClick:()=>this.copyHtmlString()},this.isCopied?"Copied":"Copy"))),i("div",{key:"c5e3d90f73296fa3d8fd65359945c4523a3e7e70",class:"preview__container"},this.filteredIcons.map((e=>i("div",{key:e,class:`preview__container-item ${this.isCopied&&this.copiedIcon===e?"copied":""}`,onClick:()=>this.copyIconText(e)},i("ifx-icon",{icon:e})))),this.filteredIcons.length===0&&i("div",{key:"4396ce4663eba4c06b11a72dd765df1a7bed84e0",class:"no-results"},'No icons found matching "',this.searchTerm,'"')))}get el(){return a(this)}};o.style=n;export{o as ifx_icons_preview};
+//# sourceMappingURL=p-9f51c51a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconsPreviewCss","IconsPreview","constructor","hostRef","this","iconsArray","isCopied","copiedIcon","htmlTag","iconName","searchTerm","handleCopiedText","setTimeout","copyIconText","icon","copyHtmlString","copiedTag","navigator","clipboard","writeText","filteredIcons","term","toLowerCase","trim","filter","includes","getIconIndex","indexOf","handleIconFilter","searchField","el","shadowRoot","querySelector","addEventListener","e","detail","componentWillLoad","Object","keys","icons","componentDidLoad","render","h","key","class","variant","id","size","value","autocomplete","placeholder","onClick","map","length"],"sources":["src/components/icons-preview/icons-preview.scss?tag=ifx-icons-preview&encapsulation=shadow","src/components/icons-preview/icons-preview.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n.container {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n.alert__wrapper { \r\n  margin-bottom: 40px;\r\n}\r\n\r\n.snippet__wrapper { \r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 5px;\r\n  position: sticky;\r\n  top: 0;\r\n  left: 0;\r\n  z-index: 99;\r\n  background-color: white;\r\n}\r\n\r\n.html-wrapper {\r\n  background: rgb(38, 38, 38);\r\n  padding: 20px;\r\n  color: white;\r\n  font-family: monospace;\r\n\r\n  & button {\r\n    position: absolute;\r\n    right: 0px;\r\n    bottom: 0px;\r\n    background: rgba(0, 0, 0, 0.85);\r\n    color: #C9CDCF;\r\n    border: 0 none;\r\n    padding: 4px 10px;\r\n    font-size: tokens.$ifxFontSizeXs;\r\n    font-family: \"Nunito Sans\";\r\n    font-weight: 700;\r\n    border-top: 1px solid rgba(255, 255, 255, .1);\r\n    border-left: 1px solid rgba(255, 255, 255, .1);\r\n    margin-left: -1px;\r\n    border-radius: 4px 0 0 0;\r\n    cursor: pointer;\r\n  }\r\n\r\n  & .component-name {\r\n    color: #A8FF60;\r\n  }\r\n\r\n  & .attribute-name {\r\n    color: rgb(150, 203, 254);\r\n  }\r\n\r\n  & .attribute-value {\r\n    color: rgb(180, 116, 221);\r\n  }\r\n\r\n\r\n}\r\n\r\n.preview__container {\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 2px;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n\r\n  & .no-results { \r\n    width: 100%;\r\n    text-align: center;\r\n  }\r\n\r\n  & .preview__container-item {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border: 1px solid #f1f1f1;\r\n    padding: 2px;\r\n    width: 50px;\r\n    height: 50px;\r\n    position: relative;\r\n\r\n    &:active {\r\n      border-color: #378375;\r\n    }\r\n\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n\r\n    &.copied {\r\n      &::after {\r\n        z-index: 50;\r\n        content: 'copied!';\r\n        position: absolute;\r\n        top: 0;\r\n        left: 50px;\r\n        background-color: #000;\r\n        color: white;\r\n        padding: 3px;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n  }\r\n}","import { Component, h, Element, State } from \"@stencil/core\";\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\n@Component({\r\n  tag: 'ifx-icons-preview',\r\n  styleUrl: './icons-preview.scss',\r\n  shadow: true\r\n})\r\n\r\nexport class IconsPreview {\r\n  @State() iconsArray: string[] = [];\r\n  @State() isCopied: boolean = false;\r\n  @State() copiedIndex: number;\r\n  @State() copiedIcon: string | null = null;\r\n  @State() htmlTag: string = '<ifx-icon icon=\"calendar-16\"></ifx-icon>';\r\n  @State() iconName: string = `\"\"`;\r\n  @State() searchTerm: string = '';\r\n  @Element() el;\r\n\r\n  handleCopiedText() { \r\n    this.isCopied = true;\r\n    setTimeout(() => {\r\n      this.isCopied = false\r\n    }, 2000);\r\n  }\r\n\r\n   copyIconText(icon: string) { \r\n    this.htmlTag = `<ifx-icon icon=\"${icon}\"></ifx-icon>`;\r\n    this.iconName = `\"${icon}\"`;\r\n    this.copiedIcon = icon;\r\n  }\r\n\r\n  copyHtmlString() { \r\n    const copiedTag = `<ifx-icon icon=${this.iconName}></ifx-icon>`;\r\n    navigator.clipboard.writeText(copiedTag);\r\n    this.handleCopiedText()\r\n  }\r\n\r\n    get filteredIcons() {\r\n    const term = this.searchTerm.toLowerCase().trim();\r\n    if (!term) return this.iconsArray;\r\n    \r\n    return this.iconsArray.filter(icon => \r\n      icon.toLowerCase().includes(term)\r\n    );\r\n  }\r\n\r\n  getIconIndex(icon: string): number {\r\n    return this.iconsArray.indexOf(icon);\r\n  }\r\n\r\n  handleIconFilter() { \r\n    const searchField = this.el.shadowRoot.querySelector('#search__field');\r\n    searchField.addEventListener('ifxInput', (e) => { \r\n      this.searchTerm = e.detail;\r\n    })\r\n  }\r\n\r\n  componentWillLoad() { \r\n    this.iconsArray = Object.keys(icons);\r\n  }\r\n\r\n  componentDidLoad() { \r\n    this.handleIconFilter()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class='container'>\r\n        <div class=\"alert__wrapper\">\r\n            <ifx-notification \r\n              icon=\"c-check-16\" \r\n              variant=\"neutral\" \r\n              link-text=\"Figma icon library\" \r\n              link-href=\"https://www.figma.com/design/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-UI-icon-library?node-id=13284-1289&p=f&t=SD6EdmXaSufsjPCv-0\"\r\n              link-target=\"_blank\">\r\n              You can also find the UI icons in Figma for use in mockups.\r\n            </ifx-notification>\r\n        </div>\r\n        <div class=\"snippet__wrapper\">\r\n          <div class=\"search__wrapper\">\r\n            <ifx-search-field id=\"search__field\" size=\"m\" show-delete-icon=\"true\" value=\"\" autocomplete=\"on\" placeholder=\"Search icon\"></ifx-search-field>\r\n          </div>\r\n          <div class='html-wrapper'>\r\n            <span class=\"html-tag\">&lt;</span>\r\n            <span class=\"component-name\">ifx-icon</span>\r\n            <span class=\"attribute-name\"> icon</span>=<span class=\"attribute-value\">{this.iconName}</span>\r\n            <span class=\"html-tag\">&gt;</span>\r\n            <span class=\"html-tag\">&lt;/</span>\r\n            <span class=\"component-name\">ifx-icon</span>\r\n            <span class=\"html-tag\">&gt;</span>\r\n            <button onClick={() => this.copyHtmlString()}>{this.isCopied ? 'Copied' : 'Copy'}</button>\r\n          </div>\r\n        </div>\r\n        <div class=\"preview__container\">\r\n       {this.filteredIcons.map((icon) => (\r\n            <div \r\n              key={icon}\r\n              class={`preview__container-item ${\r\n                this.isCopied && this.copiedIcon === icon ? 'copied' : \"\"\r\n              }`} \r\n              onClick={() => this.copyIconText(icon)}\r\n            >\r\n              <ifx-icon icon={icon}></ifx-icon>\r\n            </div>\r\n          ))}\r\n          {this.filteredIcons.length === 0 && (\r\n          <div class=\"no-results\">No icons found matching \"{this.searchTerm}\"</div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n}"],"mappings":"iFAAA,MAAMA,EAAkB,s8C,MCSXC,EAAY,MANzB,WAAAC,CAAAC,G,UAOWC,KAAUC,WAAa,GACvBD,KAAQE,SAAY,MAEpBF,KAAUG,WAAkB,KAC5BH,KAAOI,QAAW,2CAClBJ,KAAQK,SAAW,KACnBL,KAAUM,WAAW,EAiG/B,CA9FC,gBAAAC,GACEP,KAAKE,SAAW,KAChBM,YAAW,KACTR,KAAKE,SAAW,KAAK,GACpB,I,CAGJ,YAAAO,CAAaC,GACZV,KAAKI,QAAU,mBAAmBM,iBAClCV,KAAKK,SAAW,IAAIK,KACpBV,KAAKG,WAAaO,C,CAGpB,cAAAC,GACE,MAAMC,EAAY,kBAAkBZ,KAAKK,uBACzCQ,UAAUC,UAAUC,UAAUH,GAC9BZ,KAAKO,kB,CAGL,iBAAIS,GACJ,MAAMC,EAAOjB,KAAKM,WAAWY,cAAcC,OAC3C,IAAKF,EAAM,OAAOjB,KAAKC,WAEvB,OAAOD,KAAKC,WAAWmB,QAAOV,GAC5BA,EAAKQ,cAAcG,SAASJ,I,CAIhC,YAAAK,CAAaZ,GACX,OAAOV,KAAKC,WAAWsB,QAAQb,E,CAGjC,gBAAAc,GACE,MAAMC,EAAczB,KAAK0B,GAAGC,WAAWC,cAAc,kBACrDH,EAAYI,iBAAiB,YAAaC,IACxC9B,KAAKM,WAAawB,EAAEC,MAAM,G,CAI9B,iBAAAC,GACEhC,KAAKC,WAAagC,OAAOC,KAAKC,E,CAGhC,gBAAAC,GACEpC,KAAKwB,kB,CAGP,MAAAa,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,kBACPF,EAAA,oBAAAC,IAAA,2CACE7B,KAAK,aACL+B,QAAQ,UACE,iCACA,+IACE,wBAAQ,gEAI1BH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,oBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAM,mBACTF,EAAkB,oBAAAC,IAAA,2CAAAG,GAAG,gBAAgBC,KAAK,IAAqB,0BAAOC,MAAM,GAAGC,aAAa,KAAKC,YAAY,iBAE/GR,EAAK,OAAAC,IAAA,2CAAAC,MAAM,gBACTF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAAgC,YAC5CF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAA6B,aAACF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAAmBxC,KAAKK,UAC9EiC,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAuB,MACnCF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,kBAAgC,YAC5CF,EAAM,QAAAC,IAAA,2CAAAC,MAAM,YAAsB,KAClCF,EAAQ,UAAAC,IAAA,2CAAAQ,QAAS,IAAM/C,KAAKW,kBAAmBX,KAAKE,SAAW,SAAW,UAG9EoC,EAAK,OAAAC,IAAA,2CAAAC,MAAM,sBACXxC,KAAKgB,cAAcgC,KAAKtC,GACpB4B,EAAA,OACEC,IAAK7B,EACL8B,MAAO,2BACLxC,KAAKE,UAAYF,KAAKG,aAAeO,EAAO,SAAW,KAEzDqC,QAAS,IAAM/C,KAAKS,aAAaC,IAEjC4B,EAAA,YAAU5B,KAAMA,OAGnBV,KAAKgB,cAAciC,SAAW,GAC/BX,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cAAY,4BAA2BxC,KAAKM,WAAU,M","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"p-Bw2fh5LT.js","sources":["src/global/utils/dom-utils.ts"],"sourcesContent":["export const isNestedInIfxComponent = (el: HTMLElement): boolean => {\n  let parent: Node | ShadowRoot | null = el.parentNode;\n  \n  while (parent) {\n    if (parent instanceof ShadowRoot) {\n      parent = parent.host;\n      continue;\n    }\n    \n    if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {\n      return true;\n    }\n    \n    parent = parent.parentNode;\n  }\n  \n  return false;\n};"],"names":[],"mappings":"AAAa,MAAA,sBAAsB,GAAG,CAAC,EAAe,KAAa;AACjE,IAAA,IAAI,MAAM,GAA6B,EAAE,CAAC,UAAU;IAEpD,OAAO,MAAM,EAAE;AACb,QAAA,IAAI,MAAM,YAAY,UAAU,EAAE;AAChC,YAAA,MAAM,GAAG,MAAM,CAAC,IAAI;YACpB;;AAGF,QAAA,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;AACnF,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,GAAG,MAAM,CAAC,UAAU;;AAG5B,IAAA,OAAO,KAAK;AACd;;;;"}
+{"version":3,"file":"p-Bw2fh5LT.js","sources":["src/global/utils/dom-utils.ts"],"sourcesContent":["export const isNestedInIfxComponent = (el: HTMLElement): boolean => {\r\n  let parent: Node | ShadowRoot | null = el.parentNode;\r\n  \r\n  while (parent) {\r\n    if (parent instanceof ShadowRoot) {\r\n      parent = parent.host;\r\n      continue;\r\n    }\r\n    \r\n    if (parent instanceof HTMLElement && parent.tagName.toLowerCase().startsWith('ifx')) {\r\n      return true;\r\n    }\r\n    \r\n    parent = parent.parentNode;\r\n  }\r\n  \r\n  return false;\r\n};"],"names":[],"mappings":"AAAa,MAAA,sBAAsB,GAAG,CAAC,EAAe,KAAa;AACjE,IAAA,IAAI,MAAM,GAA6B,EAAE,CAAC,UAAU;IAEpD,OAAO,MAAM,EAAE;AACb,QAAA,IAAI,MAAM,YAAY,UAAU,EAAE;AAChC,YAAA,MAAM,GAAG,MAAM,CAAC,IAAI;YACpB;;AAGF,QAAA,IAAI,MAAM,YAAY,WAAW,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;AACnF,YAAA,OAAO,IAAI;;AAGb,QAAA,MAAM,GAAG,MAAM,CAAC,UAAU;;AAG5B,IAAA,OAAO,KAAK;AACd;;;;"}