@infineon/infineon-design-system-stencil 39.4.4--canary.1723.a7c3c18a6cfecbe65eae90f774076a449ddb2a9e.0 → 39.4.4--canary.2134.cd83647d2771e1e22b8c6c80a0df75f24ca168b6.0

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

@@ -1,6 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as getElement } from './index-PqnYwNKt.js';
-import { c as classNames } from './index-Bt32KzDW.js';
-import './_commonjsHelpers-B85MJLTf.js';
+import { c as classNames } from './index-Beav1bNT.js';
 
 const actionListItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.action-list-item{display:flex;align-items:center;padding:8px 16px;background:#FFFFFF;transition:background-color 0.2s ease;cursor:default}.action-list-item--clickable{cursor:pointer}.action-list-item--clickable:hover:not(.action-list-item--disabled){background:#F7F7F7}.action-list-item--clickable:focus:not(.action-list-item--disabled){outline:none;background:#F7F7F7}.action-list-item--clickable:active:not(.action-list-item--disabled){background:#EEEDED}.action-list-item--disabled ::slotted(ifx-icon){color:#BFBBBB}.action-list-item--disabled ::slotted(*) ifx-icon{color:#BFBBBB}.action-list-item__leading{display:flex;align-items:center;justify-content:center;margin-right:16px;flex-shrink:0}.action-list-item__content{flex:1;min-width:0}.action-list-item__title{font-weight:600;font-size:1rem;line-height:1.5rem;color:#1D1D1D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.action-list-item--disabled .action-list-item__title{color:#BFBBBB}.action-list-item__description{font-size:0.875rem;line-height:1.25rem;color:#575352;margin-top:2px}.action-list-item--disabled .action-list-item__description{color:#BFBBBB}.action-list-item__trailing{display:flex;align-items:center;justify-content:center;margin-left:16px;flex-shrink:0;gap:16px}";
 

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

@@ -1 +1 @@
-{"version":3,"file":"ifx-action-list-item.entry.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":[],"mappings":"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"}
+{"version":3,"file":"ifx-action-list-item.entry.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":[],"mappings":"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"}

package/dist/esm/ifx-basic-table.entry.js

@@ -2,8 +2,7 @@ import { r as registerInstance, h, d as Host, a as getElement } from './index-Pq
 import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
 import { c as createGrid } from './main.esm-9UDg_bQZ.js';
-import { c as classNames } from './index-Bt32KzDW.js';
-import './_commonjsHelpers-B85MJLTf.js';
+import { c as classNames } from './index-Beav1bNT.js';
 
 class CustomNoRowsOverlay {
     init(params) {

package/dist/esm/ifx-basic-table.entry.js.map

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