@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/esm/ix-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-tooltip.entry.js","sources":["src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n.dialog {\n  margin: 0;\n  padding: 0;\n  border: none;\n  max-width: 18.25rem;\n  width: max-content;\n  background-color: transparent;\n  overflow-wrap: break-word;\n  box-shadow: none;\n  overflow: visible;\n}\n\n.tooltip-container {\n  display: block;\n  position: relative;\n  width: auto;\n  height: 100%;\n  background: var(--theme-tootlip--background);\n  color: var(--theme-color-std-text);\n  padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n  box-shadow: var(--theme-shadow-4);\n  border-radius: 0.25rem;\n}\n\n.content-wrapper {\n  overflow: auto;\n}\n\n.tooltip-title {\n  display: flex;\n  align-items: center;\n\n  ::slotted(ix-icon) {\n    margin-right: 0.35rem;\n  }\n}\n\n.arrow,\n.arrow::before {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  background: inherit;\n}\n\n.arrow {\n  visibility: hidden;\n}\n\n.arrow::before {\n  visibility: visible;\n  content: '';\n  transform: rotate(45deg);\n  background-color: var(--theme-tootlip--background);\n}\n","/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveSelector } from '../utils/find-element';\nimport { ElementReference } from 'src/components';\nimport { makeRef } from '../utils/make-ref';\nimport { addDisposableEventListenerAsArray } from '../utils/disposable-event-listener';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value?: number | null) =>\n  value !== null ? `${value}px` : '';\n\nlet tooltipInstance = 0;\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for?: ElementReference | ElementReference[];\n\n  /**\n   * Title of the tooltip\n   */\n  @Prop() titleContent?: string;\n\n  /**\n   * Define if the user can access the tooltip via mouse.\n   */\n  @Prop() interactive = false;\n\n  /**\n   * Initial placement of the tooltip.\n   * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.\n   * @since 1.5.0\n   */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n  /** @internal */\n  @Prop() showDelay = 0;\n\n  /** @internal */\n  @Prop() hideDelay = 50;\n\n  /** @internal */\n  @Prop() animationFrame = false;\n\n  @Element() hostElement!: HTMLIxTooltipElement;\n\n  @State() private visible = false;\n\n  private hideTooltipTimeout?: NodeJS.Timeout;\n  private showTooltipTimeout?: NodeJS.Timeout;\n  private visibleFor?: Element;\n\n  private disposeAutoUpdate?: () => void;\n  private disposeTriggerListener?: () => void;\n  private disposeTooltipListener?: () => void;\n  private disposeDomChangeListener?: () => void;\n\n  private readonly instance = tooltipInstance++;\n\n  private readonly dialogRef = makeRef<HTMLDialogElement>();\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.arrow')!;\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: Element) {\n    this.clearTimeouts();\n\n    if (this.showTooltipTimeout || this.visibleFor === anchorElement) {\n      return;\n    }\n\n    const dialog = await this.dialogRef.waitForCurrent();\n\n    this.showTooltipTimeout = setTimeout(() => {\n      this.setAnchorElement(anchorElement);\n      dialog.showPopover();\n      this.applyTooltipPosition(anchorElement, dialog);\n      this.registerTooltipListener(dialog);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip(hideDelay: number = this.hideDelay) {\n    this.clearTimeouts();\n\n    if (this.hideTooltipTimeout || !this.visible) {\n      return;\n    }\n\n    if (this.interactive && hideDelay === 50) {\n      hideDelay = 150;\n    }\n\n    const dialog = await this.dialogRef.waitForCurrent();\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      this.setAnchorElement();\n      dialog.hidePopover();\n      this.disposeAutoUpdate?.();\n      this.disposeTooltipListener?.();\n    }, hideDelay);\n  }\n\n  private setAnchorElement(anchorElement?: Element) {\n    if (!anchorElement) {\n      this.visibleFor = undefined;\n      this.visible = false;\n    } else {\n      this.visibleFor = anchorElement;\n      this.visible = true;\n    }\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition | undefined {\n    let { x, y } = middlewareData.arrow!;\n    const resetPosition = {\n      top: 'unset',\n      right: 'unset',\n      bottom: 'unset',\n      left: 'unset',\n    };\n\n    if (placement.startsWith('top')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        ...resetPosition,\n        left: numberToPixel(x),\n        top: numberToPixel(-6),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        ...resetPosition,\n        right: numberToPixel(-6),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(\n    target: Element,\n    dialog: HTMLDialogElement\n  ): Promise<ComputePositionReturn> {\n    return computePosition(target, dialog, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(12),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          fallbackAxisSideDirection: 'end',\n          padding: 10,\n        }),\n        hide(),\n      ],\n    });\n  }\n\n  private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n    const arrowPosition = this.computeArrowPosition(computeResponse);\n    Object.assign(this.arrowElement.style, arrowPosition);\n  }\n\n  private async applyTooltipPosition(\n    target: Element,\n    dialog: HTMLDialogElement\n  ): Promise<ComputePositionReturn | undefined> {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.disposeAutoUpdate?.();\n\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        dialog,\n        async () => {\n          const computeResponse = await this.computeTooltipPosition(\n            target,\n            dialog\n          );\n\n          const isHidden = computeResponse.middlewareData.hide?.referenceHidden;\n\n          if (isHidden) {\n            this.hideTooltip(0);\n            resolve(computeResponse);\n          }\n\n          if (computeResponse.middlewareData.arrow) {\n            this.applyTooltipArrowPosition(computeResponse);\n          }\n\n          const { x, y } = computeResponse;\n          Object.assign(dialog.style, {\n            left: numberToPixel(x),\n            top: numberToPixel(y),\n          });\n\n          resolve(computeResponse);\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private async queryAnchorElements(): Promise<HTMLElement[] | undefined> {\n    if (this.for) {\n      if (Array.isArray(this.for)) {\n        return this.resolveElements(this.for);\n      } else {\n        return this.resolveElements([this.for]);\n      }\n    }\n  }\n\n  private async resolveElements(\n    references: ElementReference[]\n  ): Promise<HTMLElement[]> {\n    const elements: HTMLElement[] = [];\n\n    await Promise.all(\n      references.map(async (reference) => {\n        if (typeof reference === 'string') {\n          const resolvedElements = await resolveSelector(\n            reference,\n            this.hostElement\n          );\n\n          if (resolvedElements) {\n            elements.push(...resolvedElements);\n          }\n        } else if (reference instanceof HTMLElement) {\n          elements.push(reference);\n        } else if (reference instanceof Promise) {\n          elements.push(await reference);\n        }\n      })\n    );\n\n    return elements;\n  }\n\n  private async registerTriggerListener() {\n    this.disposeTriggerListener?.();\n\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (!triggerElementList) {\n      return;\n    }\n\n    const listeners: {\n      element: Element | Window | Document;\n      eventType: string;\n      callback: EventListenerOrEventListenerObject;\n    }[] = [];\n\n    triggerElementList.forEach((element) => {\n      listeners.push(\n        ...[\n          {\n            element: element,\n            eventType: 'mouseenter',\n            callback: () => {\n              this.showTooltip(element);\n            },\n          },\n          {\n            element: element,\n            eventType: 'mouseleave',\n            callback: () => {\n              this.hideTooltip();\n            },\n          },\n          {\n            element: element,\n            eventType: 'focus',\n            callback: () => {\n              this.showTooltip(element);\n            },\n          },\n          {\n            element: element,\n            eventType: 'focusout',\n            callback: () => {\n              this.hideTooltip();\n            },\n          },\n        ]\n      );\n    });\n\n    this.disposeTriggerListener = addDisposableEventListenerAsArray(listeners);\n  }\n\n  private registerTooltipListener(dialog: HTMLDialogElement) {\n    this.disposeTooltipListener?.();\n\n    this.disposeTooltipListener = addDisposableEventListenerAsArray([\n      {\n        element: dialog,\n        eventType: 'mouseenter',\n        callback: () => {\n          if (this.interactive) {\n            this.clearHideTimeout();\n          }\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'focus',\n        callback: () => {\n          if (this.interactive) {\n            this.clearHideTimeout();\n          }\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'mouseleave',\n        callback: () => {\n          this.hideTooltip();\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'focusout',\n        callback: () => {\n          this.hideTooltip();\n        },\n      },\n      {\n        element: dialog,\n        eventType: 'click',\n        callback: (event: Event) => {\n          event.stopPropagation();\n        },\n      },\n      {\n        element: document,\n        eventType: 'keydown',\n        callback: (event: Event) => {\n          if ((event as KeyboardEvent).key === 'Escape') {\n            this.hideTooltip();\n          }\n        },\n      },\n    ]);\n  }\n\n  private registerDomChangeListener() {\n    const observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.disposeDomChangeListener = () => {\n      observer.disconnect();\n    };\n  }\n\n  private clearHideTimeout() {\n    clearTimeout(this.hideTooltipTimeout);\n    this.hideTooltipTimeout = undefined;\n  }\n\n  private clearShowTimeout() {\n    clearTimeout(this.showTooltipTimeout);\n    this.showTooltipTimeout = undefined;\n  }\n\n  private clearTimeouts() {\n    this.clearHideTimeout();\n    this.clearShowTimeout();\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.registerDomChangeListener();\n  }\n\n  disconnectedCallback() {\n    this.clearTimeouts();\n\n    this.disposeAutoUpdate?.();\n    this.disposeTriggerListener?.();\n    this.disposeTooltipListener?.();\n    this.disposeDomChangeListener?.();\n  }\n\n  render() {\n    return (\n      <Host role=\"tooltip\" class={{ visible: this.visible }}>\n        <dialog\n          ref={this.dialogRef}\n          id={'tooltip-' + this.instance}\n          class=\"dialog\"\n          popover=\"manual\"\n          inert={!this.visible}\n        >\n          <div class=\"tooltip-container\">\n            <div class=\"content-wrapper\">\n              <div class={'tooltip-title'}>\n                <slot name=\"title-icon\"></slot>\n                <ix-typography format=\"h5\">\n                  {this.titleContent}\n                  <slot name=\"title-content\"></slot>\n                </ix-typography>\n              </div>\n              <slot></slot>\n              <div class=\"arrow\"></div>\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,+xBAA+xB;;ACuClzB,MAAM,aAAa,GAAG,CAAC,KAAqB,KAC1C,KAAK,KAAK,IAAI,GAAG,GAAG,KAAK,CAAA,EAAA,CAAI,GAAG,EAAE;AAEpC,IAAI,eAAe,GAAG,CAAC;MAaV,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAwC,KAAK;;AAGtD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;;AAGb,QAAA,IAAS,CAAA,SAAA,GAAG,EAAE;;AAGd,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAIb,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAWf,QAAA,IAAQ,CAAA,QAAA,GAAG,eAAe,EAAE;AAE5B,QAAA,IAAS,CAAA,SAAA,GAAG,OAAO,EAAqB;AAiZ1D;AA/YC,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE;;;IAK9D,MAAM,WAAW,CAAC,aAAsB,EAAA;QACtC,IAAI,CAAC,aAAa,EAAE;QAEpB,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,UAAU,KAAK,aAAa,EAAE;YAChE;;QAGF,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;AAEpD,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,MAAK;AACxC,YAAA,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC;YACpC,MAAM,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,oBAAoB,CAAC,aAAa,EAAE,MAAM,CAAC;AAChD,YAAA,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC;AACtC,SAAC,EAAE,IAAI,CAAC,SAAS,CAAC;;;AAKpB,IAAA,MAAM,WAAW,CAAC,SAAoB,GAAA,IAAI,CAAC,SAAS,EAAA;QAClD,IAAI,CAAC,aAAa,EAAE;QAEpB,IAAI,IAAI,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YAC5C;;QAGF,IAAI,IAAI,CAAC,WAAW,IAAI,SAAS,KAAK,EAAE,EAAE;YACxC,SAAS,GAAG,GAAG;;QAGjB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE;AAEpD,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC,MAAK;;YACxC,IAAI,CAAC,gBAAgB,EAAE;YACvB,MAAM,CAAC,WAAW,EAAE;YACpB,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;YAC1B,CAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;SAChC,EAAE,SAAS,CAAC;;AAGP,IAAA,gBAAgB,CAAC,aAAuB,EAAA;QAC9C,IAAI,CAAC,aAAa,EAAE;AAClB,YAAA,IAAI,CAAC,UAAU,GAAG,SAAS;AAC3B,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;aACf;AACL,YAAA,IAAI,CAAC,UAAU,GAAG,aAAa;AAC/B,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;AAIf,IAAA,oBAAoB,CAAC,EAC3B,SAAS,EACT,cAAc,GACQ,EAAA;QACtB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,cAAc,CAAC,KAAM;AACpC,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,GAAG,EAAE,OAAO;AACZ,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,MAAM,EAAE,OAAO;AACf,YAAA,IAAI,EAAE,OAAO;SACd;AAED,QAAA,IAAI,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE;AAC/B,YAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,aAAa,CAAA,EAAA,EAChB,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EACtB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,CAAA;;AAGJ,QAAA,IAAI,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;AACjC,YAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,aAAa,CAChB,EAAA,EAAA,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,EACvB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,CAAA;;AAGJ,QAAA,IAAI,SAAS,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;AAClC,YAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,aAAa,CAChB,EAAA,EAAA,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC,EACtB,GAAG,EAAE,aAAa,CAAC,EAAE,CAAC,EACtB,CAAA;;AAGJ,QAAA,IAAI,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;AAChC,YAAA,OAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACK,aAAa,CAChB,EAAA,EAAA,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC,EACxB,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,EACrB,CAAA;;;AAIE,IAAA,MAAM,sBAAsB,CAClC,MAAe,EACf,MAAyB,EAAA;AAEzB,QAAA,OAAO,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE;AACrC,YAAA,QAAQ,EAAE,OAAO;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,UAAU,EAAE;AACV,gBAAA,KAAK,EAAE;gBACP,MAAM,CAAC,EAAE,CAAC;AACV,gBAAA,KAAK,CAAC;oBACJ,OAAO,EAAE,IAAI,CAAC,YAAY;iBAC3B,CAAC;AACF,gBAAA,IAAI,CAAC;AACH,oBAAA,gBAAgB,EAAE,kBAAkB;AACpC,oBAAA,yBAAyB,EAAE,KAAK;AAChC,oBAAA,OAAO,EAAE,EAAE;iBACZ,CAAC;AACF,gBAAA,IAAI,EAAE;AACP,aAAA;AACF,SAAA,CAAC;;AAGI,IAAA,yBAAyB,CAAC,eAAsC,EAAA;QACtE,MAAM,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,eAAe,CAAC;QAChE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC;;AAG/C,IAAA,MAAM,oBAAoB,CAChC,MAAe,EACf,MAAyB,EAAA;QAEzB,IAAI,CAAC,MAAM,EAAE;YACX;;AAGF,QAAA,OAAO,IAAI,OAAO,CAAwB,CAAC,OAAO,KAAI;;YACpD,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;YAE1B,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,MAAM,EACN,MAAM,EACN,YAAW;;gBACT,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,sBAAsB,CACvD,MAAM,EACN,MAAM,CACP;AAED,gBAAA,MAAM,QAAQ,GAAG,CAAA,EAAA,GAAA,eAAe,CAAC,cAAc,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,eAAe;gBAErE,IAAI,QAAQ,EAAE;AACZ,oBAAA,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;oBACnB,OAAO,CAAC,eAAe,CAAC;;AAG1B,gBAAA,IAAI,eAAe,CAAC,cAAc,CAAC,KAAK,EAAE;AACxC,oBAAA,IAAI,CAAC,yBAAyB,CAAC,eAAe,CAAC;;AAGjD,gBAAA,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,eAAe;AAChC,gBAAA,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;AAC1B,oBAAA,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;AACtB,oBAAA,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC;AACtB,iBAAA,CAAC;gBAEF,OAAO,CAAC,eAAe,CAAC;AAC1B,aAAC,EACD;AACE,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,aAAa,EAAE,IAAI;gBACnB,cAAc,EAAE,IAAI,CAAC,cAAc;AACpC,aAAA,CACF;AACH,SAAC,CAAC;;AAGI,IAAA,MAAM,mBAAmB,GAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;YACZ,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC3B,OAAO,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC;;iBAChC;gBACL,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;;;IAKrC,MAAM,eAAe,CAC3B,UAA8B,EAAA;QAE9B,MAAM,QAAQ,GAAkB,EAAE;AAElC,QAAA,MAAM,OAAO,CAAC,GAAG,CACf,UAAU,CAAC,GAAG,CAAC,OAAO,SAAS,KAAI;AACjC,YAAA,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;gBACjC,MAAM,gBAAgB,GAAG,MAAM,eAAe,CAC5C,SAAS,EACT,IAAI,CAAC,WAAW,CACjB;gBAED,IAAI,gBAAgB,EAAE;AACpB,oBAAA,QAAQ,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAC;;;AAE/B,iBAAA,IAAI,SAAS,YAAY,WAAW,EAAE;AAC3C,gBAAA,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;;AACnB,iBAAA,IAAI,SAAS,YAAY,OAAO,EAAE;AACvC,gBAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,SAAS,CAAC;;SAEjC,CAAC,CACH;AAED,QAAA,OAAO,QAAQ;;AAGT,IAAA,MAAM,uBAAuB,GAAA;;QACnC,CAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAE/B,QAAA,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,mBAAmB,EAAE;QAE3D,IAAI,CAAC,kBAAkB,EAAE;YACvB;;QAGF,MAAM,SAAS,GAIT,EAAE;AAER,QAAA,kBAAkB,CAAC,OAAO,CAAC,CAAC,OAAO,KAAI;YACrC,SAAS,CAAC,IAAI,CACZ,GAAG;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,SAAS,EAAE,YAAY;oBACvB,QAAQ,EAAE,MAAK;AACb,wBAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;qBAC1B;AACF,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,SAAS,EAAE,YAAY;oBACvB,QAAQ,EAAE,MAAK;wBACb,IAAI,CAAC,WAAW,EAAE;qBACnB;AACF,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,SAAS,EAAE,OAAO;oBAClB,QAAQ,EAAE,MAAK;AACb,wBAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;qBAC1B;AACF,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,OAAO;AAChB,oBAAA,SAAS,EAAE,UAAU;oBACrB,QAAQ,EAAE,MAAK;wBACb,IAAI,CAAC,WAAW,EAAE;qBACnB;AACF,iBAAA;AACF,aAAA,CACF;AACH,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,sBAAsB,GAAG,iCAAiC,CAAC,SAAS,CAAC;;AAGpE,IAAA,uBAAuB,CAAC,MAAyB,EAAA;;QACvD,CAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAE/B,QAAA,IAAI,CAAC,sBAAsB,GAAG,iCAAiC,CAAC;AAC9D,YAAA;AACE,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,MAAK;AACb,oBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,gBAAgB,EAAE;;iBAE1B;AACF,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,SAAS,EAAE,OAAO;gBAClB,QAAQ,EAAE,MAAK;AACb,oBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;wBACpB,IAAI,CAAC,gBAAgB,EAAE;;iBAE1B;AACF,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,MAAK;oBACb,IAAI,CAAC,WAAW,EAAE;iBACnB;AACF,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,SAAS,EAAE,UAAU;gBACrB,QAAQ,EAAE,MAAK;oBACb,IAAI,CAAC,WAAW,EAAE;iBACnB;AACF,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,SAAS,EAAE,OAAO;AAClB,gBAAA,QAAQ,EAAE,CAAC,KAAY,KAAI;oBACzB,KAAK,CAAC,eAAe,EAAE;iBACxB;AACF,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,QAAQ;AACjB,gBAAA,SAAS,EAAE,SAAS;AACpB,gBAAA,QAAQ,EAAE,CAAC,KAAY,KAAI;AACzB,oBAAA,IAAK,KAAuB,CAAC,GAAG,KAAK,QAAQ,EAAE;wBAC7C,IAAI,CAAC,WAAW,EAAE;;iBAErB;AACF,aAAA;AACF,SAAA,CAAC;;IAGI,yBAAyB,GAAA;AAC/B,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;YACzC,IAAI,CAAC,uBAAuB,EAAE;AAChC,SAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;AAC9B,YAAA,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,iBAAiB,CAAC;AACpC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;AAEF,QAAA,IAAI,CAAC,wBAAwB,GAAG,MAAK;YACnC,QAAQ,CAAC,UAAU,EAAE;AACvB,SAAC;;IAGK,gBAAgB,GAAA;AACtB,QAAA,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC;AACrC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;;IAG7B,gBAAgB,GAAA;AACtB,QAAA,YAAY,CAAC,IAAI,CAAC,kBAAkB,CAAC;AACrC,QAAA,IAAI,CAAC,kBAAkB,GAAG,SAAS;;IAG7B,aAAa,GAAA;QACnB,IAAI,CAAC,gBAAgB,EAAE;QACvB,IAAI,CAAC,gBAAgB,EAAE;;IAGzB,iBAAiB,GAAA;QACf,IAAI,CAAC,uBAAuB,EAAE;;IAGhC,gBAAgB,GAAA;QACd,IAAI,CAAC,yBAAyB,EAAE;;IAGlC,oBAAoB,GAAA;;QAClB,IAAI,CAAC,aAAa,EAAE;QAEpB,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;QAC1B,CAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;QAC/B,CAAA,EAAA,GAAA,IAAI,CAAC,sBAAsB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;QAC/B,CAAA,EAAA,GAAA,IAAI,CAAC,wBAAwB,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;;IAGnC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EACnD,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,EAAE,EAAE,UAAU,GAAG,IAAI,CAAC,QAAQ,EAC9B,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,CAAC,IAAI,CAAC,OAAO,EAAA,EAEpB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAA,EACzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,YAAY,EAAQ,CAAA,EAC/B,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,MAAM,EAAC,IAAI,EAAA,EACvB,IAAI,CAAC,YAAY,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,eAAe,EAAA,CAAQ,CACpB,CACZ,EACN,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAA,CAAO,CACrB,CACF,CACC,CACJ;;;;;;;;"}

