@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/tree.js

@@ -0,0 +1,582 @@
+import { css as g, LitElement as v, nothing as b, html as a } from "lit";
+import { property as d, state as m, customElement as x } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import { m as y } from "../shared/memoize-DlOFy-92.js";
+const w = g`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .tree {
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+  }
+
+  /* Node structure */
+  .node {
+    position: relative;
+  }
+
+  .node-content {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-spacing-2);
+    padding: var(--bp-spacing-2) var(--bp-spacing-3);
+    padding-left: calc(
+      var(--bp-spacing-3) + var(--node-level, 0) * var(--bp-spacing-5)
+    );
+    border-radius: var(--bp-border-radius-sm);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--bp-transition-fast),
+      color var(--bp-transition-fast);
+  }
+
+  .node-content:hover {
+    background-color: var(--bp-color-surface-subdued);
+  }
+
+  .node-content:focus {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .node-content:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .node-content:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  /* Selected state */
+  .node-content--selected {
+    background-color: oklch(from var(--bp-color-primary) l c h / 0.15);
+    color: var(--bp-color-primary);
+  }
+
+  .node-content--selected:hover {
+    background-color: oklch(from var(--bp-color-primary) l c h / 0.2);
+  }
+
+  /* Active state */
+  .node-content:active {
+    background-color: var(--bp-color-surface-subdued);
+    transform: translateY(1px);
+  }
+
+  .node-content--selected:active {
+    background-color: oklch(from var(--bp-color-primary) l c h / 0.25);
+  }
+
+  /* Toggle icon */
+  .node-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+    flex-shrink: 0;
+    visibility: hidden;
+  }
+
+  .node-toggle--visible {
+    visibility: visible;
+  }
+
+  .node-toggle--visible:hover {
+    background-color: var(--bp-color-surface-subdued);
+    border-radius: var(--bp-border-radius-sm);
+  }
+
+  .toggle-icon {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+    transition: transform var(--bp-transition-fast) ease-out;
+  }
+
+  .toggle-icon--expanded {
+    transform: rotate(90deg);
+  }
+
+  /* Node custom icon */
+  .node-icon {
+    flex-shrink: 0;
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Node label */
+  .node-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Children container */
+  .node-children {
+    position: relative;
+    content-visibility: auto;
+    contain-intrinsic-size: auto 200px;
+  }
+
+  /* Expanded state visual cue */
+  .node--expanded > .node-content {
+    background-color: var(--bp-color-surface);
+  }
+
+  /* Disabled state */
+  .node--disabled .node-content {
+    cursor: not-allowed;
+  }
+
+  .node--disabled .node-label {
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  .node--disabled .node-content:hover {
+    background-color: transparent;
+  }
+
+  /* Show lines variant */
+  .tree--lines .node-children {
+    margin-left: calc(var(--bp-spacing-4) + var(--bp-spacing-4));
+    padding-left: var(--bp-spacing-4);
+    border-left: var(--bp-border-width) solid var(--bp-color-border);
+  }
+
+  /* Sizes */
+  .tree--sm {
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .tree--sm .node-content {
+    padding: var(--bp-spacing-1) var(--bp-spacing-2);
+    padding-left: calc(
+      var(--bp-spacing-2) + var(--node-level, 0) * var(--bp-spacing-4)
+    );
+  }
+
+  .tree--sm .node-toggle {
+    width: var(--bp-spacing-4);
+    height: var(--bp-spacing-4);
+  }
+
+  .tree--sm .toggle-icon {
+    width: var(--bp-spacing-3);
+    height: var(--bp-spacing-3);
+  }
+
+  .tree--lg {
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .tree--lg .node-content {
+    padding: var(--bp-spacing-3) var(--bp-spacing-4);
+    padding-left: calc(
+      var(--bp-spacing-4) + var(--node-level, 0) * var(--bp-spacing-6)
+    );
+  }
+
+  .tree--lg .node-toggle {
+    width: var(--bp-spacing-6);
+    height: var(--bp-spacing-6);
+  }
+
+  .tree--lg .toggle-icon {
+    width: var(--bp-spacing-5);
+    height: var(--bp-spacing-5);
+  }
+
+  /* Link nodes — reset anchor styles so links look like regular nodes */
+  a.node-content {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  a.node-content:visited {
+    color: inherit;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .node-content,
+    .toggle-icon {
+      transition: none;
+    }
+
+    .node-content:active {
+      transform: none;
+    }
+  }
+`;
+var $ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, t, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? k(t, s) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (o = (i ? p(t, s, o) : p(o)) || o);
+  return i && o && $(t, s, o), o;
+};
+let r = class extends v {
+  constructor() {
+    super(), this.selectedIds = [], this.computeExpandedSet = y(
+      (e) => new Set(e)
+    ), this.nodes = [], this.selectedId = null, this.expandedIds = [], this.multiSelect = !1, this.showLines = !1, this.selectable = !0, this.size = "md";
+  }
+  /**
+   * Get the memoized expanded set for fast lookups during rendering.
+   */
+  get expandedSet() {
+    return this.computeExpandedSet(this.expandedIds);
+  }
+  /**
+   * Expand a node by ID.
+   * Adds the node to expandedIds and dispatches bp-expand event.
+   *
+   * @param nodeId - The ID of the node to expand
+   */
+  expand(e) {
+    if (!this.expandedSet.has(e)) {
+      this.expandedIds = [...this.expandedIds, e];
+      const t = this.findNode(e, this.nodes);
+      t && this.dispatchEvent(
+        new CustomEvent("bp-expand", {
+          detail: { node: t, expanded: !0 },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  /**
+   * Collapse a node by ID.
+   * Removes the node from expandedIds and dispatches bp-collapse event.
+   *
+   * @param nodeId - The ID of the node to collapse
+   */
+  collapse(e) {
+    if (this.expandedSet.has(e)) {
+      this.expandedIds = this.expandedIds.filter((s) => s !== e);
+      const t = this.findNode(e, this.nodes);
+      t && this.dispatchEvent(
+        new CustomEvent("bp-collapse", {
+          detail: { node: t, expanded: !1 },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }
+  }
+  /**
+   * Toggle a node's expanded state.
+   * Calls expand() if collapsed, collapse() if expanded.
+   *
+   * @param nodeId - The ID of the node to toggle
+   */
+  toggle(e) {
+    this.expandedSet.has(e) ? this.collapse(e) : this.expand(e);
+  }
+  /**
+   * Expand all nodes in the tree.
+   * Sets expandedIds to include all nodes with children.
+   */
+  expandAll() {
+    const e = this.getAllNodeIds(this.nodes);
+    this.expandedIds = e;
+  }
+  /**
+   * Collapse all nodes in the tree.
+   * Clears the expandedIds array.
+   */
+  collapseAll() {
+    this.expandedIds = [];
+  }
+  /**
+   * Select a node by ID.
+   * Respects multiSelect setting and disabled state.
+   * Dispatches bp-select event with node, selectedIds, and path.
+   *
+   * @param nodeId - The ID of the node to select
+   */
+  selectNode(e) {
+    const t = this.findNode(e, this.nodes);
+    !t || t.disabled || (this.multiSelect ? this.selectedIds.includes(e) ? this.selectedIds = this.selectedIds.filter((s) => s !== e) : this.selectedIds = [...this.selectedIds, e] : this.selectedId = e, this.dispatchEvent(
+      new CustomEvent("bp-select", {
+        detail: {
+          node: t,
+          selectedIds: this.multiSelect ? this.selectedIds : [e],
+          path: this.getNodePath(e, this.nodes)
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  /**
+   * Clear all selections.
+   * Resets both selectedId and selectedIds.
+   */
+  clearSelection() {
+    this.selectedId = null, this.selectedIds = [];
+  }
+  /**
+   * Recursively finds a node by ID in the tree structure.
+   *
+   * @param nodeId - The ID to search for
+   * @param nodes - The array of nodes to search within
+   * @returns The found node or null if not found
+   */
+  findNode(e, t) {
+    for (const s of t) {
+      if (s.id === e) return s;
+      if (s.children) {
+        const i = this.findNode(e, s.children);
+        if (i) return i;
+      }
+    }
+    return null;
+  }
+  /**
+   * Recursively collects all node IDs that have children.
+   * Used for expandAll functionality.
+   *
+   * @param nodes - The array of nodes to collect IDs from
+   * @returns Array of node IDs that have children
+   */
+  getAllNodeIds(e) {
+    const t = [];
+    for (const s of e)
+      s.children && s.children.length > 0 && (t.push(s.id), t.push(...this.getAllNodeIds(s.children)));
+    return t;
+  }
+  /**
+   * Gets the path from root to a specific node.
+   * Returns an array of node IDs representing the path.
+   *
+   * @param nodeId - The target node ID
+   * @param nodes - The array of nodes to search within
+   * @param path - Accumulator for the current path (used in recursion)
+   * @returns Array of node IDs from root to target
+   */
+  getNodePath(e, t, s = []) {
+    for (const i of t) {
+      if (i.id === e)
+        return [...s, i.id];
+      if (i.children) {
+        const o = this.getNodePath(e, i.children, [
+          ...s,
+          i.id
+        ]);
+        if (o.length > s.length + 1)
+          return o;
+      }
+    }
+    return s;
+  }
+  /**
+   * Handles click events on tree nodes.
+   * For nodes with href, dispatches bp-navigate and follows the link unless prevented.
+   * For other nodes, selects the node if selectable and not disabled.
+   *
+   * @param event - The click event
+   * @param node - The node that was clicked
+   */
+  handleNodeClick(e, t) {
+    if (e.stopPropagation(), t.href && !t.disabled) {
+      const s = new CustomEvent("bp-navigate", {
+        detail: {
+          node: t,
+          href: t.href,
+          path: this.getNodePath(t.id, this.nodes)
+        },
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      });
+      if (this.dispatchEvent(s))
+        return;
+      e.preventDefault();
+      return;
+    }
+    this.selectable && !t.disabled && this.selectNode(t.id);
+  }
+  /**
+   * Handles click events on the expand/collapse toggle icon.
+   * Prevents event propagation to avoid triggering node selection.
+   *
+   * @param event - The click event
+   * @param node - The node whose toggle was clicked
+   */
+  handleToggleClick(e, t) {
+    e.stopPropagation(), e.preventDefault(), this.toggle(t.id);
+  }
+  /**
+   * Handles keyboard navigation on tree nodes.
+   * Enter/Space: select node
+   * ArrowRight: expand node (if has children and collapsed)
+   * ArrowLeft: collapse node (if has children and expanded)
+   *
+   * @param event - The keyboard event
+   * @param node - The node that received the keyboard event
+   */
+  handleKeyDown(e, t) {
+    const s = t.children && t.children.length > 0, i = this.expandedSet.has(t.id);
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault(), t.href && !t.disabled ? this.handleNodeClick(e, t) : this.selectable && !t.disabled && this.selectNode(t.id);
+        break;
+      case "ArrowRight":
+        e.preventDefault(), s && !i && this.expand(t.id);
+        break;
+      case "ArrowLeft":
+        e.preventDefault(), s && i && this.collapse(t.id);
+        break;
+    }
+  }
+  /**
+   * Checks if a node is currently selected.
+   * Handles both single and multi-select modes.
+   *
+   * @param nodeId - The node ID to check
+   * @returns True if the node is selected
+   */
+  isSelected(e) {
+    return this.multiSelect ? this.selectedIds.includes(e) : this.selectedId === e;
+  }
+  /**
+   * Recursively renders a tree node and its children.
+   * Handles expand/collapse state, selection, and disabled state.
+   *
+   * @param node - The node to render
+   * @param level - The nesting level (0 for root)
+   * @returns Lit template result
+   */
+  renderNode(e, t = 0) {
+    const s = e.children && e.children.length > 0, i = this.expandedSet.has(e.id), o = this.isSelected(e.id), c = `node-content ${o ? "node-content--selected" : ""} ${e.href ? "node-content--link" : ""}`, p = a`
+      <span
+        class="node-toggle ${s ? "node-toggle--visible" : ""}"
+        part="node-icon"
+        @click=${(n) => this.handleToggleClick(n, e)}
+      >
+        ${s ? a`<bp-icon
+              class="toggle-icon ${i ? "toggle-icon--expanded" : ""}"
+              name="chevron-right"
+              size="sm"
+            ></bp-icon>` : b}
+      </span>
+      ${e.icon ? a`<bp-icon
+            class="node-icon"
+            part="node-custom-icon"
+            name=${e.icon}
+            size="sm"
+          ></bp-icon>` : b}
+      <span class="node-label" part="node-label">${e.label}</span>
+    `, u = e.href ? a`
+          <a
+            class=${c}
+            part="node-content"
+            href=${e.href}
+            tabindex=${e.disabled ? -1 : 0}
+            @click=${(n) => this.handleNodeClick(n, e)}
+            @keydown=${(n) => this.handleKeyDown(n, e)}
+          >
+            ${p}
+          </a>
+        ` : a`
+          <div
+            class=${c}
+            part="node-content"
+            tabindex=${e.disabled ? -1 : 0}
+            @click=${(n) => this.handleNodeClick(n, e)}
+            @keydown=${(n) => this.handleKeyDown(n, e)}
+          >
+            ${p}
+          </div>
+        `;
+    return a`
+      <div
+        class="node ${e.disabled ? "node--disabled" : ""} ${s && i ? "node--expanded" : ""}"
+        part="node"
+        role="treeitem"
+        aria-expanded=${h(
+      s ? i ? "true" : "false" : void 0
+    )}
+        aria-selected=${h(
+      this.selectable ? o ? "true" : "false" : void 0
+    )}
+        aria-disabled=${h(e.disabled ? "true" : void 0)}
+        style="--node-level: ${t}"
+      >
+        ${u}
+        ${s && i ? a`
+              <div class="node-children" part="node-children" role="group">
+                ${f(
+      e.children,
+      (n) => n.id,
+      (n) => this.renderNode(n, t + 1)
+    )}
+              </div>
+            ` : b}
+      </div>
+    `;
+  }
+  render() {
+    const e = this.nodes && this.nodes.length > 0;
+    return a`
+      <div
+        class="tree tree--${this.size} ${this.showLines ? "tree--lines" : ""}"
+        part="tree"
+        role="tree"
+        aria-multiselectable=${h(this.multiSelect ? "true" : void 0)}
+      >
+        ${e ? f(
+      this.nodes,
+      (t) => t.id,
+      (t) => this.renderNode(t, 0)
+    ) : a`<slot></slot>`}
+      </div>
+    `;
+  }
+};
+r.styles = [w];
+l([
+  d({ type: Array })
+], r.prototype, "nodes", 2);
+l([
+  d({ type: String, reflect: !0 })
+], r.prototype, "selectedId", 2);
+l([
+  d({ type: Array })
+], r.prototype, "expandedIds", 2);
+l([
+  d({ type: Boolean, reflect: !0, attribute: "multi-select" })
+], r.prototype, "multiSelect", 2);
+l([
+  d({ type: Boolean, reflect: !0, attribute: "show-lines" })
+], r.prototype, "showLines", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "selectable", 2);
+l([
+  d({
+    type: String,
+    reflect: !0,
+    converter: {
+      fromAttribute: (e) => e && ["sm", "md", "lg"].includes(e) ? e : "md"
+    }
+  })
+], r.prototype, "size", 2);
+l([
+  m()
+], r.prototype, "selectedIds", 2);
+r = l([
+  x("bp-tree")
+], r);
+export {
+  r as BpTree
+};
+//# sourceMappingURL=tree.js.map

package/dist/components/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sources":["../../source/components/tree/tree.style.ts","../../source/components/tree/tree.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const treeStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n  }\r\n\r\n  .tree {\r\n    font-family: var(--bp-font-family);\r\n    font-size: var(--bp-font-size-base);\r\n    color: var(--bp-color-text);\r\n  }\r\n\r\n  /* Node structure */\r\n  .node {\r\n    position: relative;\r\n  }\r\n\r\n  .node-content {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--bp-spacing-2);\r\n    padding: var(--bp-spacing-2) var(--bp-spacing-3);\r\n    padding-left: calc(\r\n      var(--bp-spacing-3) + var(--node-level, 0) * var(--bp-spacing-5)\r\n    );\r\n    border-radius: var(--bp-border-radius-sm);\r\n    cursor: pointer;\r\n    user-select: none;\r\n    transition:\r\n      background-color var(--bp-transition-fast),\r\n      color var(--bp-transition-fast);\r\n  }\r\n\r\n  .node-content:hover {\r\n    background-color: var(--bp-color-surface-subdued);\r\n  }\r\n\r\n  .node-content:focus {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .node-content:focus:not(:focus-visible) {\r\n    outline: none;\r\n  }\r\n\r\n  .node-content:focus-visible {\r\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  /* Selected state */\r\n  .node-content--selected {\r\n    background-color: oklch(from var(--bp-color-primary) l c h / 0.15);\r\n    color: var(--bp-color-primary);\r\n  }\r\n\r\n  .node-content--selected:hover {\r\n    background-color: oklch(from var(--bp-color-primary) l c h / 0.2);\r\n  }\r\n\r\n  /* Active state */\r\n  .node-content:active {\r\n    background-color: var(--bp-color-surface-subdued);\r\n    transform: translateY(1px);\r\n  }\r\n\r\n  .node-content--selected:active {\r\n    background-color: oklch(from var(--bp-color-primary) l c h / 0.25);\r\n  }\r\n\r\n  /* Toggle icon */\r\n  .node-toggle {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--bp-spacing-5);\r\n    height: var(--bp-spacing-5);\r\n    flex-shrink: 0;\r\n    visibility: hidden;\r\n  }\r\n\r\n  .node-toggle--visible {\r\n    visibility: visible;\r\n  }\r\n\r\n  .node-toggle--visible:hover {\r\n    background-color: var(--bp-color-surface-subdued);\r\n    border-radius: var(--bp-border-radius-sm);\r\n  }\r\n\r\n  .toggle-icon {\r\n    width: var(--bp-spacing-4);\r\n    height: var(--bp-spacing-4);\r\n    transition: transform var(--bp-transition-fast) ease-out;\r\n  }\r\n\r\n  .toggle-icon--expanded {\r\n    transform: rotate(90deg);\r\n  }\r\n\r\n  /* Node custom icon */\r\n  .node-icon {\r\n    flex-shrink: 0;\r\n    color: var(--bp-color-text-muted);\r\n  }\r\n\r\n  /* Node label */\r\n  .node-label {\r\n    flex: 1;\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  /* Children container */\r\n  .node-children {\r\n    position: relative;\r\n    content-visibility: auto;\r\n    contain-intrinsic-size: auto 200px;\r\n  }\r\n\r\n  /* Expanded state visual cue */\r\n  .node--expanded > .node-content {\r\n    background-color: var(--bp-color-surface);\r\n  }\r\n\r\n  /* Disabled state */\r\n  .node--disabled .node-content {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  .node--disabled .node-label {\r\n    opacity: var(--bp-opacity-disabled);\r\n  }\r\n\r\n  .node--disabled .node-content:hover {\r\n    background-color: transparent;\r\n  }\r\n\r\n  /* Show lines variant */\r\n  .tree--lines .node-children {\r\n    margin-left: calc(var(--bp-spacing-4) + var(--bp-spacing-4));\r\n    padding-left: var(--bp-spacing-4);\r\n    border-left: var(--bp-border-width) solid var(--bp-color-border);\r\n  }\r\n\r\n  /* Sizes */\r\n  .tree--sm {\r\n    font-size: var(--bp-font-size-sm);\r\n  }\r\n\r\n  .tree--sm .node-content {\r\n    padding: var(--bp-spacing-1) var(--bp-spacing-2);\r\n    padding-left: calc(\r\n      var(--bp-spacing-2) + var(--node-level, 0) * var(--bp-spacing-4)\r\n    );\r\n  }\r\n\r\n  .tree--sm .node-toggle {\r\n    width: var(--bp-spacing-4);\r\n    height: var(--bp-spacing-4);\r\n  }\r\n\r\n  .tree--sm .toggle-icon {\r\n    width: var(--bp-spacing-3);\r\n    height: var(--bp-spacing-3);\r\n  }\r\n\r\n  .tree--lg {\r\n    font-size: var(--bp-font-size-lg);\r\n  }\r\n\r\n  .tree--lg .node-content {\r\n    padding: var(--bp-spacing-3) var(--bp-spacing-4);\r\n    padding-left: calc(\r\n      var(--bp-spacing-4) + var(--node-level, 0) * var(--bp-spacing-6)\r\n    );\r\n  }\r\n\r\n  .tree--lg .node-toggle {\r\n    width: var(--bp-spacing-6);\r\n    height: var(--bp-spacing-6);\r\n  }\r\n\r\n  .tree--lg .toggle-icon {\r\n    width: var(--bp-spacing-5);\r\n    height: var(--bp-spacing-5);\r\n  }\r\n\r\n  /* Link nodes — reset anchor styles so links look like regular nodes */\r\n  a.node-content {\r\n    text-decoration: none;\r\n    color: inherit;\r\n  }\r\n\r\n  a.node-content:visited {\r\n    color: inherit;\r\n  }\r\n\r\n  /* Reduced motion */\r\n  @media (prefers-reduced-motion: reduce) {\r\n    .node-content,\r\n    .toggle-icon {\r\n      transition: none;\r\n    }\r\n\r\n    .node-content:active {\r\n      transform: none;\r\n    }\r\n  }\r\n`;\r\n","import { LitElement, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { repeat } from 'lit/directives/repeat.js';\r\nimport { treeStyles } from './tree.style.js';\r\nimport { memoizeOne } from '../../utilities/memoize.js';\r\nimport '../icon/icon.js';\r\n\r\n/**\r\n * Tree node data structure\r\n */\r\nexport interface TreeNode {\r\n  /** Unique identifier for the node */\r\n  id: string;\r\n  /** Display label */\r\n  label: string;\r\n  /** Optional icon name */\r\n  icon?: string;\r\n  /** URL to navigate to when the node is clicked */\r\n  href?: string;\r\n  /** Child nodes */\r\n  children?: TreeNode[];\r\n  /** Whether the node is disabled */\r\n  disabled?: boolean;\r\n  /** Custom data attached to the node */\r\n  data?: unknown;\r\n}\r\n\r\n/**\r\n * A hierarchical tree component for displaying nested data structures.\r\n *\r\n * @fires bp-select - Fired when a node is selected. Detail: { node: TreeNode, path: string[] }\r\n * @fires bp-expand - Fired when a node is expanded. Detail: { node: TreeNode, expanded: boolean }\r\n * @fires bp-collapse - Fired when a node is collapsed. Detail: { node: TreeNode, expanded: boolean }\r\n * @fires bp-navigate - Fired when a node with href is clicked. Detail: { node: TreeNode, href: string, path: string[] }. Call preventDefault() to handle navigation yourself.\r\n *\r\n * @slot - Default slot for custom tree items (when not using data prop)\r\n *\r\n * @csspart tree - The tree container\r\n * @csspart node - Individual tree nodes\r\n * @csspart node-content - The clickable content area of a node\r\n * @csspart node-icon - The expand/collapse icon\r\n * @csspart node-label - The node label text\r\n * @csspart node-children - Container for child nodes\r\n */\r\n@customElement('bp-tree')\r\nexport class BpTree extends LitElement {\r\n  /** Array of tree nodes to render */\r\n  @property({ type: Array }) declare nodes: TreeNode[];\r\n\r\n  /** Currently selected node ID */\r\n  @property({ type: String, reflect: true }) declare selectedId: string | null;\r\n\r\n  /** Array of expanded node IDs */\r\n  @property({ type: Array }) declare expandedIds: string[];\r\n\r\n  /** Whether multiple nodes can be selected */\r\n  @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\r\n  declare multiSelect: boolean;\r\n\r\n  /** Whether to show connecting lines between nodes */\r\n  @property({ type: Boolean, reflect: true, attribute: 'show-lines' })\r\n  declare showLines: boolean;\r\n\r\n  /** Whether nodes can be selected */\r\n  @property({ type: Boolean, reflect: true }) declare selectable: boolean;\r\n\r\n  /** Size variant */\r\n  @property({\r\n    type: String,\r\n    reflect: true,\r\n    converter: {\r\n      fromAttribute: (value: string | null) => {\r\n        const valid = ['sm', 'md', 'lg'];\r\n        return value && valid.includes(value) ? value : 'md';\r\n      },\r\n    },\r\n  })\r\n  declare size: 'sm' | 'md' | 'lg';\r\n\r\n  /** Selected node IDs when multiSelect is true */\r\n  @state() private selectedIds: string[] = [];\r\n\r\n  /**\r\n   * Memoized computation of expanded IDs as a Set for O(1) lookups.\r\n   * Only recomputes when expandedIds reference changes.\r\n   */\r\n  private computeExpandedSet = memoizeOne(\r\n    (expandedIds: string[]): Set<string> => new Set(expandedIds)\r\n  );\r\n\r\n  /**\r\n   * Get the memoized expanded set for fast lookups during rendering.\r\n   */\r\n  private get expandedSet(): Set<string> {\r\n    return this.computeExpandedSet(this.expandedIds);\r\n  }\r\n\r\n  static styles = [treeStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.nodes = [];\r\n    this.selectedId = null;\r\n    this.expandedIds = [];\r\n    this.multiSelect = false;\r\n    this.showLines = false;\r\n    this.selectable = true;\r\n    this.size = 'md';\r\n  }\r\n\r\n  /**\r\n   * Expand a node by ID.\r\n   * Adds the node to expandedIds and dispatches bp-expand event.\r\n   *\r\n   * @param nodeId - The ID of the node to expand\r\n   */\r\n  expand(nodeId: string): void {\r\n    if (!this.expandedSet.has(nodeId)) {\r\n      this.expandedIds = [...this.expandedIds, nodeId];\r\n      const node = this.findNode(nodeId, this.nodes);\r\n      if (node) {\r\n        this.dispatchEvent(\r\n          new CustomEvent('bp-expand', {\r\n            detail: { node, expanded: true },\r\n            bubbles: true,\r\n            composed: true,\r\n          })\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Collapse a node by ID.\r\n   * Removes the node from expandedIds and dispatches bp-collapse event.\r\n   *\r\n   * @param nodeId - The ID of the node to collapse\r\n   */\r\n  collapse(nodeId: string): void {\r\n    if (this.expandedSet.has(nodeId)) {\r\n      this.expandedIds = this.expandedIds.filter((id) => id !== nodeId);\r\n      const node = this.findNode(nodeId, this.nodes);\r\n      if (node) {\r\n        this.dispatchEvent(\r\n          new CustomEvent('bp-collapse', {\r\n            detail: { node, expanded: false },\r\n            bubbles: true,\r\n            composed: true,\r\n          })\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Toggle a node's expanded state.\r\n   * Calls expand() if collapsed, collapse() if expanded.\r\n   *\r\n   * @param nodeId - The ID of the node to toggle\r\n   */\r\n  toggle(nodeId: string): void {\r\n    if (this.expandedSet.has(nodeId)) {\r\n      this.collapse(nodeId);\r\n    } else {\r\n      this.expand(nodeId);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Expand all nodes in the tree.\r\n   * Sets expandedIds to include all nodes with children.\r\n   */\r\n  expandAll(): void {\r\n    const allIds = this.getAllNodeIds(this.nodes);\r\n    this.expandedIds = allIds;\r\n  }\r\n\r\n  /**\r\n   * Collapse all nodes in the tree.\r\n   * Clears the expandedIds array.\r\n   */\r\n  collapseAll(): void {\r\n    this.expandedIds = [];\r\n  }\r\n\r\n  /**\r\n   * Select a node by ID.\r\n   * Respects multiSelect setting and disabled state.\r\n   * Dispatches bp-select event with node, selectedIds, and path.\r\n   *\r\n   * @param nodeId - The ID of the node to select\r\n   */\r\n  selectNode(nodeId: string): void {\r\n    const node = this.findNode(nodeId, this.nodes);\r\n    if (!node || node.disabled) return;\r\n\r\n    if (this.multiSelect) {\r\n      if (this.selectedIds.includes(nodeId)) {\r\n        this.selectedIds = this.selectedIds.filter((id) => id !== nodeId);\r\n      } else {\r\n        this.selectedIds = [...this.selectedIds, nodeId];\r\n      }\r\n    } else {\r\n      this.selectedId = nodeId;\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-select', {\r\n        detail: {\r\n          node,\r\n          selectedIds: this.multiSelect ? this.selectedIds : [nodeId],\r\n          path: this.getNodePath(nodeId, this.nodes),\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Clear all selections.\r\n   * Resets both selectedId and selectedIds.\r\n   */\r\n  clearSelection(): void {\r\n    this.selectedId = null;\r\n    this.selectedIds = [];\r\n  }\r\n\r\n  /**\r\n   * Recursively finds a node by ID in the tree structure.\r\n   *\r\n   * @param nodeId - The ID to search for\r\n   * @param nodes - The array of nodes to search within\r\n   * @returns The found node or null if not found\r\n   */\r\n  private findNode(nodeId: string, nodes: TreeNode[]): TreeNode | null {\r\n    for (const node of nodes) {\r\n      if (node.id === nodeId) return node;\r\n      if (node.children) {\r\n        const found = this.findNode(nodeId, node.children);\r\n        if (found) return found;\r\n      }\r\n    }\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Recursively collects all node IDs that have children.\r\n   * Used for expandAll functionality.\r\n   *\r\n   * @param nodes - The array of nodes to collect IDs from\r\n   * @returns Array of node IDs that have children\r\n   */\r\n  private getAllNodeIds(nodes: TreeNode[]): string[] {\r\n    const ids: string[] = [];\r\n    for (const node of nodes) {\r\n      if (node.children && node.children.length > 0) {\r\n        ids.push(node.id);\r\n        ids.push(...this.getAllNodeIds(node.children));\r\n      }\r\n    }\r\n    return ids;\r\n  }\r\n\r\n  /**\r\n   * Gets the path from root to a specific node.\r\n   * Returns an array of node IDs representing the path.\r\n   *\r\n   * @param nodeId - The target node ID\r\n   * @param nodes - The array of nodes to search within\r\n   * @param path - Accumulator for the current path (used in recursion)\r\n   * @returns Array of node IDs from root to target\r\n   */\r\n  private getNodePath(\r\n    nodeId: string,\r\n    nodes: TreeNode[],\r\n    path: string[] = []\r\n  ): string[] {\r\n    for (const node of nodes) {\r\n      if (node.id === nodeId) {\r\n        return [...path, node.id];\r\n      }\r\n      if (node.children) {\r\n        const foundPath = this.getNodePath(nodeId, node.children, [\r\n          ...path,\r\n          node.id,\r\n        ]);\r\n        if (foundPath.length > path.length + 1) {\r\n          return foundPath;\r\n        }\r\n      }\r\n    }\r\n    return path;\r\n  }\r\n\r\n  /**\r\n   * Handles click events on tree nodes.\r\n   * For nodes with href, dispatches bp-navigate and follows the link unless prevented.\r\n   * For other nodes, selects the node if selectable and not disabled.\r\n   *\r\n   * @param event - The click event\r\n   * @param node - The node that was clicked\r\n   */\r\n  private handleNodeClick(event: Event, node: TreeNode): void {\r\n    event.stopPropagation();\r\n\r\n    if (node.href && !node.disabled) {\r\n      const navigateEvent = new CustomEvent('bp-navigate', {\r\n        detail: {\r\n          node,\r\n          href: node.href,\r\n          path: this.getNodePath(node.id, this.nodes),\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n        cancelable: true,\r\n      });\r\n      const allowed = this.dispatchEvent(navigateEvent);\r\n      if (allowed) {\r\n        // Default navigation — let the <a> handle it naturally\r\n        return;\r\n      }\r\n      // Consumer called preventDefault(); suppress default link behavior\r\n      event.preventDefault();\r\n      return;\r\n    }\r\n\r\n    if (this.selectable && !node.disabled) {\r\n      this.selectNode(node.id);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handles click events on the expand/collapse toggle icon.\r\n   * Prevents event propagation to avoid triggering node selection.\r\n   *\r\n   * @param event - The click event\r\n   * @param node - The node whose toggle was clicked\r\n   */\r\n  private handleToggleClick(event: Event, node: TreeNode): void {\r\n    event.stopPropagation();\r\n    event.preventDefault();\r\n    this.toggle(node.id);\r\n  }\r\n\r\n  /**\r\n   * Handles keyboard navigation on tree nodes.\r\n   * Enter/Space: select node\r\n   * ArrowRight: expand node (if has children and collapsed)\r\n   * ArrowLeft: collapse node (if has children and expanded)\r\n   *\r\n   * @param event - The keyboard event\r\n   * @param node - The node that received the keyboard event\r\n   */\r\n  private handleKeyDown(event: KeyboardEvent, node: TreeNode): void {\r\n    const hasChildren = node.children && node.children.length > 0;\r\n    const isExpanded = this.expandedSet.has(node.id);\r\n\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        if (node.href && !node.disabled) {\r\n          this.handleNodeClick(event, node);\r\n        } else if (this.selectable && !node.disabled) {\r\n          this.selectNode(node.id);\r\n        }\r\n        break;\r\n      case 'ArrowRight':\r\n        event.preventDefault();\r\n        if (hasChildren && !isExpanded) {\r\n          this.expand(node.id);\r\n        }\r\n        break;\r\n      case 'ArrowLeft':\r\n        event.preventDefault();\r\n        if (hasChildren && isExpanded) {\r\n          this.collapse(node.id);\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Checks if a node is currently selected.\r\n   * Handles both single and multi-select modes.\r\n   *\r\n   * @param nodeId - The node ID to check\r\n   * @returns True if the node is selected\r\n   */\r\n  private isSelected(nodeId: string): boolean {\r\n    if (this.multiSelect) {\r\n      return this.selectedIds.includes(nodeId);\r\n    }\r\n    return this.selectedId === nodeId;\r\n  }\r\n\r\n  /**\r\n   * Recursively renders a tree node and its children.\r\n   * Handles expand/collapse state, selection, and disabled state.\r\n   *\r\n   * @param node - The node to render\r\n   * @param level - The nesting level (0 for root)\r\n   * @returns Lit template result\r\n   */\r\n  private renderNode(node: TreeNode, level: number = 0): unknown {\r\n    const hasChildren = node.children && node.children.length > 0;\r\n    const isExpanded = this.expandedSet.has(node.id);\r\n    const isSelected = this.isSelected(node.id);\r\n\r\n    const contentClasses = `node-content ${isSelected ? 'node-content--selected' : ''} ${node.href ? 'node-content--link' : ''}`;\r\n\r\n    const contentInner = html`\r\n      <span\r\n        class=\"node-toggle ${hasChildren ? 'node-toggle--visible' : ''}\"\r\n        part=\"node-icon\"\r\n        @click=${(e: Event) => this.handleToggleClick(e, node)}\r\n      >\r\n        ${hasChildren\r\n          ? html`<bp-icon\r\n              class=\"toggle-icon ${isExpanded ? 'toggle-icon--expanded' : ''}\"\r\n              name=\"chevron-right\"\r\n              size=\"sm\"\r\n            ></bp-icon>`\r\n          : nothing}\r\n      </span>\r\n      ${node.icon\r\n        ? html`<bp-icon\r\n            class=\"node-icon\"\r\n            part=\"node-custom-icon\"\r\n            name=${node.icon}\r\n            size=\"sm\"\r\n          ></bp-icon>`\r\n        : nothing}\r\n      <span class=\"node-label\" part=\"node-label\">${node.label}</span>\r\n    `;\r\n\r\n    const nodeContent = node.href\r\n      ? html`\r\n          <a\r\n            class=${contentClasses}\r\n            part=\"node-content\"\r\n            href=${node.href}\r\n            tabindex=${node.disabled ? -1 : 0}\r\n            @click=${(e: Event) => this.handleNodeClick(e, node)}\r\n            @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\r\n          >\r\n            ${contentInner}\r\n          </a>\r\n        `\r\n      : html`\r\n          <div\r\n            class=${contentClasses}\r\n            part=\"node-content\"\r\n            tabindex=${node.disabled ? -1 : 0}\r\n            @click=${(e: Event) => this.handleNodeClick(e, node)}\r\n            @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, node)}\r\n          >\r\n            ${contentInner}\r\n          </div>\r\n        `;\r\n\r\n    return html`\r\n      <div\r\n        class=\"node ${node.disabled ? 'node--disabled' : ''} ${hasChildren &&\r\n        isExpanded\r\n          ? 'node--expanded'\r\n          : ''}\"\r\n        part=\"node\"\r\n        role=\"treeitem\"\r\n        aria-expanded=${ifDefined(\r\n          hasChildren ? (isExpanded ? 'true' : 'false') : undefined\r\n        )}\r\n        aria-selected=${ifDefined(\r\n          this.selectable ? (isSelected ? 'true' : 'false') : undefined\r\n        )}\r\n        aria-disabled=${ifDefined(node.disabled ? 'true' : undefined)}\r\n        style=\"--node-level: ${level}\"\r\n      >\r\n        ${nodeContent}\r\n        ${hasChildren && isExpanded\r\n          ? html`\r\n              <div class=\"node-children\" part=\"node-children\" role=\"group\">\r\n                ${repeat(\r\n                  node.children!,\r\n                  (child) => child.id,\r\n                  (child) => this.renderNode(child, level + 1)\r\n                )}\r\n              </div>\r\n            `\r\n          : nothing}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  render() {\r\n    const hasNodes = this.nodes && this.nodes.length > 0;\r\n\r\n    return html`\r\n      <div\r\n        class=\"tree tree--${this.size} ${this.showLines ? 'tree--lines' : ''}\"\r\n        part=\"tree\"\r\n        role=\"tree\"\r\n        aria-multiselectable=${ifDefined(this.multiSelect ? 'true' : undefined)}\r\n      >\r\n        ${hasNodes\r\n          ? repeat(\r\n              this.nodes,\r\n              (node) => node.id,\r\n              (node) => this.renderNode(node, 0)\r\n            )\r\n          : html`<slot></slot>`}\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-tree': BpTree;\r\n  }\r\n}\r\n"],"names":["treeStyles","css","BpTree","LitElement","memoizeOne","expandedIds","nodeId","node","id","allIds","nodes","found","ids","path","foundPath","event","navigateEvent","hasChildren","isExpanded","level","isSelected","contentClasses","contentInner","html","e","nothing","nodeContent","ifDefined","repeat","child","hasNodes","__decorateClass","property","value","state","customElement"],"mappings":"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"}