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

package/dist/cjs/dom-utils-dykhxr-_.js.map

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

package/dist/cjs/framework-detection-C_6nNXcS.js.map

@@ -1 +1 @@
-{"version":3,"file":"framework-detection-C_6nNXcS.js","sources":["src/global/utils/tracking.ts","src/global/utils/dom-ready.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\r\n  interface Window {\r\n    btntConfig?: any;\r\n    btntQueue?: any[];\r\n    btnt?: (data: object) => void;\r\n    INFINEON_TRACKED_COMPONENTS?: Set<string>; \r\n  }\r\n}\r\n\r\nconst isTestEnvironment = typeof process !== 'undefined' &&\r\n  process.env &&\r\n  process.env.NODE_ENV === 'test';\r\n\r\nfunction initializeTracking() {\r\n  if (isTestEnvironment) {\r\n    if (!window.btnt) { \r\n      window.btnt = () => { };\r\n    }\r\n    return;\r\n  }\r\n\r\n  (function (t, r, _kk, n, pp) {\r\n    if (typeof window.btntConfig !== \"object\") {\r\n      window.btntConfig = {\r\n        domain: \"https://ssgtm.infineon.com\",\r\n        withCookies: true,\r\n        maxBatchSize: 10\r\n      };\r\n    }\r\n\r\n    if (window[\"btnt\"]) return;\r\n\r\n    window[\"btnt\"] = function (z) {\r\n      if (typeof z !== \"object\") {\r\n        z = {};\r\n      }\r\n      if (typeof window.btntQueue !== \"object\") {\r\n        window.btntQueue = [];\r\n      }\r\n      window.btntQueue.push(z);\r\n    };\r\n\r\n    n = t.createElement(r);\r\n\r\n    // Add safety check for test environments\r\n    pp = t.getElementsByTagName(r)[0];\r\n    if (pp && pp.parentNode) {\r\n      n.async = 1;\r\n      n.src = window.btntConfig.domain + \"/btnt.js\";\r\n      pp.parentNode.insertBefore(n, pp);\r\n    }\r\n  })(document, \"script\");\r\n}\r\n\r\nexport function trackComponent(componentName: string, environment: string) {\r\n  const skipEnvironments = ['jest', 'localhost', 'error'];\r\n  if (skipEnvironments.includes(environment)) {\r\n    return;\r\n  }\r\n\r\n  if (!window.INFINEON_TRACKED_COMPONENTS) {\r\n    window.INFINEON_TRACKED_COMPONENTS = new Set();\r\n  }\r\n\r\n  if (window.INFINEON_TRACKED_COMPONENTS.has(componentName)) {\r\n    return; \r\n  }\r\n\r\n  window.INFINEON_TRACKED_COMPONENTS.add(componentName);\r\n\r\n  if (!window.btnt) initializeTracking();\r\n\r\n  window.btnt({\r\n    event_name: \"component_initialized\",\r\n    component_name: componentName,\r\n    environment: environment\r\n  });\r\n}\r\n\r\nexport default trackComponent;","export const waitForDOMReady = (): Promise<void> => {\r\n  return new Promise((resolve) => {\r\n    if (document.readyState === 'complete' || document.readyState === 'interactive') {\r\n      resolve();\r\n    } else {\r\n      const onReady = () => {\r\n        resolve();\r\n        document.removeEventListener('DOMContentLoaded', onReady);\r\n      };\r\n      document.addEventListener('DOMContentLoaded', onReady);\r\n    }\r\n  });\r\n};","let frameworkCache: string | null = null;\r\nimport { waitForDOMReady } from './dom-ready';\r\n\r\nexport const detectFramework = async (): Promise<string> => {\r\n  if (frameworkCache) return frameworkCache;\r\n  \r\n  if (typeof window === 'undefined' || typeof document === 'undefined') {\r\n    frameworkCache = 'non-browser';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const win = window as any;\r\n  const doc = document;\r\n\r\n  const isJest = typeof process !== 'undefined' && \r\n                 process.env && \r\n                 process.env.NODE_ENV === 'test';\r\n  if (isJest) {\r\n    frameworkCache = 'jest';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const isStorybook = win.location.search.includes('viewMode') || \r\n                      win.location.href.includes('viewMode') ||\r\n                      win.__STORYBOOK_ENV__;\r\n  \r\n  if (isStorybook) {\r\n    frameworkCache = 'Storybook';\r\n    return frameworkCache;\r\n  }\r\n\r\n  const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);\r\n  if (isLocalhost) {\r\n    frameworkCache = 'localhost';\r\n    return frameworkCache;\r\n  }\r\n\r\n  try {\r\n\r\n    if (win.React || win.ReactDOM) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (win.ng || win.getAllAngularRootElements) {\r\n      frameworkCache = 'Angular';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (win.Vue || win.__VUE__) {\r\n      frameworkCache = 'Vue';\r\n      return frameworkCache;\r\n    }\r\n\r\n    await waitForDOMReady();\r\n\r\n    const reactRoot = doc.querySelector('[data-reactroot], [data-reactid]');\r\n    if (reactRoot) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    const rootContainers = Array.from(doc.querySelectorAll('body > div'));\r\n    const hasReactRoot = rootContainers.some(container => {\r\n      const keys = Object.keys(container);\r\n      return keys.some(key => key.startsWith('__reactContainer'));\r\n    });\r\n    \r\n    if (hasReactRoot) {\r\n      frameworkCache = 'React';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (doc.querySelector('[ng-version], [ng-app]')) {\r\n      frameworkCache = 'Angular';\r\n      return frameworkCache;\r\n    }\r\n    \r\n    if (doc.querySelector('[data-v-app]')) {\r\n      frameworkCache = 'Vue';\r\n      return frameworkCache;\r\n    }\r\n\r\n    frameworkCache = 'Vanilla';\r\n    return frameworkCache;\r\n  } catch (e) {\r\n    frameworkCache = 'error';\r\n    return frameworkCache;\r\n  }\r\n};"],"names":[],"mappings":"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"}
+{"version":3,"file":"framework-detection-C_6nNXcS.js","sources":["src/global/utils/tracking.ts","src/global/utils/dom-ready.ts","src/global/utils/framework-detection.ts"],"sourcesContent":["declare global {\n  interface Window {\n    btntConfig?: any;\n    btntQueue?: any[];\n    btnt?: (data: object) => void;\n    INFINEON_TRACKED_COMPONENTS?: Set<string>; \n  }\n}\n\nconst isTestEnvironment = typeof process !== 'undefined' &&\n  process.env &&\n  process.env.NODE_ENV === 'test';\n\nfunction initializeTracking() {\n  if (isTestEnvironment) {\n    if (!window.btnt) { \n      window.btnt = () => { };\n    }\n    return;\n  }\n\n  (function (t, r, _kk, n, pp) {\n    if (typeof window.btntConfig !== \"object\") {\n      window.btntConfig = {\n        domain: \"https://ssgtm.infineon.com\",\n        withCookies: true,\n        maxBatchSize: 10\n      };\n    }\n\n    if (window[\"btnt\"]) return;\n\n    window[\"btnt\"] = function (z) {\n      if (typeof z !== \"object\") {\n        z = {};\n      }\n      if (typeof window.btntQueue !== \"object\") {\n        window.btntQueue = [];\n      }\n      window.btntQueue.push(z);\n    };\n\n    n = t.createElement(r);\n\n    // Add safety check for test environments\n    pp = t.getElementsByTagName(r)[0];\n    if (pp && pp.parentNode) {\n      n.async = 1;\n      n.src = window.btntConfig.domain + \"/btnt.js\";\n      pp.parentNode.insertBefore(n, pp);\n    }\n  })(document, \"script\");\n}\n\nexport function trackComponent(componentName: string, environment: string) {\n  const skipEnvironments = ['jest', 'localhost', 'error'];\n  if (skipEnvironments.includes(environment)) {\n    return;\n  }\n\n  if (!window.INFINEON_TRACKED_COMPONENTS) {\n    window.INFINEON_TRACKED_COMPONENTS = new Set();\n  }\n\n  if (window.INFINEON_TRACKED_COMPONENTS.has(componentName)) {\n    return; \n  }\n\n  window.INFINEON_TRACKED_COMPONENTS.add(componentName);\n\n  if (!window.btnt) initializeTracking();\n\n  window.btnt({\n    event_name: \"component_initialized\",\n    component_name: componentName,\n    environment: environment\n  });\n}\n\nexport default trackComponent;","export const waitForDOMReady = (): Promise<void> => {\n  return new Promise((resolve) => {\n    if (document.readyState === 'complete' || document.readyState === 'interactive') {\n      resolve();\n    } else {\n      const onReady = () => {\n        resolve();\n        document.removeEventListener('DOMContentLoaded', onReady);\n      };\n      document.addEventListener('DOMContentLoaded', onReady);\n    }\n  });\n};","let frameworkCache: string | null = null;\nimport { waitForDOMReady } from './dom-ready';\n\nexport const detectFramework = async (): Promise<string> => {\n  if (frameworkCache) return frameworkCache;\n  \n  if (typeof window === 'undefined' || typeof document === 'undefined') {\n    frameworkCache = 'non-browser';\n    return frameworkCache;\n  }\n\n  const win = window as any;\n  const doc = document;\n\n  const isJest = typeof process !== 'undefined' && \n                 process.env && \n                 process.env.NODE_ENV === 'test';\n  if (isJest) {\n    frameworkCache = 'jest';\n    return frameworkCache;\n  }\n\n  const isStorybook = win.location.search.includes('viewMode') || \n                      win.location.href.includes('viewMode') ||\n                      win.__STORYBOOK_ENV__;\n  \n  if (isStorybook) {\n    frameworkCache = 'Storybook';\n    return frameworkCache;\n  }\n\n  const isLocalhost = ['localhost', '127.0.0.1'].includes(win.location.hostname);\n  if (isLocalhost) {\n    frameworkCache = 'localhost';\n    return frameworkCache;\n  }\n\n  try {\n\n    if (win.React || win.ReactDOM) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    if (win.ng || win.getAllAngularRootElements) {\n      frameworkCache = 'Angular';\n      return frameworkCache;\n    }\n    \n    if (win.Vue || win.__VUE__) {\n      frameworkCache = 'Vue';\n      return frameworkCache;\n    }\n\n    await waitForDOMReady();\n\n    const reactRoot = doc.querySelector('[data-reactroot], [data-reactid]');\n    if (reactRoot) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    const rootContainers = Array.from(doc.querySelectorAll('body > div'));\n    const hasReactRoot = rootContainers.some(container => {\n      const keys = Object.keys(container);\n      return keys.some(key => key.startsWith('__reactContainer'));\n    });\n    \n    if (hasReactRoot) {\n      frameworkCache = 'React';\n      return frameworkCache;\n    }\n    \n    if (doc.querySelector('[ng-version], [ng-app]')) {\n      frameworkCache = 'Angular';\n      return frameworkCache;\n    }\n    \n    if (doc.querySelector('[data-v-app]')) {\n      frameworkCache = 'Vue';\n      return frameworkCache;\n    }\n\n    frameworkCache = 'Vanilla';\n    return frameworkCache;\n  } catch (e) {\n    frameworkCache = 'error';\n    return frameworkCache;\n  }\n};"],"names":[],"mappings":"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"}

