@siemens/ix 0.0.0-20240419081748

package/dist/collection/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionReturn,\n  flip,\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 { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n  top?: string;\n  left?: string;\n  right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\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 implements IxOverlayComponent {\n  /**\n   * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n   */\n  @Prop() for: string | HTMLElement | Promise<HTMLElement>;\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. If the placement don\"t have enough space,\n   * the tooltip will placed on another location.\n   *\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  @State() visible = false;\n\n  @Element() hostElement: HTMLIxTooltipElement;\n\n  private observer: MutationObserver;\n  private hideTooltipTimeout: NodeJS.Timeout;\n  private showTooltipTimeout: NodeJS.Timeout;\n  private disposeAutoUpdate?: () => void;\n  private disposeListener: () => void;\n\n  private get arrowElement(): HTMLElement {\n    return this.hostElement.shadowRoot.querySelector('.arrow');\n  }\n\n  private destroyAutoUpdate() {\n    if (this.disposeAutoUpdate !== undefined) {\n      this.disposeAutoUpdate();\n    }\n  }\n\n  /** @internal */\n  @Method()\n  async showTooltip(anchorElement: any) {\n    clearTimeout(this.hideTooltipTimeout);\n    await this.applyTooltipPosition(anchorElement);\n\n    this.showTooltipTimeout = setTimeout(() => {\n      tooltipController.present(this);\n      // Need to compute and apply tooltip position after initial render,\n      // because arrow has no valid bounding rect before that\n      this.applyTooltipPosition(anchorElement);\n    }, this.showDelay);\n  }\n\n  /** @internal */\n  @Method()\n  async hideTooltip() {\n    clearTimeout(this.showTooltipTimeout);\n    let hideDelay = 50;\n\n    if (this.interactive && this.hideDelay === hideDelay) {\n      hideDelay = 150;\n    }\n\n    this.hideTooltipTimeout = setTimeout(() => {\n      tooltipController.dismiss(this);\n    }, hideDelay);\n    this.destroyAutoUpdate();\n  }\n\n  private computeArrowPosition({\n    placement,\n    middlewareData,\n  }: ComputePositionReturn): ArrowPosition {\n    let { x, y } = middlewareData.arrow;\n\n    if (placement.startsWith('top')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('right')) {\n      return {\n        left: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n\n    if (placement.startsWith('bottom')) {\n      return {\n        left: numberToPixel(x),\n        top: numberToPixel(-4),\n      };\n    }\n\n    if (placement.startsWith('left')) {\n      return {\n        right: numberToPixel(-4),\n        top: numberToPixel(y),\n      };\n    }\n  }\n\n  private async computeTooltipPosition(target: Element) {\n    const computeResponse = await computePosition(target, this.hostElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      middleware: [\n        shift(),\n        offset(8),\n        arrow({\n          element: this.arrowElement,\n        }),\n        flip({\n          fallbackStrategy: 'initialPlacement',\n          padding: 10,\n        }),\n      ],\n    });\n    return computeResponse;\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(target: Element) {\n    if (!target) {\n      return;\n    }\n\n    return new Promise<ComputePositionReturn>((resolve) => {\n      this.disposeAutoUpdate = autoUpdate(\n        target,\n        this.hostElement,\n        async () => {\n          setTimeout(async () => {\n            const computeResponse = await this.computeTooltipPosition(target);\n\n            if (computeResponse.middlewareData.arrow) {\n              this.applyTooltipArrowPosition(computeResponse);\n            }\n\n            const { x, y } = computeResponse;\n            Object.assign(this.hostElement.style, {\n              left: x !== null ? `${x}px` : '',\n              top: y !== null ? `${y}px` : '',\n            });\n\n            resolve(computeResponse);\n          });\n        },\n        {\n          ancestorResize: true,\n          ancestorScroll: true,\n          elementResize: true,\n          animationFrame: this.animationFrame,\n        }\n      );\n    });\n  }\n\n  private clearHideTimeout() {\n    if (this.interactive) {\n      clearTimeout(this.hideTooltipTimeout);\n    }\n  }\n\n  private async queryAnchorElements(): Promise<Array<HTMLElement>> {\n    if (typeof this.for === 'string') {\n      return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n    }\n\n    if (this.for instanceof HTMLElement) {\n      return Promise.resolve([this.for]);\n    }\n\n    if (this.for instanceof Promise) {\n      const element = await this.for;\n      return [element];\n    }\n  }\n\n  private async registerTriggerListener() {\n    const triggerElementList = await this.queryAnchorElements();\n\n    if (this.disposeListener) {\n      this.disposeListener();\n    }\n\n    triggerElementList.forEach((element) => {\n      const onMouseEnter = () => {\n        this.showTooltip(element);\n      };\n\n      const onMouseLeave = () => {\n        this.hideTooltip();\n      };\n\n      const onFocusIn = () => {\n        if (this.showTooltipTimeout !== undefined) {\n          clearTimeout(this.showTooltipTimeout);\n        }\n\n        onMouseEnter();\n      };\n\n      const onFocusOut = () => {\n        this.hideTooltip();\n      };\n\n      element.addEventListener('mouseenter', onMouseEnter);\n      element.addEventListener('mouseleave', onMouseLeave);\n      element.addEventListener('focusin', onFocusIn);\n      element.addEventListener('focusout', onFocusOut);\n\n      this.disposeListener = () => {\n        element.removeEventListener('mouseenter', onMouseEnter);\n        element.removeEventListener('mouseleave', onMouseLeave);\n        element.removeEventListener('focusin', onFocusIn);\n        element.removeEventListener('focusout', onFocusOut);\n      };\n    });\n  }\n\n  private registerTooltipListener() {\n    const { hostElement } = this;\n    hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n    hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n    hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n    hostElement.addEventListener('focusout', () => this.hideTooltip());\n  }\n\n  @OnListener<Tooltip>('keydown', (self) => self.visible)\n  async onKeydown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.hideTooltip();\n    }\n  }\n\n  componentWillLoad() {\n    this.registerTriggerListener();\n  }\n\n  componentDidLoad() {\n    this.observer = new MutationObserver(() => {\n      this.registerTriggerListener();\n    });\n\n    this.observer.observe(document.body, {\n      attributes: true,\n      attributeFilter: ['data-ix-tooltip'],\n      childList: true,\n      subtree: true,\n    });\n\n    this.registerTooltipListener();\n  }\n\n  connectedCallback() {\n    tooltipController.connected(this);\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n    tooltipController.disconnected(this);\n  }\n\n  isPresent(): boolean {\n    return this.visible;\n  }\n\n  present(): void {\n    this.visible = true;\n  }\n\n  dismiss(): void {\n    this.visible = false;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          visible: this.visible,\n        }}\n        role=\"tooltip\"\n      >\n        <div class={'tooltip-title'}>\n          <slot name=\"title-icon\"></slot>\n          <ix-typography variant=\"default-title\">\n            {this.titleContent}\n            <slot name=\"title-content\"></slot>\n          </ix-typography>\n        </div>\n        <div class={'tooltip-content'}>\n          <slot></slot>\n        </div>\n        <div class=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tree/test/tree.ct.js

@@ -0,0 +1,154 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+import { expect } from "@playwright/test";
+import { test } from "../../../tests/utils/test/index";
+const defaultModel = {
+    root: {
+        id: 'root',
+        data: {
+            name: '',
+        },
+        hasChildren: true,
+        children: ['sample'],
+    },
+    sample: {
+        id: 'sample',
+        data: {
+            name: 'Sample',
+        },
+        hasChildren: true,
+        children: ['sample-child-1', 'sample-child-2', 'sample-child-3'],
+    },
+    'sample-child-1': {
+        id: 'sample-child-1',
+        data: {
+            name: 'Sample Child 1',
+        },
+        hasChildren: false,
+        children: [],
+    },
+    'sample-child-2': {
+        id: 'sample-child-2',
+        data: {
+            name: 'Sample Child 2',
+        },
+        hasChildren: true,
+        children: ['sample-child-4'],
+    },
+    'sample-child-3': {
+        id: 'sample-child-3',
+        data: {
+            name: 'Sample Child 3',
+        },
+        hasChildren: false,
+        children: [],
+    },
+    'sample-child-4': {
+        id: 'sample-child-4',
+        data: {
+            name: 'Sample Child 4',
+        },
+        hasChildren: false,
+        children: [],
+    },
+};
+const initializeTree = async (mount, page) => {
+    await mount(`
+      <div style=" height: 20rem; width: 100%;">
+        <ix-tree root="root"></ix-tree>
+      </div>
+    `);
+    const tree = page.locator('ix-tree');
+    await tree.evaluate((element, [model]) => {
+        element.model = model;
+    }, [defaultModel]);
+    const item = tree.locator('ix-tree-item').nth(0);
+    await expect(tree).toHaveClass(/hydrated/);
+    await expect(item).toBeVisible();
+    return tree;
+};
+const updateModel = async (tree, updatedModel) => {
+    await tree.evaluate((element, [model]) => {
+        element.model = model;
+    }, [updatedModel]);
+};
+test('renders', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    const item = tree.locator('ix-tree-item').nth(0);
+    await expect(tree).toHaveClass(/hydrated/);
+    await expect(item).toBeVisible();
+});
+test('update tree', async ({ mount, page }) => {
+    const tree = await initializeTree(mount, page);
+    const item = tree.locator('ix-tree-item').nth(0);
+    await item.locator('.icon-toggle-container').click();
+    const item2 = tree.locator('ix-tree-item').nth(2);
+    await item2.locator('.icon-toggle-container').click();
+    const item3 = tree.locator('ix-tree-item').nth(4);
+    await expect(item3).toBeVisible();
+    await expect(item3).toHaveText('Sample Child 3');
+    await expect(item3).toHaveCSS('padding-left', '16px');
+    await updateModel(tree, {
+        root: {
+            id: 'root',
+            data: {
+                name: '',
+            },
+            hasChildren: true,
+            children: ['sample'],
+        },
+        sample: {
+            id: 'sample',
+            data: {
+                name: 'Sample',
+            },
+            hasChildren: true,
+            children: ['sample-child-1', 'sample-child-2'],
+        },
+        'sample-child-1': {
+            id: 'sample-child-1',
+            data: {
+                name: 'Sample Child 1',
+            },
+            hasChildren: false,
+            children: [],
+        },
+        'sample-child-2': {
+            id: 'sample-child-2',
+            data: {
+                name: 'Sample Child 2',
+            },
+            hasChildren: true,
+            children: ['sample-child-3', 'sample-child-4'],
+        },
+        'sample-child-3': {
+            id: 'sample-child-3',
+            data: {
+                name: 'Sample Child 3',
+            },
+            hasChildren: false,
+            children: [],
+        },
+        'sample-child-4': {
+            id: 'sample-child-4',
+            data: {
+                name: 'Sample Child 4',
+            },
+            hasChildren: false,
+            children: [],
+        },
+    });
+    await expect(tree).toHaveClass(/hydrated/);
+    await expect(item).toBeVisible();
+    await expect(item2).toBeVisible();
+    const newChildItem = tree.locator('ix-tree-item').nth(3);
+    await expect(newChildItem).toBeVisible();
+    await expect(newChildItem).toHaveCSS('padding-left', '32px');
+});
+//# sourceMappingURL=tree.ct.js.map

package/dist/collection/components/tree/test/tree.ct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.ct.js","sourceRoot":"","sources":["../../../../../src/components/tree/test/tree.ct.ts"],"names":[],"mappings":"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","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 */\nimport { expect, Locator, Page } from '@playwright/test';\nimport { test } from '@utils/test';\n\nconst defaultModel = {\n  root: {\n    id: 'root',\n    data: {\n      name: '',\n    },\n    hasChildren: true,\n    children: ['sample'],\n  },\n  sample: {\n    id: 'sample',\n    data: {\n      name: 'Sample',\n    },\n    hasChildren: true,\n    children: ['sample-child-1', 'sample-child-2', 'sample-child-3'],\n  },\n  'sample-child-1': {\n    id: 'sample-child-1',\n    data: {\n      name: 'Sample Child 1',\n    },\n    hasChildren: false,\n    children: [],\n  },\n  'sample-child-2': {\n    id: 'sample-child-2',\n    data: {\n      name: 'Sample Child 2',\n    },\n    hasChildren: true,\n    children: ['sample-child-4'],\n  },\n  'sample-child-3': {\n    id: 'sample-child-3',\n    data: {\n      name: 'Sample Child 3',\n    },\n    hasChildren: false,\n    children: [],\n  },\n  'sample-child-4': {\n    id: 'sample-child-4',\n    data: {\n      name: 'Sample Child 4',\n    },\n    hasChildren: false,\n    children: [],\n  },\n};\n\nconst initializeTree = async (mount, page: Page) => {\n  await mount(`\n      <div style=\" height: 20rem; width: 100%;\">\n        <ix-tree root=\"root\"></ix-tree>\n      </div>\n    `);\n  const tree = page.locator('ix-tree');\n\n  await tree.evaluate(\n    (element: HTMLIxTreeElement, [model]) => {\n      element.model = model;\n    },\n    [defaultModel]\n  );\n\n  const item = tree.locator('ix-tree-item').nth(0);\n  await expect(tree).toHaveClass(/hydrated/);\n  await expect(item).toBeVisible();\n\n  return tree;\n};\n\nconst updateModel = async (tree: Locator, updatedModel: any) => {\n  await tree.evaluate(\n    (element: HTMLIxTreeElement, [model]) => {\n      element.model = model;\n    },\n    [updatedModel]\n  );\n};\n\ntest('renders', async ({ mount, page }) => {\n  const tree = await initializeTree(mount, page);\n  const item = tree.locator('ix-tree-item').nth(0);\n  await expect(tree).toHaveClass(/hydrated/);\n  await expect(item).toBeVisible();\n});\n\ntest('update tree', async ({ mount, page }) => {\n  const tree = await initializeTree(mount, page);\n\n  const item = tree.locator('ix-tree-item').nth(0);\n  await item.locator('.icon-toggle-container').click();\n\n  const item2 = tree.locator('ix-tree-item').nth(2);\n  await item2.locator('.icon-toggle-container').click();\n\n  const item3 = tree.locator('ix-tree-item').nth(4);\n  await expect(item3).toBeVisible();\n  await expect(item3).toHaveText('Sample Child 3');\n  await expect(item3).toHaveCSS('padding-left', '16px');\n\n  await updateModel(tree, {\n    root: {\n      id: 'root',\n      data: {\n        name: '',\n      },\n      hasChildren: true,\n      children: ['sample'],\n    },\n    sample: {\n      id: 'sample',\n      data: {\n        name: 'Sample',\n      },\n      hasChildren: true,\n      children: ['sample-child-1', 'sample-child-2'],\n    },\n    'sample-child-1': {\n      id: 'sample-child-1',\n      data: {\n        name: 'Sample Child 1',\n      },\n      hasChildren: false,\n      children: [],\n    },\n    'sample-child-2': {\n      id: 'sample-child-2',\n      data: {\n        name: 'Sample Child 2',\n      },\n      hasChildren: true,\n      children: ['sample-child-3', 'sample-child-4'],\n    },\n    'sample-child-3': {\n      id: 'sample-child-3',\n      data: {\n        name: 'Sample Child 3',\n      },\n      hasChildren: false,\n      children: [],\n    },\n    'sample-child-4': {\n      id: 'sample-child-4',\n      data: {\n        name: 'Sample Child 4',\n      },\n      hasChildren: false,\n      children: [],\n    },\n  });\n\n  await expect(tree).toHaveClass(/hydrated/);\n  await expect(item).toBeVisible();\n  await expect(item2).toBeVisible();\n\n  const newChildItem = tree.locator('ix-tree-item').nth(3);\n  await expect(newChildItem).toBeVisible();\n  await expect(newChildItem).toHaveCSS('padding-left', '32px');\n});\n"]}

package/dist/collection/components/tree/tree-model.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tree-model.js.map

package/dist/collection/components/tree/tree-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-model.js","sourceRoot":"","sources":["../../../../src/components/tree/tree-model.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG","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\nexport type TreeItemId = string;\nexport type TreeContext = Record<string, TreeItemContext>;\nexport type TreeModel<T> = Record<TreeItemId, TreeItem<T>>;\n\nexport type UpdateCallback = (\n  treeItem: TreeItem<any>,\n  context: TreeContext\n) => void;\n\nexport interface TreeItem<T> {\n  id: TreeItemId;\n  data: T;\n  hasChildren: boolean;\n  children: TreeItemId[];\n}\n\nexport interface TreeItemVisual<T> extends TreeItem<T> {\n  level: number;\n}\n\nexport interface TreeItemContext {\n  isExpanded: boolean;\n  isSelected: boolean;\n}\n"]}

package/dist/collection/components/tree/tree.css

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/tree/tree.js

@@ -0,0 +1,385 @@
+/*
+ * SPDX-FileCopyrightText: 2023 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.
+ */
+import { h, Host, } from "@stencil/core";
+import Hyperlist from "hyperlist";
+import { renderDefaultItem } from "../tree-item/default-tree-item";
+export class Tree {
+    constructor() {
+        this.toggleListener = new Map();
+        this.itemClickListener = new Map();
+        this.updates = new Map();
+        this.hasFirstRender = false;
+        this.root = undefined;
+        this.model = undefined;
+        this.renderItem = undefined;
+        this.context = {};
+    }
+    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 {
+            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);
+                        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 = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        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('itemClick', 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;
+        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 Hyperlist(this.hostElement, config);
+    }
+    render() {
+        return (h(Host, { key: 'fa198f954c529db834099df3f599ecaf65223365' }, h("slot", { key: '54e63253af180cdd5e1c2c5048bf495475db36de' })));
+    }
+    static get is() { return "ix-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "root": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial root element will not be rendered"
+                },
+                "attribute": "root",
+                "reflect": false
+            },
+            "model": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TreeModel<any>",
+                    "resolved": "{ [x: string]: TreeItem<any>; }",
+                    "references": {
+                        "TreeModel": {
+                            "location": "import",
+                            "path": "./tree-model",
+                            "id": "src/components/tree/tree-model.ts::TreeModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tree model"
+                }
+            },
+            "renderItem": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "<T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement",
+                    "resolved": "<T = any>(index: number, data: T, dataList: T[], context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement",
+                    "references": {
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "TreeContext": {
+                            "location": "import",
+                            "path": "./tree-model",
+                            "id": "src/components/tree/tree-model.ts::TreeContext"
+                        },
+                        "UpdateCallback": {
+                            "location": "import",
+                            "path": "./tree-model",
+                            "id": "src/components/tree/tree-model.ts::UpdateCallback"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render function of tree items"
+                }
+            },
+            "context": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "TreeContext",
+                    "resolved": "{ [x: string]: TreeItemContext; }",
+                    "references": {
+                        "TreeContext": {
+                            "location": "import",
+                            "path": "./tree-model",
+                            "id": "src/components/tree/tree-model.ts::TreeContext"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selection and collapsed state management"
+                },
+                "defaultValue": "{}"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "contextChange",
+                "name": "contextChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Context changed"
+                },
+                "complexType": {
+                    "original": "TreeContext",
+                    "resolved": "{ [x: string]: TreeItemContext; }",
+                    "references": {
+                        "TreeContext": {
+                            "location": "import",
+                            "path": "./tree-model",
+                            "id": "src/components/tree/tree-model.ts::TreeContext"
+                        }
+                    }
+                }
+            }, {
+                "method": "nodeToggled",
+                "name": "nodeToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.5.0"
+                        }],
+                    "text": "Node toggled event"
+                },
+                "complexType": {
+                    "original": "{ id: string; isExpaned: boolean }",
+                    "resolved": "{ id: string; isExpaned: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "nodeClicked",
+                "name": "nodeClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "1.5.0"
+                        }],
+                    "text": "Node clicked event"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "nodeRemoved",
+                "name": "nodeRemoved",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits removed nodes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "model",
+                "methodName": "modelChange"
+            }];
+    }
+}
+//# sourceMappingURL=tree.js.map