package/dist/esm/ix-tree-item.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DtF9fwpD.js';
+import { r as iconChevronRight } from './index-CrTP-icT.js';
+
+const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tree-node-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .tree-node-container .tree-node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;min-width:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
+
+const TreeItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toggle = createEvent(this, "toggle", 7);
+        this.itemClick = createEvent(this, "itemClick", 7);
+        /**
+         * Has tree item children
+         */
+        this.hasChildren = false;
+    }
+    render() {
+        var _a, _b, _c;
+        return (h(Host, { key: 'bb6da9e7cfe6133c51d8aa4a6eebfb8e7fdb68b2', class: {
+                selected: !!((_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected),
+            } }, h("div", { key: '8c6046145871b5b27731d78150ce8db3a3d5d5ad', class: "icon-toggle-container", onClick: (e) => {
+                e.preventDefault();
+                this.toggle.emit();
+            } }, this.hasChildren ? (h("ix-icon", { name: iconChevronRight, size: "16", class: {
+                ['icon-toggle-down']: !!((_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded),
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), h("div", { key: '54dde9d64be32bcc705ca8503ceb23146e70e7b7', class: "tree-node-container", onClick: () => {
+                this.itemClick.emit();
+            } }, h("div", { key: '91747fdc39f9e1207200639d1ef1d0d4cb582947', class: "tree-node-text" }, this.text), h("slot", { key: 'bacce3961714116f77a23657c30437ac719916de' }))));
+    }
+};
+TreeItem.style = treeItemCss;
+
+export { TreeItem as ix_tree_item };
+//# sourceMappingURL=ix-tree-item.entry.js.map
+
+//# sourceMappingURL=ix-tree-item.entry.js.map

package/dist/esm/ix-tree-item.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-tree-item.entry.js","sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n\n  height: 32px;\n  width: 100%;\n\n  cursor: pointer;\n\n  .tree-node-container {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $x-large-space;\n    flex-grow: 1;\n    align-items: center;\n\n    .tree-node-text {\n      @include ellipsis;\n    }\n  }\n\n  .icon-toggle-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    height: 2rem;\n    min-width: 2rem;\n\n    ix-icon {\n      transition: transform var(--theme-default-time) ease-in-out;\n\n      &.icon-toggle-down {\n        transform: rotate(90deg);\n      }\n    }\n  }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n  background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n  background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n  background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n  background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n  background-color: var(--theme-tree-item--background--selected-active);\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\nimport { iconChevronRight } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-tree-item',\n  styleUrl: 'tree-item.scss',\n  shadow: true,\n})\nexport class TreeItem {\n  /**\n   * Text\n   */\n  @Prop() text?: string;\n\n  /**\n   * Has tree item children\n   */\n  @Prop() hasChildren = false;\n\n  /**\n   * Context\n   */\n  @Prop() context?: TreeItemContext;\n\n  /**\n   * Expand/Collapsed toggled\n   */\n  @Event() toggle!: EventEmitter<void>;\n\n  /**\n   * Click on item not on the expand/collapse icon\n   */\n  @Event() itemClick!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: !!this.context?.isSelected,\n        }}\n      >\n        <div\n          class=\"icon-toggle-container\"\n          onClick={(e) => {\n            e.preventDefault();\n            this.toggle.emit();\n          }}\n        >\n          {this.hasChildren ? (\n            <ix-icon\n              name={iconChevronRight}\n              size=\"16\"\n              class={{\n                ['icon-toggle-down']: !!this.context?.isExpanded,\n              }}\n              color={`color-${\n                this.context?.isExpanded ? 'primary' : 'std-text'\n              }`}\n            />\n          ) : null}\n        </div>\n        <div\n          class=\"tree-node-container\"\n          onClick={() => {\n            this.itemClick.emit();\n          }}\n        >\n          <div class=\"tree-node-text\">{this.text}</div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,8gEAA8gE;;MCkBrhE,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAWE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAwD5B;IAvCC,MAAM,GAAA;;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;AACrC,aAAA,EAAA,EAED,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC,KAAI;gBACb,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;aACnB,IAEA,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,gBAAgB,EACtB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;AACL,gBAAA,CAAC,kBAAkB,GAAG,CAAC,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,CAAA;AACjD,aAAA,EACD,KAAK,EAAE,CACL,MAAA,EAAA,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,IAAG,SAAS,GAAG,UACzC,CAAE,CAAA,EACF,CAAA,IACA,IAAI,CACJ,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,MAAK;AACZ,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACvB,aAAC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAO,EAC7C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/esm/ix-tree.entry.js

@@ -0,0 +1,561 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DtF9fwpD.js';
+import { r as renderDefaultItem } from './default-tree-item-UQa1aROL.js';
+import { d as dropdownController } from './dropdown-controller-D3K9vmFp.js';
+
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Manually forked from https://github.com/tbranyen/hyperlist to remove
+// features a direct document calls
+//
+// Hyperlist is licensed MIT. https://github.com/tbranyen/hyperlist
+const isNumber = (input) => !Number.isNaN(Number(input));
+const addClass = (element, className) => {
+    element.classList.add(className);
+};
+class VirtualList {
+    static create(element, userProvidedConfig = VirtualList.defaultConfig) {
+        return new VirtualList(element, userProvidedConfig);
+    }
+    static mergeStyle(element, style) {
+        for (let i in style) {
+            if (element.style[i] !== style[i]) {
+                element.style[i] = style[i];
+            }
+        }
+    }
+    static getMaxBrowserHeight() {
+        // Create two elements, the wrapper is `1px` tall and is transparent and
+        // positioned at the top of the page. Inside that is an element that gets
+        // set to 1 billion pixels. Then reads the max height the browser can
+        // calculate.
+        const wrapper = document.createElement('div');
+        const fixture = document.createElement('div');
+        // As said above, these values get set to put the fixture elements into the
+        // right visual state.
+        VirtualList.mergeStyle(wrapper, {
+            position: 'absolute',
+            height: '1px',
+            opacity: 0,
+        });
+        VirtualList.mergeStyle(fixture, { height: '1e7px' });
+        // Add the fixture into the wrapper element.
+        wrapper.appendChild(fixture);
+        // Apply to the page, the values won't kick in unless this is attached.
+        document.body.appendChild(wrapper);
+        // Get the maximum element height in pixels.
+        const maxElementHeight = fixture.offsetHeight;
+        // Remove the element immediately after reading the value.
+        document.body.removeChild(wrapper);
+        return maxElementHeight;
+    }
+    constructor(element, userProvidedConfig) {
+        this._lastRepaint = null;
+        this._maxElementHeight = VirtualList.getMaxBrowserHeight();
+        this.refresh(element, userProvidedConfig);
+        const config = this._config;
+        // Create internal render loop.
+        const render = () => {
+            const scrollTop = this._getScrollPosition();
+            const lastRepaint = this._lastRepaint;
+            this._renderAnimationFrame = window.requestAnimationFrame(render);
+            if (scrollTop === lastRepaint) {
+                return;
+            }
+            const diff = lastRepaint ? scrollTop - lastRepaint : 0;
+            if (!lastRepaint || diff < 0 || diff > this._averageHeight) {
+                let rendered = this._renderChunk();
+                this._lastRepaint = scrollTop;
+                if (rendered !== false && typeof config.afterRender === 'function') {
+                    config.afterRender();
+                }
+            }
+        };
+        render();
+    }
+    destroy() {
+        window.cancelAnimationFrame(this._renderAnimationFrame);
+    }
+    refresh(element, userProvidedConfig = VirtualList.defaultConfig) {
+        this._config = userProvidedConfig;
+        if (!element || element.nodeType !== 1) {
+            throw new Error('HyperList requires a valid DOM Node container');
+        }
+        this._element = element;
+        const config = this._config;
+        const scroller = this._scroller ||
+            config.scroller ||
+            document.createElement(config.scrollerTagName || 'tr');
+        // Default configuration option `useFragment` to `true`.
+        if (typeof config.useFragment !== 'boolean') {
+            this._config.useFragment = true;
+        }
+        if (!config.generate) {
+            throw new Error('Missing required `generate` function');
+        }
+        if (!isNumber(config.total)) {
+            throw new Error('Invalid required `total` value, expected number');
+        }
+        if (!Array.isArray(config.itemHeight) && !isNumber(config.itemHeight)) {
+            throw new Error(`
+        Invalid required \`itemHeight\` value, expected number or array
+      `.trim());
+        }
+        else if (isNumber(config.itemHeight)) {
+            this._itemHeights = Array(config.total).fill(config.itemHeight);
+        }
+        else {
+            this._itemHeights = [config.itemHeight];
+        }
+        // Width and height should be coerced to string representations. Either in
+        // `%` or `px`.
+        Object.keys(VirtualList.defaultConfig)
+            .filter((prop) => prop in config)
+            .forEach((prop) => {
+            const value = config[prop];
+            const isValueNumber = isNumber(value);
+            if (value && typeof value !== 'string' && typeof value !== 'number') {
+                let msg = `Invalid optional \`${prop}\`, expected string or number`;
+                throw new Error(msg);
+            }
+            else if (isValueNumber) {
+                config[prop] = `${value}px`;
+            }
+        });
+        const isHorizontal = Boolean(config.horizontal);
+        const value = config[isHorizontal ? 'width' : 'height'];
+        if (value) {
+            const isValueNumber = isNumber(value);
+            const isValuePercent = isValueNumber ? false : value.slice(-1) === '%';
+            // Compute the containerHeight as number
+            const numberValue = isValueNumber
+                ? parseInt(value, 10)
+                : parseInt(value.replace(/px|%/, ''), 10);
+            const innerSize = window[isHorizontal ? 'innerWidth' : 'innerHeight'];
+            if (isValuePercent) {
+                this._containerSize = (innerSize * numberValue) / 100;
+            }
+            else {
+                this._containerSize = isNumber(value) ? value : numberValue;
+            }
+        }
+        const scrollContainer = config.scrollContainer;
+        const scrollerHeight = config.itemHeight * config.total;
+        const maxElementHeight = this._maxElementHeight;
+        if (scrollerHeight > maxElementHeight) {
+            console.warn([
+                'HyperList: The maximum element height',
+                maxElementHeight + 'px has',
+                'been exceeded; please reduce your item height.',
+            ].join(' '));
+        }
+        // Decorate the container element with styles that will match
+        // the user supplied configuration.
+        const elementStyle = {
+            width: `${config.width}`,
+            height: scrollContainer ? `${scrollerHeight}px` : `${config.height}`,
+            overflow: scrollContainer ? 'none' : 'auto',
+            position: 'relative',
+        };
+        VirtualList.mergeStyle(element, elementStyle);
+        if (scrollContainer) {
+            VirtualList.mergeStyle(config.scrollContainer, { overflow: 'auto' });
+        }
+        const scrollerStyle = {
+            opacity: '0',
+            position: 'absolute',
+            [isHorizontal ? 'height' : 'width']: '1px',
+            [isHorizontal ? 'width' : 'height']: `${scrollerHeight}px`,
+        };
+        VirtualList.mergeStyle(scroller, scrollerStyle);
+        // Only append the scroller element once.
+        if (!this._scroller) {
+            element.appendChild(scroller);
+        }
+        const padding = this._computeScrollPadding();
+        this._scrollPaddingBottom = padding.bottom;
+        this._scrollPaddingTop = padding.top;
+        // Set the scroller instance.
+        this._scroller = scroller;
+        this._scrollHeight = this._computeScrollHeight();
+        // Reuse the item positions if refreshed, otherwise set to empty array.
+        this._itemPositions = this._itemPositions || Array(config.total).fill(0);
+        // Each index in the array should represent the position in the DOM.
+        this._computePositions(0);
+        // Render after refreshing. Force render if we're calling refresh manually.
+        this._renderChunk(this._lastRepaint !== null);
+        if (typeof config.afterRender === 'function') {
+            config.afterRender();
+        }
+    }
+    _getRow(i) {
+        const config = this._config;
+        let item = config.generate(i);
+        let height = item.height;
+        if (height !== undefined && isNumber(height)) {
+            item = item.element;
+            // The height isn't the same as predicted, compute positions again
+            if (height !== this._itemHeights[i]) {
+                this._itemHeights[i] = height;
+                this._computePositions(i);
+                this._scrollHeight = this._computeScrollHeight();
+            }
+        }
+        else {
+            height = this._itemHeights[i];
+        }
+        if (!item || item.nodeType !== 1) {
+            throw new Error(`Generator did not return a DOM Node for index: ${i}`);
+        }
+        addClass(item, config.rowClassName || 'vrow');
+        const top = this._itemPositions[i] + this._scrollPaddingTop;
+        VirtualList.mergeStyle(item, {
+            position: 'absolute',
+            [config.horizontal ? 'left' : 'top']: `${top}px`,
+        });
+        return item;
+    }
+    _getScrollPosition() {
+        const config = this._config;
+        if (typeof config.overrideScrollPosition === 'function') {
+            return config.overrideScrollPosition();
+        }
+        return this._element[config.horizontal ? 'scrollLeft' : 'scrollTop'];
+    }
+    _renderChunk(force = false) {
+        const config = this._config;
+        const element = this._element;
+        const scrollTop = this._getScrollPosition();
+        const total = config.total;
+        let from = this._getFrom(scrollTop) - 1;
+        if (from < 0 || from - this._screenItemsLen < 0) {
+            from = 0;
+        }
+        if (!force && this._lastFrom === from) {
+            return false;
+        }
+        this._lastFrom = from;
+        let to = from + this._cachedItemsLen;
+        if (to > total || to + this._cachedItemsLen > total) {
+            to = total;
+        }
+        // Append all the new rows in a document fragment that we will later append
+        // to the parent node
+        const fragment = config.useFragment
+            ? document.createDocumentFragment()
+            : [
+            // Sometimes you'll pass fake elements to this tool and Fragments require
+            // real elements.
+            ];
+        // The element that forces the container to scroll.
+        const scroller = this._scroller;
+        // Keep the scroller in the list of children.
+        fragment[config.useFragment ? 'appendChild' : 'push'](scroller);
+        for (let i = from; i < to; i++) {
+            let row = this._getRow(i);
+            fragment[config.useFragment ? 'appendChild' : 'push'](row);
+        }
+        if (config.applyPatch) {
+            return config.applyPatch(element, fragment);
+        }
+        element.innerHTML = '';
+        element.appendChild(fragment);
+    }
+    _computePositions(from = 1) {
+        const config = this._config;
+        const total = config.total;
+        if (from < 1) {
+            from = 1;
+        }
+        for (let i = from; i < total; i++) {
+            this._itemPositions[i] =
+                this._itemHeights[i - 1] + this._itemPositions[i - 1];
+        }
+    }
+    _computeScrollHeight() {
+        const config = this._config;
+        const isHorizontal = Boolean(config.horizontal);
+        const total = config.total;
+        const scrollHeight = this._itemHeights.reduce((a, b) => a + b, 0) +
+            this._scrollPaddingBottom +
+            this._scrollPaddingTop;
+        VirtualList.mergeStyle(this._scroller, {
+            opacity: 0,
+            position: 'absolute',
+            top: '0px',
+            [isHorizontal ? 'height' : 'width']: '1px',
+            [isHorizontal ? 'width' : 'height']: `${scrollHeight}px`,
+        });
+        // Calculate the height median
+        const sortedItemHeights = this._itemHeights.slice(0).sort((a, b) => a - b);
+        const middle = Math.floor(total / 2);
+        const averageHeight = total % 2 === 0
+            ? (sortedItemHeights[middle] + sortedItemHeights[middle - 1]) / 2
+            : sortedItemHeights[middle];
+        const clientProp = isHorizontal ? 'clientWidth' : 'clientHeight';
+        const element = config.scrollContainer
+            ? config.scrollContainer
+            : this._element;
+        const containerHeight = element[clientProp]
+            ? element[clientProp]
+            : this._containerSize;
+        this._screenItemsLen = Math.ceil(containerHeight / averageHeight);
+        this._containerSize = containerHeight;
+        // Cache 3 times the number of items that fit in the container viewport.
+        this._cachedItemsLen = Math.max(this._cachedItemsLen || 0, this._screenItemsLen * 3);
+        this._averageHeight = averageHeight;
+        return scrollHeight;
+    }
+    _computeScrollPadding() {
+        const config = this._config;
+        const isHoriz = Boolean(config.horizontal);
+        const styles = window.getComputedStyle(this._element);
+        const padding = (location) => {
+            const cssValue = styles.getPropertyValue(`padding-${location}`);
+            return parseInt(cssValue, 10) || 0;
+        };
+        if (isHoriz) {
+            return {
+                bottom: padding('right'),
+                top: padding('left'),
+            };
+        }
+        else {
+            return {
+                bottom: padding('bottom'),
+                top: padding('top'),
+            };
+        }
+    }
+    _getFrom(scrollTop) {
+        let i = 0;
+        while (this._itemPositions[i] < scrollTop) {
+            i++;
+        }
+        return i;
+    }
+}
+VirtualList.defaultConfig = {
+    width: '100%',
+    height: '100%',
+};
+
+const treeCss = ":host{display:block}";
+
+const Tree = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.contextChange = createEvent(this, "contextChange", 7);
+        this.nodeToggled = createEvent(this, "nodeToggled", 7);
+        this.nodeClicked = createEvent(this, "nodeClicked", 7);
+        this.nodeRemoved = createEvent(this, "nodeRemoved", 7);
+        /**
+         * Tree model
+         */
+        this.model = {};
+        /**
+         * Selection and collapsed state management
+         */
+        this.context = {};
+        this.toggleListener = new Map();
+        this.itemClickListener = new Map();
+        this.updates = new Map();
+        this.hasFirstRender = false;
+    }
+    updatePadding(element, item) {
+        element.style.paddingLeft = item.level + 'rem';
+    }
+    getVirtualizerOptions() {
+        const list = this.buildTreeList(this.model[this.root]);
+        let setToggleListener = (item, el, index) => {
+            if (item.hasChildren && !this.toggleListener.has(el)) {
+                const toggleCallback = (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const context = this.getContext(list[index].id);
+                    context.isExpanded = !context.isExpanded;
+                    this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });
+                    this.setContext(item.id, context);
+                };
+                el.addEventListener('toggle', toggleCallback);
+                this.toggleListener.set(el, toggleCallback);
+            }
+        };
+        return {
+            width: '100%',
+            height: '100%',
+            itemHeight: 32,
+            total: list.length,
+            generate: (index) => {
+                const item = list[index];
+                const renderedTreeItem = this.hostElement.querySelector(`[data-tree-node-id="${item.id}"]`);
+                const context = this.getContext(item.id);
+                if (renderedTreeItem) {
+                    renderedTreeItem.hasChildren = item.hasChildren;
+                    renderedTreeItem.context = Object.assign({}, context);
+                    setToggleListener(item, renderedTreeItem, index);
+                    if (this.updates.has(item.id)) {
+                        const doUpdate = this.updates.get(item.id);
+                        if (doUpdate) {
+                            doUpdate(item, Object.assign({}, this.context));
+                        }
+                    }
+                    this.updatePadding(renderedTreeItem, item);
+                    return renderedTreeItem;
+                }
+                const update = (callback) => {
+                    this.updates.set(item.id, callback);
+                };
+                let innerElement = null;
+                if (this.renderItem) {
+                    innerElement = this.renderItem(index, item, list, Object.assign({}, this.context), update);
+                }
+                if (innerElement === null) {
+                    innerElement = renderDefaultItem(item, context, update);
+                }
+                const el = innerElement;
+                el.setAttribute('data-tree-node-id', item.id);
+                el.style.paddingRight = '1rem';
+                this.updatePadding(el, item);
+                if (!this.itemClickListener.has(el)) {
+                    const itemClickCallback = (event) => {
+                        const path = event.composedPath();
+                        const treeIndex = path.indexOf(this.hostElement);
+                        const treePath = path.slice(0, treeIndex);
+                        const hasTrigger = dropdownController.pathIncludesTrigger(treePath);
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        if (hasTrigger) {
+                            return;
+                        }
+                        Object.values(this.context).forEach((c) => (c.isSelected = false));
+                        const context = this.getContext(item.id);
+                        context.isSelected = true;
+                        this.setContext(item.id, context);
+                        this.nodeClicked.emit(item.id);
+                    };
+                    el.addEventListener('toggle', (event) => {
+                        event.preventDefault();
+                    });
+                    el.addEventListener('click', itemClickCallback);
+                    this.itemClickListener.set(el, itemClickCallback);
+                }
+                setToggleListener(item, el, index);
+                return el;
+            },
+        };
+    }
+    setContext(id, context) {
+        this.context = Object.assign(Object.assign({}, this.context), { [id]: context });
+        this.contextChange.emit(this.context);
+    }
+    getContext(id) {
+        if (!this.context) {
+            return {
+                isExpanded: false,
+                isSelected: false,
+            };
+        }
+        if (!this.context[id]) {
+            this.context[id] = {
+                isExpanded: false,
+                isSelected: false,
+            };
+        }
+        return this.context[id];
+    }
+    buildTreeList(root, level = 0) {
+        const itemList = [];
+        if (root === null || root === void 0 ? void 0 : root.hasChildren) {
+            const newLevel = level + 1;
+            root.children.forEach((id) => {
+                const item = this.model[id];
+                const context = this.getContext(id);
+                itemList.push(Object.assign(Object.assign({}, item), { level }));
+                if (item.hasChildren && context.isExpanded) {
+                    itemList.push(...this.buildTreeList(item, newLevel));
+                }
+            });
+        }
+        return itemList;
+    }
+    componentDidLoad() {
+        this.initList();
+        this.observer = new MutationObserver((records) => {
+            let removed = [];
+            records.forEach((record) => {
+                removed = [...removed, ...Array.from(record.removedNodes)];
+                record.addedNodes.forEach((an) => {
+                    const index = removed.indexOf(an);
+                    if (index >= 0) {
+                        removed.splice(index, 1);
+                    }
+                });
+            });
+            this.nodeRemoved.emit(removed);
+        });
+        this.observer.observe(this.hostElement, {
+            childList: true,
+        });
+    }
+    componentWillRender() {
+        this.hasFirstRender = true;
+        if (this.isListInitialized()) {
+            this.refreshList();
+        }
+        else {
+            this.initList();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
+    }
+    modelChange() {
+        if (this.hasFirstRender && !this.isListInitialized()) {
+            this.initList();
+        }
+    }
+    isListInitialized() {
+        var _a;
+        //@ts-ignore
+        const itemPositions = (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a._itemPositions;
+        return (itemPositions !== undefined &&
+            itemPositions.length &&
+            !(itemPositions === null || itemPositions === void 0 ? void 0 : itemPositions.some((item) => item === undefined || Number.isNaN(item))));
+    }
+    refreshList() {
+        if (this.hyperlist) {
+            this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());
+        }
+    }
+    initList() {
+        var _a;
+        if (!this.model) {
+            return;
+        }
+        (_a = this.hyperlist) === null || _a === void 0 ? void 0 : _a.destroy();
+        const config = this.getVirtualizerOptions();
+        this.hyperlist = new VirtualList(this.hostElement, config);
+    }
+    render() {
+        return (h(Host, { key: 'f07f8e18cb87e576426b1ba321d8d198712db756' }, h("slot", { key: 'c2f1bfa0cb99eeac46d11270d22e949a4d8674c3' })));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "model": ["modelChange"]
+    }; }
+};
+Tree.style = treeCss;
+
+export { Tree as ix_tree };
+//# sourceMappingURL=ix-tree.entry.js.map
+
+//# sourceMappingURL=ix-tree.entry.js.map