package/dist/cjs/ifx-accordion.ifx-accordion-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace100;\r\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion',\r\n  styleUrl: 'accordion.scss',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n  @Element() el: HTMLElement;\r\n  @Prop() autoCollapse: boolean = false;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-accordion', await framework)\r\n    }\r\n  }\r\n\r\n  @Listen('ifxOpen')\r\n  async onItemOpen(event: CustomEvent) {\r\n    if (this.autoCollapse) {\r\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n      for (const item of items) {\r\n        const itemElement = item as HTMLIfxAccordionItemElement;\r\n        if (itemElement !== event.target && (await itemElement.open)) {\r\n          itemElement.open = false;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"accordion-wrapper\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","// ifxAccordionItem.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.accordion-item {\r\n  border-radius: 3px;\r\n  transition: all 0.3s;\r\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n\r\n}\r\n\r\n.accordion-title:focus {\r\n  outline: none;\r\n}\r\n\r\n// workaround to add corner radius to outline\r\n.accordion-title:focus::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  top: -4px;\r\n  bottom: -4px;\r\n  left: -4px;\r\n  right: -4px;\r\n  border-radius: 5px;\r\n  border: 2px solid tokens.$ifxColorOcean500;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.accordion-title:hover {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  color: tokens.$ifxColorOcean600;\r\n}\r\n\r\n.accordion-title {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  gap: tokens.$ifxSpace150;\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  cursor: pointer;\r\n  margin: 4px 4px 0px;\r\n}\r\n\r\n.accordion-caption {\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeL;\r\n}\r\n\r\n.accordion-content {\r\n  gap: tokens.$ifxSpace100;\r\n  overflow: hidden;\r\n  height: 0;\r\n  transition: height 0.3s ease;\r\n  line-height: 24px;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n}\r\n\r\n.inner-content {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  padding: tokens.$ifxSpace200;\r\n  word-wrap: break-word;\r\n  overflow-wrap: anywhere;\r\n  align-self: stretch;\r\n  margin: 0 4px 4px;\r\n  border: 1px solid transparent;\r\n  border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-icon {\r\n  font-weight: bold;\r\n  display: flex;\r\n  transition: transform 0.3s;\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean600;\r\n\r\n  }\r\n}\r\n\r\n\r\n.accordion-item.open .accordion-content {\r\n  max-height: 1000px; // Arbitrary large value to allow content to expand\r\n}\r\n\r\n.accordion-item.open .accordion-icon {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-item.open .inner-content {\r\n  border-color: tokens.$ifxColorEngineering200;\r\n  border-top-color: transparent;\r\n  transition: border-color 0s; \r\n}\r\n\r\n.accordion-item:not(.open) .inner-content {\r\n  transition: border-color 0s 0.3s; \r\n}\r\n\r\n.inner-content {\r\n  &.no-content { \r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n}","//ifxAccordionItem\r\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion-item',\r\n  styleUrl: 'accordionItem.scss',\r\n  shadow: true,\r\n})\r\nexport class AccordionItem {\r\n  @Element() el;\r\n  @Prop() caption: string;\r\n  @Prop({\r\n    mutable: true,\r\n  })\r\n  open: boolean = false;\r\n  @Prop() AriaLevel = 3;\r\n  @State() internalOpen: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  private contentEl!: HTMLElement;\r\n  private titleEl!: HTMLElement;\r\n  private resizeObserver!: ResizeObserver;\r\n\r\n  componentWillLoad() {\r\n    this.internalOpen = this.open;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\r\n    if (this.contentEl) {\r\n      this.attachResizeObserver();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n  }\r\n\r\n  @Watch('open')\r\n  openChanged(newValue: boolean) {\r\n    this.internalOpen = newValue;\r\n  }\r\n\r\n  toggleOpen() {\r\n    this.internalOpen = !this.internalOpen;\r\n    this.open = this.internalOpen;\r\n\r\n    if (this.internalOpen) {\r\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\r\n    } else {\r\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\r\n    }\r\n  }\r\n\r\n  openAccordionItem() {\r\n    if (this.internalOpen) {\r\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\r\n      this.contentEl.style.overflow = 'hidden';\r\n    } else {\r\n      this.contentEl.style.height = '0';\r\n      this.contentEl.style.overflow = 'hidden';\r\n    }\r\n  }\r\n\r\n  getInnerContentWrapper() {\r\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\r\n    return innerContentEl;\r\n  }\r\n\r\n  attachResizeObserver() {\r\n    const innerContentEl = this.getInnerContentWrapper();\r\n\r\n    if (innerContentEl) {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        if (this.internalOpen) {\r\n          this.openAccordionItem();\r\n        }\r\n      });\r\n\r\n      this.resizeObserver.observe(innerContentEl);\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    const path = ev.composedPath();\r\n\r\n    if (!path.includes(this.titleEl)) {\r\n      return;\r\n    }\r\n\r\n    switch (ev.key) {\r\n      case 'Enter': // fallthrough\r\n      case ' ': // space\r\n        ev.preventDefault();\r\n        this.toggleOpen();\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkSlotContent() {\r\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\r\n    const hasContent = slot.assignedNodes().length > 0;\r\n    const innerContent = this.getInnerContentWrapper();\r\n    if (!hasContent) {\r\n      innerContent.classList.add('no-content');\r\n    } else if (innerContent.classList.contains('no-content')) {\r\n      innerContent.classList.remove('no-content');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\r\n        <div\r\n          role=\"button\"\r\n          aria-expanded={this.internalOpen}\r\n          aria-controls=\"accordion-content\"\r\n          class=\"accordion-title\"\r\n          onClick={() => this.toggleOpen()}\r\n          tabindex=\"0\"\r\n          ref={el => (this.titleEl = el as HTMLElement)}\r\n        >\r\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </span>\r\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\r\n            {this.caption}\r\n          </span>\r\n        </div>\r\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\r\n          <div class=\"inner-content\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,wLAAwL;;MCUhM,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6BtC;AA3BC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKpD,MAAM,UAAU,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAMhC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5BA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;ACtCZ,MAAM,gBAAgB,GAAG,s8CAAs8C;;MCQl9C,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAWE,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACb,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AACZ,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6HvC;IAtHC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAG/B,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACvE,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,oBAAoB,EAAE;;;IAI/B,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;;AAI1B,IAAA,WAAW,CAAC,QAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG9B,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;AACtC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY;AAE7B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;aAC3C;AACL,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;IAIxD,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aACnC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACjC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;;IAI5C,sBAAsB,GAAA;AACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACzE,QAAA,OAAO,cAAc;;IAGvB,oBAAoB,GAAA;AAClB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAEpD,IAAI,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC5C,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;oBACrB,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,aAAC,CAAC;AAEF,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;;;AAK/C,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAChC;;AAGF,QAAA,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE;gBACnB,IAAI,CAAC,UAAU,EAAE;gBACjB;;;IAIN,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB;QACxE,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAClD,IAAI,CAAC,UAAU,EAAE;AACf,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;aACnC,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACxD,YAAA,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC;;;IAI/C,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC7DA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,YAAY,EAClB,eAAA,EAAA,mBAAmB,EACjC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,EAAA,EAE7CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,EAAa,YAAA,EAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAAE,KAAK,EAAC,gBAAgB,EAAA,EAC1GA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC9B,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAA,EACnD,IAAI,CAAC,OAAO,CACR,CACH,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EAAiB,mBAAmB,EAAA,EACtJA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACF;;;;;;;;;;;;"}
+{"version":3,"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } 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-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-accordion', await framework)\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px 4px 0px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  overflow: hidden;\n  height: 0;\n  transition: height 0.3s ease;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace200;\n  word-wrap: break-word;\n  overflow-wrap: anywhere;\n  align-self: stretch;\n  margin: 0 4px 4px;\n  border: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n.accordion-item.open .accordion-content {\n  max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n  border-color: tokens.$ifxColorEngineering200;\n  border-top-color: transparent;\n  transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n  transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n  &.no-content { \n    border: none;\n    padding: 0;\n    margin: 0;\n  }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  })\n  open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n    if (this.contentEl) {\n      this.attachResizeObserver();\n    }\n  }\n\n  componentDidUpdate() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n      this.contentEl.style.overflow = 'hidden';\n    } else {\n      this.contentEl.style.height = '0';\n      this.contentEl.style.overflow = 'hidden';\n    }\n  }\n\n  getInnerContentWrapper() {\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n    return innerContentEl;\n  }\n\n  attachResizeObserver() {\n    const innerContentEl = this.getInnerContentWrapper();\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if (!path.includes(this.titleEl)) {\n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n  checkSlotContent() {\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    const innerContent = this.getInnerContentWrapper();\n    if (!hasContent) {\n      innerContent.classList.add('no-content');\n    } else if (innerContent.classList.contains('no-content')) {\n      innerContent.classList.remove('no-content');\n    }\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div\n          role=\"button\"\n          aria-expanded={this.internalOpen}\n          aria-controls=\"accordion-content\"\n          class=\"accordion-title\"\n          onClick={() => this.toggleOpen()}\n          tabindex=\"0\"\n          ref={el => (this.titleEl = el as HTMLElement)}\n        >\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\" />\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\n            {this.caption}\n          </span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}

package/dist/cjs/ifx-accordion_2.cjs.entry.js

@@ -29,7 +29,7 @@ const Accordion = class {
         }
     }
     render() {
-        return (index.h("div", { key: '9e32f92c7a61c58a537e033e48c57770c4fa60d4', class: "accordion-wrapper" }, index.h("slot", { key: 'ec234435886b3271ce2f2712f3e3f54fa3dca8ff' })));
+        return (index.h("div", { key: '903cc44b4886b77e59e66ab2a5cdf681dafeb9bc', class: "accordion-wrapper" }, index.h("slot", { key: 'e0abec42188606e8c80fc3db44fba19a7aa69ed8' })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -125,7 +125,7 @@ const AccordionItem = class {
         }
     }
     render() {
-        return (index.h("div", { key: '8e4ee04a7a8fa3dbea906d43a1be6064e4c208a6', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: '109998fb112b8206eb8a28a6ef479e40e317e92c', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: el => (this.titleEl = el) }, index.h("span", { key: '4936b00dd6203f5856e68ffb6c13ac8f588057fa', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '511d52bd160ccbe2e1936152c45517567061f57d', icon: "chevron-down-16" })), index.h("span", { key: 'fd82b2df5cbf8d50cfb00c54e59793348500323b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '77c229869cdf02d27ff1011cd5e5ad3fa201343e', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '0c9f7ea889fe60957ad9223426142b9509b3883b', class: "inner-content" }, index.h("slot", { key: '1e4218f5554a774a3cde38749a21a7490f72d18d' })))));
+        return (index.h("div", { key: '1317347110a9c74932695b8ffff8ca31d3c8e6c3', class: `accordion-item ${this.internalOpen ? 'open' : ''}` }, index.h("div", { key: 'ad5d46e476f76ac121239c15904a4884a6ba4cc5', role: "button", "aria-expanded": this.internalOpen, "aria-controls": "accordion-content", class: "accordion-title", onClick: () => this.toggleOpen(), tabindex: "0", ref: el => (this.titleEl = el) }, index.h("span", { key: '924e061fd270701a7c78433a56fcd70a40dfe7f5', "aria-hidden": "true", role: "heading", "aria-level": String(this.AriaLevel), class: "accordion-icon" }, index.h("ifx-icon", { key: '40cee40a058eb576d0ef5482f6f7f0adb47a5f4e', icon: "chevron-down-16" })), index.h("span", { key: '37715ae9f3621954f081bec3d4e861d1dd60847b', id: "accordion-caption", class: "accordion-caption" }, this.caption)), index.h("div", { key: '32c1186d1f4dd1a5a09842224cbfe3d648cc7fac', id: "accordion-content", class: "accordion-content", ref: el => (this.contentEl = el), role: "region", "aria-labelledby": "accordion-caption" }, index.h("div", { key: '35618fea4d36844fbad5aed1c07dc2e7378a1d4e', class: "inner-content" }, index.h("slot", { key: 'eaa5cdaffd9381f8b05b202f6213d8304fbf7cbb' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-accordion_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,wLAAwL;;MCUhM,SAAS,GAAA,MAAA;AALtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6BtC;AA3BC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC;;;IAKpD,MAAM,UAAU,CAAC,KAAkB,EAAA;AACjC,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AACxE,YAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,MAAM,WAAW,GAAG,IAAmC;AACvD,gBAAA,IAAI,WAAW,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE;AAC5D,oBAAA,WAAW,CAAC,IAAI,GAAG,KAAK;;;;;IAMhC,MAAM,GAAA;QACJ,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC5BA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;ACtCZ,MAAM,gBAAgB,GAAG,s8CAAs8C;;MCQl9C,aAAa,GAAA,MAAA;AAL1B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAWE,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AACb,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;AACZ,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AA6HvC;IAtHC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI;;IAG/B,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;AACxB,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC;AACvE,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,oBAAoB,EAAE;;;IAI/B,kBAAkB,GAAA;QAChB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,iBAAiB,EAAE;;AAI1B,IAAA,WAAW,CAAC,QAAiB,EAAA;AAC3B,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;IAG9B,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;AACtC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY;AAE7B,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC;;aAC3C;AACL,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;;;IAIxD,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,YAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,SAAS,CAAC,YAAY,IAAI;YAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;aACnC;YACL,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;YACjC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;;;IAI5C,sBAAsB,GAAA;AACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,gBAAgB,CAAC;AACzE,QAAA,OAAO,cAAc;;IAGvB,oBAAoB,GAAA;AAClB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAEpD,IAAI,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;AAC5C,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;oBACrB,IAAI,CAAC,iBAAiB,EAAE;;AAE5B,aAAC,CAAC;AAEF,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC;;;AAK/C,IAAA,aAAa,CAAC,EAAiB,EAAA;AAC7B,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,YAAY,EAAE;QAE9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YAChC;;AAGF,QAAA,QAAQ,EAAE,CAAC,GAAG;YACZ,KAAK,OAAO,CAAC;YACb,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE;gBACnB,IAAI,CAAC,UAAU,EAAE;gBACjB;;;IAIN,gBAAgB,GAAA;AACd,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAoB;QACxE,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC;AAClD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,sBAAsB,EAAE;QAClD,IAAI,CAAC,UAAU,EAAE;AACf,YAAA,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC;;aACnC,IAAI,YAAY,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AACxD,YAAA,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC;;;IAI/C,MAAM,GAAA;QACJ,QACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,kBAAkB,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,EAAE,CAAE,CAAA,EAAA,EAC7DA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,YAAY,EAClB,eAAA,EAAA,mBAAmB,EACjC,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAC,GAAG,EACZ,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAiB,CAAC,EAAA,EAE7CA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAkB,MAAM,EAAC,IAAI,EAAC,SAAS,EAAa,YAAA,EAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAW,EAAE,KAAK,EAAC,gBAAgB,EAAA,EAC1GA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC9B,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAA,EACnD,IAAI,CAAC,OAAO,CACR,CACH,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAiB,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAA,iBAAA,EAAiB,mBAAmB,EAAA,EACtJA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACF;;;;;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.accordion-wrapper {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: tokens.$ifxSpace100;\r\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n}","import { Component, h, Listen, Element, Prop } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion',\r\n  styleUrl: 'accordion.scss',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Accordion {\r\n  @Element() el: HTMLElement;\r\n  @Prop() autoCollapse: boolean = false;\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-accordion', await framework)\r\n    }\r\n  }\r\n\r\n  @Listen('ifxOpen')\r\n  async onItemOpen(event: CustomEvent) {\r\n    if (this.autoCollapse) {\r\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\r\n      for (const item of items) {\r\n        const itemElement = item as HTMLIfxAccordionItemElement;\r\n        if (itemElement !== event.target && (await itemElement.open)) {\r\n          itemElement.open = false;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"accordion-wrapper\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","// ifxAccordionItem.scss\r\n@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n\r\n.accordion-item {\r\n  border-radius: 3px;\r\n  transition: all 0.3s;\r\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\r\n\r\n}\r\n\r\n.accordion-title:focus {\r\n  outline: none;\r\n}\r\n\r\n// workaround to add corner radius to outline\r\n.accordion-title:focus::after {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  top: -4px;\r\n  bottom: -4px;\r\n  left: -4px;\r\n  right: -4px;\r\n  border-radius: 5px;\r\n  border: 2px solid tokens.$ifxColorOcean500;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.accordion-title:hover {\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  color: tokens.$ifxColorOcean600;\r\n}\r\n\r\n.accordion-title {\r\n  display: flex;\r\n  align-items: center;\r\n  position: relative;\r\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\r\n  gap: tokens.$ifxSpace150;\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border: 1px solid tokens.$ifxColorEngineering200;\r\n  cursor: pointer;\r\n  margin: 4px 4px 0px;\r\n}\r\n\r\n.accordion-caption {\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  font-size: tokens.$ifxFontSizeL;\r\n}\r\n\r\n.accordion-content {\r\n  gap: tokens.$ifxSpace100;\r\n  overflow: hidden;\r\n  height: 0;\r\n  transition: height 0.3s ease;\r\n  line-height: 24px;\r\n  font-size: tokens.$ifxFontSizeM;\r\n  font-weight: 400;\r\n}\r\n\r\n.inner-content {\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  padding: tokens.$ifxSpace200;\r\n  word-wrap: break-word;\r\n  overflow-wrap: anywhere;\r\n  align-self: stretch;\r\n  margin: 0 4px 4px;\r\n  border: 1px solid transparent;\r\n  border-top: 1px solid transparent;\r\n}\r\n\r\n.accordion-icon {\r\n  font-weight: bold;\r\n  display: flex;\r\n  transition: transform 0.3s;\r\n\r\n  &:hover {\r\n    color: tokens.$ifxColorOcean600;\r\n\r\n  }\r\n}\r\n\r\n\r\n.accordion-item.open .accordion-content {\r\n  max-height: 1000px; // Arbitrary large value to allow content to expand\r\n}\r\n\r\n.accordion-item.open .accordion-icon {\r\n  transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-item.open .inner-content {\r\n  border-color: tokens.$ifxColorEngineering200;\r\n  border-top-color: transparent;\r\n  transition: border-color 0s; \r\n}\r\n\r\n.accordion-item:not(.open) .inner-content {\r\n  transition: border-color 0s 0.3s; \r\n}\r\n\r\n.inner-content {\r\n  &.no-content { \r\n    border: none;\r\n    padding: 0;\r\n    margin: 0;\r\n  }\r\n}","//ifxAccordionItem\r\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'ifx-accordion-item',\r\n  styleUrl: 'accordionItem.scss',\r\n  shadow: true,\r\n})\r\nexport class AccordionItem {\r\n  @Element() el;\r\n  @Prop() caption: string;\r\n  @Prop({\r\n    mutable: true,\r\n  })\r\n  open: boolean = false;\r\n  @Prop() AriaLevel = 3;\r\n  @State() internalOpen: boolean = false;\r\n  @Event() ifxOpen: EventEmitter;\r\n  @Event() ifxClose: EventEmitter;\r\n  private contentEl!: HTMLElement;\r\n  private titleEl!: HTMLElement;\r\n  private resizeObserver!: ResizeObserver;\r\n\r\n  componentWillLoad() {\r\n    this.internalOpen = this.open;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\r\n    if (this.contentEl) {\r\n      this.attachResizeObserver();\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.checkSlotContent()\r\n    this.openAccordionItem();\r\n  }\r\n\r\n  @Watch('open')\r\n  openChanged(newValue: boolean) {\r\n    this.internalOpen = newValue;\r\n  }\r\n\r\n  toggleOpen() {\r\n    this.internalOpen = !this.internalOpen;\r\n    this.open = this.internalOpen;\r\n\r\n    if (this.internalOpen) {\r\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\r\n    } else {\r\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\r\n    }\r\n  }\r\n\r\n  openAccordionItem() {\r\n    if (this.internalOpen) {\r\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\r\n      this.contentEl.style.overflow = 'hidden';\r\n    } else {\r\n      this.contentEl.style.height = '0';\r\n      this.contentEl.style.overflow = 'hidden';\r\n    }\r\n  }\r\n\r\n  getInnerContentWrapper() {\r\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\r\n    return innerContentEl;\r\n  }\r\n\r\n  attachResizeObserver() {\r\n    const innerContentEl = this.getInnerContentWrapper();\r\n\r\n    if (innerContentEl) {\r\n      this.resizeObserver = new ResizeObserver(() => {\r\n        if (this.internalOpen) {\r\n          this.openAccordionItem();\r\n        }\r\n      });\r\n\r\n      this.resizeObserver.observe(innerContentEl);\r\n    }\r\n  }\r\n\r\n  @Listen('keydown')\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    const path = ev.composedPath();\r\n\r\n    if (!path.includes(this.titleEl)) {\r\n      return;\r\n    }\r\n\r\n    switch (ev.key) {\r\n      case 'Enter': // fallthrough\r\n      case ' ': // space\r\n        ev.preventDefault();\r\n        this.toggleOpen();\r\n        break;\r\n    }\r\n  }\r\n\r\n  checkSlotContent() {\r\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\r\n    const hasContent = slot.assignedNodes().length > 0;\r\n    const innerContent = this.getInnerContentWrapper();\r\n    if (!hasContent) {\r\n      innerContent.classList.add('no-content');\r\n    } else if (innerContent.classList.contains('no-content')) {\r\n      innerContent.classList.remove('no-content');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\r\n        <div\r\n          role=\"button\"\r\n          aria-expanded={this.internalOpen}\r\n          aria-controls=\"accordion-content\"\r\n          class=\"accordion-title\"\r\n          onClick={() => this.toggleOpen()}\r\n          tabindex=\"0\"\r\n          ref={el => (this.titleEl = el as HTMLElement)}\r\n        >\r\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\r\n            <ifx-icon icon=\"chevron-down-16\" />\r\n          </span>\r\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\r\n            {this.caption}\r\n          </span>\r\n        </div>\r\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\r\n          <div class=\"inner-content\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"ifx-accordion.ifx-accordion-item.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/accordion/accordion.scss?tag=ifx-accordion&encapsulation=shadow","src/components/accordion/accordion.tsx","src/components/accordion/accordionItem.scss?tag=ifx-accordion-item&encapsulation=shadow","src/components/accordion/accordionItem.tsx"],"sourcesContent":["// ifxAccordion.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.accordion-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: tokens.$ifxSpace100;\n  font-family:  var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n}","import { Component, h, Listen, Element, Prop } 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-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: { delegatesFocus: true },\n})\nexport class Accordion {\n  @Element() el: HTMLElement;\n  @Prop() autoCollapse: boolean = false;\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-accordion', await framework)\n    }\n  }\n\n  @Listen('ifxOpen')\n  async onItemOpen(event: CustomEvent) {\n    if (this.autoCollapse) {\n      const items = Array.from(this.el.querySelectorAll('ifx-accordion-item'));\n      for (const item of items) {\n        const itemElement = item as HTMLIfxAccordionItemElement;\n        if (itemElement !== event.target && (await itemElement.open)) {\n          itemElement.open = false;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <div class=\"accordion-wrapper\">\n        <slot />\n      </div>\n    );\n  }\n}\n","// ifxAccordionItem.scss\n@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n.accordion-item {\n  border-radius: 3px;\n  transition: all 0.3s;\n  font-family: var(--ifx-font-family) // tokens.$ifxFontFamilyBody;\n\n}\n\n.accordion-title:focus {\n  outline: none;\n}\n\n// workaround to add corner radius to outline\n.accordion-title:focus::after {\n  content: '';\n  display: block;\n  position: absolute;\n  top: -4px;\n  bottom: -4px;\n  left: -4px;\n  right: -4px;\n  border-radius: 5px;\n  border: 2px solid tokens.$ifxColorOcean500;\n  box-sizing: border-box;\n}\n\n.accordion-title:hover {\n  border: 1px solid tokens.$ifxColorEngineering200;\n  color: tokens.$ifxColorOcean600;\n}\n\n.accordion-title {\n  display: flex;\n  align-items: center;\n  position: relative;\n  padding: tokens.$ifxSpace150 tokens.$ifxSpace200;\n  gap: tokens.$ifxSpace150;\n  color: tokens.$ifxColorOcean500;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering200;\n  cursor: pointer;\n  margin: 4px 4px 0px;\n}\n\n.accordion-caption {\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeL;\n}\n\n.accordion-content {\n  gap: tokens.$ifxSpace100;\n  overflow: hidden;\n  height: 0;\n  transition: height 0.3s ease;\n  line-height: 24px;\n  font-size: tokens.$ifxFontSizeM;\n  font-weight: 400;\n}\n\n.inner-content {\n  background-color: tokens.$ifxColorBaseWhite;\n  padding: tokens.$ifxSpace200;\n  word-wrap: break-word;\n  overflow-wrap: anywhere;\n  align-self: stretch;\n  margin: 0 4px 4px;\n  border: 1px solid transparent;\n  border-top: 1px solid transparent;\n}\n\n.accordion-icon {\n  font-weight: bold;\n  display: flex;\n  transition: transform 0.3s;\n\n  &:hover {\n    color: tokens.$ifxColorOcean600;\n\n  }\n}\n\n\n.accordion-item.open .accordion-content {\n  max-height: 1000px; // Arbitrary large value to allow content to expand\n}\n\n.accordion-item.open .accordion-icon {\n  transform: rotate(-180deg);\n}\n\n.accordion-item.open .inner-content {\n  border-color: tokens.$ifxColorEngineering200;\n  border-top-color: transparent;\n  transition: border-color 0s; \n}\n\n.accordion-item:not(.open) .inner-content {\n  transition: border-color 0s 0.3s; \n}\n\n.inner-content {\n  &.no-content { \n    border: none;\n    padding: 0;\n    margin: 0;\n  }\n}","//ifxAccordionItem\nimport { Component, Prop, h, State, Event, EventEmitter, Watch, Listen, Element } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-accordion-item',\n  styleUrl: 'accordionItem.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  @Element() el;\n  @Prop() caption: string;\n  @Prop({\n    mutable: true,\n  })\n  open: boolean = false;\n  @Prop() AriaLevel = 3;\n  @State() internalOpen: boolean = false;\n  @Event() ifxOpen: EventEmitter;\n  @Event() ifxClose: EventEmitter;\n  private contentEl!: HTMLElement;\n  private titleEl!: HTMLElement;\n  private resizeObserver!: ResizeObserver;\n\n  componentWillLoad() {\n    this.internalOpen = this.open;\n  }\n\n  componentDidLoad() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n    this.contentEl = this.el.shadowRoot.querySelector('#accordion-content');\n    if (this.contentEl) {\n      this.attachResizeObserver();\n    }\n  }\n\n  componentDidUpdate() {\n    this.checkSlotContent()\n    this.openAccordionItem();\n  }\n\n  @Watch('open')\n  openChanged(newValue: boolean) {\n    this.internalOpen = newValue;\n  }\n\n  toggleOpen() {\n    this.internalOpen = !this.internalOpen;\n    this.open = this.internalOpen;\n\n    if (this.internalOpen) {\n      this.ifxOpen.emit({ isOpen: this.internalOpen });\n    } else {\n      this.ifxClose.emit({ isClosed: !this.internalOpen });\n    }\n  }\n\n  openAccordionItem() {\n    if (this.internalOpen) {\n      this.contentEl.style.height = `${this.contentEl.scrollHeight}px`;\n      this.contentEl.style.overflow = 'hidden';\n    } else {\n      this.contentEl.style.height = '0';\n      this.contentEl.style.overflow = 'hidden';\n    }\n  }\n\n  getInnerContentWrapper() {\n    const innerContentEl = this.el.shadowRoot.querySelector('.inner-content');\n    return innerContentEl;\n  }\n\n  attachResizeObserver() {\n    const innerContentEl = this.getInnerContentWrapper();\n\n    if (innerContentEl) {\n      this.resizeObserver = new ResizeObserver(() => {\n        if (this.internalOpen) {\n          this.openAccordionItem();\n        }\n      });\n\n      this.resizeObserver.observe(innerContentEl);\n    }\n  }\n\n  @Listen('keydown')\n  handleKeydown(ev: KeyboardEvent) {\n    const path = ev.composedPath();\n\n    if (!path.includes(this.titleEl)) {\n      return;\n    }\n\n    switch (ev.key) {\n      case 'Enter': // fallthrough\n      case ' ': // space\n        ev.preventDefault();\n        this.toggleOpen();\n        break;\n    }\n  }\n\n  checkSlotContent() {\n    const slot = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n    const hasContent = slot.assignedNodes().length > 0;\n    const innerContent = this.getInnerContentWrapper();\n    if (!hasContent) {\n      innerContent.classList.add('no-content');\n    } else if (innerContent.classList.contains('no-content')) {\n      innerContent.classList.remove('no-content');\n    }\n  }\n\n  render() {\n    return (\n      <div class={`accordion-item ${this.internalOpen ? 'open' : ''}`}>\n        <div\n          role=\"button\"\n          aria-expanded={this.internalOpen}\n          aria-controls=\"accordion-content\"\n          class=\"accordion-title\"\n          onClick={() => this.toggleOpen()}\n          tabindex=\"0\"\n          ref={el => (this.titleEl = el as HTMLElement)}\n        >\n          <span aria-hidden=\"true\" role=\"heading\" aria-level={String(this.AriaLevel) as string} class=\"accordion-icon\">\n            <ifx-icon icon=\"chevron-down-16\" />\n          </span>\n          <span id=\"accordion-caption\" class=\"accordion-caption\">\n            {this.caption}\n          </span>\n        </div>\n        <div id=\"accordion-content\" class=\"accordion-content\" ref={el => (this.contentEl = el as HTMLElement)} role=\"region\" aria-labelledby=\"accordion-caption\">\n          <div class=\"inner-content\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ifx-action-list-item.cjs.entry.js

@@ -223,7 +223,7 @@ const ActionListItem = class {
         const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;
         const hasLeadingContent = this.hasSlotContent('leading');
         const hasTrailingContent = this.hasSlotContent('trailing');
-        return (index.h("div", { key: 'f4e53ea17c6bdea279fc96b5a954e9f8ef9b0911', class: index$1.classNames('action-list-item', this.disabled && 'action-list-item--disabled', isClickable && 'action-list-item--clickable'), role: "listitem", tabIndex: isClickable ? 0 : -1, "aria-label": ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleMainClick, onKeyDown: this.handleMainKeyDown }, hasLeadingContent && (index.h("div", { key: '9c565d3a24234672ce42c264185aa970204b54c9', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, index.h("slot", { key: '965ed004d61c1b38366886ae5b4415c4ee67ab2c', name: "leading" }))), index.h("div", { key: '1c21aaf97464d42c4ce3d4a9a76963ffe73d2121', class: "action-list-item__content" }, index.h("div", { key: 'e588b9d0adce7fbbfffeba338efe7c76b60fe3cb', class: "action-list-item__title" }, this.itemTitle), this.description && (index.h("div", { key: '58aa81b18bf0f6070a18180be254fd42270c9a38', class: "action-list-item__description" }, this.description))), hasTrailingContent && (index.h("div", { key: '5d5ed9d8d936166beba4fc1790f3e69cd0adcefc', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, index.h("slot", { key: '8a2c8f6f3dde321748310b2d2f0e1ec032c895a3', name: "trailing" })))));
+        return (index.h("div", { key: 'afc03036455ceb23a99e893ebdc36c052fcc2e64', class: index$1.classNames('action-list-item', this.disabled && 'action-list-item--disabled', isClickable && 'action-list-item--clickable'), role: "listitem", tabIndex: isClickable ? 0 : -1, "aria-label": ariaLabel, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.handleMainClick, onKeyDown: this.handleMainKeyDown }, hasLeadingContent && (index.h("div", { key: 'fbc09a625f124bdcf9137cde295838592925cc93', class: "action-list-item__leading", onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, index.h("slot", { key: '915fb5467635e391ca3713def64ee031095e784d', name: "leading" }))), index.h("div", { key: '589bd17dcd1f2de8ac7ac1c86db677c9b8eac35e', class: "action-list-item__content" }, index.h("div", { key: '4b0ac3d7e1439cbe8682f9d14411acc4683b2ffe', class: "action-list-item__title" }, this.itemTitle), this.description && (index.h("div", { key: 'e5a0481505f637db1f7672fca5e1800a934d4270', class: "action-list-item__description" }, this.description))), hasTrailingContent && (index.h("div", { key: 'c855aff75b5e1ddba37456c2225f46be3ae17429', class: "action-list-item__trailing", onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, index.h("slot", { key: '68ff1e04f0bdf90894fa729619c7b7a6f896bad8', name: "trailing" })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ifx-action-list-item.cjs.entry.js.map

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

package/dist/cjs/ifx-action-list-item.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-action-list-item.entry.cjs.js","sources":["src/components/action-list/action-list-item.scss?tag=ifx-action-list-item&encapsulation=shadow","src/components/action-list/action-list-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list-item {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\r\n  background: tokens.$ifxColorBaseWhite;\r\n  transition: background-color 0.2s ease;\r\n  cursor: default;\r\n\r\n  &--clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:focus:not(.action-list-item--disabled) {\r\n      outline: none;\r\n      //outline: 2px solid tokens.$ifxColorOcean500;\r\n      //outline-offset: -2px;\r\n      background: tokens.$ifxColorEngineering100;\r\n    }\r\n\r\n    &:active:not(.action-list-item--disabled) {\r\n      background: tokens.$ifxColorEngineering200;\r\n    }\r\n  }\r\n\r\n  &--disabled {\r\n    // Apply disabled color to all slotted icons\r\n    ::slotted(ifx-icon) {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n\r\n    // Also apply to nested icons within slotted elements\r\n    ::slotted(*) {\r\n      ifx-icon {\r\n        color: tokens.$ifxColorEngineering300;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__leading {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-right: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  &__content {\r\n    flex: 1;\r\n    min-width: 0; // Allows text to truncate\r\n  }\r\n\r\n  &__title {\r\n    font-weight: tokens.$ifxFontWeightSemibold;\r\n    font-size: tokens.$ifxFontSizeM;\r\n    line-height: tokens.$ifxLineHeightM;\r\n    color: tokens.$ifxColorBaseBlack;\r\n\r\n    // Truncate long titles\r\n    white-space: nowrap;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__description {\r\n    font-size: tokens.$ifxFontSizeS;\r\n    line-height: tokens.$ifxLineHeightS;\r\n    color: tokens.$ifxColorEngineering500;\r\n    margin-top: tokens.$ifxSpace25;\r\n\r\n    // Disabled state\r\n    .action-list-item--disabled & {\r\n      color: tokens.$ifxColorEngineering300;\r\n    }\r\n  }\r\n\r\n  &__trailing {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-left: tokens.$ifxSpace200;\r\n    flex-shrink: 0;\r\n    gap: 16px;\r\n  }\r\n}","import { Component, h, Prop, Element, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport classNames from 'classnames';\r\n\r\nexport interface ActionListItemClickEvent {\r\n  value?: string;\r\n  href?: string;\r\n  target?: string;\r\n  component?: ActionListItem;\r\n}\r\n\r\n@Component({\r\n  tag: 'ifx-action-list-item',\r\n  styleUrl: 'action-list-item.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionListItem {\r\n  @Element() host: HTMLElement;\r\n\r\n  /**\r\n   * The title text displayed in the item\r\n   */\r\n  @Prop() itemTitle: string;\r\n\r\n  /**\r\n   * The description text displayed below the title\r\n   */\r\n  @Prop() description?: string;\r\n\r\n  /**\r\n   * Value associated with this item\r\n   */\r\n  @Prop() value?: string;\r\n\r\n  /**\r\n   * URL to navigate to when item is clicked\r\n   */\r\n  @Prop() href?: string;\r\n\r\n  /**\r\n   * Target for the link navigation\r\n   * @default '_self'\r\n   */\r\n  @Prop() target: string = '_self';\r\n\r\n  /**\r\n   * Controls whether the item is disabled\r\n   * @default false\r\n   */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() itemAriaLabel?: string;\r\n\r\n  /**\r\n   * Event emitted when the main item area is clicked\r\n   */\r\n  @Event() ifxActionListItemClick: EventEmitter<ActionListItemClickEvent>;\r\n\r\n  @Watch('disabled')\r\n  onDisabledChange() {\r\n    // Update interactive elements when disabled state changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private handleMainClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    // Check if clicked element is inside leading or trailing areas\r\n    const leadingElement = this.host.shadowRoot?.querySelector('.action-list-item__leading');\r\n    const trailingElement = this.host.shadowRoot?.querySelector('.action-list-item__trailing');\r\n\r\n    if (leadingElement?.contains(event.target as Node) || trailingElement?.contains(event.target as Node)) {\r\n      return; // Don't trigger main click if clicking on leading/trailing areas\r\n    }\r\n\r\n    // Always emit main event when clicking on content area (text), regardless of interactive elements\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate (Link mode)\r\n    // If no href is provided, only the event is emitted (Event mode)\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleLeadingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingClick = (event: MouseEvent) => {\r\n    if (this.disabled) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n\r\n    const target = event.target as HTMLElement;\r\n\r\n    // Check if the clicked element or any of its parents is an interactive component\r\n    let currentElement = target;\r\n    while (currentElement && currentElement !== this.host) {\r\n      if (this.isInteractiveElement(currentElement)) {\r\n        // Interactive element clicked - stop propagation to prevent main event\r\n        event.stopPropagation();\r\n        return;\r\n      }\r\n      currentElement = currentElement.parentElement;\r\n    }\r\n\r\n    // Non-interactive element clicked - trigger main action\r\n    event.stopPropagation();\r\n    this.ifxActionListItemClick.emit({\r\n      value: this.value,\r\n      href: this.href,\r\n      target: this.target,\r\n      component: this,\r\n    });\r\n\r\n    // If href is provided, automatically navigate\r\n    if (this.href) {\r\n      if (this.target === '_blank') {\r\n        window.open(this.href, this.target);\r\n      } else {\r\n        window.location.href = this.href;\r\n      }\r\n    }\r\n  };\r\n\r\n  private isInteractiveElement = (element: HTMLElement): boolean => {\r\n    // Get the tag name, handling both custom elements and standard HTML\r\n    const tagName = element.tagName.toUpperCase();\r\n\r\n    // List of Infineon components that should block main event\r\n    const interactiveInfineonComponents = [\r\n      'IFX-BUTTON',\r\n      'IFX-CHECKBOX',\r\n      'IFX-SWITCH'\r\n    ];\r\n\r\n    // Check if it's an interactive Infineon component\r\n    return interactiveInfineonComponents.includes(tagName);\r\n  };\r\n\r\n  private handleMainKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      // Always trigger main action via keyboard, regardless of interactive elements\r\n      this.handleMainClick(event as any);\r\n    }\r\n  };\r\n\r\n  private handleLeadingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const leadingSlot = this.host.shadowRoot?.querySelector('slot[name=\"leading\"]') as HTMLSlotElement;\r\n      const assignedElements = leadingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleTrailingKeyDown = (event: KeyboardEvent) => {\r\n    if (this.disabled) return;\r\n\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n\r\n      const trailingSlot = this.host.shadowRoot?.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement;\r\n      const assignedElements = trailingSlot?.assignedElements() || [];\r\n\r\n      // Find first interactive element and activate it\r\n      const firstInteractive = assignedElements.find(el =>\r\n        this.isInteractiveElement(el as HTMLElement)\r\n      ) as HTMLElement;\r\n\r\n      if (firstInteractive) {\r\n        firstInteractive.focus();\r\n        firstInteractive.click();\r\n      }\r\n    }\r\n  };\r\n\r\n  private hasSlotContent(slotName: string): boolean {\r\n    const slot = this.host.querySelector(`[slot=\"${slotName}\"]`);\r\n    return !!slot;\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // Apply disabled state to interactive elements in slots\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    // Apply disabled state to interactive elements in slots when disabled prop changes\r\n    this.updateSlotElementsDisabledState();\r\n  }\r\n\r\n  private updateSlotElementsDisabledState = () => {\r\n    // Only handle interactive components that should be disabled\r\n    const interactiveComponents = ['ifx-checkbox', 'ifx-switch', 'ifx-button'];\r\n\r\n    // Get all slotted elements\r\n    const slots = this.host.querySelectorAll('[slot]');\r\n\r\n    slots.forEach(slottedElement => {\r\n      // Check if the slotted element itself is an interactive component\r\n      if (interactiveComponents.includes(slottedElement.tagName.toLowerCase())) {\r\n        this.setElementDisabledState(slottedElement as HTMLElement);\r\n      }\r\n\r\n      // Also check for nested interactive components within the slotted element\r\n      interactiveComponents.forEach(componentTag => {\r\n        const nestedElements = slottedElement.querySelectorAll(componentTag);\r\n        nestedElements.forEach(nestedElement => {\r\n          this.setElementDisabledState(nestedElement as HTMLElement);\r\n        });\r\n      });\r\n    });\r\n  };\r\n\r\n  private setElementDisabledState = (element: HTMLElement) => {\r\n    if (this.disabled) {\r\n      element.setAttribute('disabled', 'true');\r\n    } else {\r\n      element.removeAttribute('disabled');\r\n    }\r\n  };  render() {\r\n    const isClickable = !this.disabled && (this.href || this.value);\r\n    const ariaLabel = this.itemAriaLabel || `${this.itemTitle}${this.description ? ` - ${this.description}` : ''}`;\r\n    const hasLeadingContent = this.hasSlotContent('leading');\r\n    const hasTrailingContent = this.hasSlotContent('trailing');\r\n\r\n    return (\r\n      <div\r\n        class={classNames(\r\n          'action-list-item',\r\n          this.disabled && 'action-list-item--disabled',\r\n          isClickable && 'action-list-item--clickable'\r\n        )}\r\n        role=\"listitem\"\r\n        tabIndex={isClickable ? 0 : -1}\r\n        aria-label={ariaLabel}\r\n        aria-disabled={this.disabled ? 'true' : undefined}\r\n        onClick={this.handleMainClick}\r\n        onKeyDown={this.handleMainKeyDown}\r\n      >\r\n        {/* Leading Item Container - only render if content exists */}\r\n        {hasLeadingContent && (\r\n          <div\r\n            class=\"action-list-item__leading\"\r\n            onClick={this.handleLeadingClick}\r\n            onKeyDown={this.handleLeadingKeyDown}\r\n          >\r\n            <slot name=\"leading\"></slot>\r\n          </div>\r\n        )}\r\n\r\n        {/* Text Container */}\r\n        <div class=\"action-list-item__content\">\r\n          <div class=\"action-list-item__title\">\r\n            {this.itemTitle}\r\n          </div>\r\n          {this.description && (\r\n            <div class=\"action-list-item__description\">\r\n              {this.description}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {/* Trailing Item Container - only render if content exists */}\r\n        {hasTrailingContent && (\r\n          <div\r\n            class=\"action-list-item__trailing\"\r\n            onClick={this.handleTrailingClick}\r\n            onKeyDown={this.handleTrailingKeyDown}\r\n          >\r\n            <slot name=\"trailing\"></slot>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":["h","classNames"],"mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,wyCAAwyC;;MCerzC,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AA4BE;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAW,OAAO;AAEhC;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkBzB,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;;AAC9C,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB;;;AAIF,YAAA,MAAM,cAAc,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,4BAA4B,CAAC;AACxF,YAAA,MAAM,eAAe,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,6BAA6B,CAAC;YAE1F,IAAI,CAAA,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,MAAA,GAAA,MAAA,GAAA,cAAc,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,MAAI,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,MAAA,GAAA,MAAA,GAAf,eAAe,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAAE;AACrG,gBAAA,OAAO;;;AAIT,YAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,gBAAA,SAAS,EAAE,IAAI;AAChB,aAAA,CAAC;;;AAIF,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;oBAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC;;qBAC9B;oBACL,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;;;AAGtC,SAAC;AAEO,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;AACjD,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB;;AAGF,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;;YAG1C,IAAI,cAAc,GAAG,MAAM;YAC3B,OAAO,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE;AACrD,gBAAA,IAAI,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE;;oBAE7C,KAAK,CAAC,eAAe,EAAE;oBACvB;;AAEF,gBAAA,cAAc,GAAG,cAAc,CAAC,aAAa;;;YAI/C,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,gBAAA,SAAS,EAAE,IAAI;AAChB,aAAA,CAAC;;AAGF,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;oBAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC;;qBAC9B;oBACL,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;;;AAGtC,SAAC;AAEO,QAAA,IAAA,CAAA,mBAAmB,GAAG,CAAC,KAAiB,KAAI;AAClD,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB;;AAGF,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;;YAG1C,IAAI,cAAc,GAAG,MAAM;YAC3B,OAAO,cAAc,IAAI,cAAc,KAAK,IAAI,CAAC,IAAI,EAAE;AACrD,gBAAA,IAAI,IAAI,CAAC,oBAAoB,CAAC,cAAc,CAAC,EAAE;;oBAE7C,KAAK,CAAC,eAAe,EAAE;oBACvB;;AAEF,gBAAA,cAAc,GAAG,cAAc,CAAC,aAAa;;;YAI/C,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;gBAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;AACnB,gBAAA,SAAS,EAAE,IAAI;AAChB,aAAA,CAAC;;AAGF,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,EAAE;oBAC5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC;;qBAC9B;oBACL,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;;;AAGtC,SAAC;AAEO,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,OAAoB,KAAa;;YAE/D,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;;AAG7C,YAAA,MAAM,6BAA6B,GAAG;gBACpC,YAAY;gBACZ,cAAc;gBACd;aACD;;AAGD,YAAA,OAAO,6BAA6B,CAAC,QAAQ,CAAC,OAAO,CAAC;AACxD,SAAC;AAEO,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAoB,KAAI;YACnD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;;AAGtB,gBAAA,IAAI,CAAC,eAAe,CAAC,KAAY,CAAC;;AAEtC,SAAC;AAEO,QAAA,IAAA,CAAA,oBAAoB,GAAG,CAAC,KAAoB,KAAI;;YACtD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,MAAM,WAAW,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,sBAAsB,CAAoB;gBAClG,MAAM,gBAAgB,GAAG,CAAA,WAAW,KAAX,IAAA,IAAA,WAAW,KAAX,MAAA,GAAA,MAAA,GAAA,WAAW,CAAE,gBAAgB,EAAE,KAAI,EAAE;;AAG9D,gBAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAC/C,IAAI,CAAC,oBAAoB,CAAC,EAAiB,CAAC,CAC9B;gBAEhB,IAAI,gBAAgB,EAAE;oBACpB,gBAAgB,CAAC,KAAK,EAAE;oBACxB,gBAAgB,CAAC,KAAK,EAAE;;;AAG9B,SAAC;AAEO,QAAA,IAAA,CAAA,qBAAqB,GAAG,CAAC,KAAoB,KAAI;;YACvD,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC9C,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,aAAa,CAAC,uBAAuB,CAAoB;gBACpG,MAAM,gBAAgB,GAAG,CAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,MAAA,GAAA,MAAA,GAAA,YAAY,CAAE,gBAAgB,EAAE,KAAI,EAAE;;AAG/D,gBAAA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAC/C,IAAI,CAAC,oBAAoB,CAAC,EAAiB,CAAC,CAC9B;gBAEhB,IAAI,gBAAgB,EAAE;oBACpB,gBAAgB,CAAC,KAAK,EAAE;oBACxB,gBAAgB,CAAC,KAAK,EAAE;;;AAG9B,SAAC;AAiBO,QAAA,IAA+B,CAAA,+BAAA,GAAG,MAAK;;YAE7C,MAAM,qBAAqB,GAAG,CAAC,cAAc,EAAE,YAAY,EAAE,YAAY,CAAC;;YAG1E,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC;AAElD,YAAA,KAAK,CAAC,OAAO,CAAC,cAAc,IAAG;;AAE7B,gBAAA,IAAI,qBAAqB,CAAC,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE;AACxE,oBAAA,IAAI,CAAC,uBAAuB,CAAC,cAA6B,CAAC;;;AAI7D,gBAAA,qBAAqB,CAAC,OAAO,CAAC,YAAY,IAAG;oBAC3C,MAAM,cAAc,GAAG,cAAc,CAAC,gBAAgB,CAAC,YAAY,CAAC;AACpE,oBAAA,cAAc,CAAC,OAAO,CAAC,aAAa,IAAG;AACrC,wBAAA,IAAI,CAAC,uBAAuB,CAAC,aAA4B,CAAC;AAC5D,qBAAC,CAAC;AACJ,iBAAC,CAAC;AACJ,aAAC,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,uBAAuB,GAAG,CAAC,OAAoB,KAAI;AACzD,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC;;iBACnC;AACL,gBAAA,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC;;AAEvC,SAAC;AAwDF;IA7RC,gBAAgB,GAAA;;QAEd,IAAI,CAAC,+BAA+B,EAAE;;AAuLhC,IAAA,cAAc,CAAC,QAAgB,EAAA;AACrC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAU,OAAA,EAAA,QAAQ,CAAI,EAAA,CAAA,CAAC;QAC5D,OAAO,CAAC,CAAC,IAAI;;IAGf,gBAAgB,GAAA;;QAEd,IAAI,CAAC,+BAA+B,EAAE;;IAGxC,kBAAkB,GAAA;;QAEhB,IAAI,CAAC,+BAA+B,EAAE;;IAgCpC,MAAM,GAAA;AACR,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC;QAC/D,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,IAAI,CAAA,EAAG,IAAI,CAAC,SAAS,CAAA,EAAG,IAAI,CAAC,WAAW,GAAG,CAAM,GAAA,EAAA,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,EAAE,CAAA,CAAE;QAC9G,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;QACxD,MAAM,kBAAkB,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;QAE1D,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAEC,kBAAU,CACf,kBAAkB,EAClB,IAAI,CAAC,QAAQ,IAAI,4BAA4B,EAC7C,WAAW,IAAI,6BAA6B,CAC7C,EACD,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,WAAW,GAAG,CAAC,GAAG,EAAE,EAAA,YAAA,EAClB,SAAS,EAAA,eAAA,EACN,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,EACjD,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAGhC,iBAAiB,KAChBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAA,EAEpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACP,EAGDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,SAAS,CACX,EACL,IAAI,CAAC,WAAW,KACfA,kEAAK,KAAK,EAAC,+BAA+B,EAAA,EACvC,IAAI,CAAC,WAAW,CACb,CACP,CACG,EAGL,kBAAkB,KACjBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EAAA,EAErCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,CAAQ,CACzB,CACP,CACG;;;;;;;;;;;"}
+{"version":3,"file":"ifx-action-list-item.entry.cjs.js","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}"],"names":["h","classNames"],"mappings":"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"}

package/dist/cjs/ifx-action-list.cjs.entry.js

@@ -17,7 +17,7 @@ const ActionList = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3b5dd123b84e88c458e22fd83e592735c006684b', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, index.h("slot", { key: 'ed92d35c40ad4b1330296414f61f565c4bf30468' })));
+        return (index.h("div", { key: 'a9da34b5b948204642b94582781d1b74a86dc6f5', class: "action-list", role: "list", "aria-label": this.listAriaLabel }, index.h("slot", { key: 'bf5dea0baf869e9e072ebe7bfd0ae2104ceb477b' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ifx-action-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ifx-action-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,GAAA,MAAA;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list {\r\n  background: tokens.$ifxColorBaseWhite;\r\n  border-radius: tokens.$ifxBorderRadiusNone;\r\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-action-list',\r\n  styleUrl: 'action-list.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionList {\r\n  @Element() el: HTMLElement;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() listAriaLabel?: string;\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-action-list', await framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class=\"action-list\"\r\n        role=\"list\"\r\n        aria-label={this.listAriaLabel}\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}
+{"file":"ifx-action-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,GAAA,MAAA;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list {\n  background: tokens.$ifxColorBaseWhite;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}","import { Component, h, Prop, 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-action-list',\n  styleUrl: 'action-list.scss',\n  shadow: true,\n})\nexport class ActionList {\n  @Element() el: HTMLElement;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() listAriaLabel?: string;\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-action-list', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class=\"action-list\"\n        role=\"list\"\n        aria-label={this.listAriaLabel}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/cjs/ifx-action-list.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ifx-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n@use \"../../global/font.scss\";\r\n\r\n.action-list {\r\n  background: tokens.$ifxColorBaseWhite;\r\n  border-radius: tokens.$ifxBorderRadiusNone;\r\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n}","import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n  tag: 'ifx-action-list',\r\n  styleUrl: 'action-list.scss',\r\n  shadow: true,\r\n})\r\nexport class ActionList {\r\n  @Element() el: HTMLElement;\r\n\r\n  /**\r\n   * Aria label for accessibility support\r\n   */\r\n  @Prop() listAriaLabel?: string;\r\n\r\n  async componentDidLoad() {\r\n    if (!isNestedInIfxComponent(this.el)) {\r\n      const framework = detectFramework();\r\n      trackComponent('ifx-action-list', await framework);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class=\"action-list\"\r\n        role=\"list\"\r\n        aria-label={this.listAriaLabel}\r\n      >\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,GAAA,MAAA;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;"}
+{"version":3,"file":"ifx-action-list.entry.cjs.js","sources":["src/components/action-list/action-list.scss?tag=ifx-action-list&encapsulation=shadow","src/components/action-list/action-list.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.action-list {\n  background: tokens.$ifxColorBaseWhite;\n  border-radius: tokens.$ifxBorderRadiusNone;\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}","import { Component, h, Prop, 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-action-list',\n  styleUrl: 'action-list.scss',\n  shadow: true,\n})\nexport class ActionList {\n  @Element() el: HTMLElement;\n\n  /**\n   * Aria label for accessibility support\n   */\n  @Prop() listAriaLabel?: string;\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-action-list', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        class=\"action-list\"\n        role=\"list\"\n        aria-label={this.listAriaLabel}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,+LAA+L;;MCUxM,UAAU,GAAA,MAAA;;;;AAQrB,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAI,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACpC,YAAA,MAAM,SAAS,GAAGC,kCAAe,EAAE;AACnC,YAAAC,iCAAc,CAAC,iBAAiB,EAAE,MAAM,SAAS,CAAC;;;IAItD,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,MAAM,EAAA,YAAA,EACC,IAAI,CAAC,aAAa,EAAA,EAE9BA,OAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;"}