package/dist/collection/components/tree/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sourceRoot":"","sources":["../../../../src/components/tree/tree.tsx"],"names":[],"mappings":"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","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\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport Hyperlist from 'hyperlist';\nimport { renderDefaultItem } from '../tree-item/default-tree-item';\nimport {\n  TreeContext,\n  TreeItem,\n  TreeItemContext,\n  TreeItemVisual,\n  TreeModel,\n  UpdateCallback,\n} from './tree-model';\n\n@Component({\n  tag: 'ix-tree',\n  styleUrl: 'tree.css',\n  shadow: true,\n})\nexport class Tree {\n  @Element() hostElement!: HTMLIxTreeElement;\n\n  /**\n   * Initial root element will not be rendered\n   */\n  @Prop() root: string;\n\n  /**\n   * Tree model\n   */\n  @Prop() model: TreeModel<any>;\n\n  /**\n   * Render function of tree items\n   */\n  @Prop() renderItem: <T = any>(\n    index: number,\n    data: T,\n    dataList: Array<T>,\n    context: TreeContext,\n    update: (callback: UpdateCallback) => void\n  ) => HTMLElement;\n\n  /**\n   * Selection and collapsed state management\n   */\n  @Prop({ mutable: true }) context: TreeContext = {};\n\n  /**\n   * Context changed\n   */\n  @Event() contextChange: EventEmitter<TreeContext>;\n\n  /**\n   * Node toggled event\n   * @since 1.5.0\n   */\n  @Event() nodeToggled: EventEmitter<{ id: string; isExpaned: boolean }>;\n\n  /**\n   * Node clicked event\n   * @since 1.5.0\n   */\n  @Event() nodeClicked: EventEmitter<string>;\n\n  /**\n   * Emits removed nodes\n   */\n  @Event() nodeRemoved: EventEmitter<any>;\n\n  private hyperlist: Hyperlist;\n\n  private toggleListener = new Map<HTMLElement, Function>();\n  private itemClickListener = new Map<HTMLElement, Function>();\n  private updates = new Map<string, UpdateCallback>();\n  private observer: MutationObserver;\n  private hasFirstRender = false;\n\n  private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {\n    element.style.paddingLeft = item.level + 'rem';\n  }\n\n  private getVirtualizerOptions() {\n    const list = this.buildTreeList(this.model[this.root]);\n\n    let setToggleListener = (\n      item: TreeItemVisual<any>,\n      el: HTMLElement,\n      index: number\n    ) => {\n      if (item.hasChildren && !this.toggleListener.has(el)) {\n        const toggleCallback = (e: Event) => {\n          e.preventDefault();\n          e.stopPropagation();\n          const context = this.getContext(list[index].id);\n          context.isExpanded = !context.isExpanded;\n          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });\n          this.setContext(item.id, context);\n        };\n        el.addEventListener('toggle', toggleCallback);\n        this.toggleListener.set(el, toggleCallback);\n      }\n    };\n\n    return {\n      itemHeight: 32,\n      total: list.length,\n      generate: (index: number) => {\n        const item = list[index];\n\n        const renderedTreeItem = this.hostElement.querySelector(\n          `[data-tree-node-id=\"${item.id}\"]`\n        ) as HTMLIxTreeItemElement;\n\n        const context = this.getContext(item.id);\n\n        if (renderedTreeItem) {\n          renderedTreeItem.hasChildren = item.hasChildren;\n          renderedTreeItem.context = { ...context };\n\n          setToggleListener(item, renderedTreeItem, index);\n\n          if (this.updates.has(item.id)) {\n            const doUpdate = this.updates.get(item.id);\n            doUpdate(item, { ...this.context });\n          }\n\n          this.updatePadding(renderedTreeItem, item);\n          return renderedTreeItem;\n        }\n\n        const update = (callback: UpdateCallback) => {\n          this.updates.set(item.id, callback);\n        };\n\n        let innerElement: HTMLElement | null = null;\n        if (this.renderItem) {\n          innerElement = this.renderItem(\n            index,\n            item,\n            list,\n            { ...this.context },\n            update\n          );\n        }\n\n        if (innerElement === null) {\n          innerElement = renderDefaultItem(item, context, update);\n        }\n\n        const el = innerElement;\n        el.setAttribute('data-tree-node-id', item.id);\n        el.style.paddingRight = '1rem';\n        this.updatePadding(el, item);\n\n        if (!this.itemClickListener.has(el)) {\n          const itemClickCallback = (e: Event) => {\n            e.preventDefault();\n            e.stopPropagation();\n            Object.values(this.context).forEach((c) => (c.isSelected = false));\n            const context = this.getContext(item.id);\n            context.isSelected = true;\n            this.setContext(item.id, context);\n            this.nodeClicked.emit(item.id);\n          };\n          el.addEventListener('itemClick', itemClickCallback);\n          this.itemClickListener.set(el, itemClickCallback);\n        }\n\n        setToggleListener(item, el, index);\n\n        return el;\n      },\n    };\n  }\n\n  private setContext(id: string, context: TreeItemContext) {\n    this.context = {\n      ...this.context,\n      [id]: context,\n    };\n\n    this.contextChange.emit(this.context);\n  }\n\n  private getContext(id: string): TreeItemContext {\n    if (!this.context) {\n      return {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    if (!this.context[id]) {\n      this.context[id] = {\n        isExpanded: false,\n        isSelected: false,\n      };\n    }\n    return this.context[id];\n  }\n\n  private buildTreeList(\n    root: TreeItem<any>,\n    level: number = 0\n  ): TreeItemVisual<any>[] {\n    const itemList: TreeItemVisual<any>[] = [];\n\n    if (root?.hasChildren) {\n      const newLevel = level + 1;\n      root.children.forEach((id: string) => {\n        const item = this.model[id];\n        const context = this.getContext(id);\n        itemList.push({ ...item, level });\n        if (item.hasChildren && context.isExpanded) {\n          itemList.push(...this.buildTreeList(item, newLevel));\n        }\n      });\n    }\n\n    return itemList;\n  }\n\n  componentDidLoad() {\n    this.initList();\n\n    this.observer = new MutationObserver((records) => {\n      let removed = [];\n\n      records.forEach((record) => {\n        removed = [...removed, ...Array.from(record.removedNodes)];\n\n        record.addedNodes.forEach((an) => {\n          const index = removed.indexOf(an);\n          if (index >= 0) {\n            removed.splice(index, 1);\n          }\n        });\n      });\n\n      this.nodeRemoved.emit(removed);\n    });\n\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillRender() {\n    this.hasFirstRender = true;\n\n    if (this.isListInitialized()) {\n      this.refreshList();\n    } else {\n      this.initList();\n    }\n  }\n\n  disconnectedCallback() {\n    this.hyperlist?.destroy();\n    this.observer?.disconnect();\n  }\n\n  @Watch('model')\n  modelChange() {\n    if (this.hasFirstRender && !this.isListInitialized()) {\n      this.initList();\n    }\n  }\n\n  private isListInitialized() {\n    const itemPositions = this.hyperlist?._itemPositions;\n\n    return (\n      itemPositions !== undefined &&\n      itemPositions.length &&\n      !itemPositions?.some(\n        (item: number) => item === undefined || Number.isNaN(item)\n      )\n    );\n  }\n\n  private refreshList() {\n    if (this.hyperlist) {\n      this.hyperlist.refresh(this.hostElement, this.getVirtualizerOptions());\n    }\n  }\n\n  private initList() {\n    if (!this.model) {\n      return;\n    }\n\n    this.hyperlist?.destroy();\n    const config = this.getVirtualizerOptions();\n    this.hyperlist = new Hyperlist(this.hostElement, config);\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}