@infineon/infineon-design-system-stencil 33.2.1--canary.1845.de39875295817275c37ebbbe9222be953c888b33.0 → 33.2.1--canary.1847.4fcda07df2b1c77b0b3888a0d5860cfb8b9783b8.0

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

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

package/dist/infineon-design-system-stencil/p-661a7c0b.entry.js

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

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

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

package/dist/infineon-design-system-stencil/p-66c73a3d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,g as n}from"./p-e6edf72d.js";const a=':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:"Source Sans 3";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}.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 .dot__indicator-wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276;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 .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:"Source Sans 3"}.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:"Source Sans 3"}.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 s=a;const o=class{constructor(i){e(this,i);this.ifxNavItem=t(this,"ifxNavItem",7);this.showLabel=true;this.icon="";this.href="";this.target="_self";this.hideOnMobile=true;this.internalHref="";this.isMenuItem=false;this.hasChildNavItems=false;this.isSidebarMenuItem=false;this.dotIndicator=false}handleOutsideClick(e){const t=e.composedPath();const i=this.getItemMenu();if(i){if(i.classList.contains("open")){if(!t.includes(this.el)){this.closeItemMenu()}}}}async hideComponent(){this.el.style.display="none"}async showComponent(){this.el.style.display=""}async toggleChildren(e){const t=this.getItemMenu();const i=this.getChevronDownIconWrapper();if(t){this.handleClassList(i,e,"hide");this.handleClassList(t,e,"itemInMobileMenu")}}async moveChildComponentsIntoSubLayerMenu(){const e=this.getItemMenu();if(e){const t=this.handleClassList(e,"contains","open");if(t){const e=this.getNavBarItem();const t=this.getSubLayerBackButton();this.handleClassList(e,"add","layer__item-parent");this.handleClassList(t,"add","show");this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}const t=this.el.querySelectorAll('[slot="first__layer"]');this.isSidebarMenuItem=true;for(let e=0;e<t.length;e++){t[e].setAttribute("slot","second__layer");t[e].moveChildComponentsIntoSubLayerMenu()}}getSubLayerBackButton(){const e=this.el.shadowRoot.querySelector(".sub__layer-back-button");return e}async toggleFirstLayerItem(e,t){const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.getSubLayerBackButton();this.handleClassList(a,[e],"show");this.handleClassList(i,[t],"hide");this.handleClassList(n,[t],"remove__margin")}openSubLayerMenu(){if(this.hasChildNavItems){const e=this.getSubLayerBackButton();const t=this.getRightArrowIcon();const i=this.getNavBarItem();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"add","show");this.handleClassList(t,"add","hide");this.handleClassList(i,"add","layer__item-parent");this.handleClassList(n,"add","open");if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"hideSecondLayer"});this.handleClassList(i,"remove","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"hideFirstLayer"})}}}async addMenuItemClass(){const e=this.getNavBarItem();this.handleClassList(e,"add","menuItem");const t=this.getRightArrowIcon();if(this.hasChildNavItems){this.handleClassList(t,"remove","hide")}}async moveChildComponentsBackIntoNavbar(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getSubLayerMenu();this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(i,"remove","remove__margin");this.ifxNavItem.emit({component:this.el,action:"show"});const n=this.el.querySelectorAll('[slot="second__layer"]');this.isSidebarMenuItem=false;this.showComponent();this.handleClassList(t,"remove","hide");for(let e=0;e<n.length;e++){n[e].setAttribute("slot","first__layer");n[e].moveChildComponentsBackIntoNavbar();n[e].addMenuItemClass();n[e].returnToFirstLayer()}}getRightArrowIcon(){const e=this.el.shadowRoot.querySelector(".menuItemRightIconWrapper");return e}getChevronDownIconWrapper(){const e=this.el.shadowRoot.querySelector(".navItemIconWrapper");return e}async returnToFirstLayer(){const e=this.getSubLayerBackButton();const t=this.getNavBarItem();const i=this.getRightArrowIcon();const n=this.getSubLayerMenu();const a=this.el.getAttribute("slot");this.handleClassList(e,"remove","show");this.handleClassList(t,"remove","layer__item-parent");this.handleClassList(n,"remove","open");if(this.hasChildNavItems){this.handleClassList(i,"remove","hide")}if(a.toLowerCase()==="second__layer"){this.ifxNavItem.emit({component:this.el,parent:this.el.parentElement,action:"returnToSecondLayer"});this.handleClassList(t,"add","menuItem")}else{this.ifxNavItem.emit({component:this.el,action:"return"})}}componentWillLoad(){this.setHref();this.checkIfItemIsNested();this.checkIfItemHasChildren();this.removeEmptyItem()}componentDidLoad(){this.handleItemGap();this.handleLabelWrapper();if(this.hasChildNavItems){const e=this.getNavbarItems();this.relocateItemsToFirstlayer(e)}}componentDidUpdate(){const e=this.getNavBarItem();const t=this.handleClassList(e,"contains","layer__item-parent");if(this.isSidebarMenuItem&&t){const e=this.getRightArrowIcon();this.handleClassList(e,"add","hide")}}async setMenuItemPosition(){if(this.isMenuItem&&this.hasChildNavItems){const e=this.getItemMenuPosition();if(e==="left"){this.itemPosition="left"}else if(e==="right"){this.itemPosition="right"}}}handleClassList(e,t,i){e.classList[t](i);if(t==="contains"){return e.classList.contains(i)}}getNavbarItems(){const e=this.el.querySelectorAll("ifx-navbar-item");return e}getNavBarItem(){const e=this.el.shadowRoot.querySelector(".navbar__item");return e}getSubLayerMenu(){const e=this.el.shadowRoot.querySelector(".sub__layer-menu");return e}relocateItemsToFirstlayer(e){e.forEach((e=>{e.setAttribute("slot","first__layer")}))}setHref(){if(this.href.toLowerCase().trim()===""){this.internalHref=undefined}else this.internalHref=this.href}checkIfItemIsNested(){const e=this.el.parentElement;if(e.tagName.toUpperCase()==="IFX-NAVBAR-ITEM"||e.tagName.toUpperCase()==="IFX-NAVBAR-PROFILE"){this.isMenuItem=true;return}else{this.isMenuItem=false}}checkIfItemHasChildren(){const e=this.getNavbarItems();if(e.length!==0){this.hasChildNavItems=true}else{this.hasChildNavItems=false}}async setItemSideSpecifications(){const e=this.el;const t=this.getItemMenu();const i=e.getAttribute("slot");if(i.toLowerCase().trim()==="right-item"){this.handleClassList(t,"add","rightSideItemMenu")}return true}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")}}getItemMenuPosition(){let e=this.el;while(e){if(e.tagName==="IFX-NAVBAR-PROFILE"||e.slot==="right-item"){return"left"}e=e.parentElement||e.getRootNode().host}return"right"}toggleItemMenu(){const e=this.el.getAttribute("slot");if(e.toLowerCase()==="mobile-menu-top"||e.toLowerCase()==="second__layer"){this.openSubLayerMenu()}if(!this.internalHref&&e.toLowerCase()!=="mobile-menu-top"&&e.toLowerCase()!=="second__layer"){const e=this.getItemMenu();if(this.hasChildNavItems){const t=this.getNavBarItem();this.handleClassList(e,"toggle","open");this.handleClassList(t,"toggle","open")}}}handleNestedLayerMenu(e){if(this.isMenuItem&&this.hasChildNavItems&&!this.isSidebarMenuItem){const t=this.getItemMenu();const i=this.getItemMenuPosition();if(e.type.toUpperCase()==="MOUSEENTER"){this.handleClassList(t,"add","open");if(i==="left"){this.handleClassList(t,"add","left")}else if(i==="right"){this.handleClassList(t,"add","right")}}if(e.type.toUpperCase()==="MOUSELEAVE"){this.handleClassList(t,"remove","open");if(i==="left"){this.handleClassList(t,"remove","left")}else if(i==="right"){this.handleClassList(t,"remove","right")}}}}handleLabelWrapper(){const e=this.el.shadowRoot.querySelector(".label__wrapper");const t=this.getNavBarItem();const i=e.querySelector("slot");if(!i.assignedNodes().length){t.classList.add("removeLabel")}else if(this.showLabel&&t.classList.contains("removeLabel")){t.classList.remove("removeLabel")}}handleItemGap(){const e=this.el.shadowRoot.querySelector(".navbar__item");const t=e.querySelector(".navbar__container-right-content-navigation-item-icon-wrapper");if(this.numberIndicator||this.dotIndicator){this.handleClassList(t,"add","no-gap")}else{this.handleClassList(t,"remove","no-gap")}}removeEmptyItem(){const e=this.el.shadowRoot.host;if(!this.showLabel&&!this.icon){this.handleClassList(e,"add","hidden")}}render(){return i("div",{key:"98a3a5584ce6970b42c1362533aeceb82009e91b",class:"container",onMouseLeave:e=>this.handleNestedLayerMenu(e),onMouseEnter:e=>this.handleNestedLayerMenu(e)},i("div",{key:"21eeccfc5a01721c14033b98c3ebe38522ba6ab9",class:"sub__layer-back-button"},i("div",{key:"08825ed5d7c6c3a1e0dd582a7e6528b201240959",class:"back__button-wrapper",onClick:()=>this.returnToFirstLayer()},i("ifx-icon",{key:"5763b65a915c8bf0d554e79cae52dabe8b810986",icon:"arrow-left-16"}),i("span",{key:"300ddc647f93f8ef78921ba67ce12233affe3cb4"},"Back"))),i("a",{key:"dab2a111f7170f50b30de5824cdcdd471899adfc",href:this.internalHref,target:this.target,onClick:()=>this.toggleItemMenu(),class:`navbar__item ${this.isSidebarMenuItem?"sidebarMenuItem":""} ${!this.showLabel?"removeLabel":""} ${this.isMenuItem?"menuItem":""} ${this.hasChildNavItems?"isParent":""}`},i("div",{key:"f2c6800d93b7607cf2952e63aa5ab34ecaae48be",class:"inner__content-wrapper"},i("div",{key:"fafd3d1472c2dfca443e655e1acd2dc697489621",class:`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon?"removeWrapper":""}`},this.icon&&i("ifx-icon",{key:"6f00f8d13482ab9ecd74db4de66f4367abcd255e",icon:this.icon}),this.icon&&!this.showLabel&&!isNaN(this.numberIndicator)&&i("div",{key:"f0d7d1be990c6583be95b5d65569381c85195bff",class:"number__indicator-wrapper"},i("ifx-number-indicator",{key:"d0139e514dadeefdc09f2ace9ba1bc754a42ecfc"},this.numberIndicator)),this.icon&&!this.showLabel&&!this.numberIndicator&&this.dotIndicator&&i("div",{key:"1d616918f156bc28a91c9e734b04df5facc45ee8",class:"dot__indicator-wrapper"})),this.itemPosition==="left"&&this.hasChildNavItems&&this.isMenuItem&&i("div",{key:"c23a19ba3b2b6fe3c5eb79a3a004c0d0107d682b",class:"menuItemLeftIconWrapper"},i("ifx-icon",{key:"373e318e386e976213fbd9592a37b7afa7488d7b",icon:"chevron-left-12"})),i("span",{key:"a4463d2ee853ca5731b276f14c9e6cbe3b7f8108",class:"label__wrapper"},i("slot",{key:"d682377d8e98e612bf2597e4b749c0ff18b10774"}))),this.showLabel&&this.numberIndicator&&!isNaN(this.numberIndicator)?i("div",{class:"number__indicator-wrapper"},i("ifx-number-indicator",null,this.numberIndicator)):"",this.showLabel&&!this.numberIndicator&&this.dotIndicator?i("div",{class:"dot__indicator-wrapper"}):"",i("div",{key:"0dade0d6eb4062bd0e31804ff501a93711dccd43",class:`navItemIconWrapper ${this.hasChildNavItems&&!this.isMenuItem&&!this.isSidebarMenuItem?"":"hide"}`},i("ifx-icon",{key:"8ec6bff717321e37a8e36ae8623f9d9cd5506ed0",icon:"chevron-down-12"})),i("div",{key:"6d75cd61b28fa198e55436d0b783725943c5d314",class:`menuItemRightIconWrapper ${this.itemPosition==="right"&&this.hasChildNavItems&&this.isMenuItem||this.isSidebarMenuItem&&this.hasChildNavItems?"":"hide"}`},i("ifx-icon",{key:"26c1d540a395b96c4d699bb050065f7e104d263b",icon:"chevron-right-12"}))),this.hasChildNavItems&&!this.isSidebarMenuItem&&i("ul",{key:"35c6a68f085200d3b1c3da2d994448b87201d7f9",class:"navbar-menu"}," ",i("slot",{key:"a7fff45b205883f0a7e83a1d2b98f52e40e3caa0",name:"first__layer"})," "),this.isSidebarMenuItem&&i("ul",{key:"1af92bb3811e89b576b7794e214d750bb7e340c2",class:"sub__layer-menu"}," ",i("slot",{key:"629fb9090d0382885b248ed1b98a260b969e3b43",name:"second__layer"})," "))}get el(){return n(this)}};o.style=s;export{o as ifx_navbar_item};
+//# sourceMappingURL=p-66c73a3d.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navbarItemCss","IfxNavbarItemStyle0","NavbarItem","constructor","hostRef","this","showLabel","icon","href","target","hideOnMobile","internalHref","isMenuItem","hasChildNavItems","isSidebarMenuItem","dotIndicator","handleOutsideClick","event","path","composedPath","itemMenu","getItemMenu","classList","contains","includes","el","closeItemMenu","hideComponent","style","display","showComponent","toggleChildren","action","arrowIcon","getChevronDownIconWrapper","handleClassList","moveChildComponentsIntoSubLayerMenu","subLayerMenu","subLayerMenuIsOpened","navbarItem","getNavBarItem","subLayerBackButton","getSubLayerBackButton","ifxNavItem","emit","component","navItems","querySelectorAll","i","length","setAttribute","sublayerBackButton","shadowRoot","querySelector","toggleFirstLayerItem","actionOne","actionTwo","secondLayerMenu","getSubLayerMenu","openSubLayerMenu","rightArrowIcon","getRightArrowIcon","slotName","getAttribute","toLowerCase","parent","parentElement","addMenuItemClass","moveChildComponentsBackIntoNavbar","returnToFirstLayer","menuItemRightIconWrapper","componentWillLoad","setHref","checkIfItemIsNested","checkIfItemHasChildren","removeEmptyItem","componentDidLoad","handleItemGap","handleLabelWrapper","getNavbarItems","relocateItemsToFirstlayer","componentDidUpdate","isLayerItemParent","setMenuItemPosition","menuPosition","getItemMenuPosition","itemPosition","type","className","navItem","forEach","item","trim","undefined","tagName","toUpperCase","sidebarItems","setItemSideSpecifications","menuItem","slotValue","menu","slot","getRootNode","host","toggleItemMenu","handleNestedLayerMenu","e","labelWrapper","assignedNodes","add","remove","innerContentWrapper","numberIndicatorWrapper","numberIndicator","hostElement","render","h","key","class","onMouseLeave","onMouseEnter","onClick","isNaN","name"],"sources":["src/components/navigation/navbar/navbar-item.scss?tag=ifx-navbar-item&encapsulation=shadow","src/components/navigation/navbar/navbar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host(.hidden) {\n  display: none;\n}\n\n.navbar__item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0px 8px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  font-family: tokens.$ifxFontFamilyBody;\n  text-decoration: none;\n  font-weight: 400;\n  font-size: 16px;\n  color: tokens.$ifxColorBaseBlack;\n\n  &.hide { \n    display: none;\n  }\n\n  &.isParent { \n    gap: 8px;\n  }\n\n  & .navItemIconWrapper { \n    transition: .3s;\n  }\n\n  &.open { \n    & .navItemIconWrapper { \n      transform: rotate(-180deg);\n      transition: .3s;\n    }\n  }\n\n  &:hover {\n    color: tokens.$ifxColorOcean500;\n    cursor: pointer;\n\n    & .username__tooltip { \n      display: block;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper { \n      & .initials__wrapper { \n        cursor: pointer;\n        background-color: tokens.$ifxColorOcean600;\n      }\n    }\n  }\n\n  &.remove {\n    display: none;\n  }\n\n  &.removeLabel {\n    & .label__wrapper {\n      display: none;\n    }\n  }\n\n  & .number__indicator-wrapper { \n    position: relative;\n    top: -11px;\n  }\n\n  & .dot__indicator-wrapper { \n    display: flex;\n    width: 8px;\n    height: 8px;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background-color: tokens.$ifxColorOcean500;\n    position: relative;\n    top: -11px;\n  }\n\n  & .navbar__container-right-content-navigation-item-icon-wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px;\n    gap: 8px;\n    flex: none;\n    order: 0;\n    flex-grow: 0;\n\n \n    & .username__tooltip { \n      display: none;\n      position: absolute;\n      top: 35px;\n      right: 0;\n      text-wrap: nowrap;\n      padding: 1px 5px;\n      font-size: 13px;\n      font-family: \"Source Sans 3\";\n      background-color: black;\n      color: #fff;\n      z-index: 99;\n    }\n\n    &:hover { \n      & .username__tooltip { \n        display: block;\n      }\n    }\n\n    & .initials__wrapper { \n      display: flex;\n      width: 24px;\n      height: 24px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100%;\n      background-color: tokens.$ifxColorOcean500;\n\n      & .initials { \n        color: #FFF;\n        text-align: center;\n        font-family: \"Source Sans 3\";\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 20px; \n\n        -webkit-touch-callout: none;\n        -webkit-user-select: none;\n        -khtml-user-select: none;\n        -moz-user-select: none;\n        -ms-user-select: none;\n        user-select: none;\n      \n      }\n    }\n\n    & img { \n      width: 24px; \n      height: 24px;\n      border-radius: 100%;\n    }\n\n    &.removeWrapper {\n      display: none;\n    }\n\n    &.hide {\n      display: none;\n    }\n  }\n}\n\n.container { \n  position: relative;\n\n  & .sub__layer-back-button { \n    display: none;\n    &.show { \n      display: flex;\n      justify-content: flex-start;\n\n      & .back__button-wrapper { \n        display: flex;\n        align-items: center;\n        gap: tokens.$ifxSpace100;\n        padding: tokens.$ifxSpace100 0 tokens.$ifxSpace200 0;\n        color: tokens.$ifxColorOcean500;\n        font-size: 16px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n\n        & span, & ifx-icon { \n          &:hover { \n            cursor: pointer;\n          }\n        }\n\n      }\n    }\n  }\n\n  &.hide { \n    display: none;\n  }\n\n  & .inner__content-wrapper { \n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 8px;\n    &.no-gap { \n      gap: 0px;\n    }\n\n    & .navbar__container-right-content-navigation-item-icon-wrapper {\n      &.no-gap { \n        gap: 0px;\n      }\n    }\n\n    & .number__indicator-wrapper { \n      position: relative;\n      top: -11px;\n    }\n\n  }\n}\n\n.navbar-menu  {\n  position: absolute;\n  display: none;\n  list-style-type: none;\n  visibility: visible;\n  flex-direction: column;\n  width: 224px;\n  min-width: 224px;\n  background: tokens.$ifxColorBaseWhite;\n  box-shadow: 0px 6px 9px 0px #1d1d1d1a;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  padding: 8px 0px;\n  font-family: tokens.$ifxFontFamilyBody;\n\n  &.open:not(.itemInMobileMenu) {\n    display: flex;\n  }\n\n  &.itemInMobileMenu { \n    display: none;\n  }\n\n  &.right { \n    left: 100%;\n    top: -40%;\n  }\n\n  &.left { \n    top: -40%;\n    right: 100%;\n  }\n\n  &.rightSideItemMenu { \n    left: initial;\n    right: 0px;\n  }\n}\n\n.navbar__item { \n    &.layer__item-parent { \n      color: tokens.$ifxColorBaseBlack;\n      font-size: 24px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 32px; \n      letter-spacing: -0.24px;\n      cursor: initial;\n\n      & .navbar__container-right-content-navigation-item-icon-wrapper { \n        & ifx-icon { \n          & svg { \n            width: 24px;\n            height: 24px;\n          }\n        }\n      }\n    }\n\n\n  &.sidebarMenuItem { \n    justify-content: space-between;\n    padding: 0;\n  }\n\n\n  &.menuItem {\n    text-decoration: none;\n    color: tokens.$ifxColorBaseBlack;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    gap: 8px;\n    font-family: tokens.$ifxFontFamilyBody;\n  \n    &.hide {\n      display: none;\n    }\n  \n    & .label__wrapper {\n      color: tokens.$ifxColorBaseBlack;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n  \n    &:hover {\n      cursor: pointer;\n      background-color: tokens.$ifxColorEngineering200;\n    }\n  \n    &:active {\n      background-color: tokens.$ifxColorEngineering300;\n    }\n  }\n}\n\n.sub__layer-menu { \n  padding: 5px;\n  display: none;\n\n  &.remove__margin { \n    margin: 0;\n    padding: 0;\n  }\n \n  &.open { \n    display: block;\n  }\n}\n\n.navbar__item { \n  &.hide { \n    display: none;\n  }\n}\n\n.menuItemRightIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n.navItemIconWrapper { \n  &.hide { \n    display: none;\n  }\n}\n\n","import { Component, h, Element, Prop, State, Listen, Method, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-navbar-item',\n  styleUrl: 'navbar-item.scss',\n  shadow: true\n})\n\nexport class NavbarItem {\n\n  @Element() el;\n  @Prop() showLabel: boolean = true;\n  @Prop() icon: string = \"\"\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\";\n  @Prop() hideOnMobile: boolean = true;\n  @State() internalHref: string = \"\"\n  @State() isMenuItem: boolean = false;\n  @State() hasChildNavItems: boolean = false;\n  @State() isSidebarMenuItem: boolean = false;\n  @State() itemPosition: string;\n  @Event() ifxNavItem: EventEmitter;\n  @Prop() numberIndicator: number;\n  @Prop() dotIndicator: boolean = false;\n \n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    const itemMenu = this.getItemMenu()\n    if(itemMenu) { \n      if(itemMenu.classList.contains('open')) { \n        if (!path.includes(this.el)) {\n          this.closeItemMenu();\n        }\n      }\n    }\n  }\n\n  @Method()\n  async hideComponent() { \n    this.el.style.display = 'none';\n  }\n\n  @Method()\n  async showComponent() { \n    this.el.style.display = '';\n  }\n\n  @Method()\n  async toggleChildren(action) { \n    const itemMenu = this.getItemMenu()\n    const arrowIcon = this.getChevronDownIconWrapper()\n    if(itemMenu) { \n      this.handleClassList(arrowIcon, action, 'hide')\n      this.handleClassList(itemMenu, action, 'itemInMobileMenu')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsIntoSubLayerMenu() { \n    const subLayerMenu = this.getItemMenu()\n    if(subLayerMenu) { \n      const subLayerMenuIsOpened = this.handleClassList(subLayerMenu, 'contains', 'open')\n      if(subLayerMenuIsOpened) { \n        const navbarItem = this.getNavBarItem()\n        const subLayerBackButton = this.getSubLayerBackButton()\n        this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n        this.handleClassList(subLayerBackButton, 'add', 'show')\n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n\n    const navItems = this.el.querySelectorAll('[slot=\"first__layer\"]')\n    this.isSidebarMenuItem = true;\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'second__layer')\n      navItems[i].moveChildComponentsIntoSubLayerMenu()\n    }\n  }\n\n  getSubLayerBackButton() { \n    const sublayerBackButton = this.el.shadowRoot.querySelector('.sub__layer-back-button')\n    return sublayerBackButton\n  }\n\n  @Method()\n  async toggleFirstLayerItem(actionOne, actionTwo) { \n   const navbarItem = this.getNavBarItem()\n   const secondLayerMenu = this.getSubLayerMenu()\n   const subLayerBackButton = this.getSubLayerBackButton()\n   this.handleClassList(subLayerBackButton, [actionOne], 'show')\n   this.handleClassList(navbarItem, [actionTwo], 'hide')\n   this.handleClassList(secondLayerMenu, [actionTwo], 'remove__margin')\n  }\n\n  openSubLayerMenu() { \n    if(this.hasChildNavItems) { \n      const subLayerBackButton = this.getSubLayerBackButton()\n      const rightArrowIcon = this.getRightArrowIcon()\n      const navbarItem = this.getNavBarItem()\n      const subLayerMenu = this.getSubLayerMenu()\n      const slotName = this.el.getAttribute('slot')\n\n      this.handleClassList(subLayerBackButton, 'add', 'show')\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n      this.handleClassList(navbarItem, 'add', 'layer__item-parent')\n      this.handleClassList(subLayerMenu, 'add', 'open')\n    \n      if(slotName.toLowerCase() === 'second__layer') {\n        this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'hideSecondLayer'})\n        this.handleClassList(navbarItem, 'remove', 'menuItem')\n      } else { \n        this.ifxNavItem.emit({component: this.el, action: 'hideFirstLayer'})\n      }\n    }\n  }\n\n  @Method()\n  async addMenuItemClass() { \n    const navbarItem = this.getNavBarItem()\n    this.handleClassList(navbarItem, 'add', 'menuItem')\n    const rightArrowIcon = this.getRightArrowIcon()\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n  }\n\n  @Method()\n  async moveChildComponentsBackIntoNavbar() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const secondLayerMenu = this.getSubLayerMenu()\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(secondLayerMenu, 'remove', 'remove__margin')\n\n    this.ifxNavItem.emit({component: this.el, action: 'show'})\n\n    const navItems = this.el.querySelectorAll('[slot=\"second__layer\"]')\n    this.isSidebarMenuItem = false;\n    this.showComponent()\n    this.handleClassList(navbarItem, 'remove', 'hide')\n\n    for(let i = 0; i < navItems.length; i++) { \n      navItems[i].setAttribute('slot', 'first__layer')\n      navItems[i].moveChildComponentsBackIntoNavbar()\n      navItems[i].addMenuItemClass()\n      navItems[i].returnToFirstLayer()\n    }\n  }\n\n  getRightArrowIcon() { \n    const menuItemRightIconWrapper = this.el.shadowRoot.querySelector('.menuItemRightIconWrapper')\n    return menuItemRightIconWrapper;\n  }\n\n  getChevronDownIconWrapper() { \n    const arrowIcon = this.el.shadowRoot.querySelector('.navItemIconWrapper');\n    return arrowIcon;\n  }\n\n  @Method()\n  async returnToFirstLayer() { \n    const subLayerBackButton = this.getSubLayerBackButton()\n    const navbarItem = this.getNavBarItem()\n    const rightArrowIcon = this.getRightArrowIcon()\n    const subLayerMenu = this.getSubLayerMenu()\n    const slotName = this.el.getAttribute('slot')\n\n    this.handleClassList(subLayerBackButton, 'remove', 'show')\n    this.handleClassList(navbarItem, 'remove', 'layer__item-parent')\n    this.handleClassList(subLayerMenu, 'remove', 'open')\n    if(this.hasChildNavItems) { \n      this.handleClassList(rightArrowIcon, 'remove', 'hide')\n    }\n\n    if(slotName.toLowerCase() === 'second__layer') {\n      this.ifxNavItem.emit({component: this.el, parent: this.el.parentElement, action: 'returnToSecondLayer'})\n      this.handleClassList(navbarItem, 'add', 'menuItem')\n    } else { \n      this.ifxNavItem.emit({component: this.el, action: 'return'})\n    }\n  }\n\n  componentWillLoad() {\n    this.setHref()\n    this.checkIfItemIsNested()\n    this.checkIfItemHasChildren()\n    this.removeEmptyItem()\n  }\n\n  componentDidLoad() { \n    this.handleItemGap()\n    this.handleLabelWrapper()\n    if(this.hasChildNavItems) { \n      const navItems = this.getNavbarItems();\n      this.relocateItemsToFirstlayer(navItems)\n    }\n  }\n\n  componentDidUpdate() { \n    const navbarItem = this.getNavBarItem()\n    const isLayerItemParent = this.handleClassList(navbarItem, 'contains', 'layer__item-parent')\n    if(this.isSidebarMenuItem && isLayerItemParent) {\n      const rightArrowIcon = this.getRightArrowIcon()\n      this.handleClassList(rightArrowIcon, 'add', 'hide')\n    }\n  }\n \n  @Method()\n  async setMenuItemPosition() { \n    if(this.isMenuItem && this.hasChildNavItems) { \n      const menuPosition = this.getItemMenuPosition()\n      if(menuPosition === 'left') { \n        this.itemPosition = 'left'\n      } else if(menuPosition === 'right') { \n        this.itemPosition = 'right'\n      }\n    }\n  }\n\n  handleClassList(el, type, className) {\n    el.classList[type](className)\n    if (type === 'contains') {\n      return el.classList.contains(className)\n    }\n  }\n\n  getNavbarItems() {\n    const navItems = this.el.querySelectorAll('ifx-navbar-item')\n    return navItems;\n  }\n  \n  getNavBarItem() { \n    const navItem = this.el.shadowRoot.querySelector('.navbar__item')\n    return navItem;\n  }\n\n  getSubLayerMenu() { \n    const subLayerMenu = this.el.shadowRoot.querySelector('.sub__layer-menu')\n    return subLayerMenu;\n  }\n\n  relocateItemsToFirstlayer(navItems) { \n     navItems.forEach(item => {\n      item.setAttribute('slot', 'first__layer')\n    })\n  }\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  checkIfItemIsNested() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-ITEM' \n    || parentElement.tagName.toUpperCase() === 'IFX-NAVBAR-PROFILE') {\n      this.isMenuItem = true;\n      return;\n    } else {\n      this.isMenuItem = false;\n    }\n  }\n\n  checkIfItemHasChildren() { \n    const sidebarItems = this.getNavbarItems();\n    if (sidebarItems.length !== 0) {\n      this.hasChildNavItems = true;\n    } else {\n      this.hasChildNavItems = false;\n    } \n  }\n\n  @Method()\n  async setItemSideSpecifications() {  \n    const menuItem = this.el;\n    const itemMenu = this.getItemMenu()\n    const slotValue = menuItem.getAttribute('slot')\n \n    if(slotValue.toLowerCase().trim() === \"right-item\") { \n      this.handleClassList(itemMenu, 'add', 'rightSideItemMenu')\n    }\n\n    return true;\n  }\n\n  getItemMenu() { \n    const menu = this.el.shadowRoot.querySelector('.navbar-menu');\n    return menu;\n  }\n\n  closeItemMenu() { \n    const itemMenu = this.getItemMenu()\n    const menuItem = this.getNavBarItem()\n    if(itemMenu) { \n      this.handleClassList(itemMenu, 'remove', 'open')\n      this.handleClassList(menuItem, 'remove', 'open')\n    }\n  }\n\n  getItemMenuPosition() {\n    let parentElement = this.el;\n    while(parentElement) {\n      if(parentElement.tagName === 'IFX-NAVBAR-PROFILE' || parentElement.slot === 'right-item') {\n        return 'left'\n      }\n      parentElement = parentElement.parentElement || parentElement.getRootNode().host;\n    }\n    return 'right'\n  }\n  \n  toggleItemMenu() {\n    const slotName = this.el.getAttribute('slot')\n\n    if(slotName.toLowerCase() === 'mobile-menu-top' || slotName.toLowerCase() === 'second__layer') { \n      this.openSubLayerMenu()\n    }\n\n    if(!this.internalHref && slotName.toLowerCase() !== 'mobile-menu-top' && slotName.toLowerCase() !== 'second__layer' ) {   \n      const itemMenu = this.getItemMenu()\n    \n      if(this.hasChildNavItems) { \n        const menuItem = this.getNavBarItem()\n        this.handleClassList(itemMenu, 'toggle', 'open');\n        this.handleClassList(menuItem, 'toggle', 'open');\n      } \n    }\n  }\n\n  handleNestedLayerMenu(e) { \n    if(this.isMenuItem && this.hasChildNavItems && !this.isSidebarMenuItem) { \n      const itemMenu = this.getItemMenu()\n      const menuPosition = this.getItemMenuPosition()\n      if(e.type.toUpperCase() === 'MOUSEENTER') { \n        this.handleClassList(itemMenu, 'add', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'add', 'left')\n        } else if(menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'add', 'right')\n        }\n      }\n\n      if(e.type.toUpperCase() === 'MOUSELEAVE') { \n        this.handleClassList(itemMenu, 'remove', 'open')\n        if(menuPosition === 'left') { \n          this.handleClassList(itemMenu, 'remove', 'left')\n        } else if (menuPosition === 'right') { \n          this.handleClassList(itemMenu, 'remove', 'right')\n        }\n      }\n    }\n  }\n\n  handleLabelWrapper() { \n    const labelWrapper = this.el.shadowRoot.querySelector('.label__wrapper');\n    const navItem = this.getNavBarItem();\n    const slot = labelWrapper.querySelector('slot');\n    if (!slot.assignedNodes().length) {\n      navItem.classList.add('removeLabel')\n    } else if(this.showLabel && navItem.classList.contains('removeLabel')) {\n      navItem.classList.remove('removeLabel')\n    }\n  }\n\n  handleItemGap() { \n    const innerContentWrapper = this.el.shadowRoot.querySelector('.navbar__item')\n    const numberIndicatorWrapper = innerContentWrapper.querySelector('.navbar__container-right-content-navigation-item-icon-wrapper');\n    if(this.numberIndicator || this.dotIndicator) { \n      this.handleClassList(numberIndicatorWrapper, 'add', 'no-gap')\n    } else { \n      this.handleClassList(numberIndicatorWrapper, 'remove', 'no-gap')\n    }\n  }\n\n  removeEmptyItem() { \n    const hostElement = this.el.shadowRoot.host;\n    if(!this.showLabel && !this.icon) { \n      this.handleClassList(hostElement, 'add', 'hidden')\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"container\" onMouseLeave={e => this.handleNestedLayerMenu(e)}  onMouseEnter={e => this.handleNestedLayerMenu(e)}>\n        <div class=\"sub__layer-back-button\">\n          <div class=\"back__button-wrapper\" onClick={() => this.returnToFirstLayer()}>\n            <ifx-icon icon=\"arrow-left-16\" />\n            <span>Back</span>\n          </div>\n        </div>\n        <a href={this.internalHref} target={this.target} onClick={() => this.toggleItemMenu()} class=   {`navbar__item ${this.isSidebarMenuItem ? 'sidebarMenuItem' : \"\"} ${!this.showLabel ? 'removeLabel' : \"\"} ${this.isMenuItem ? 'menuItem' : \"\"} ${this.hasChildNavItems ? 'isParent' : \"\"}`}>\n          <div class=\"inner__content-wrapper\">\n            <div class={`navbar__container-right-content-navigation-item-icon-wrapper ${!this.icon ? \"removeWrapper\" : \"\"}`}>\n              {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n              {this.icon && !this.showLabel && !isNaN(this.numberIndicator) && \n              <div class=\"number__indicator-wrapper\">\n                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n              </div>}\n              {this.icon && !this.showLabel && !this.numberIndicator && this.dotIndicator && \n            <div class=\"dot__indicator-wrapper\"></div>}\n            </div>\n\n            {this.itemPosition === 'left' \n            && this.hasChildNavItems \n            && this.isMenuItem && \n            <div class=\"menuItemLeftIconWrapper\">\n                <ifx-icon icon=\"chevron-left-12\" />\n            </div>}\n\n            <span class=\"label__wrapper\">\n              <slot />\n            </span>\n          </div>\n\n          {this.showLabel && this.numberIndicator && !isNaN(this.numberIndicator) ? \n            <div class=\"number__indicator-wrapper\">\n                <ifx-number-indicator>{this.numberIndicator}</ifx-number-indicator>\n            </div> : \"\"}\n\n            {this.showLabel && !this.numberIndicator && this.dotIndicator ? \n            <div class=\"dot__indicator-wrapper\"></div> : \"\"}\n\n          <div class={`navItemIconWrapper ${this.hasChildNavItems && !this.isMenuItem && !this.isSidebarMenuItem ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-down-12\" />\n          </div>\n          \n         {<div class={`menuItemRightIconWrapper ${((this.itemPosition === 'right' && this.hasChildNavItems && this.isMenuItem) || (this.isSidebarMenuItem && this.hasChildNavItems)) ? '' : \"hide\"}`}>\n            <ifx-icon icon=\"chevron-right-12\" />\n          </div>}\n        </a>\n        \n        {this.hasChildNavItems && !this.isSidebarMenuItem && <ul class='navbar-menu'> <slot name=\"first__layer\" /> </ul>}\n        {this.isSidebarMenuItem && <ul class='sub__layer-menu'> <slot name=\"second__layer\" /> </ul>}\n\n      </div>\n    )\n  }\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-66d04b9e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,g as i}from"./p-e6edf72d.js";const o=':root{font-family:"Source Sans 3", sans-serif}:host{display:block}.alert__info-wrapper{display:flex;padding:16px 24px;font-family:"Source Sans 3";box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert__info-wrapper .info__text-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper,.alert__info-wrapper .info__text-wrapper .info__description-wrapper{color:#1D1D1D;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.alert__info-wrapper .info__text-wrapper .info__headline-wrapper ::slotted(p),.alert__info-wrapper .info__text-wrapper .info__description-wrapper ::slotted(p){padding:0;margin:0}.alert__info-wrapper .info__text-wrapper .info__description-wrapper{font-weight:400}.alert__info-wrapper .close-icon-wrapper{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.alert__info-wrapper .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert__info-wrapper .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert{display:flex;border:1px solid #0A8276;border-radius:1px;color:#1D1D1D;background-color:#FFFFFF;font-family:"Source Sans 3";box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843)}.alert .close-icon-wrapper{display:flex;align-items:center;justify-content:center;min-width:40px}.alert .close-icon-wrapper button{all:unset;display:flex;align-items:center;justify-content:center;line-height:0;color:#1D1D1D;height:24px;width:24px}.alert .close-icon-wrapper button:focus{outline:2px solid #0A8276;outline-offset:2px}.alert .icon-wrapper{position:relative;min-width:48px;display:flex;justify-content:center;align-items:center;background-color:#0A8276}.alert .alert-text{font-size:16px;width:100%;padding:12px 0px 12px 12px;color:#1D1D1D;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.alert.primary{border:1px solid #0A8276}.alert.primary .icon-wrapper{background-color:#0A8276;color:#FFFFFF}.alert.success{border:1px solid #4CA460}.alert.success .icon-wrapper{background-color:#4CA460;color:#FFFFFF}.alert.danger{border:1px solid #CD002F}.alert.danger .icon-wrapper{background-color:#CD002F;color:#FFFFFF}.alert.warning{border:1px solid #E16B25}.alert.warning .icon-wrapper{background-color:#E16B25;color:#FFFFFF}.close-icon-wrapper ifx-icon:hover{cursor:pointer}';const a=o;const s=class{constructor(r){e(this,r);this.ifxClose=t(this,"ifxClose",7);this.variant="primary";this.closable=true;this.AriaLive="assertive";this.alertTypeDescription={primary:"Neutral alert",success:"Success Alert",danger:"Error Alert",warning:"Warning Alert",info:"Neutral alert"}}handleClose(){this.ifxClose.emit()}renderCloseButton(){return r("div",{class:"close-icon-wrapper"},r("button",{onClick:this.handleClose.bind(this),"aria-label":"Dismiss alert"},r("ifx-icon",{icon:"cross-16"})))}generateUniqueId(e="id"){return`${e}-${Math.random().toString(36).substring(2,9)}`}componentWillLoad(){if(!this.uniqueId){this.uniqueId=this.generateUniqueId("alert")}}render(){return this.variant==="info"?r("div",{class:"alert__info-wrapper",role:"alert","aria-live":this.AriaLive,"aria-describedby":this.alertTypeDescription[this.variant],"aria-labelledby":"alert-text alert-description"},r("div",{class:"info__text-wrapper"},r("div",{class:"info__headline-wrapper"},r("slot",{name:"headline"})),r("div",{id:`alert-description-${this.uniqueId}`,class:"info__description-wrapper"},r("slot",{name:"desc"}))),this.closable?this.renderCloseButton():null):r("div",{class:`alert ${this.variant}`,role:"alert"},this.icon&&r("div",{class:"icon-wrapper"},r("ifx-icon",{icon:this.icon})),r("div",{class:"alert-text",id:`alert-text-${this.uniqueId}`},r("slot",null)),this.closable?this.renderCloseButton():null)}};s.style=a;const l=".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";const n=l;const p=class{constructor(r){e(this,r);this.toggleTemplates=t(this,"toggleTemplates",7);this.fieldError=t(this,"fieldError",7);this.repoDetails={name:"",desc:"",framework:""};this.showDetails=false;this.isTemplatePage=false;this.isLoading=true;this.clientId="Ov23lixmXiNTTNb6V5W6";this.redirectUri="https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development";this.scope="repo workflow";this.state="template123"}authUser(){const e=`https://github.com/login/oauth/authorize?`+`client_id=${this.clientId}&`+`redirect_uri=${this.redirectUri}&`+`scope=${this.scope}&`+`state=${this.state}`;window.open(e,"_blank")}componentDidLoad(){const e=new URL(window.location.href);const t=e.searchParams.get("code");const{templateName:r}=this.getLocalStorageValues();if(t&&this.name===r){this.isTemplatePage=true;this.toggleTemplates.emit("details");this.getUserToken(t)}}getLocalStorageValues(){const e=localStorage.getItem("repo_name");const t=localStorage.getItem("repo_desc");const r=localStorage.getItem("repo_framework");const i=localStorage.getItem("selectedTemplate");return{repoName:e,repoDesc:t,repoFramework:r,templateName:i}}async getUserToken(e){const{repoName:t,repoDesc:r,repoFramework:i,templateName:o}=this.getLocalStorageValues();fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${e}/${t}/${r}/${i}/${o}`).then((e=>{if(e.ok){return e.text()}else{return e.text().then((e=>{throw new Error(e)}))}})).then((e=>{if(e){this.isLoading=false;this.repoUrl=e;localStorage.clear()}})).catch((e=>{this.repoError=e.message;console.error("Error:",e.message)}))}handleUserInput(e,t){if(t==="name"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{name:e.target.value})}else if(t==="desc"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{desc:e.target.value})}else if(t==="framework"){this.repoDetails=Object.assign(Object.assign({},this.repoDetails),{framework:e.target.value})}}submitUserData(){if(this.repoDetails.name&&this.repoDetails.desc&&this.repoDetails.framework){localStorage.setItem("repo_name",this.repoDetails.name);localStorage.setItem("repo_desc",this.repoDetails.desc);localStorage.setItem("repo_framework",this.repoDetails.framework);localStorage.setItem("selectedTemplate",this.name);this.fieldError.emit(false);this.authUser()}else{this.fieldError.emit("All fields are mandatory")}}togglePadding(e){let t=this.el.parentElement;if(t){const r=t.getRootNode();if(r instanceof ShadowRoot){t=r.host.parentElement}else{t=t.parentElement}if(e==="remove"){t.parentElement.style.padding="0px"}else if(e==="add"){t.parentElement.style.padding="4rem 20px"}}}handleCurrentTemplate(e){if(e&&!this.showDetails){this.togglePadding("remove");const t=e.currentTarget;this.toggleTemplates.emit(t);this.showDetails=true}}async toggleTemplate(e){const t=this.el.shadowRoot.querySelector(".react__template-wrapper");if(t){if(!t.classList.contains("hide")&&e){if(t!==e){t.classList.add("hide")}}else{if(this.showDetails){this.showDetails=false}this.togglePadding("add");t.classList.remove("hide")}}}render(){return r("div",{key:"846a13427fd8ac957e2ed543167f3679274c110d"},this.isTemplatePage?r("div",{class:"template__page-wrapper"},!this.repoUrl&&!this.repoError&&r("div",null,r("h3",null,"Your repository is getting ready.."),r("p",null,"This will only take a minute.")),this.isLoading&&!this.repoError&&r("div",null,r("ifx-spinner",{variant:"default",size:"s"})),this.repoUrl&&r("ifx-link",{href:this.repoUrl,target:"_parent",size:"m",variant:"underlined"},"Your repository"),this.repoError&&r("div",null,this.repoError)):r("div",{class:"react__template-container"},r("div",{class:"react__template-wrapper",onClick:e=>this.handleCurrentTemplate(e)},r("div",{class:"image__wrapper"},r("img",{src:this.thumbnail}))),this.showDetails&&r("div",{class:"details__wrapper"},r("div",{class:"selection__buttons-wrapper"},r("div",{class:"selection__input"},r("input",{type:"radio",id:"react",name:"chosen_framework",value:"react",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{htmlFor:"react"},"React")),r("div",{class:"selection__input vue"},r("input",{class:"vue__input",disabled:true,type:"radio",id:"vue",name:"chosen_framework",value:"vue",onInput:e=>this.handleUserInput(e,"framework")}),r("label",{class:"vue__label",htmlFor:"vue"},"Vue")," (Soon)")),r("div",{class:"input__fields-wrapper"},r("ifx-text-field",{required:true,onInput:e=>this.handleUserInput(e,"name"),size:"m",icon:"c-info-16",placeholder:"Your repository name"},"Repository Name"),r("ifx-text-field",{required:true,size:"m",icon:"c-info-16",onInput:e=>this.handleUserInput(e,"desc"),placeholder:"Your repository description"},"Repository Description"),r("ifx-button",{fullWidth:true,onClick:()=>this.submitUserData(),variant:"primary"},"Generate template")))))}get el(){return i(this)}};p.style=n;export{s as ifx_alert,p as ifx_template};
+//# sourceMappingURL=p-66d04b9e.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["alertCss","IfxAlertStyle0","Alert","constructor","hostRef","this","variant","closable","AriaLive","alertTypeDescription","primary","success","danger","warning","info","handleClose","ifxClose","emit","renderCloseButton","h","class","onClick","bind","icon","generateUniqueId","prefix","Math","random","toString","substring","componentWillLoad","uniqueId","render","role","name","id","templateCss","IfxTemplateStyle0","Template","repoDetails","desc","framework","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","componentDidLoad","url","URL","location","href","code","searchParams","get","templateName","getLocalStorageValues","toggleTemplates","getUserToken","repoName","localStorage","getItem","repoDesc","repoFramework","authCode","fetch","then","response","ok","text","errorMessage","Error","data","repoUrl","clear","catch","error","repoError","message","console","handleUserInput","e","type","Object","assign","target","value","submitUserData","setItem","fieldError","togglePadding","action","parent","el","parentElement","rootNode","getRootNode","ShadowRoot","host","style","padding","handleCurrentTemplate","targetTemplate","currentTarget","toggleTemplate","currTemp","templateWrapper","shadowRoot","querySelector","classList","contains","add","remove","key","size","src","thumbnail","onInput","htmlFor","disabled","required","placeholder","fullWidth"],"sources":["src/components/alert/alert.scss?tag=ifx-alert&encapsulation=shadow","src/components/alert/alert.tsx","src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.alert__info-wrapper {\n  display: flex;\n  padding: 16px 24px;\n  font-family: tokens.$ifxFontFamilyBody;\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n  & .info__text-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace100;\n    width: 100%;\n\n    & .info__headline-wrapper {\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    & .info__headline-wrapper,\n    .info__description-wrapper {\n      color: #1D1D1D;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n\n      ::slotted(p) {\n        padding: 0;\n        margin: 0;\n      }\n    }\n\n    & .info__description-wrapper {\n      font-weight: 400;\n    }\n  }\n\n  & .close-icon-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: flex-start;\n    //min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n}\n\n.alert {\n  display: flex;\n  border: 1px solid tokens.$ifxColorOcean500;\n  border-radius: tokens.$ifxBorderRadius12;\n  color: tokens.$ifxColorBaseBlack;\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: tokens.$ifxFontFamilyBody;\n  box-shadow: 0px 6px 9px 0px #1D1D1D1A;\n\n\n  & .close-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-width: tokens.$ifxSize500;\n\n    & button {\n      all: unset;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      color: tokens.$ifxColorBaseBlack;\n      height: tokens.$ifxSize300;\n      width: tokens.$ifxSize300;\n\n      &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500;\n        outline-offset: 2px;\n      }\n    }\n  }\n\n  & .icon-wrapper {\n    position: relative;\n    min-width: tokens.$ifxSize600;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  & .alert-text {\n    font-size: 16px;\n    width: 100%;\n    padding: 12px 0px 12px 12px;\n    color: tokens.$ifxColorBaseBlack;\n\n    white-space: pre-wrap;\n    /* wraps text at spaces and within words */\n    word-wrap: break-word;\n    /* breaks text within a word if necessary */\n    overflow-wrap: anywhere;\n    /* breaks text at arbitrary points when needed */\n  }\n\n  &.primary {\n    border: 1px solid tokens.$ifxColorOcean500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOcean500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.success {\n    border: 1px solid tokens.$ifxColorGreen500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorGreen500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.danger {\n    border: 1px solid tokens.$ifxColorRed500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorRed500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n\n  &.warning {\n    border: 1px solid tokens.$ifxColorOrange500;\n\n    & .icon-wrapper {\n      background-color: tokens.$ifxColorOrange500;\n      color: tokens.$ifxColorBaseWhite;\n    }\n  }\n}\n\n.close-icon-wrapper {\n  & ifx-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n}","import { Component, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Prop() variant: 'primary' | 'success' | 'danger' | 'warning' | 'info' = 'primary';\n  @Prop() icon: string;\n  @Event() ifxClose: EventEmitter;\n  @Prop() closable: boolean = true;\n  @Prop() AriaLive = 'assertive';\n  @State() uniqueId: string;\n\n  alertTypeDescription = {\n    \"primary\": 'Neutral alert',\n    \"success\": 'Success Alert',\n    \"danger\": 'Error Alert',\n    \"warning\": 'Warning Alert',\n    \"info\": 'Neutral alert',\n  };\n\n  handleClose() {\n    this.ifxClose.emit();\n  }\n\n  renderCloseButton() {\n    return (\n      <div class=\"close-icon-wrapper\">\n        <button onClick={this.handleClose.bind(this)} aria-label=\"Dismiss alert\">\n          <ifx-icon icon=\"cross-16\" />\n        </button>\n      </div>\n    );\n  }\n\n  generateUniqueId(prefix = 'id') {\n    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  componentWillLoad() { \n    if (!this.uniqueId) {\n      this.uniqueId = this.generateUniqueId('alert');\n    }\n  }\n\n  render() {\n    return this.variant === 'info' ? (\n      <div class=\"alert__info-wrapper\" role=\"alert\" aria-live={this.AriaLive} aria-describedby={this.alertTypeDescription[this.variant]} aria-labelledby=\"alert-text alert-description\">\n        <div class=\"info__text-wrapper\">\n          <div class=\"info__headline-wrapper\">\n            <slot name=\"headline\" />\n          </div>\n          <div id={`alert-description-${this.uniqueId}`} class=\"info__description-wrapper\">\n            <slot name=\"desc\" />\n          </div>\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    ) : (\n      <div class={`alert ${this.variant}`} role=\"alert\">\n        {this.icon && (\n          <div class=\"icon-wrapper\">\n            <ifx-icon icon={this.icon} />\n          </div>\n        )}\n        <div class=\"alert-text\" id={`alert-text-${this.uniqueId}`}>\n          <slot />\n        </div>\n        {this.closable ? this.renderCloseButton() : null}\n      </div>\n    );\n  }\n}\n","\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,h as o}from"./p-e6edf72d.js";const r=':root{font-family:"Source Sans 3", sans-serif}:host{pointer-events:none}.card-overline{font-size:1rem;font-weight:400;color:#575352;padding-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}';const t=r;const i=class{constructor(o){e(this,o)}render(){return o("div",{key:"edb86d9c621859391a960610c81ab5fa3a3558fd",class:"card-overline"},o("slot",{key:"2b4846831c111a2b598b6632559b5346c152568f"}))}};i.style=t;export{i as ifx_card_overline};
+//# sourceMappingURL=p-6a8bfce7.entry.js.map

