@infineon/infineon-design-system-stencil 39.4.3 → 39.4.4--canary.2130.4e289d5eee4c0769b9458514c7fb228750796ed6.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarTitleCss","SidebarTitle","constructor","hostRef","this","showInCollapsed","componentWillLoad","el","setAttribute","toString","render","h","key","class"],"sources":["src/components/navigation/sidebar/sidebar-title.scss?tag=ifx-sidebar-title&encapsulation=shadow","src/components/navigation/sidebar/sidebar-title.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n    position: relative;\n    display: var(--ifx-sidebar-title-display, block);\n}\n\n:host([data-show-in-collapsed=\"true\"]) {\n    display: var(--ifx-sidebar-title-show-in-collapsed-display, block);\n}\n\n.sidebar__title {\n    width: 100%;\n    height: fit-content;\n    border-top: 1px solid tokens.$ifxColorEngineering200;\n    padding: var(--ifx-sidebar-title-padding, tokens.$ifxSpace150 0);\n\n    &.no-top-border {\n        border-top: none;\n    }\n}\n\n.sidebar__title-label {\n    height: 20px;\n    font: tokens.$ifxEyebrowEyebrow02;\n    text-transform: uppercase;\n    color: tokens.$ifxColorEngineering500;\n    letter-spacing: 3px;\n    display: var(--ifx-sidebar-title-label-display, block);\n}\n","import { Component, h, Element, Prop } from '@stencil/core';\n\n@Component({\n    tag: 'ifx-sidebar-title',\n    styleUrl: 'sidebar-title.scss',\n    shadow: true\n})\n\nexport class SidebarTitle {\n    @Element() el;\n    @Prop() showInCollapsed: boolean = false;\n\n    componentWillLoad() {\n        // Set data attribute for CSS targeting\n        this.el.setAttribute('data-show-in-collapsed', this.showInCollapsed.toString());\n    }\n\n    render() {\n        return(\n            <div class = 'sidebar__title'>\n                <div class = 'sidebar__title-label'>\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,qlB,MCQXC,EAAY,MANzB,WAAAC,CAAAC,G,UAQYC,KAAeC,gBAAY,KAgBtC,CAdG,iBAAAC,GAEIF,KAAKG,GAAGC,aAAa,yBAA0BJ,KAAKC,gBAAgBI,W,CAGxE,MAAAC,GACI,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAQ,kBACTF,EAAK,OAAAC,IAAA,2CAAAC,MAAQ,wBACTF,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["contentSwitcherCss","ContentSwitcher","constructor","hostRef","this","activeIndex","hoverIndex","focusIndex","dividers","Array","eventHandlers","Map","componentWillLoad","items","from","el","children","initializeDividers","addEventListeners","ensureSingleSelectedItem","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","disconnectedCallback","removeEventListeners","forEach","item","index","length","divider","document","createElement","classList","add","after","push","handlers","click","selectItem","mouseenter","handleHover","mouseleave","focus","handleFocus","blur","Object","keys","event","addEventListener","set","removeEventListener","clear","isSelected","getAttribute","selected","removeAttribute","isActive","updateDividersOfItem","itemIndex","updateDividerVisibility","dividerIndex","hiddenDividers","Set","setDividerVisibility","has","hidden","toggle","oldIndex","setAttribute","ifxChange","emit","oldValue","getValueOfItem","newValue","toLocaleString","render","h","Host","key","class","role"],"sources":["src/components/content-switcher/content-switcher.scss?tag=ifx-content-switcher&encapsulation=shadow","src/components/content-switcher/content-switcher.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.ifx-content-switcher {\n    background-color: tokens.$ifxColorBaseWhite;\n    border: 1px solid tokens.$ifxColorEngineering300;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    height: tokens.$ifxSize450;\n    width: fit-content;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    & ::slotted(ifx-content-switcher-item) {\n        position: relative;\n        // top: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:first-child) {\n        left: -1px;\n        margin-right: -1px;\n    }\n\n    & ::slotted(ifx-content-switcher-item:last-child) {\n        right: -1px;\n        margin-left: -1px;\n    }\n\n    // Dividers\n    & ::slotted(.ifx-content-switcher-divider) {\n        width: tokens.$ifxSize12;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorEngineering400;\n        margin: 0px 1px;\n        visibility: visible;\n    }\n\n    & ::slotted(.ifx-content-switcher-divider.hidden) {\n        visibility: hidden;\n    }\n}","import { Component, h, Element, Event, EventEmitter, Host, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\nexport type ChangeEvent = { oldValue: string; newValue: string };\n\ntype ContentSwitcherItem = Element & {\n  selected: boolean;\n};\n\n@Component({\n  tag: 'ifx-content-switcher',\n  styleUrl: './content-switcher.scss',\n  shadow: true,\n})\nexport class ContentSwitcher {\n  @Element() el: HTMLElement;\n\n  @State() items: Element[];\n  @State() activeIndex = -1;\n  @State() hoverIndex: number = -1;\n  @State() focusIndex: number = -1;\n\n  @State() dividers: Element[] = Array();\n\n  @Event() ifxChange: EventEmitter<ChangeEvent>;\n\n  private eventHandlers: Map<Element, { [key: string]: EventListener }> = new Map();\n\n  componentWillLoad() {\n    this.items = Array.from(this.el.children);\n    this.initializeDividers();\n    this.addEventListeners();\n    this.ensureSingleSelectedItem();\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-content-switcher', await framework)\n    }\n  }\n\n  disconnectedCallback() {\n    this.removeEventListeners();\n  }\n\n  /**\n   * Initialize the dividers between items.\n   */\n  initializeDividers() {\n    this.items.forEach((item, index) => {\n      if (index < this.items.length - 1) {\n        const divider = document.createElement('div');\n        divider.classList.add('ifx-content-switcher-divider');\n        item.after(divider);\n        this.dividers.push(divider);\n      }\n    });\n  }\n\n  /**\n   * Add event listeners for each item.\n   */\n  addEventListeners() {\n    this.items.forEach((item, index) => {\n      const handlers = {\n        click: () => this.selectItem(index),\n        mouseenter: () => this.handleHover(index, true),\n        mouseleave: () => this.handleHover(index, false),\n        focus: () => this.handleFocus(index, true),\n        blur: () => this.handleFocus(index, false),\n      };\n\n      Object.keys(handlers).forEach(event => {\n        item.addEventListener(event, handlers[event]);\n      });\n\n      this.eventHandlers.set(item, handlers);\n    });\n  }\n\n  /**\n   * Remove all event listeners.\n   */\n  removeEventListeners() {\n    this.eventHandlers.forEach((handlers, item) => {\n      Object.keys(handlers).forEach(event => {\n        item.removeEventListener(event, handlers[event]);\n      });\n    });\n    this.eventHandlers.clear();\n  }\n\n  ensureSingleSelectedItem() {\n    this.items.forEach((item, index) => {\n      const isSelected = (item.getAttribute('selected') === 'true') || (item as ContentSwitcherItem).selected;\n      if (isSelected) {\n        if (this.activeIndex < 0) {\n          this.selectItem(index);\n        } else {\n          item.removeAttribute('selected');\n          (item as ContentSwitcherItem).selected = false;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is hovered.\n   */\n  handleHover(index: number, isActive: boolean) {\n    this.hoverIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Handle hover events on an item.\n   * @param index - Index of the item.\n   * @param isActive - Whether the item is focused.\n   */\n  handleFocus(index: number, isActive: boolean) {\n    this.focusIndex = isActive ? index : -1;\n    this.updateDividersOfItem(index);\n  }\n\n  /**\n   * Update visibility of dividers adjacent to a specific item.\n   * @param itemIndex - Index of the item.\n   */\n  updateDividersOfItem(itemIndex: number) {\n    if (itemIndex < this.items.length - 1) {\n      this.updateDividerVisibility(itemIndex);\n    }\n    if (itemIndex > 0) {\n      this.updateDividerVisibility(itemIndex - 1);\n    }\n  }\n\n  /**\n   * Update visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   */\n  updateDividerVisibility(dividerIndex: number) {\n    const hiddenDividers = new Set([this.activeIndex, this.activeIndex - 1, this.hoverIndex, this.hoverIndex - 1, this.focusIndex, this.focusIndex - 1]);\n    this.setDividerVisibility(dividerIndex, hiddenDividers.has(dividerIndex));\n  }\n\n  /**\n   * Set the visibility of a specific divider.\n   * @param dividerIndex - Index of the divider.\n   * @param hidden - Whether the divider should be hidden.\n   */\n  setDividerVisibility(dividerIndex: number, hidden: boolean) {\n    if (this.dividers[dividerIndex]) {\n      this.dividers[dividerIndex].classList.toggle('hidden', hidden);\n    }\n  }\n\n  /**\n   * Select a specific item.\n   * @param itemIndex - Index of the item to be selected.\n   */\n  selectItem(itemIndex: number) {\n    if (itemIndex === this.activeIndex) return;\n    const oldIndex = this.activeIndex;\n    if (oldIndex >= 0) {\n      this.items[oldIndex].removeAttribute('selected');\n    }\n\n    this.activeIndex = itemIndex;\n    this.items[itemIndex].setAttribute('selected', 'true');\n\n    this.ifxChange.emit({ oldValue: this.getValueOfItem(oldIndex), newValue: this.getValueOfItem(itemIndex) });\n    this.updateDividersOfItem(oldIndex);\n    this.updateDividersOfItem(itemIndex);\n  }\n\n  /**\n   * Get the value property of the item at a specific index.\n   * Falls back to the index if no value is set.\n   * \n   * @param index - Index of the item. \n   * @returns The value of the item.\n   */\n  getValueOfItem(index: number): string {\n    if (this.items[index] == null) return index.toLocaleString();\n    return this.items[index].getAttribute('value') || index.toLocaleString();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"ifx-content-switcher\" role=\"group\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["alertCss","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","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","role","name","id","templateCss","Template","repoDetails","desc","showDetails","isTemplatePage","isLoading","clientId","redirectUri","scope","state","authUser","authorizationUrl","window","open","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","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: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\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: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\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, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-alert',\n  styleUrl: 'alert.scss',\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLElement;\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  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = await detectFramework();\n      trackComponent('ifx-alert', framework);\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-0929589d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxGroupCss","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","required","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","toLowerCase","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font-size: tokens.$ifxFontSizeM;\n    color: tokens.$ifxColorBaseBlack;\n    line-height: tokens.$ifxLineHeightM;\n    font-weight: tokens.$ifxFontWeightRegular;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.group-label .required {\n    color: tokens.$ifxColorEngineering500;\n    margin-left: tokens.$ifxSpace50;\n}\n\n.group-label .required.error {\n    color: tokens.$ifxColorRed500;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeXs;\n    line-height: tokens.$ifxLineHeightXs;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @Prop() required: boolean = false;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName.toLowerCase() === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel && (\n          <div class=\"group-label\">\n            {this.groupLabelText}\n            {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n          </div>\n        )}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAmB,u6B,MCYZC,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAASG,UAA8B,WAGvCH,KAAcI,eAAW,mBAIzBJ,KAAQK,SAAY,MACnBL,KAASM,UAAY,MAgC9BN,KAAgBO,iBAAG,KACjBP,KAAKQ,iBAAiB,CAuCzB,CArEC,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,QAAQC,gBAAkB,eAAgB,CACrDd,KAAKC,YAAYc,IAAIJ,EAAUD,EAAMM,QACrChB,KAAKiB,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASd,IACjBA,EAAiBQ,MAAQA,CAAK,G,CAInC,iBAAAO,GACE1B,KAAKQ,iB,CAIP,sBAAMmB,GACJ,IAAIC,EAAuB5B,KAAKuB,IAAK,CACnC,MAAMM,EAAYC,IAClBC,EAAe,2BAA4BF,E,EAQvC,eAAArB,GACNR,KAAKC,YAAY+B,QACjB,MAAMZ,EAAaC,MAAMC,KAAKtB,KAAKuB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASd,IAClB,IAAKX,KAAKC,YAAYgC,IAAItB,GAAW,CACnCX,KAAKC,YAAYc,IAAIJ,EAAWA,EAAiBQ,OAAS,M,KAG9DnB,KAAKiB,iB,CAGC,eAAAA,GACNjB,KAAKM,UAAYe,MAAMC,KAAKtB,KAAKC,YAAYiC,UAAUC,MAAMhB,GAAUA,G,CAGzE,MAAAiB,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRvC,KAAKwC,gBACJH,EAAK,OAAAC,IAAA,2CAAAC,MAAM,eACRvC,KAAKI,eACLJ,KAAKK,UAAYgC,EAAA,QAAAC,IAAA,2CAAMC,MAAO,YAAYvC,KAAKM,UAAY,QAAU,MAAc,MAGxF+B,EAAK,OAAAC,IAAA,2CAAAC,MAAO,kBAAkBvC,KAAKG,aAAaH,KAAKyC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAc1C,KAAKO,oBAE1BP,KAAK2C,YACJN,EAAA,OAAKE,MAAO,WAAWvC,KAAKM,UAAY,QAAU,aAC/CN,KAAK4C,gBAAkBP,EAAK,OAAAE,MAAM,gBAAeF,EAAU,YAAAQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBvC,KAAK8C,cACxB,G","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sidebarItemCss","SidebarItem","constructor","hostRef","this","icon","showIcon","showIconWrapper","href","internalHref","target","isExpandable","isNested","isSubMenuItem","active","isActionItem","indicatorVariant","internalActiveState","titleText","handleActiveChange","newValue","oldValue","labelElement","getNavItem","el","shadowRoot","handleClassList","handleNumberIndicatorChange","updateIndicatorVariant","handleConsoleError","event","detail","handleEventEmission","ifxSidebarMenu","emit","type","className","classList","contains","getExpandableMenu","expandableSubmenu","querySelector","getSidebarMenuItems","sidebarItems","querySelectorAll","length","getSidebarMenuItem","sidebarItem","toggleSubmenu","menuItem","expandableMenu","ifxSidebarActionItem","ifxSidebarNavigationItem","handleItemClick","handleExpandableMenu","sidebarExpandableMenu","forEach","li","document","createElement","appendChild","parentElementIsSidebar","parentElement","tagName","toUpperCase","checkIfMenuItemIsNested","parentIsSidebar","checkIfMenuItemIsSubMenu","navItem","isActive","iteratedComponent","activeAttributeValue","getAttribute","getParentSection","handleBorderIndicatorDisplacement","handleItem","item","isOpen","activeMenuItemSection","getActiveItemSection","children","child","topLevelItems","setHref","toLowerCase","trim","undefined","setActiveClasses","activeMenuItem","expandMenu","ac","isItemExpandable","handleActiveState","handleKeyDown","key","componentDidLoad","observeCollapsedState","extractTitleText","slotElement","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","ELEMENT_NODE","map","_a","textContent","join","isCollapsed","hasAttribute","numberIndicator","observer","MutationObserver","observe","attributes","attributeFilter","componentWillLoad","setAttribute","componentWillUpdate","render","shouldHide","h","style","display","tabIndex","onKeyDown","onClick","class","title","isNaN","variant","number"],"sources":["src/components/navigation/sidebar/sidebar-item.scss?tag=ifx-sidebar-item&encapsulation=shadow","src/components/navigation/sidebar/sidebar-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n:host {\n  position: relative;\n  display: block;\n}\n\n:host([data-has-icon=\"false\"]) {\n  display: var(--ifx-sidebar-item-without-icon-display, block);\n}\n\n.sidebar__nav-item,\n.sidebar__nav-item.header__section {\n  &:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n\n\n\n  &:hover {\n    outline: none;\n\n    & .sidebar__nav-item-icon-wrapper {\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-label {\n      outline: none;\n      color: tokens.$ifxColorOcean600;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          color: tokens.$ifxColorOcean600;\n        }\n      }\n    }\n  }\n}\n\n.sidebar__nav-item {\n  display: flex;\n  flex-direction: var(--ifx-sidebar-item-flex-direction, row);\n  align-items: center;\n  width: 100%;\n  padding: 8px 0px;\n  gap: 4px;\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  cursor: pointer;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.extra-padding__bottom {\n    padding: 8px 0px 16px 0px;\n  }\n\n  &.active {\n    color: tokens.$ifxColorOcean500;\n  }\n\n  &.active-section {\n    &::before {\n      content: \"\";\n      position: absolute;\n      left: -32px;\n      height: 40px;\n      width: 2px;\n      background: tokens.$ifxColorOcean500;\n    }\n  }\n\n\n  &.open {\n    padding: 8px 0px;\n\n    & .sidebar__nav-item-label {\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 24px;\n    }\n\n    & .sidebar__nav-item-indicator {\n      & .item__arrow-wrapper {\n        & ifx-icon {\n          transform: rotate(-180deg);\n        }\n      }\n    }\n  }\n\n  &.header__section {\n    box-sizing: padding-box;\n    border-top: 1px solid tokens.$ifxColorEngineering200;\n    padding: 16px 0px;\n    display: -webkit-flex;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: horizontal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    &.no-top-border {\n      border-top: none;\n    }\n\n    &.active-section {\n      &::before {\n        content: \"\";\n        position: absolute;\n        left: -32px;\n        height: 40px;\n        width: 2px;\n        background: tokens.$ifxColorOcean500;\n      }\n    }\n\n    &.open {\n\n      padding: 16px 0px 8px 0px;\n\n      & .sidebar__nav-item-indicator {\n        & .item__arrow-wrapper {\n          & ifx-icon {\n            transform: rotate(-180deg);\n          }\n        }\n      }\n    }\n\n    & .sidebar__nav-item-label {\n      color: tokens.$ifxColorBaseBlack;\n      font-family: Source Sans 3;\n      font-size: 16px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 24px;\n    }\n  }\n\n  &.submenu__item {\n    padding: 4px 0px;\n\n    &.extra-padding__bottom {\n      padding: 4px 0px 16px 0px;\n    }\n  }\n\n  & .sidebar__nav-item-icon-wrapper {\n    display: flex;\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    justify-content: center;\n    align-items: center;\n    gap: tokens.$ifxSpace100;\n    flex-shrink: 0;\n\n    &.noIcon {\n      display: none;\n    }\n\n    & ifx-icon {\n      width: tokens.$ifxSize200;\n      height: tokens.$ifxSize200;\n    }\n  }\n\n  & .sidebar__nav-item-label {\n    font-style: normal;\n    font-weight: 400;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: tokens.$ifxLineHeightM;\n    display: flex;\n    align-items: center;\n    flex: none;\n    order: 1;\n    flex-grow: 1;\n    cursor: pointer;\n    display: var(--ifx-sidebar-item-text-display, flex);\n  }\n\n  & .sidebar__nav-item-indicator {\n    display: var(--ifx-sidebar-item-text-display, flex);\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 0px 4px;\n    flex: none;\n    order: 2;\n    flex-grow: 0;\n    position: relative;\n\n    // Collapsed state styling - position indicator over icon\n    :host([data-sidebar-collapsed]) & {\n      position: absolute;\n      top: 0;\n      right: 0;\n      z-index: 10;\n      padding: 0;\n    }\n  }\n}\n\n.expandable__submenu {\n  display: none;\n  list-style-type: none;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  padding-left: 40px;\n\n  &.open {\n    display: flex;\n  }\n}\n\n.header__section+.expandable__submenu {\n  padding-left: 0;\n}","import { Component, h, Prop, Element, State, Listen, Watch, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-sidebar-item',\n  styleUrl: 'sidebar-item.scss',\n  shadow: true\n})\nexport class SidebarItem {\n  @Element() el;\n  @Prop() icon: string = \"\"\n  @State() showIcon: boolean = true;\n  @State() showIconWrapper: boolean = false;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @State() isExpandable: boolean = false;\n  @State() isNested: boolean = true;\n  @State() isSubMenuItem: boolean = false;\n  @Prop() numberIndicator: number;\n  @Prop() active: boolean = false; // set to true manually or by clicking on a navigation item\n  @Prop() isActionItem: boolean = false; // if an item is an action item, it can not become active\n  @State() indicatorVariant: 'number' | 'dot' = 'number';\n\n  @State() internalActiveState: boolean = false;\n \n  @Event({ bubbles: true, composed: true }) ifxSidebarMenu: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarNavigationItem: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxSidebarActionItem: EventEmitter;\n\n  @Prop() handleItemClick: (item: HTMLElement) => void;\n\n  private titleText: string = '';\n\n  @Watch('active')\n  handleActiveChange(newValue: boolean, oldValue: boolean) {\n    // If the item is an action item, ignore the active prop\n    if (this.isActionItem) {\n      this.internalActiveState = false;\n      return;\n    }\n    this.internalActiveState = newValue;\n    if (newValue !== oldValue) {\n      let labelElement = this.getNavItem(this.el.shadowRoot)\n      if (!this.isExpandable && !newValue) {\n        this.handleClassList(labelElement, 'remove', 'active');\n      }\n      if (!this.isExpandable && newValue) {\n        this.handleClassList(labelElement, 'add', 'active');\n      }\n    }\n  }\n\n  @Watch('numberIndicator')  \n  handleNumberIndicatorChange() {\n    this.updateIndicatorVariant();\n  }\n\n  @Listen('consoleError')\n  handleConsoleError(event: CustomEvent<boolean>) {\n    if (event.detail) {\n      this.showIcon = false;\n    } else {\n      this.showIcon = true;\n    }\n  }\n\n  handleEventEmission() {\n    // Get the active item section\n    this.ifxSidebarMenu.emit(this.el)\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  getExpandableMenu() {\n    const expandableSubmenu = this.el.shadowRoot.querySelector('.expandable__submenu')\n    return expandableSubmenu\n  }\n\n  getNavItem(el) {\n    return el?.querySelector('.sidebar__nav-item')\n  }\n\n\n\n  getSidebarMenuItems(el = this.el) {\n    const sidebarItems = el.querySelectorAll('ifx-sidebar-item');\n    if (sidebarItems.length === 0) {\n      return el.shadowRoot.querySelectorAll('ifx-sidebar-item');\n    }\n    return sidebarItems;\n  }\n\n  getSidebarMenuItem() {\n    const sidebarItem = this.el.shadowRoot.querySelector('.sidebar__nav-item')\n    return sidebarItem;\n  }\n\n\n  toggleSubmenu() {\n    if (this.isExpandable) {\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'toggle', 'open');\n      this.handleClassList(menuItem, 'toggle', 'open');\n      // Emit an event with the current component\n      this.handleEventEmission();\n    } else {\n      // If the sidebar item is not expandable, it's a leaf item without a submenu.\n      // Emit an event to the parent `ifx-sidebar` component to notify it that a leaf item has been clicked.\n      if (this.isActionItem) { //its an action item that eg opens an overlay etc and should not influence the active state of the item\n        this.ifxSidebarActionItem.emit(this.el); // emit new event if isActionItem is true\n        return;\n      } else { //its a navigation item which becomes active after clicking it\n        this.handleActiveChange(true, this.internalActiveState)\n        this.ifxSidebarNavigationItem.emit(this.el);\n      }\n      // If the sidebar item is selectable (not expandable), then call the handler function with the current element.\n      if (this.handleItemClick) {\n        this.handleItemClick(this.el);\n      }\n    }\n    // // Emit an event with the current component\n    // this.handleEventEmission();\n  }\n\n\n\n  handleExpandableMenu(sidebarItems) {\n    const sidebarExpandableMenu = this.getExpandableMenu();\n    sidebarItems.forEach((el: HTMLElement) => {\n      const li = document.createElement('li')\n      li.appendChild(el)\n      sidebarExpandableMenu.appendChild(li)\n    })\n  }\n\n  parentElementIsSidebar() {\n    const parentElement = this.el.parentElement;\n    if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR') {\n      return true;\n    } else return false;\n  }\n\n  checkIfMenuItemIsNested() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      this.isNested = false;\n    }\n  }\n\n  checkIfMenuItemIsSubMenu() {\n    const parentElement = this.el.parentElement;\n    const navItem = this.getNavItem(parentElement.shadowRoot);\n    if(parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM' && !this.handleClassList(navItem, 'contains', 'header__section')) {\n      this.isSubMenuItem = true;\n    }else {\n      this.isSubMenuItem = false;\n    }\n  }\n\n  isActive(iteratedComponent) {\n    const activeAttributeValue = iteratedComponent.getAttribute('active');\n    const isActive = activeAttributeValue === 'true';\n    return isActive\n  }\n\n  getParentSection(el: HTMLElement) {\n    let parentElement = el.parentElement;\n\n    while (parentElement && parentElement.tagName.toUpperCase() !== 'IFX-SIDEBAR') {\n      if (parentElement.tagName.toUpperCase() === 'IFX-SIDEBAR-ITEM') {\n        return parentElement;\n      }\n      parentElement = parentElement.parentElement;\n    }\n\n    return null;\n  }\n\n\n\n  handleBorderIndicatorDisplacement(menuItem) {\n    // Recursive function to handle each item\n    const handleItem = (item, menuItem) => {\n      const isActive = this.isActive(item);\n      if (isActive) {\n        const isOpen = this.handleClassList(menuItem, 'contains', 'open');\n        const activeMenuItemSection = this.getActiveItemSection();\n        if (!isOpen) {\n          this.handleClassList(activeMenuItemSection, 'add', 'active-section');\n        } else {\n          this.handleClassList(activeMenuItemSection, 'remove', 'active-section');\n        }\n      }\n\n      // Process each child item\n      const children = this.getSidebarMenuItems(item);\n      children.forEach((child) => handleItem(child, menuItem));\n    }\n\n    // Start with the top-level items\n    const topLevelItems = this.getSidebarMenuItems();\n    topLevelItems.forEach((item) => handleItem(item, menuItem));\n  }\n\n\n  setHref() {\n    if (this.href.toLowerCase().trim() === \"\") {\n      this.internalHref = undefined;\n    } else this.internalHref = this.href;\n  }\n\n  getActiveItemSection() {\n    const parentIsSidebar = this.parentElementIsSidebar()\n    if (parentIsSidebar) {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    } else {\n      const labelElement = this.getNavItem(this.el.shadowRoot)\n      return labelElement;\n    }\n  }\n\n  @Method()\n  async setActiveClasses() {\n    const activeMenuItem = this.getNavItem(this.el.shadowRoot)\n    this.handleClassList(activeMenuItem, 'add', 'active')\n  }\n\n  @Method()\n  async expandMenu(ac: boolean){\n      const menuItem = this.getSidebarMenuItem();\n      const expandableMenu = this.getExpandableMenu();\n      this.handleClassList(expandableMenu, 'add', 'open');\n      this.handleClassList(menuItem, 'add', 'open');\n      if(ac){\n        this.handleClassList(expandableMenu, 'remove', 'active-section')\n        this.handleClassList(menuItem, 'remove', 'active-section')\n      }\n  }\n\n  @Method()\n  async isItemExpandable(){\n    return this.isExpandable;\n  }\n\n  handleActiveState() {\n    if (this.internalActiveState) {\n      this.setActiveClasses()\n    }\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.toggleSubmenu()\n    }\n  }\n\n  componentDidLoad() {\n    this.handleActiveState();\n    if (this.isExpandable) {\n      const sidebarItems = this.getSidebarMenuItems();\n      this.handleExpandableMenu(sidebarItems)\n    }\n    // Listen for collapsed state changes\n    this.updateIndicatorVariant();\n    // Set up MutationObserver to watch for CSS custom property changes\n    this.observeCollapsedState();\n    // Extract text content for title attribute\n    this.extractTitleText();\n  }\n\n  private extractTitleText() {\n    // Get the text content from the slot\n    const slotElement = this.el.shadowRoot.querySelector('slot');\n    if (slotElement) {\n      const assignedNodes = slotElement.assignedNodes();\n      this.titleText = assignedNodes\n        .filter(node => node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ELEMENT_NODE)\n        .map(node => node.textContent?.trim() || '')\n        .join(' ')\n        .trim();\n    }\n  }\n\n  private updateIndicatorVariant() {\n    // Check the data attribute on this element\n    const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\n    //this.indicatorVariant = isCollapsed ? 'dot' : 'number';\n    if (this.numberIndicator > 0) {\n        this.indicatorVariant = isCollapsed ? 'dot' : 'number';\n    }\n  }\n\n  private observeCollapsedState() {\n    // Create a MutationObserver to watch for data-sidebar-collapsed attribute changes\n    const observer = new MutationObserver(() => {\n      this.updateIndicatorVariant();\n    });\n\n    observer.observe(this.el, {\n      attributes: true,\n      attributeFilter: ['data-sidebar-collapsed']\n    });\n  }\n\n  componentWillLoad() {\n    this.internalActiveState = this.active;\n    this.checkIfMenuItemIsNested();\n    this.checkIfMenuItemIsSubMenu();\n    this.setHref()\n\n    // Set attribute to track if item has icon\n    this.el.setAttribute('data-has-icon', this.icon ? 'true' : 'false');\n\n    const sidebarItems = this.getSidebarMenuItems();\n    if (sidebarItems.length !== 0) {\n      this.isExpandable = true;\n    } else {\n      this.isExpandable = false;\n    }\n  }\n\n  componentWillUpdate() {\n    // If the active prop has been set to true and the internalActiveState has not been set to true yet\n    if (this.active && !this.internalActiveState) {\n      // Set the internal active state to true\n      this.internalActiveState = this.active;\n\n      // Emit the event to notify the parent Sidebar\n      this.ifxSidebarNavigationItem.emit(this.el);\n    }\n  }\n\n\nrender() {\n  const isCollapsed = this.el.hasAttribute('data-sidebar-collapsed');\n  const shouldHide = this.el.hasAttribute('data-hide-in-collapsed');\n\n  return (\n    <div style={{ display: shouldHide ? 'none' : 'block' }}>\n      <a\n        tabIndex={1}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        href={this.internalHref}\n        onClick={() => this.toggleSubmenu()}\n        target={this.target}\n        class={`sidebar__nav-item ${!this.isNested && this.isExpandable ? 'header__section' : \"\"} ${this.isSubMenuItem ? 'submenu__item' : \"\"}`}\n        title={this.titleText}\n      >\n        {this.icon &&\n          <div class={`sidebar__nav-item-icon-wrapper ${!this.showIcon && !isCollapsed ? 'noIcon' : \"\"}`}>\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>}\n        <div class=\"sidebar__nav-item-label\">\n          <slot />\n        </div>\n        {\n        (this.isExpandable || !isNaN(this.numberIndicator)) &&\n          <div class=\"sidebar__nav-item-indicator\" style={{\n            display: (!isCollapsed || this.icon) ? 'flex' : 'none'\n          }}>\n            {this.isExpandable &&\n              <span class='item__arrow-wrapper'>\n                <ifx-icon icon=\"chevron-down-16\" />\n              </span>\n            }\n\n            {this.numberIndicator > 0 && !this.isExpandable && !this.isNested &&\n              <span class=\"item__number-indicator\">\n                <ifx-indicator\n                  variant={this.indicatorVariant}\n                  number={this.numberIndicator}>\n                </ifx-indicator>\n              </span>}\n\n          </div>\n        }\n      </a>\n      {this.isExpandable && <ul class='expandable__submenu'></ul>}\n\n    </div>\n  );\n}\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["filterBarCss","FilterBar","constructor","hostRef","this","selectedOptions","showAllFilters","maxShownFilters","showMoreFiltersButton","handleMoreFiltersClick","updateVisibleSlots","handleResetEvent","filterSearchSlot","_a","el","shadowRoot","querySelector","HTMLSlotElement","filterSearchSlottedElements","assignedElements","flatten","forEach","filterSearchWrapper","filterSearch","searchField","querySelectorAll","length","searchFieldElement","value","ifxTopbarFilterChange","emit","handleSearchChange","event","handleTopbarFilterChange","handleFilterSelect","newSelectedOptions","type","filterName","filterValue","detail","existingOptionIndex","findIndex","option","filterValues","push","connectedCallback","addEventListener","window","componentWillUnload","removeEventListener","componentWillLoad","visibleSlots","Number","MAX_SAFE_INTEGER","render","safeVisibleSlots","Math","max","actualNumberOfComponents","slotsToShow","min","slots","Array","from","_","i","h","class","name","Host","key","onClick","disabled","variant","size","target","theme","icon"],"sources":["src/components/table-advanced-version/filter-bar/filter-bar.scss?tag=ifx-filter-bar&encapsulation=shadow","src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"sourcesContent":["/* filter-bar.scss */\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.search-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-start;\n  margin-bottom: tokens.$ifxSpace200;\n}\n\n.components-container {\n  display: flex;\n  width: calc(100% - 48px); /* Adjust width to account for padding */\n  padding-left: 24px;\n  padding-right: 24px;  flex-direction: row;\n  align-items: flex-end;\n  align-content:flex-end;\n  flex-wrap: wrap;\n  gap: tokens.$ifxSpace200;\n}\n\n.filter-slot-wrapper {\n    flex-grow: 1;\n    flex-basis: 100%; \n    max-width: 100%; \n  }\n\n@media (max-width: 1024px) { /* Adjust based on your breakpoints for mid/small screens */\n    .more-filters-wrapper {\n        order: 3; /* Keeps the button at the end/new row */\n        width: 100%; /* Takes full width to allow centering */\n        display: flex; /* Enables flexbox properties */\n        justify-content: center; /* Centers the button horizontally */\n        padding-top: tokens.$ifxSpace200; /* Adds space above the button, adjust as needed */\n      }\n  }\n\n\n  @media (min-width: 720px) and (max-width: 1024px) {\n    .filter-slot-wrapper {\n        flex-basis: calc((100% - tokens.$ifxSpace200) / 2);\n        max-width: calc((100% - tokens.$ifxSpace200) / 2);\n      }\n    \n\n}\n\n  @media (min-width: 1025px) {\n    .filter-slot-wrapper {\n        flex-basis: auto; \n        max-width: 200px; \n      }\n\n    ::slotted([slot=\"filter-search\"]) {\n        max-width: 828px;\n      }\n  }\n  \n  ::slotted([slot=\"filter-search\"]) {\n    flex-grow: 1;\n    flex-basis: 100%;\n    width: 100%; \n  }","// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-filter-bar',\n  styleUrl: 'filter-bar.scss',\n  shadow: true\n})\nexport class FilterBar {\n  @Element() el: HTMLElement;\n  @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n  @Event() ifxTopbarFilterChange: EventEmitter;\n  @State() showAllFilters: boolean = false;\n  @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n  @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n  /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again */\n  connectedCallback() {\n    this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  componentWillUnload() {\n    this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n    this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n    window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n  }\n\n  \n  componentWillLoad() {\n    this.updateVisibleSlots();\n  }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n   this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n  handleMoreFiltersClick = () => {\n    this.showAllFilters = true;\n    this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n  }\n\n  handleResetEvent = () => {\n    const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n    if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n      const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n  \n    filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n      const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n      const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n      if (searchField.length > 0) {\n        searchField.forEach((searchFieldElement: any) => {\n          searchFieldElement.value = '';\n        });\n      }\n    });\n  }\n\n    this.selectedOptions = [];\n\n    // Emit the change to inform any parent components that the filters have been reset\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n\n  handleSearchChange = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleFilterSelect = (event: CustomEvent) => {\n    this.handleTopbarFilterChange(event);\n  }\n\n  handleTopbarFilterChange = (event: CustomEvent) => {\n    const newSelectedOptions = [...this.selectedOptions];\n\n    if (event.type === 'ifxFilterSearchChange') {\n      const { filterName, filterValue } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        // If an existing filter is found, update its value\n        newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n      }\n    } else if (event.type === 'ifxFilterSelect') {\n      const { filterName, filterValues, type } = event.detail;\n      const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n      if (existingOptionIndex !== -1) {\n        newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n        newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n      } else {\n        newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n      }\n    }\n\n    this.selectedOptions = newSelectedOptions;\n    this.ifxTopbarFilterChange.emit(this.selectedOptions);\n  }\n\n  render() {\n    const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n    const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n     // Calculate slotsToShow safely\n    const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n    const slots = Array.from({ length: slotsToShow }, (_, i) => (\n      <div class=\"filter-slot-wrapper\">\n        <slot name={`filter-component-${i + 1}`}></slot>\n      </div>\n    ));\n\n    return (\n      <Host>\n        <div class=\"search-container\">\n          <slot name=\"filter-search\"></slot> {/* Directly place the search slot here */}\n        </div>\n        <div class=\"components-container\">\n          {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n          {this.showMoreFiltersButton && !this.showAllFilters && (\n            <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n              <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n                <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n              </ifx-button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownItemCss","DropdownItem","constructor","hostRef","this","href","target","hide","size","handleMenuSize","event","detail","handleEventEmission","ifxDropdownItem","emit","el","textContent","render","hasHref","undefined","common","class","onClick","role","tabIndex","h","Object","assign","key","icon"],"sources":["src/components/dropdown/dropdown-item/dropdown-item.scss?tag=ifx-dropdown-item&encapsulation=shadow","src/components/dropdown/dropdown-item/dropdown-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.dropdown-item {\n  text-decoration: none;\n  color: tokens.$ifxColorBaseBlack;\n  display: flex;\n  align-items: center;\n  padding: 8px 16px;\n  gap: tokens.$ifxSize100;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n  &:focus{\n    outline: none;\n    box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\n  }\n\n  &.hide {\n    display: none;\n  }\n\n  & span {\n    color: tokens.$ifxColorBaseBlack;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px;\n    /* 150% */\n  }\n\n  &.small {\n    & span {\n      font-size: 14px;\n    }\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.icon {\n  margin-right: 4px;\n}","import { Component, Prop, h, Listen, State, Event, EventEmitter, Element } from \"@stencil/core\";\n\n@Component({\n  tag: 'ifx-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true\n})\n\nexport class DropdownItem {\n  @Prop() icon: string;\n  @Prop() href: string = \"\"\n  @Prop() target: string = \"_self\"\n  @Prop() hide: boolean = false;\n  @State() size: string = 'l'\n  @Event() ifxDropdownItem: EventEmitter;\n  @Element() el;\n\n  @Listen('menuSize', { target: 'body' })\n  handleMenuSize(event: CustomEvent) {\n    this.size = event.detail;\n  }\n\n  handleEventEmission() {\n    this.ifxDropdownItem.emit(this.el.textContent)\n  }\n\n  render() {\n    const hasHref = this.href !== undefined && this.href !== null && this.href !== '';\n    const common = {\n      class: `dropdown-item ${this.size === 's' ? 'small' : \"\"} ${this.hide ? 'hide' : \"\"}`,\n      onClick: () => this.handleEventEmission(),\n      role: 'menuitem'\n    } as any;\n\n    if (!hasHref) common.tabIndex = 0;\n\n    return (\n      <a {...common} {...(hasHref ? { href: this.href, target: this.target } : {})}>\n        {this.icon && <ifx-icon class=\"icon\" icon={this.icon}></ifx-icon>}\n        <span><slot /></span>\n      </a>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,klB,MCQXC,EAAY,MANzB,WAAAC,CAAAC,G,2DAQUC,KAAIC,KAAW,GACfD,KAAME,OAAW,QACjBF,KAAIG,KAAY,MACfH,KAAII,KAAW,GA8BzB,CAzBC,cAAAC,CAAeC,GACbN,KAAKI,KAAOE,EAAMC,M,CAGpB,mBAAAC,GACER,KAAKS,gBAAgBC,KAAKV,KAAKW,GAAGC,Y,CAGpC,MAAAC,GACE,MAAMC,EAAUd,KAAKC,OAASc,WAAaf,KAAKC,OAAS,MAAQD,KAAKC,OAAS,GAC/E,MAAMe,EAAS,CACbC,MAAO,iBAAiBjB,KAAKI,OAAS,IAAM,QAAU,MAAMJ,KAAKG,KAAO,OAAS,KACjFe,QAAS,IAAMlB,KAAKQ,sBACpBW,KAAM,YAGR,IAAKL,EAASE,EAAOI,SAAW,EAEhC,OACEC,EAAO,IAAAC,OAAAC,OAAA,CAAAC,IAAA,4CAAAR,EAAaF,EAAU,CAAEb,KAAMD,KAAKC,KAAMC,OAAQF,KAAKE,QAAW,IACtEF,KAAKyB,MAAQJ,EAAA,YAAAG,IAAA,2CAAUP,MAAM,OAAOQ,KAAMzB,KAAKyB,OAChDJ,EAAA,QAAAG,IAAA,4CAAMH,EAAQ,QAAAG,IAAA,8C","ignoreList":[]}