package/dist/infineon-design-system-stencil/{p-cda1cd7c.entry.js.map → p-6a8bfce7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["cardOverlineCss","IfxCardOverlineStyle0","CardOverline","render","h","key","class"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card-overline {\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: tokens.$ifxFontWeightRegular;\n  color: tokens.$ifxColorEngineering500;\n  padding-bottom: 4px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-overline',\n  styleUrl: 'card-overline.scss',\n  shadow: true,\n})\n\nexport class CardOverline {\n\n  render() {\n    return (\n      <div class=\"card-overline\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,0SACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yBAEvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["cardOverlineCss","IfxCardOverlineStyle0","CardOverline","render","h","key","class"],"sources":["src/components/card/card-overline/card-overline.scss?tag=ifx-card-overline&encapsulation=shadow","src/components/card/card-overline/card-overline.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  pointer-events: none;\n}\n\n.card-overline {\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: tokens.$ifxFontWeightRegular;\n  color: tokens.$ifxColorEngineering500;\n  padding-bottom: 4px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  word-break: break-all;\n\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-card-overline',\n  styleUrl: 'card-overline.scss',\n  shadow: true,\n})\n\nexport class CardOverline {\n\n  render() {\n    return (\n      <div class=\"card-overline\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAkB,2RACxB,MAAAC,EAAeD,E,MCOFE,EAAY,M,yBAEvB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,QAAAC,IAAA,6C","ignoreList":[]}

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

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as r,a,g as s}from"./p-e6edf72d.js";const i=':root{font-family:"Source Sans 3", sans-serif}:host{display:flex;flex-direction:column;width:100%}.wrapper__label{color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3"}:host(.wrapper--disabled) .wrapper__label{color:#575352}.wrapper__textarea{width:100%}.wrapper__textarea.fullWidth{width:100%}.wrapper__textarea.fullWidth textarea{width:100%;box-sizing:border-box}.wrapper__textarea textarea{border:1px solid #8D8786;border-radius:1px;padding:8px 16px;background-color:#FFFFFF;color:#1D1D1D;font:400 1rem/1.5rem "Source Sans 3";transition:all 100ms ease;transition-property:border-color}.wrapper__textarea textarea:hover{border:1px solid #575352}.wrapper__textarea textarea:focus-within{outline:none;border:1px solid #0A8276}:host(.wrapper--error) .wrapper__textarea textarea{border:1px solid #CD002F}:host(.wrapper--disabled) .wrapper__textarea textarea{border:1px solid #575352;background-color:#EEEDED}.wrapper__caption{color:#1D1D1D;font:400 0.75rem/1rem "Source Sans 3"}:host(.wrapper--error) .wrapper__caption{color:#CD002F}:host(.wrapper--disabled) .wrapper__caption{color:#575352}';const o=i;const l=class{constructor(r){e(this,r);this.ifxInput=t(this,"ifxInput",7);if(r.$hostElement$["s-ei"]){this.internals=r.$hostElement$["s-ei"]}else{this.internals=r.$hostElement$.attachInternals();r.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-textarea-${++h}`;this.disabled=false;this.error=false;this.readOnly=false;this.resize="both";this.wrap="soft";this.fullWidth="false"}async reset(){this.resetTextarea()}handleComponentWidth(){const e=this.el.shadowRoot.querySelector(".wrapper__textarea");const t=this.fullWidth.toLowerCase()==="true";if(t){e.classList.add("fullWidth")}else if(e.classList.contains("fullWidth")){e.classList.remove("fullWidth")}}componentDidRender(){this.handleComponentWidth()}formResetCallback(){this.resetTextarea();this.internals.setFormValue("")}handleOnInput(e){this.value=e.target.value;this.internals.setFormValue(this.value);this.ifxInput.emit(this.value)}resetTextarea(){this.value="";this.internals.setValidity({});this.internals.setFormValue("")}componentWillLoad(){this.internals.setFormValue(this.value)}render(){var e,t;return r(a,{key:"ad4f07a4ea16d1fd510bcb6e0cc0918a82f73bc3",class:`wrapper--${this.error?"error":""} wrapper--${this.disabled?"disabled":""}`},r("label",{key:"041c9fb73cfff0d47bc197846ae70ec9c5ca35b4",class:"wrapper__label",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),r("div",{key:"b5db9b815a243f6b24907281c141a0b683f1726f",class:"wrapper__textarea"},r("textarea",{key:"bdf09d868728934ce876497b636211cd1a1eb942","aria-label":"a textarea","aria-value":this.value,"aria-disabled":this.disabled,id:this.inputId,style:{resize:this.resize},name:this.name?this.name:this.inputId,cols:this.cols,rows:this.rows,maxlength:this.maxlength,wrap:this.wrap,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,onInput:e=>this.handleOnInput(e)})),((t=this.caption)===null||t===void 0?void 0:t.trim())&&r("div",{key:"42d3db3b95dfe23f296261bdbda67a95257185f6",class:"wrapper__caption"},this.caption.trim()))}static get formAssociated(){return true}get el(){return s(this)}};let h=0;l.style=o;export{l as ifx_textarea};
+//# sourceMappingURL=p-6d936400.entry.js.map

package/dist/infineon-design-system-stencil/{p-0abcae42.entry.js.map → p-6d936400.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"2DAAA,MAAMA,EAAc,glCACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCjC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYtC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FgC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUvC,KAAKC,UAC1CuC,EAAAxC,KAAKyC,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVrC,KAAK4B,MAAK,gBACP5B,KAAKG,SACrBwC,GAAK3C,KAAKC,QACV2C,MAAQ,CAACtC,OAAQN,KAAKM,QACtBuC,KAAO7C,KAAK6C,KAAO7C,KAAK6C,KAAO7C,KAAKC,QACpC6C,KAAO9C,KAAK8C,KACZC,KAAO/C,KAAK+C,KACZC,UAAYhD,KAAKgD,UACjBzC,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChB8C,SAAWjD,KAAKK,SAChB6C,YAAclD,KAAKkD,YACnBtB,MAAQ5B,KAAK4B,MACbuB,QAAWxB,GAAM3B,KAAK0B,cAAcC,QAIpCyB,EAAApD,KAAKqD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRtC,KAAKqD,QAAQX,Q,mEAQrB,IAAIxC,EAAa,E","ignoreList":[]}
+{"version":3,"names":["textareaCss","IfxTextareaStyle0","TextArea","constructor","hostRef","this","inputId","textareaId","disabled","error","readOnly","resize","wrap","fullWidth","reset","resetTextarea","handleComponentWidth","textareaWrapper","el","shadowRoot","querySelector","isFullWidth","toLowerCase","classList","add","contains","remove","componentDidRender","formResetCallback","internals","setFormValue","handleOnInput","e","value","target","ifxInput","emit","setValidity","componentWillLoad","render","h","Host","key","class","htmlFor","_a","label","trim","id","style","name","cols","rows","maxlength","readonly","placeholder","onInput","_b","caption"],"sources":["src/components/textarea/textarea.scss?tag=ifx-textarea&encapsulation=shadow","src/components/textarea/textarea.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.wrapper__label {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n}\n:host(.wrapper--disabled) .wrapper__label {\n    color: tokens.$ifxColorEngineering500;\n}\n\n.wrapper__textarea {\n    width: 100%;\n    &.fullWidth { \n        width: 100%;\n        & textarea { \n            width: 100%;\n            box-sizing: border-box; \n        }\n    }\n}\n\n.wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxSpace12;\n    padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n    \n    background-color: tokens.$ifxColorBaseWhite;\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody03;\n    \n    transition: all 100ms ease;\n    transition-property: border-color;\n\n    &:hover {\n        border: 1px solid tokens.$ifxColorEngineering500;\n    }\n    \n    &:focus-within {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n    }\n}\n\n:host(.wrapper--error) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__textarea textarea {\n    border: 1px solid tokens.$ifxColorEngineering500;\n\n    background-color: tokens.$ifxColorEngineering200;\n}\n\n.wrapper__caption {\n    color: tokens.$ifxColorBaseBlack;\n    font: tokens.$ifxBodyBody05;\n}\n:host(.wrapper--error) .wrapper__caption {\n    color: tokens.$ifxColorRed500;\n}\n:host(.wrapper--disabled) .wrapper__caption {\n    color: tokens.$ifxColorEngineering500;\n}","import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\n\n@Component({\n\tformAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' | 'horizontal' | 'vertical' | 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' | 'soft' | 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\t\t\n    if (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n    } else if(textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n    }\n  }\n\n\tcomponentDidRender() {\n    this.handleComponentWidth()\n  }\n\t\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\tthis.internals.setFormValue(\"\");\n\t}\n\t\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\tthis.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\tthis.internals.setValidity({});\n\t\tthis.internals.setFormValue('');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.internals.setFormValue(this.value);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled ? 'disabled': ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={ this.inputId }>\n\t\t\t\t\t{ this.label?.trim() }\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={ this.value }\n\t\t\t\t\t\taria-disabled={ this.disabled }\n\t\t\t\t\t\tid={ this.inputId }\n\t\t\t\t\t\tstyle={ {resize: this.resize} }\n\t\t\t\t\t\tname={ this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={ this.cols }\n\t\t\t\t\t\trows={ this.rows }\n\t\t\t\t\t\tmaxlength={ this.maxlength }\n\t\t\t\t\t\twrap={ this.wrap }\n\t\t\t\t\t\tdisabled={ this.disabled }\n\t\t\t\t\t\treadonly={ this.readOnly }\n\t\t\t\t\t\tplaceholder={ this.placeholder }\n\t\t\t\t\t\tvalue={ this.value }\n\t\t\t\t\t\tonInput={ (e) => this.handleOnInput(e) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{ this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{ this.caption.trim() }\n\t\t\t\t\t</div> \n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"],"mappings":"2DAAA,MAAMA,EAAc,ikCACpB,MAAAC,EAAeD,E,MCQFE,EAAQ,MAPrB,WAAAC,CAAAC,G,6MASSC,KAAAC,QAAkB,kBAAkBC,IAQpCF,KAAAG,SAAoB,MACpBH,KAAAI,MAAiB,MAKjBJ,KAAAK,SAAoB,MACpBL,KAAAM,OAAsD,OAGtDN,KAAAO,KAAgC,OACfP,KAAAQ,UAAoB,O,CAG7C,WAAMC,GACLT,KAAKU,e,CAGN,oBAAAC,GACC,MAAMC,EAAkBZ,KAAKa,GAAGC,WAAWC,cAAc,sBACzD,MAAMC,EAAchB,KAAKQ,UAAUS,gBAAkB,OAEnD,GAAID,EAAa,CAClBJ,EAAgBM,UAAUC,IAAI,Y,MACtB,GAAGP,EAAgBM,UAAUE,SAAS,aAAc,CAC5DR,EAAgBM,UAAUG,OAAO,Y,EAInC,kBAAAC,GACGtB,KAAKW,sB,CAGR,iBAAAY,GACCvB,KAAKU,gBACLV,KAAKwB,UAAUC,aAAa,G,CAG7B,aAAAC,CAAcC,GACb3B,KAAK4B,MAASD,EAAEE,OAA+BD,MAC/C5B,KAAKwB,UAAUC,aAAazB,KAAK4B,OACjC5B,KAAK8B,SAASC,KAAK/B,KAAK4B,M,CAGzB,aAAAlB,GACCV,KAAK4B,MAAQ,GACb5B,KAAKwB,UAAUQ,YAAY,IAC3BhC,KAAKwB,UAAUC,aAAa,G,CAG7B,iBAAAQ,GACCjC,KAAKwB,UAAUC,aAAazB,KAAK4B,M,CAGlC,MAAAM,G,QACC,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,YAAYtC,KAAKI,MAAQ,QAAU,eAAeJ,KAAKG,SAAW,WAAY,MAC1FgC,EAAA,SAAAE,IAAA,2CAAOC,MAAM,iBAAiBC,QAAUvC,KAAKC,UAC1CuC,EAAAxC,KAAKyC,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAAA,YAAAE,IAAA,wDACY,aAAY,aACVrC,KAAK4B,MAAK,gBACP5B,KAAKG,SACrBwC,GAAK3C,KAAKC,QACV2C,MAAQ,CAACtC,OAAQN,KAAKM,QACtBuC,KAAO7C,KAAK6C,KAAO7C,KAAK6C,KAAO7C,KAAKC,QACpC6C,KAAO9C,KAAK8C,KACZC,KAAO/C,KAAK+C,KACZC,UAAYhD,KAAKgD,UACjBzC,KAAOP,KAAKO,KACZJ,SAAWH,KAAKG,SAChB8C,SAAWjD,KAAKK,SAChB6C,YAAclD,KAAKkD,YACnBtB,MAAQ5B,KAAK4B,MACbuB,QAAWxB,GAAM3B,KAAK0B,cAAcC,QAIpCyB,EAAApD,KAAKqD,WAAO,MAAAD,SAAA,SAAAA,EAAEV,SACfP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRtC,KAAKqD,QAAQX,Q,mEAQrB,IAAIxC,EAAa,E","ignoreList":[]}

package/dist/infineon-design-system-stencil/{p-1abbcdbc.entry.js → p-7564f328.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,a as s,g as r}from"./p-e6edf72d.js";const c=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const o=c;const n=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const c=r?r.assignedNodes({flatten:true}):[];c.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const o=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=o;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"b3c13d48da96a74d05ba0af9f592fc4f4bf688fc"},i("div",{key:"d0bea155f2d083279710607bde2957fa7f2bdd41",class:"filter-type-group"},i("slot",{key:"71c60c9cdc705fb1d845b93d9871f3257090b88f",name:"filter-search"}),i("slot",{key:"d3ecbbd9e98a227cd2d6902e28ce13c1511bd451",name:"filter-accordion"})))}get el(){return r(this)}};n.style=o;export{n as ifx_filter_type_group};
-//# sourceMappingURL=p-1abbcdbc.entry.js.map
+import{r as t,c as e,h as i,a as s,g as r}from"./p-e6edf72d.js";const a=":host{display:flex}.filter-type-group{width:260px;align-items:flex-start;gap:8px}.filter-type-group>::slotted(*){margin-bottom:8px}";const c=a;const o=class{constructor(i){t(this,i);this.ifxSidebarFilterChange=e(this,"ifxSidebarFilterChange",7);this.selectedOptions=[];this.handleResetEvent=()=>{const t=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const e=t.assignedElements({flatten:true});e.forEach((t=>{const e=t.querySelectorAll("ifx-list");e.forEach((t=>{t.resetTrigger=!t.resetTrigger}))}));const i=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const s=i.assignedElements({flatten:true});s.forEach((t=>{const e=t.querySelector("ifx-filter-search");const i=e.shadowRoot.querySelectorAll("ifx-search-field");if(i.length>0){i.forEach((t=>{t.value=""}))}}));this.selectedOptions=[];this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleUpdateSidebarFilter=t=>{const{filterName:e}=t.detail;const i=this.el.shadowRoot.querySelector('slot[name="filter-accordion"]');const s=i?i.assignedElements({flatten:true}):[];s.forEach((t=>{const i=t.querySelectorAll("ifx-list");i.forEach((t=>{if(t.getAttribute("name")===e){t.resetTrigger=!t.resetTrigger}}))}));const r=this.el.shadowRoot.querySelector('slot[name="filter-search"]');const a=r?r.assignedNodes({flatten:true}):[];a.forEach((t=>{if(t.nodeType===Node.ELEMENT_NODE){const e=t;const i=e.firstElementChild;if(i){i.setAttribute("value","");i.dispatchEvent(new CustomEvent("ifxInput",{bubbles:true,composed:true,detail:""}))}}}));const c=this.selectedOptions.map((t=>{if(t.filterGroupName===e){return Object.assign(Object.assign({},t),{selectedItems:[],value:""})}return t}));this.selectedOptions=c;this.ifxSidebarFilterChange.emit(this.selectedOptions)};this.handleAccordionChange=t=>{this.handleFilterChange(t)};this.handleSearchChange=t=>{this.handleFilterChange(t)};this.handleFilterChange=t=>{const e=[...this.selectedOptions];if(t.type==="ifxFilterSearchChange"){const{filterName:i,filterValue:s}=t.detail;const r=e.findIndex((t=>typeof t!=="string"&&t.filterGroupName===i));if(r!==-1){e[r].value=s}else{e.push({filterGroupName:i,value:s})}}else if(t.type==="ifxFilterAccordionChange"){const{filterGroupName:i,selectedItems:s}=t.detail;const r=e.findIndex((t=>t.filterGroupName===i));if(r!==-1){e[r]={filterGroupName:i,selectedItems:s}}else{e.push({filterGroupName:i,selectedItems:s})}}this.selectedOptions=e;this.ifxSidebarFilterChange.emit(this.selectedOptions)}}connectedCallback(){this.el.addEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.addEventListener("ifxFilterSearchChange",this.handleSearchChange);window.addEventListener("ifxResetFiltersEvent",this.handleResetEvent);window.addEventListener("ifxUpdateSidebarFilter",this.handleUpdateSidebarFilter)}componentWillUnload(){this.el.removeEventListener("ifxFilterAccordionChange",this.handleAccordionChange);this.el.removeEventListener("ifxFilterSearchChange",this.handleSearchChange);window.removeEventListener("ifxResetFiltersEvent",this.handleResetEvent)}render(){return i(s,{key:"f9e20ecec05c106cc7c46daf6aafdf99b46e2615"},i("div",{key:"6b7e9c8efa1adb5b363c307395daa4d3dc6008a1",class:"filter-type-group"},i("slot",{key:"898eaee110d211bd6d11b4004a865e53a75ebfc0",name:"filter-search"}),i("slot",{key:"a4cd279b6717aea1d774a0500108f756b70644d3",name:"filter-accordion"})))}get el(){return r(this)}};o.style=c;export{o as ifx_filter_type_group};
+//# sourceMappingURL=p-7564f328.entry.js.map

package/dist/infineon-design-system-stencil/p-760b9305.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as s,g as i}from"./p-e6edf72d.js";const r=':root{font-family:"Source Sans 3", sans-serif}.stepper{display:flex;align-items:center}.stepper.compact{align-items:center;gap:8px}.stepper.compact.compact-right{flex-direction:row-reverse;text-align:left}.stepper.compact .stepper-wrapper{width:unset;flex-direction:column}.stepper.vertical{height:100%}.stepper.vertical .stepper-wrapper{flex-direction:column;width:unset;height:100%}.stepper-wrapper{display:flex;flex-direction:row;width:100%}.stepper-wrapper ::slotted(*){display:flex;flex:1;justify-content:flex-start}.stepper-progress{display:flex;justify-content:center;align-items:center;font:600 0.875rem/1.25rem "Source Sans 3";min-width:56px;height:56px;border-radius:9999px;background:conic-gradient(#0A8276 var(--pb, 0%), #8D8786 0)}.stepper-progress .progress-detail{display:flex;justify-content:center;align-items:center;text-align:center;width:48px;height:48px;border-radius:9999px;background:white}';const p=r;const a=class{constructor(s){t(this,s);this.ifxChange=e(this,"ifxChange",7);this.activeStep=1;this.indicatorPosition="left";this.showStepNumber=false;this.variant="default";this.shouldEmitEvent=true;this.emittedByClick=false}onStepChange(t){const e=this.getSteps();const s=e[t.detail.previousActiveStep-1];if(s&&!s.complete){s.setAttribute("error","true")}}handleActiveStep(t,e){const s=this.getSteps();if(!this.shouldEmitEvent){this.shouldEmitEvent=true;return}if(s[t-1]){if(!s[t-1].disabled){this.emitIfxChange(t,e)}else{if(t<e){let i=t;this.shouldEmitEvent=false;while(i>=1&&s[i-1].disabled)i--;if(i<1){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}else{let i=t;this.shouldEmitEvent=false;while(i<=this.stepsCount&&s[i-1].disabled)i++;if(i>this.stepsCount){this.activeStep=e}else{this.emitIfxChange(i,e);this.activeStep=i}}}}}emitIfxChange(t,e){this.ifxChange.emit({activeStep:t,previousActiveStep:e,totalSteps:this.stepsCount,emittedByClick:this.emittedByClick});this.emittedByClick=false}getSteps(){const t=this.el.querySelectorAll("ifx-step");return t}addStepIdsToStepsAndCountSteps(){const t=this.getSteps();t[t.length-1].lastStep=true;for(let e=0;e<t.length;e++){t[e].stepId=e+1}this.stepsCount=t.length}setActiveStep(t,e=false){this.emittedByClick=e;this.activeStep=t}setStepsBeforeActiveToComplete(){const t=this.getSteps();t.forEach(((t,e)=>{if(e+1<this.activeStep)t.complete=true}))}syncIfxSteps(){const t=this.getSteps();for(let e=0;e<t.length;e++){const s={activeStep:this.activeStep,indicatorPosition:this.indicatorPosition!=="right"?"left":"right",showStepNumber:this.showStepNumber,variant:this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant,setActiveStep:this.setActiveStep.bind(this)};t[e].stepperState=s}}setInitialActiveStep(){this.activeStep=Math.max(1,Math.min(this.stepsCount+(this.variant!=="compact"?1:0),this.activeStep))}componentWillLoad(){this.addStepIdsToStepsAndCountSteps();this.setInitialActiveStep();this.setStepsBeforeActiveToComplete()}componentDidLoad(){this.syncIfxSteps()}componentWillUpdate(){this.syncIfxSteps()}render(){return s("div",{key:"ebb0dcfedfa5bbbfb7cd6c5abe7125b948fac551","aria-label":"a stepper",role:"navigation",class:`stepper ${this.variant!=="compact"&&this.variant!=="vertical"?"default":this.variant} ${this.variant==="compact"?"compact-"+this.indicatorPosition:""}`},this.variant==="compact"&&s("div",{key:"82ff1eb3fe665ca2cc6690e0ec589e8c3572bf52",class:"stepper-progress"},s("div",{key:"31ee2433f257a8da7f8077ea24672fb41fd69298",class:"progress-detail"},`${Math.min(this.activeStep,this.stepsCount)} of ${this.stepsCount}`)),s("div",{key:"49ee4b5aaa2fe97dbfcb2855fb2af51a835f7d87",class:`stepper-wrapper`},s("slot",{key:"3f1ad0132e9d566fc4c54a7fe4f6b294c735325d"})))}componentDidRender(){if(this.variant=="compact"){const t=this.el.shadowRoot.querySelector(".stepper-progress");t.style.setProperty("--pb",`${this.activeStep/this.stepsCount*100}%`)}}get el(){return i(this)}static get watchers(){return{activeStep:["handleActiveStep"]}}};a.style=p;export{a as ifx_stepper};
+//# sourceMappingURL=p-760b9305.entry.js.map

package/dist/infineon-design-system-stencil/{p-0f8df960.entry.js.map → p-760b9305.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stepperCss","IfxStepperStyle0","Stepper","constructor","hostRef","this","activeStep","indicatorPosition","showStepNumber","variant","shouldEmitEvent","emittedByClick","onStepChange","event","steps","getSteps","previousActiveStep","detail","complete","setAttribute","handleActiveStep","newStep","oldStep","disabled","emitIfxChange","i","stepsCount","ifxChange","emit","totalSteps","el","querySelectorAll","addStepIdsToStepsAndCountSteps","length","lastStep","stepId","setActiveStep","setByClick","setStepsBeforeActiveToComplete","forEach","step","syncIfxSteps","stepperState","bind","setInitialActiveStep","Math","max","min","componentWillLoad","componentDidLoad","componentWillUpdate","render","h","key","role","class","componentDidRender","progressBar","shadowRoot","querySelector","style","setProperty"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\n \n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    componentDidLoad() {\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-7d761140.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as e}from"./p-e6edf72d.js";import{c as i}from"./p-e459974a.js";const s=':root{font-family:"Source Sans 3", sans-serif}:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:"Source Sans 3"}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}';const a=s;const l=class{constructor(o){t(this,o);this.tooltipVisible=false;this.header="";this.text="";this.position="auto";this.internalPosition="auto";this.variant="compact";this.popperInstance=null;this.onMouseEnter=()=>{var t,o;(t=this.popperInstance)===null||t===void 0?void 0:t.setOptions((t=>Object.assign(Object.assign({},t),{modifiers:[...t.modifiers,{name:"eventListeners",enabled:true}]})));this.initializePopper();this.tooltipVisible=true;this.tooltipEl.style.display="block";(o=this.popperInstance)===null||o===void 0?void 0:o.update()};this.onMouseLeave=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"};this.onClick=()=>{var t;if(this.variant.toLowerCase()==="dismissible"){this.initializePopper();this.tooltipVisible=!this.tooltipVisible;this.tooltipEl.style.display=this.tooltipVisible?"block":"none";(t=this.popperInstance)===null||t===void 0?void 0:t.update()}};this.onDismissClick=()=>{this.tooltipVisible=false;this.tooltipEl.style.display="none"}}componentWillLoad(){if(this.variant.toLowerCase().trim()===""){this.variant="compact"}}componentDidLoad(){const t=this.el.shadowRoot.querySelector(".tooltip__container").firstChild;if(this.variant.toLowerCase()==="compact"||this.variant.toLowerCase()==="extended"){t.addEventListener("mouseenter",this.onMouseEnter);t.addEventListener("mouseleave",this.onMouseLeave)}else{t.addEventListener("click",this.onClick)}}initializePopper(){if(this.popperInstance)return;this.referenceEl=this.el;if(this.variant.toLowerCase()==="compact"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-compact")}else if(this.variant.toLowerCase()==="dismissible"){this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-dismissible")}else{this.tooltipEl=this.el.shadowRoot.querySelector(".tooltip-extended")}const t=this.position==="auto"?this.determineBestPosition():this.position;this.internalPosition=t;if(this.tooltipEl&&this.referenceEl){this.popperInstance=i(this.referenceEl,this.tooltipEl,{placement:this.internalPosition,modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"arrow",options:{element:".tooltip-arrow-svg"}}]})}this.tooltipEl.setAttribute("data-placement",t)}determineBestPosition(){const t=this.referenceEl.getBoundingClientRect();const o=window.scrollY;const e=window.scrollX;const i=t.top+o+t.height/2;const s=t.left+e+t.width/2;if(this.position==="auto"){if(i>window.innerHeight/2){if(s>window.innerWidth/2){return"top-end"}else{return"top-start"}}else{if(s>window.innerWidth/2){return"bottom-end"}else{return"bottom-start"}}}else{return this.position}}positionChanged(t){var o;this.internalPosition=t;(o=this.popperInstance)===null||o===void 0?void 0:o.destroy();this.popperInstance=null}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){const t={"tooltip-dismissible":true,visible:this.tooltipVisible};const e={"tooltip-compact":true,visible:this.tooltipVisible};const i={"tooltip-extended":true,visible:this.tooltipVisible};return o("div",{key:"3b8c0a5958c6f9bd8050dabe86794fad3945a11e","aria-label":"a tooltip showing important information","aria-value":this.header,class:"tooltip__container"},o("slot",{key:"f21eadbe48f312be595e035aeabb4518c27794ba"}),this.variant.toLowerCase()==="dismissible"&&o("div",{key:"a0540f0f7d9b269ee3adec89fefc49c09b12c7bc",class:t},o("button",{key:"70aa5956d5e91e1867c6a781b3956e1f3a174c6a","aria-label":"Close Tooltip",class:"close-button",onClick:this.onDismissClick},o("ifx-icon",{key:"07f91bffdd259f18069ade3755dc5169c4f11e1e",icon:"cross16"})),o("div",{key:"e5ccd4c4b59d93375441b29488ae50bdd5ea3f5b",class:"tooltip-dismissible-content"},this.header&&o("div",{key:"b3c3b195688357c06c5257f80923c8bafdd62a1a",class:"tooltip-dismissible-header"},this.header),o("div",{key:"27c01fef25ffe1bffbebb347c5bae43acd6b2c6b",class:"tooltip-dismissible-body"},this.text)),o("svg",{key:"6199d757b56e3e365f156dccdc5c86e7ef9c4e25",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"11d4c52a83828afeebbac98031259f0b14482fec",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="compact"&&o("div",{key:"d8f6a06c2e9d84b2752013d78c5b5ab5759df617",class:e},this.text,o("svg",{key:"3d37dc4c80e41659533bf53d63176d9cda93bdef",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"efdcc135932f3f148b107597bb4b7a8218ec2ea7",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))),this.variant.toLowerCase()==="extended"&&o("div",{key:"bd23b388aedf1cd7fc80e6a57bb043f0eb706c00",class:i},o("slot",{key:"a287aab9832b2d22ac1c9c6ccd4b9a7fe1a88e1c",name:"icon"},this.icon?o("div",{class:"extended_icon"},o("ifx-icon",{icon:this.icon})):o("svg",{class:"extended_icon",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"none",viewBox:"0 0 24 24"},o("path",{stroke:"#fff","stroke-linecap":"round","stroke-linejoin":"round",d:"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z"}),o("path",{stroke:"#fff",d:"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z"}),o("path",{fill:"#fff",d:"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"}))),o("div",{key:"596675881c90111f1c8f4dd26f277ae647d76507",class:"tooltip-extended-content"},this.header&&o("div",{key:"54837eab014cc174f06980883827e6c9bb74c3e0",class:"tooltip-extended-header"},this.header),o("div",{key:"6317ecd46ee6ad8d91f214f9a487511ecabda638",class:"tooltip-extended-body"},this.text)),o("svg",{key:"2b6d3104824919a9ce5c9b608cae05b9cf1a6575",class:"tooltip-arrow-svg",width:"12",height:"8",viewBox:"0 0 12 8",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{key:"2030a14c358f513f7d7e34a65adb1ff30c4b12ce",id:"Indicator",d:"M6 0L12 8L0 8L6 0Z",fill:"#1D1D1D"}))))}get el(){return e(this)}static get watchers(){return{position:["positionChanged"]}}};l.style=a;export{l as ifx_tooltip};
+//# sourceMappingURL=p-7d761140.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","IfxTooltipStyle0","Tooltip","constructor","hostRef","this","tooltipVisible","header","text","position","internalPosition","variant","popperInstance","onMouseEnter","_a","setOptions","options","Object","assign","modifiers","name","enabled","initializePopper","tooltipEl","style","display","_b","update","onMouseLeave","onClick","toLowerCase","onDismissClick","componentWillLoad","trim","componentDidLoad","slotElement","el","shadowRoot","querySelector","firstChild","addEventListener","referenceEl","effectivePosition","determineBestPosition","createPopper","placement","offset","element","setAttribute","rect","getBoundingClientRect","yOffset","window","scrollY","xOffset","scrollX","verticalHalfwayPoint","top","height","horizontalHalfwayPoint","left","width","innerHeight","innerWidth","positionChanged","newVal","destroy","disconnectedCallback","render","tooltipDismissible","visible","tooltipCompact","tooltipExtended","h","key","class","icon","viewBox","fill","xmlns","id","d","stroke"],"sources":["src/components/tooltip/tooltip.scss?tag=ifx-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.tooltip__container {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n  font-family: tokens.$ifxFontFamilyBody;\n\n}\n\n%tooltip-common {\n  background-color: tokens.$ifxColorBaseBlack;\n  border: 1px solid black;\n  z-index: 1080;\n  display: none;\n  transition: opacity 0.3s;\n  position: absolute;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: tokens.$ifxColorBaseWhite;\n  width: max-content;\n  box-sizing: border-box;\n\n  white-space: pre-wrap;   /* wraps text at spaces and within words */\n  word-wrap: break-word;   /* breaks text within a word if necessary */\n  overflow-wrap: anywhere; /* breaks text at arbitrary points when needed */\n\n  &.visible {\n    display: flex !important;\n    align-items: start;\n    //min-width: 100px;\n    //width: auto;\n  }\n}\n\n\n\n.tooltip-dismissible {\n  @extend %tooltip-common;\n\n    .close-button {\n      all: unset;\n      //position: absolute;\n      //top: tokens.$ifxSpace150;\n      //right: tokens.$ifxSpace150;\n      cursor: pointer;\n      position: relative;\n      order: 2;\n      margin-top: 12px;\n      margin-right: 12px;\n      line-height: 0px;\n    }\n\n  .tooltip-dismissible-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n\n  }\n\n  .tooltip-dismissible-header,\n  .tooltip-dismissible-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-dismissible-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-dismissible-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n.tooltip-compact {\n  @extend %tooltip-common;\n  padding: 4px 8px;\n  text-align: center;\n  flex-grow: 1;\n}\n\n\n.tooltip-extended {\n  @extend %tooltip-common;\n  //padding-left: 36px; // Added this line, adjust as per your icon width\n  //padding-left: tokens.$ifxSpace150; // Added this line, adjust as per your icon width\n  align-items: center;\n  padding: tokens.$ifxSpace150;\n  gap: 10px;\n\n  .extended_icon {\n    display: flex;\n    align-self: flex-start;\n    align-items: center;\n    //padding-top: tokens.$ifxSpace150;\n    cursor: pointer;\n  }\n\n\n\n  .tooltip-extended-content {\n    display: flex;\n    flex-direction: column;\n    gap: tokens.$ifxSpace150;\n    //padding: tokens.$ifxSpace150;\n    flex-grow: 1;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    overflow-wrap: anywhere;\n  }\n\n  .tooltip-extended-header,\n  .tooltip-extended-body {\n    font-size: 14px;\n    font-style: normal;\n    line-height: 20px;\n  }\n\n  .tooltip-extended-header {\n    font-weight: tokens.$ifxFontWeightSemibold;\n  }\n\n  .tooltip-extended-body {\n    font-weight: tokens.$ifxFontWeightRegular;\n  }\n}\n\n\n.tooltip__container .tooltip-arrow-svg {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n}\n\n\n%tooltip-arrow-positions {\n\n  // For 'top' placement\n  &[data-placement=\"top\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 50%;\n    transform: rotate(180deg) translateX(-50%);\n  }\n\n  // For 'top-start' placement\n  &[data-placement=\"top-start\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    left: 10px; // Adjust as needed\n    transform: rotate(180deg)\n  }\n\n  // For 'top-end' placement\n  &[data-placement=\"top-end\"]>.tooltip-arrow-svg {\n    bottom: -7px;\n    right: 10px; // Adjust as needed\n    transform: rotate(180deg);\n  }\n\n  // For 'bottom' placement\n  &[data-placement=\"bottom\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  // For 'bottom-start' placement\n  &[data-placement=\"bottom-start\"]>.tooltip-arrow-svg {\n    top: -7px;\n    left: 10px; // Adjust as needed\n  }\n\n  // For 'bottom-end' placement\n  &[data-placement=\"bottom-end\"]>.tooltip-arrow-svg {\n    top: -7px;\n    right: 10px; // Adjust as needed\n  }\n\n  // For 'left' placement\n  &[data-placement=\"left\"]>.tooltip-arrow-svg {\n    right: -3px;\n    top: 50%;\n    transform: rotate(90deg) translateY(-50%) translateX(-50%);\n  }\n\n  // For 'right' placement\n  &[data-placement=\"right\"]>.tooltip-arrow-svg {\n    left: -3px;\n    top: 50%;\n    transform: rotate(270deg) translateY(-50%) translateX(50%);\n  }\n}\n\n\n.tooltip-compact {\n  @extend %tooltip-arrow-positions;\n  min-width: 28px !important;\n  max-width: 145px !important;\n}\n\n.tooltip-dismissible {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n\n.tooltip-extended {\n  @extend %tooltip-arrow-positions;\n  min-width: 145px !important;\n  max-width: 310px !important;\n}\n","import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\n \n\n@Component({\n  tag: 'ifx-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true\n})\nexport class Tooltip {\n\n  @Element() el: HTMLElement;\n  @State() tooltipVisible: boolean = false;\n  @Prop() header: string = '';\n  @Prop() text: string = '';\n  @Prop() position: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n  @State() internalPosition: 'bottom-start' | 'top-start' | 'left' | 'bottom-end' | 'top-end' | 'right' | 'bottom' | 'top' | 'auto' = 'auto';\n\n  @Prop() variant: 'compact' | 'dismissible' | 'extended' = 'compact';\n  @Prop() icon: string;\n\n  tooltipEl: HTMLElement;\n  referenceEl: HTMLElement;\n  popperInstance: any = null;\n\n\n  componentWillLoad() { \n    if(this.variant.toLowerCase().trim() === \"\") { \n      this.variant = 'compact'\n    }\n  }\n  \n  componentDidLoad() {\n    const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n    \n    if(this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === 'extended') {\n      slotElement.addEventListener('mouseenter', this.onMouseEnter)\n      slotElement.addEventListener('mouseleave', this.onMouseLeave)\n    }else{\n      slotElement.addEventListener('click', this.onClick);\n    }\n\n  }\n\n  initializePopper() {\n    if (this.popperInstance) return;\n\n    this.referenceEl = this.el;\n    this.tooltipEl;\n    if (this.variant.toLowerCase() === 'compact') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n    }\n    else if (this.variant.toLowerCase() === 'dismissible') {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n    }\n    else {\n      this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n    }\n\n    const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n    // Set the internalPosition\n    this.internalPosition = effectivePosition;\n\n    if (this.tooltipEl && this.referenceEl) {\n\n      this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n        placement: this.internalPosition,\n        modifiers: [\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 8]  // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n            }\n          },\n          {\n            name: 'arrow',\n            options: {\n              element: '.tooltip-arrow-svg'\n            }\n          }\n        ]\n      });\n\n    }\n\n    // Add this line to set the 'data-placement' attribute on the tooltip\n    this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n  }\n\n  determineBestPosition() {\n    // This is a simplified version, you can enhance this based on available viewport space.\n    const rect = this.referenceEl.getBoundingClientRect();\n    const yOffset = window.scrollY; // Get current scroll position\n    const xOffset = window.scrollX; // Get current horizontal scroll position\n\n    const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n    const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n    if (this.position === 'auto') {\n      if (verticalHalfwayPoint > window.innerHeight / 2) {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'top-end';\n        } else {\n          return 'top-start';\n        }\n      } else {\n        if (horizontalHalfwayPoint > window.innerWidth / 2) {\n          return 'bottom-end';\n        } else {\n          return 'bottom-start';\n        }\n      }\n    } else {\n      return this.position;\n    }\n  }\n\n  @Watch('position')\n  positionChanged(newVal: any) {\n    this.internalPosition = newVal;\n    this.popperInstance?.destroy();\n    this.popperInstance = null; // Force re-initialization on next mouse enter\n  }\n\n\n\n  onMouseEnter = () => {\n    // Enable the event listeners immediately\n    this.popperInstance?.setOptions((options) => ({\n      ...options,\n      modifiers: [\n        ...options.modifiers,\n        { name: 'eventListeners', enabled: true },\n      ],\n    }));\n\n    // Initialize the popper instance\n    this.initializePopper();\n\n    // Make the tooltip visible\n    this.tooltipVisible = true;\n    this.tooltipEl.style.display = 'block';\n\n    // Update the popper instance immediately after initialization\n    this.popperInstance?.update();\n  }\n\n\n  onMouseLeave = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  onClick = () => {\n    if (this.variant.toLowerCase() === 'dismissible') {\n      this.initializePopper();\n      this.tooltipVisible = !this.tooltipVisible;\n      this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n      this.popperInstance?.update();\n    }\n  }\n\n  onDismissClick = () => {\n    this.tooltipVisible = false;\n    this.tooltipEl.style.display = 'none';\n  }\n\n  render() {\n    const tooltipDismissible = {\n      'tooltip-dismissible': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipCompact = {\n      'tooltip-compact': true,\n      'visible': this.tooltipVisible,\n    };\n\n    const tooltipExtended = {\n      'tooltip-extended': true,\n      'visible': this.tooltipVisible,\n    };\n\n    return (\n      <div aria-label=\"a tooltip showing important information\" aria-value={this.header} class=\"tooltip__container\" >\n        <slot></slot>\n\n        {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n          <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n            <ifx-icon icon=\"cross16\"></ifx-icon>\n          </button>\n          <div class=\"tooltip-dismissible-content\">\n            {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n            <div class=\"tooltip-dismissible-body\">{this.text}</div>\n          </div>\n          <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n          </svg>\n        </div>\n        }\n        {this.variant.toLowerCase() === 'compact' &&\n          <div class={tooltipCompact}>\n            {this.text}\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div>\n        }\n        {this.variant.toLowerCase() === 'extended' &&\n          <div class={tooltipExtended}>\n            <slot name=\"icon\">\n              {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n                <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n                  <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n                  <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n                  <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n                </svg>\n              }\n            </slot>\n            <div class=\"tooltip-extended-content\">\n              {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n              <div class=\"tooltip-extended-body\">{this.text}</div>\n            </div>\n            <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n            </svg>\n          </div >\n        }\n      </div>\n    );\n  }\n\n\n}"],"mappings":"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","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-8215490a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s}from"./p-e6edf72d.js";const o=':root{font-family:"Source Sans 3", 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=o;const r=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:"242103eeefd5c176ebb090767290c3b209c896f7",class:`segment ${this.selected?"segment--selected":""}`,tabIndex:0,onClick:()=>{this.handleSegmentClick()},onKeyDown:e=>{this.handleSegmentKeyDown(e)}},s("ifx-icon",{key:"7a7a84efd91e773e132d137e96107465ad5cbe8b",icon:this.icon})," ",s("slot",{key:"a3aff1230d6b0f3edf4c90b6748f4c515c3c04a0"}))}};r.style=n;export{r as ifx_segment};
+//# sourceMappingURL=p-8215490a.entry.js.map