@liwe3/webcomponents 1.0.2 → 1.1.0

package/dist/TreeView.js

@@ -0,0 +1,478 @@
+class h extends HTMLElement {
+  constructor() {
+    super(), this.treeData = [], this.selectedIds = /* @__PURE__ */ new Set(), this.expandedIds = /* @__PURE__ */ new Set(), this.indentWidth = 20, this.showBorder = !0, this.attachShadow({ mode: "open" }), this.render(), this.bindEvents();
+  }
+  static get observedAttributes() {
+    return ["data", "indent-width", "selected-ids", "show-border"];
+  }
+  attributeChangedCallback(e, t, o) {
+    t !== o && (e === "indent-width" && (this.indentWidth = parseInt(o || "20", 10)), e === "show-border" && (this.showBorder = o !== "false"), this.render());
+  }
+  get data() {
+    const e = this.getAttribute("data");
+    if (e)
+      try {
+        return JSON.parse(e);
+      } catch (t) {
+        return console.error("Invalid data format:", t), [];
+      }
+    return this.treeData;
+  }
+  set data(e) {
+    this.treeData = e, this.initializeExpandedState(e), this.setAttribute("data", JSON.stringify(e));
+  }
+  get selectedNodeIds() {
+    return Array.from(this.selectedIds);
+  }
+  set selectedNodeIds(e) {
+    this.selectedIds = new Set(e), this.render();
+  }
+  get showBorderEnabled() {
+    return this.showBorder;
+  }
+  set showBorderEnabled(e) {
+    this.showBorder = e, this.setAttribute("show-border", e.toString()), this.render();
+  }
+  /**
+   * Initialize expanded state from the data
+   */
+  initializeExpandedState(e) {
+    const t = (o) => {
+      o.expanded && this.expandedIds.add(o.id), o.children && o.children.forEach(t);
+    };
+    e.forEach(t);
+  }
+  /**
+   * Toggle node expansion
+   */
+  toggleExpansion(e) {
+    const t = this.shadowRoot.querySelector(`.tree-node[data-node-id="${e}"]`);
+    if (!t) return;
+    const o = Array.from(t.children).find(
+      (r) => r.classList.contains("node-children")
+    );
+    if (!!o) {
+      o.remove(), this.expandedIds.delete(e);
+      const r = t.querySelector(".expand-icon");
+      r && r.classList.remove("expanded"), this.dispatchEvent(new CustomEvent("toggle", {
+        detail: { nodeId: e, expanded: !1 }
+      }));
+    } else {
+      const r = this.findNode(e);
+      if (r && r.children) {
+        const d = parseInt(t.dataset.depth || "0", 10), i = `
+          <div class="node-children">
+            ${r.children.map((c) => this.renderNode(c, d + 1)).join("")}
+          </div>
+        `;
+        t.insertAdjacentHTML("beforeend", i), this.expandedIds.add(e);
+        const s = t.querySelector(".expand-icon");
+        s && s.classList.add("expanded"), this.dispatchEvent(new CustomEvent("toggle", {
+          detail: { nodeId: e, expanded: !0 }
+        }));
+      }
+    }
+  }
+  /**
+   * Toggle node selection
+   */
+  toggleSelection(e) {
+    const t = this.selectedIds.has(e);
+    t ? this.selectedIds.delete(e) : this.selectedIds.add(e);
+    const o = this.shadowRoot.querySelector(`.node-checkbox[data-node-id="${e}"]`);
+    o && (o.checked = !t), this.dispatchEvent(new CustomEvent("selectionchange", {
+      detail: { selectedIds: this.selectedNodeIds }
+    }));
+  }
+  /**
+   * Select all nodes recursively
+   */
+  selectAll() {
+    const e = (t) => {
+      this.selectedIds.add(t.id), t.children && t.children.forEach(e);
+    };
+    this.data.forEach(e), this.render(), this.dispatchEvent(new CustomEvent("selectionchange", {
+      detail: { selectedIds: this.selectedNodeIds }
+    }));
+  }
+  /**
+   * Deselect all nodes
+   */
+  deselectAll() {
+    this.selectedIds.clear(), this.render(), this.dispatchEvent(new CustomEvent("selectionchange", {
+      detail: { selectedIds: this.selectedNodeIds }
+    }));
+  }
+  /**
+   * Expand all nodes
+   */
+  expandAll() {
+    const e = (t) => {
+      t.children && t.children.length > 0 && (this.expandedIds.add(t.id), t.children.forEach(e));
+    };
+    this.data.forEach(e), this.render();
+  }
+  /**
+   * Collapse all nodes
+   */
+  collapseAll() {
+    this.expandedIds.clear(), this.render();
+  }
+  /**
+   * Get node by ID
+   */
+  findNode(e, t = this.data) {
+    for (const o of t) {
+      if (o.id === e)
+        return o;
+      if (o.children) {
+        const n = this.findNode(e, o.children);
+        if (n) return n;
+      }
+    }
+    return null;
+  }
+  /**
+   * Get the default folder icon
+   */
+  getDefaultIcon(e, t) {
+    return e.children && e.children.length > 0 ? t ? "📂" : "📁" : "📄";
+  }
+  /**
+   * Render a single tree node
+   */
+  renderNode(e, t = 0) {
+    const o = this.expandedIds.has(e.id), n = this.selectedIds.has(e.id), r = e.children && e.children.length > 0, d = t * this.indentWidth;
+    let i = "";
+    e.customIcon ? i = `<span class="node-icon custom-icon">${e.customIcon}</span>` : e.icon !== void 0 && e.icon !== "" ? i = `<span class="node-icon">${e.icon}</span>` : e.icon !== "" && (i = `<span class="node-icon">${this.getDefaultIcon(e, o)}</span>`);
+    let s = "";
+    return r && o && (s = `<div class="node-children">${e.children.map((l) => this.renderNode(l, t + 1)).join("")}</div>`), `
+      <div class="tree-node" data-node-id="${e.id}" data-depth="${t}">
+        <div class="node-content" style="padding-left: ${d}px">
+          <div class="node-controls">
+            ${r ? `<button class="expand-toggle" data-node-id="${e.id}" aria-label="${o ? "Collapse" : "Expand"}">
+                   <svg class="expand-icon ${o ? "expanded" : ""}" viewBox="0 0 24 24" width="16" height="16">
+                     <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
+                   </svg>
+                 </button>` : '<span class="expand-spacer"></span>'}
+            <label class="checkbox-wrapper">
+              <input
+                type="checkbox"
+                class="node-checkbox"
+                data-node-id="${e.id}"
+                ${n ? "checked" : ""}
+              >
+              <span class="checkbox-custom"></span>
+            </label>
+          </div>
+          ${i}
+          <span class="node-label" data-node-id="${e.id}">${e.label}</span>
+        </div>
+        ${s}
+      </div>
+    `;
+  }
+  /**
+   * Bind event listeners
+   */
+  bindEvents() {
+    this.shadowRoot.addEventListener("click", (e) => {
+      const t = e.target;
+      if (t.closest(".expand-toggle")) {
+        const n = t.closest(".expand-toggle").dataset.nodeId;
+        n && this.toggleExpansion(n);
+        return;
+      }
+    }), this.shadowRoot.addEventListener("change", (e) => {
+      const t = e.target;
+      if (t.classList.contains("node-checkbox")) {
+        const o = t.dataset.nodeId;
+        if (o) {
+          this.toggleSelection(o);
+          const n = this.findNode(o);
+          if (n && n.children && n.children.length > 0) {
+            const r = !!t.checked, d = (s) => {
+              s.children && s.children.forEach(d), s.id !== o && (r ? this.selectedIds.add(s.id) : this.selectedIds.delete(s.id));
+            };
+            d(n);
+            const i = this.shadowRoot.querySelector(`.tree-node[data-node-id="${o}"]`);
+            i && i.querySelectorAll(".node-checkbox").forEach((s) => {
+              s.checked = r;
+            }), this.dispatchEvent(new CustomEvent("selectionchange", {
+              detail: { selectedIds: this.selectedNodeIds }
+            }));
+          }
+        }
+      }
+    }), this.shadowRoot.addEventListener("dblclick", (e) => {
+      const t = e.target;
+      if (t.closest(".checkbox-wrapper") || t.classList.contains("node-checkbox")) {
+        e.stopPropagation(), e.preventDefault();
+        return;
+      }
+      if (t.closest(".node-label") || t.closest(".node-content")) {
+        const o = t.closest(".node-content");
+        if (!o) return;
+        const n = o.closest(".tree-node");
+        if (!n) return;
+        const r = n.dataset.nodeId;
+        if (!r) return;
+        const d = this.findNode(r);
+        if (!d) return;
+        d.children && d.children.length > 0 ? this.toggleExpansion(r) : this.dispatchEvent(new CustomEvent("itemselected", {
+          detail: { node: d, nodeId: r }
+        }));
+      }
+    });
+  }
+  /**
+   * Render the component
+   */
+  render() {
+    const e = this.showBorder ? "tree-container bordered" : "tree-container borderless";
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--tree-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+          font-size: var(--tree-font-size, 14px);
+          color: var(--tree-text-color, #333);
+          background: var(--tree-background, transparent);
+          user-select: none;
+        }
+
+        .tree-container {
+          overflow: auto;
+          padding: var(--tree-padding, 8px);
+          border-radius: var(--tree-border-radius, 10px);
+          background: var(--tree-container-background, transparent);
+          border: none;
+        }
+
+        .tree-container.bordered {
+          border: var(--tree-border, 1px solid rgba(15, 23, 42, 0.12));
+          box-shadow: var(--tree-border-shadow, none);
+        }
+
+        .tree-container.borderless {
+          border: none;
+        }
+
+        .tree-node {
+          position: relative;
+        }
+
+        .node-content {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 4px 8px;
+          border-radius: var(--tree-node-border-radius, 6px);
+          transition: background-color 0.15s ease;
+          cursor: pointer;
+        }
+
+        .node-content:hover {
+          background-color: var(--tree-hover-background, rgba(0, 123, 255, 0.08));
+        }
+
+        .node-controls {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        }
+
+        .expand-toggle {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 20px;
+          height: 20px;
+          padding: 0;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          border-radius: 4px;
+          transition: background-color 0.15s ease;
+        }
+
+        .expand-toggle:hover {
+          background-color: var(--tree-expand-hover-background, rgba(0, 0, 0, 0.1));
+        }
+
+        .expand-toggle:focus {
+          outline: 2px solid var(--tree-focus-color, #007bff);
+          outline-offset: 2px;
+        }
+
+        .expand-icon {
+          fill: var(--tree-icon-color, #666);
+          transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .expand-icon.expanded {
+          transform: rotate(90deg);
+        }
+
+        .expand-spacer {
+          width: 20px;
+          height: 20px;
+          display: inline-block;
+        }
+
+        .checkbox-wrapper {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          margin: 0;
+        }
+
+        .node-checkbox {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        .checkbox-custom {
+          position: relative;
+          width: 18px;
+          height: 18px;
+          border: 2px solid var(--tree-checkbox-border, #ccc);
+          border-radius: var(--tree-checkbox-border-radius, 4px);
+          background: var(--tree-checkbox-background, white);
+          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .checkbox-custom::after {
+          content: '';
+          position: absolute;
+          display: none;
+          left: 5px;
+          top: 2px;
+          width: 4px;
+          height: 8px;
+          border: solid white;
+          border-width: 0 2px 2px 0;
+          transform: rotate(45deg);
+        }
+
+        .node-checkbox:checked + .checkbox-custom {
+          background: var(--tree-checkbox-checked-background, #007bff);
+          border-color: var(--tree-checkbox-checked-border, #007bff);
+        }
+
+        .node-checkbox:checked + .checkbox-custom::after {
+          display: block;
+        }
+
+        .checkbox-wrapper:hover .checkbox-custom {
+          border-color: var(--tree-checkbox-hover-border, #999);
+          box-shadow: 0 0 0 3px var(--tree-checkbox-hover-shadow, rgba(0, 123, 255, 0.1));
+        }
+
+        .node-checkbox:focus + .checkbox-custom {
+          outline: 2px solid var(--tree-focus-color, #007bff);
+          outline-offset: 2px;
+        }
+
+        .node-icon {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 18px;
+          min-width: 20px;
+        }
+
+        .node-icon.custom-icon {
+          font-size: var(--tree-custom-icon-size, 20px);
+        }
+
+        .node-label {
+          flex: 1;
+          padding: 2px 4px;
+          color: var(--tree-label-color, #333);
+          font-weight: var(--tree-label-font-weight, 400);
+          line-height: 1.4;
+          cursor: pointer;
+          transition: color 0.15s ease;
+        }
+
+        .node-label:hover {
+          color: var(--tree-label-hover-color, #007bff);
+        }
+
+        .node-children {
+          position: relative;
+        }
+
+        .node-children::before {
+          content: '';
+          position: absolute;
+          left: calc(var(--tree-indent-width, 20px) / 2 + 8px);
+          top: 0;
+          bottom: 0;
+          width: 1px;
+          background: var(--tree-guide-line-color, rgba(0, 0, 0, 0.1));
+        }
+
+        /* Animations */
+        @keyframes slideDown {
+          from {
+            opacity: 0;
+            transform: translateY(-4px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .node-children {
+          animation: slideDown 0.2s ease-out;
+        }
+
+        /* Empty state */
+        .tree-empty {
+          padding: 32px;
+          text-align: center;
+          color: var(--tree-empty-color, #999);
+          font-style: italic;
+        }
+
+        /* Scrollbar styling */
+        .tree-container::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+
+        .tree-container::-webkit-scrollbar-track {
+          background: var(--tree-scrollbar-track, #f1f1f1);
+          border-radius: 4px;
+        }
+
+        .tree-container::-webkit-scrollbar-thumb {
+          background: var(--tree-scrollbar-thumb, #888);
+          border-radius: 4px;
+        }
+
+        .tree-container::-webkit-scrollbar-thumb:hover {
+          background: var(--tree-scrollbar-thumb-hover, #555);
+        }
+      </style>
+
+      <div class="${e}">
+        ${this.data.length > 0 ? this.data.map((t) => this.renderNode(t)).join("") : '<div class="tree-empty">No items to display</div>'}
+      </div>
+    `;
+  }
+}
+const p = (a = "liwe3-tree-view") => {
+  typeof window < "u" && !window.customElements.get(a) && customElements.define(a, h);
+};
+p();
+export {
+  h as TreeViewElement,
+  p as defineTreeView
+};
+//# sourceMappingURL=TreeView.js.map

package/dist/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","sources":["../src/TreeView.ts"],"sourcesContent":["/**\n * TreeView Web Component\n * A customizable tree view with infinite depth, checkboxes, and folder icons\n */\n\nexport type TreeNode = {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n  icon?: string;\n  customIcon?: string;\n  selected?: boolean;\n  expanded?: boolean;\n};\n\nexport class TreeViewElement extends HTMLElement {\n  declare shadowRoot: ShadowRoot;\n  private treeData: TreeNode[] = [];\n  private selectedIds: Set<string> = new Set();\n  private expandedIds: Set<string> = new Set();\n  private indentWidth: number = 20;\n  private showBorder = true;\n\n  constructor () {\n    super();\n    this.attachShadow( { mode: 'open' } );\n    this.render();\n    this.bindEvents();\n  }\n\n  static get observedAttributes (): string[] {\n    return [ 'data', 'indent-width', 'selected-ids', 'show-border' ];\n  }\n\n  attributeChangedCallback ( name: string, oldValue: string | null, newValue: string | null ): void {\n    if ( oldValue !== newValue ) {\n      if ( name === 'indent-width' ) {\n        this.indentWidth = parseInt( newValue || '20', 10 );\n      }\n\n      if ( name === 'show-border' ) {\n        this.showBorder = newValue !== 'false';\n      }\n      this.render();\n    }\n  }\n\n  get data (): TreeNode[] {\n    const dataAttr = this.getAttribute( 'data' );\n    if ( dataAttr ) {\n      try {\n        return JSON.parse( dataAttr );\n      } catch ( e ) {\n        console.error( 'Invalid data format:', e );\n        return [];\n      }\n    }\n    return this.treeData;\n  }\n\n  set data ( value: TreeNode[] ) {\n    this.treeData = value;\n    this.initializeExpandedState( value );\n    this.setAttribute( 'data', JSON.stringify( value ) );\n  }\n\n  get selectedNodeIds (): string[] {\n    return Array.from( this.selectedIds );\n  }\n\n  set selectedNodeIds ( ids: string[] ) {\n    this.selectedIds = new Set( ids );\n    this.render();\n  }\n\n  get showBorderEnabled (): boolean {\n    return this.showBorder;\n  }\n\n  set showBorderEnabled ( value: boolean ) {\n    this.showBorder = value;\n    this.setAttribute( 'show-border', value.toString() );\n    this.render();\n  }\n\n  /**\n   * Initialize expanded state from the data\n   */\n  private initializeExpandedState ( nodes: TreeNode[] ): void {\n    const traverse = ( node: TreeNode ) => {\n      if ( node.expanded ) {\n        this.expandedIds.add( node.id );\n      }\n      if ( node.children ) {\n        node.children.forEach( traverse );\n      }\n    };\n\n    nodes.forEach( traverse );\n  }\n\n  /**\n   * Toggle node expansion\n   */\n  toggleExpansion ( nodeId: string ): void {\n    // Update DOM directly instead of full re-render\n    const nodeElement = this.shadowRoot.querySelector( `.tree-node[data-node-id=\"${ nodeId }\"]` ) as HTMLElement;\n    if ( !nodeElement ) return;\n\n    // Find the direct child .node-children element (not nested ones)\n    const childrenContainer = Array.from( nodeElement.children ).find(\n      el => el.classList.contains( 'node-children' )\n    ) as HTMLElement | undefined;\n\n    // Determine current state from DOM, not from expandedIds\n    const hasChildrenInDom = !!childrenContainer;\n\n    if ( hasChildrenInDom ) {\n      // Currently expanded - collapse it\n      childrenContainer.remove();\n      this.expandedIds.delete( nodeId );\n\n      // Toggle expand icon rotation\n      const expandIcon = nodeElement.querySelector( '.expand-icon' ) as HTMLElement;\n      if ( expandIcon ) {\n        expandIcon.classList.remove( 'expanded' );\n      }\n\n      this.dispatchEvent( new CustomEvent( 'toggle', {\n        detail: { nodeId, expanded: false }\n      } ) );\n    } else {\n      // Currently collapsed - expand it\n      const node = this.findNode( nodeId );\n      if ( node && node.children ) {\n        const depth = parseInt( nodeElement.dataset.depth || '0', 10 );\n        const childrenHtml = `\n          <div class=\"node-children\">\n            ${ node.children.map( child => this.renderNode( child, depth + 1 ) ).join( '' ) }\n          </div>\n        `;\n        nodeElement.insertAdjacentHTML( 'beforeend', childrenHtml );\n        this.expandedIds.add( nodeId );\n\n        // Toggle expand icon rotation\n        const expandIcon = nodeElement.querySelector( '.expand-icon' ) as HTMLElement;\n        if ( expandIcon ) {\n          expandIcon.classList.add( 'expanded' );\n        }\n\n        this.dispatchEvent( new CustomEvent( 'toggle', {\n          detail: { nodeId, expanded: true }\n        } ) );\n      }\n    }\n  }\n\n  /**\n   * Toggle node selection\n   */\n  toggleSelection ( nodeId: string ): void {\n    const isSelected = this.selectedIds.has( nodeId );\n\n    if ( isSelected ) {\n      this.selectedIds.delete( nodeId );\n    } else {\n      this.selectedIds.add( nodeId );\n    }\n\n    // Update checkbox state directly instead of full re-render\n    const checkbox = this.shadowRoot.querySelector( `.node-checkbox[data-node-id=\"${ nodeId }\"]` ) as HTMLInputElement;\n    if ( checkbox ) {\n      checkbox.checked = !isSelected;\n    }\n\n    this.dispatchEvent( new CustomEvent( 'selectionchange', {\n      detail: { selectedIds: this.selectedNodeIds }\n    } ) );\n  }\n\n  /**\n   * Select all nodes recursively\n   */\n  selectAll (): void {\n    const traverse = ( node: TreeNode ) => {\n      this.selectedIds.add( node.id );\n      if ( node.children ) {\n        node.children.forEach( traverse );\n      }\n    };\n\n    this.data.forEach( traverse );\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'selectionchange', {\n      detail: { selectedIds: this.selectedNodeIds }\n    } ) );\n  }\n\n  /**\n   * Deselect all nodes\n   */\n  deselectAll (): void {\n    this.selectedIds.clear();\n    this.render();\n    this.dispatchEvent( new CustomEvent( 'selectionchange', {\n      detail: { selectedIds: this.selectedNodeIds }\n    } ) );\n  }\n\n  /**\n   * Expand all nodes\n   */\n  expandAll (): void {\n    const traverse = ( node: TreeNode ) => {\n      if ( node.children && node.children.length > 0 ) {\n        this.expandedIds.add( node.id );\n        node.children.forEach( traverse );\n      }\n    };\n\n    this.data.forEach( traverse );\n    this.render();\n  }\n\n  /**\n   * Collapse all nodes\n   */\n  collapseAll (): void {\n    this.expandedIds.clear();\n    this.render();\n  }\n\n  /**\n   * Get node by ID\n   */\n  private findNode ( nodeId: string, nodes: TreeNode[] = this.data ): TreeNode | null {\n    for ( const node of nodes ) {\n      if ( node.id === nodeId ) {\n        return node;\n      }\n      if ( node.children ) {\n        const found = this.findNode( nodeId, node.children );\n        if ( found ) return found;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Get the default folder icon\n   */\n  private getDefaultIcon ( node: TreeNode, isExpanded: boolean ): string {\n    if ( node.children && node.children.length > 0 ) {\n      return isExpanded ? '📂' : '📁';\n    }\n    return '📄';\n  }\n\n  /**\n   * Render a single tree node\n   */\n  private renderNode ( node: TreeNode, depth: number = 0 ): string {\n    const isExpanded = this.expandedIds.has( node.id );\n    const isSelected = this.selectedIds.has( node.id );\n    const hasChildren = node.children && node.children.length > 0;\n    const paddingLeft = depth * this.indentWidth;\n\n    // Determine icon to display\n    let iconHtml = '';\n    if ( node.customIcon ) {\n      iconHtml = `<span class=\"node-icon custom-icon\">${ node.customIcon }</span>`;\n    } else if ( node.icon !== undefined && node.icon !== '' ) {\n      iconHtml = `<span class=\"node-icon\">${ node.icon }</span>`;\n    } else if ( node.icon !== '' ) {\n      iconHtml = `<span class=\"node-icon\">${ this.getDefaultIcon( node, isExpanded ) }</span>`;\n    }\n\n    // Render children if expanded\n    let childrenHtml = '';\n    if ( hasChildren && isExpanded ) {\n      childrenHtml = `<div class=\"node-children\">${ node.children!.map( child => this.renderNode( child, depth + 1 ) ).join( '' ) }</div>`;\n    }\n\n    const nodeHtml = `\n      <div class=\"tree-node\" data-node-id=\"${ node.id }\" data-depth=\"${ depth }\">\n        <div class=\"node-content\" style=\"padding-left: ${ paddingLeft }px\">\n          <div class=\"node-controls\">\n            ${ hasChildren\n        ? `<button class=\"expand-toggle\" data-node-id=\"${ node.id }\" aria-label=\"${ isExpanded ? 'Collapse' : 'Expand' }\">\n                   <svg class=\"expand-icon ${ isExpanded ? 'expanded' : '' }\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\">\n                     <path d=\"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z\"/>\n                   </svg>\n                 </button>`\n        : '<span class=\"expand-spacer\"></span>'\n      }\n            <label class=\"checkbox-wrapper\">\n              <input\n                type=\"checkbox\"\n                class=\"node-checkbox\"\n                data-node-id=\"${ node.id }\"\n                ${ isSelected ? 'checked' : '' }\n              >\n              <span class=\"checkbox-custom\"></span>\n            </label>\n          </div>\n          ${ iconHtml }\n          <span class=\"node-label\" data-node-id=\"${ node.id }\">${ node.label }</span>\n        </div>\n        ${ childrenHtml }\n      </div>\n    `;\n\n    return nodeHtml;\n  }\n\n  /**\n   * Bind event listeners\n   */\n  private bindEvents (): void {\n    // Use event delegation for all interactive elements\n    this.shadowRoot.addEventListener( 'click', ( e ) => {\n      const target = e.target as HTMLElement;\n\n      // Handle expand/collapse toggle button\n      if ( target.closest( '.expand-toggle' ) ) {\n        const button = target.closest( '.expand-toggle' ) as HTMLElement;\n        const nodeId = button.dataset.nodeId;\n        if ( nodeId ) {\n          this.toggleExpansion( nodeId );\n        }\n        return;\n      }\n    } );\n\n    // Handle checkbox changes\n    this.shadowRoot.addEventListener( 'change', ( e ) => {\n      const target = e.target as HTMLInputElement;\n      if ( target.classList.contains( 'node-checkbox' ) ) {\n        const nodeId = target.dataset.nodeId;\n        if ( nodeId ) {\n          // Toggle current node selection\n          this.toggleSelection( nodeId );\n\n          // If this node is a folder, cascade selection state to all descendants\n          const node = this.findNode( nodeId );\n          if ( node && node.children && node.children.length > 0 ) {\n            const checked = !!target.checked;\n\n            const applyToDescendants = ( n: TreeNode ) => {\n              if ( n.children ) n.children.forEach( applyToDescendants );\n              // Skip the root node itself because it's already handled above\n              if ( n.id !== nodeId ) {\n                if ( checked ) this.selectedIds.add( n.id );\n                else this.selectedIds.delete( n.id );\n              }\n            };\n\n            applyToDescendants( node );\n\n            // Update any rendered descendant checkboxes in the DOM\n            const rootEl = this.shadowRoot.querySelector( `.tree-node[data-node-id=\"${ nodeId }\"]` );\n            if ( rootEl ) {\n              rootEl.querySelectorAll<HTMLInputElement>( '.node-checkbox' ).forEach( ( cb ) => {\n                cb.checked = checked;\n              } );\n            }\n\n            this.dispatchEvent( new CustomEvent( 'selectionchange', {\n              detail: { selectedIds: this.selectedNodeIds }\n            } ) );\n          }\n        }\n      }\n    } );\n\n    // Handle double-click events\n    this.shadowRoot.addEventListener( 'dblclick', ( e ) => {\n      const target = e.target as HTMLElement;\n\n      // Ignore double-clicks that originate from the checkbox area\n      if ( target.closest( '.checkbox-wrapper' ) || target.classList.contains( 'node-checkbox' ) ) {\n        e.stopPropagation();\n        e.preventDefault();\n        return;\n      }\n\n      // Check if clicking on a node label or content\n      if ( target.closest( '.node-label' ) || target.closest( '.node-content' ) ) {\n        const nodeContent = target.closest( '.node-content' ) as HTMLElement;\n        if ( !nodeContent ) return;\n\n        const nodeElement = nodeContent.closest( '.tree-node' ) as HTMLElement;\n        if ( !nodeElement ) return;\n\n        const nodeId = nodeElement.dataset.nodeId;\n        if ( !nodeId ) return;\n\n        const node = this.findNode( nodeId );\n        if ( !node ) return;\n\n        // If it's a folder (has children), toggle expansion\n        if ( node.children && node.children.length > 0 ) {\n          this.toggleExpansion( nodeId );\n        } else {\n          // If it's an item (no children), fire itemselected event\n          this.dispatchEvent( new CustomEvent( 'itemselected', {\n            detail: { node, nodeId }\n          } ) );\n        }\n      }\n    } );\n  }\n\n  /**\n   * Render the component\n   */\n  private render (): void {\n    const containerClass = this.showBorder ? 'tree-container bordered' : 'tree-container borderless';\n\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host {\n          display: block;\n          font-family: var(--tree-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);\n          font-size: var(--tree-font-size, 14px);\n          color: var(--tree-text-color, #333);\n          background: var(--tree-background, transparent);\n          user-select: none;\n        }\n\n        .tree-container {\n          overflow: auto;\n          padding: var(--tree-padding, 8px);\n          border-radius: var(--tree-border-radius, 10px);\n          background: var(--tree-container-background, transparent);\n          border: none;\n        }\n\n        .tree-container.bordered {\n          border: var(--tree-border, 1px solid rgba(15, 23, 42, 0.12));\n          box-shadow: var(--tree-border-shadow, none);\n        }\n\n        .tree-container.borderless {\n          border: none;\n        }\n\n        .tree-node {\n          position: relative;\n        }\n\n        .node-content {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          padding: 4px 8px;\n          border-radius: var(--tree-node-border-radius, 6px);\n          transition: background-color 0.15s ease;\n          cursor: pointer;\n        }\n\n        .node-content:hover {\n          background-color: var(--tree-hover-background, rgba(0, 123, 255, 0.08));\n        }\n\n        .node-controls {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n        }\n\n        .expand-toggle {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 20px;\n          height: 20px;\n          padding: 0;\n          border: none;\n          background: transparent;\n          cursor: pointer;\n          border-radius: 4px;\n          transition: background-color 0.15s ease;\n        }\n\n        .expand-toggle:hover {\n          background-color: var(--tree-expand-hover-background, rgba(0, 0, 0, 0.1));\n        }\n\n        .expand-toggle:focus {\n          outline: 2px solid var(--tree-focus-color, #007bff);\n          outline-offset: 2px;\n        }\n\n        .expand-icon {\n          fill: var(--tree-icon-color, #666);\n          transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .expand-icon.expanded {\n          transform: rotate(90deg);\n        }\n\n        .expand-spacer {\n          width: 20px;\n          height: 20px;\n          display: inline-block;\n        }\n\n        .checkbox-wrapper {\n          display: flex;\n          align-items: center;\n          cursor: pointer;\n          margin: 0;\n        }\n\n        .node-checkbox {\n          position: absolute;\n          opacity: 0;\n          width: 0;\n          height: 0;\n        }\n\n        .checkbox-custom {\n          position: relative;\n          width: 18px;\n          height: 18px;\n          border: 2px solid var(--tree-checkbox-border, #ccc);\n          border-radius: var(--tree-checkbox-border-radius, 4px);\n          background: var(--tree-checkbox-background, white);\n          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .checkbox-custom::after {\n          content: '';\n          position: absolute;\n          display: none;\n          left: 5px;\n          top: 2px;\n          width: 4px;\n          height: 8px;\n          border: solid white;\n          border-width: 0 2px 2px 0;\n          transform: rotate(45deg);\n        }\n\n        .node-checkbox:checked + .checkbox-custom {\n          background: var(--tree-checkbox-checked-background, #007bff);\n          border-color: var(--tree-checkbox-checked-border, #007bff);\n        }\n\n        .node-checkbox:checked + .checkbox-custom::after {\n          display: block;\n        }\n\n        .checkbox-wrapper:hover .checkbox-custom {\n          border-color: var(--tree-checkbox-hover-border, #999);\n          box-shadow: 0 0 0 3px var(--tree-checkbox-hover-shadow, rgba(0, 123, 255, 0.1));\n        }\n\n        .node-checkbox:focus + .checkbox-custom {\n          outline: 2px solid var(--tree-focus-color, #007bff);\n          outline-offset: 2px;\n        }\n\n        .node-icon {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          font-size: 18px;\n          min-width: 20px;\n        }\n\n        .node-icon.custom-icon {\n          font-size: var(--tree-custom-icon-size, 20px);\n        }\n\n        .node-label {\n          flex: 1;\n          padding: 2px 4px;\n          color: var(--tree-label-color, #333);\n          font-weight: var(--tree-label-font-weight, 400);\n          line-height: 1.4;\n          cursor: pointer;\n          transition: color 0.15s ease;\n        }\n\n        .node-label:hover {\n          color: var(--tree-label-hover-color, #007bff);\n        }\n\n        .node-children {\n          position: relative;\n        }\n\n        .node-children::before {\n          content: '';\n          position: absolute;\n          left: calc(var(--tree-indent-width, 20px) / 2 + 8px);\n          top: 0;\n          bottom: 0;\n          width: 1px;\n          background: var(--tree-guide-line-color, rgba(0, 0, 0, 0.1));\n        }\n\n        /* Animations */\n        @keyframes slideDown {\n          from {\n            opacity: 0;\n            transform: translateY(-4px);\n          }\n          to {\n            opacity: 1;\n            transform: translateY(0);\n          }\n        }\n\n        .node-children {\n          animation: slideDown 0.2s ease-out;\n        }\n\n        /* Empty state */\n        .tree-empty {\n          padding: 32px;\n          text-align: center;\n          color: var(--tree-empty-color, #999);\n          font-style: italic;\n        }\n\n        /* Scrollbar styling */\n        .tree-container::-webkit-scrollbar {\n          width: 8px;\n          height: 8px;\n        }\n\n        .tree-container::-webkit-scrollbar-track {\n          background: var(--tree-scrollbar-track, #f1f1f1);\n          border-radius: 4px;\n        }\n\n        .tree-container::-webkit-scrollbar-thumb {\n          background: var(--tree-scrollbar-thumb, #888);\n          border-radius: 4px;\n        }\n\n        .tree-container::-webkit-scrollbar-thumb:hover {\n          background: var(--tree-scrollbar-thumb-hover, #555);\n        }\n      </style>\n\n      <div class=\"${ containerClass }\">\n        ${ this.data.length > 0\n        ? this.data.map( node => this.renderNode( node ) ).join( '' )\n        : '<div class=\"tree-empty\">No items to display</div>'\n      }\n      </div>\n    `;\n  }\n}\n\n/**\n * Conditionally defines the custom element if in a browser environment.\n */\nconst defineTreeView = ( tagName: string = 'liwe3-tree-view' ): void => {\n  if ( typeof window !== 'undefined' && !window.customElements.get( tagName ) ) {\n    customElements.define( tagName, TreeViewElement );\n  }\n};\n\n// Auto-register with default tag name\ndefineTreeView();\n\nexport { defineTreeView };\n"],"names":["TreeViewElement","name","oldValue","newValue","dataAttr","e","value","ids","nodes","traverse","node","nodeId","nodeElement","childrenContainer","el","expandIcon","depth","childrenHtml","child","isSelected","checkbox","found","isExpanded","hasChildren","paddingLeft","iconHtml","target","checked","applyToDescendants","n","rootEl","cb","nodeContent","containerClass","defineTreeView","tagName"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @liwe3/webcomponents
+ * A collection of reusable web components
+ */
+export { SmartSelectElement, defineSmartSelect, type SelectOption } from './SmartSelect';
+export { AITextEditorElement, defineAITextEditor, type AITextEditorConfig } from './AITextEditor';
+export { ToastElement, defineToast, toastAdd, type ToastType, type ToastButton, type ToastConfig } from './Toast';
+export { PopoverMenuElement, definePopoverMenu, type PopoverMenuItem, type PopoverMenuConfig } from './PopoverMenu';
+export { DateSelectorElement, defineDateSelector, type DateRange } from './DateSelector';
+export { TreeViewElement, defineTreeView, type TreeNode } from './TreeView';
+export { ContainerBoxElement, defineContainerBox, type MenuPosition, type ContainerBoxConfig } from './ContainerBox';
+export { DrawerElement, defineDrawer, type DrawerDirection, type DrawerState, type DrawerConfig } from './Drawer';
+export * from './ImageView';
+export { ChunkUploaderElement, defineChunkUploader, type UploadedFile, type ChunkUploaderConfig } from './ChunkUploader';
+export declare const defineAllComponents: () => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,YAAY,EAClB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,SAAS,EACf,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,eAAe,EACf,cAAc,EACd,KAAK,QAAQ,EACd,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,YAAY,EACjB,KAAK,kBAAkB,EACxB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,UAAU,CAAC;AAGlB,cAAc,aAAa,CAAC;AAG5B,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACzB,MAAM,iBAAiB,CAAC;AAGzB,eAAO,MAAM,mBAAmB,QAAO,IAYtC,CAAC"}

package/dist/index.js

@@ -1,13 +1,37 @@
-import { SmartSelectElement as i, defineSmartSelect as r } from "./SmartSelect.js";
-import { AITextEditorElement as f, defineAITextEditor as m } from "./AITextEditor.js";
+import { SmartSelectElement as n, defineSmartSelect as i } from "./SmartSelect.js";
+import { AITextEditorElement as f, defineAITextEditor as d } from "./AITextEditor.js";
+import { ToastElement as a, defineToast as l, toastAdd as x } from "./Toast.js";
+import { PopoverMenuElement as E, definePopoverMenu as w } from "./PopoverMenu.js";
+import { DateSelectorElement as T, defineDateSelector as c } from "./DateSelector.js";
+import { TreeViewElement as C, defineTreeView as s } from "./TreeView.js";
+import { ContainerBoxElement as A, defineContainerBox as I } from "./ContainerBox.js";
+import { DrawerElement as k, defineDrawer as v } from "./Drawer.js";
+import { ImageView as M } from "./ImageView.js";
+import { ChunkUploaderElement as U, defineChunkUploader as g } from "./ChunkUploader.js";
 const t = () => {
-  typeof window < "u" && (import("./SmartSelect.js").then(({ defineSmartSelect: e }) => e()), import("./AITextEditor.js").then(({ defineAITextEditor: e }) => e()));
+  typeof window < "u" && (import("./SmartSelect.js").then(({ defineSmartSelect: e }) => e()), import("./AITextEditor.js").then(({ defineAITextEditor: e }) => e()), import("./Toast.js").then(({ defineToast: e }) => e()), import("./PopoverMenu.js").then(({ definePopoverMenu: e }) => e()), import("./DateSelector.js").then(({ defineDateSelector: e }) => e()), import("./TreeView.js").then(({ defineTreeView: e }) => e()), import("./ContainerBox.js").then(({ defineContainerBox: e }) => e()), import("./Drawer.js").then(({ defineDrawer: e }) => e()), import("./ChunkUploader.js").then(({ defineChunkUploader: e }) => e()));
 };
 export {
   f as AITextEditorElement,
-  i as SmartSelectElement,
-  m as defineAITextEditor,
+  U as ChunkUploaderElement,
+  A as ContainerBoxElement,
+  T as DateSelectorElement,
+  k as DrawerElement,
+  M as ImageView,
+  E as PopoverMenuElement,
+  n as SmartSelectElement,
+  a as ToastElement,
+  C as TreeViewElement,
+  d as defineAITextEditor,
   t as defineAllComponents,
-  r as defineSmartSelect
+  g as defineChunkUploader,
+  I as defineContainerBox,
+  c as defineDateSelector,
+  v as defineDrawer,
+  w as definePopoverMenu,
+  i as defineSmartSelect,
+  l as defineToast,
+  s as defineTreeView,
+  x as toastAdd
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * @liwe3/webcomponents\n * A collection of reusable web components\n */\n\n// Export SmartSelect\nexport {\n  SmartSelectElement,\n  defineSmartSelect,\n  type SelectOption\n} from './SmartSelect';\n\n// Export AITextEditor\nexport {\n  AITextEditorElement,\n  defineAITextEditor,\n  type AITextEditorConfig\n} from './AITextEditor';\n\n// Convenience function to register all components at once\nexport const defineAllComponents = (): void => {\n  if (typeof window !== 'undefined') {\n    import('./SmartSelect').then(({ defineSmartSelect }) => defineSmartSelect());\n    import('./AITextEditor').then(({ defineAITextEditor }) => defineAITextEditor());\n  }\n};\n"],"names":["defineAllComponents","defineSmartSelect","defineAITextEditor"],"mappings":";;AAoBO,MAAMA,IAAsB,MAAY;AAC7C,EAAI,OAAO,SAAW,QACpB,OAAO,kBAAe,EAAE,KAAK,CAAC,EAAE,mBAAAC,EAAAA,MAAwBA,GAAmB,GAC3E,OAAO,mBAAgB,EAAE,KAAK,CAAC,EAAE,oBAAAC,EAAAA,MAAyBA,GAAoB;AAElF;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["/**\n * @liwe3/webcomponents\n * A collection of reusable web components\n */\n\n// Export SmartSelect\nexport {\n  SmartSelectElement,\n  defineSmartSelect,\n  type SelectOption\n} from './SmartSelect';\n\n// Export AITextEditor\nexport {\n  AITextEditorElement,\n  defineAITextEditor,\n  type AITextEditorConfig\n} from './AITextEditor';\n\n// Export Toast\nexport {\n  ToastElement,\n  defineToast,\n  toastAdd,\n  type ToastType,\n  type ToastButton,\n  type ToastConfig\n} from './Toast';\n\n// Export PopoverMenu\nexport {\n  PopoverMenuElement,\n  definePopoverMenu,\n  type PopoverMenuItem,\n  type PopoverMenuConfig\n} from './PopoverMenu';\n\n// Export DateSelector\nexport {\n  DateSelectorElement,\n  defineDateSelector,\n  type DateRange\n} from './DateSelector';\n\n// Export TreeView\nexport {\n  TreeViewElement,\n  defineTreeView,\n  type TreeNode\n} from './TreeView';\n\n// Export ContainerBox\nexport {\n  ContainerBoxElement,\n  defineContainerBox,\n  type MenuPosition,\n  type ContainerBoxConfig\n} from './ContainerBox';\n\n// Export Drawer\nexport {\n  DrawerElement,\n  defineDrawer,\n  type DrawerDirection,\n  type DrawerState,\n  type DrawerConfig\n} from './Drawer';\n\n// Export ImageView\nexport * from './ImageView';\n\n// Export ChunkUploader\nexport {\n  ChunkUploaderElement,\n  defineChunkUploader,\n  type UploadedFile,\n  type ChunkUploaderConfig\n} from './ChunkUploader';\n\n// Convenience function to register all components at once\nexport const defineAllComponents = (): void => {\n  if ( typeof window !== 'undefined' ) {\n    import( './SmartSelect' ).then( ( { defineSmartSelect } ) => defineSmartSelect() );\n    import( './AITextEditor' ).then( ( { defineAITextEditor } ) => defineAITextEditor() );\n    import( './Toast' ).then( ( { defineToast } ) => defineToast() );\n    import( './PopoverMenu' ).then( ( { definePopoverMenu } ) => definePopoverMenu() );\n    import( './DateSelector' ).then( ( { defineDateSelector } ) => defineDateSelector() );\n    import( './TreeView' ).then( ( { defineTreeView } ) => defineTreeView() );\n    import( './ContainerBox' ).then( ( { defineContainerBox } ) => defineContainerBox() );\n    import( './Drawer' ).then( ( { defineDrawer } ) => defineDrawer() );\n    import( './ChunkUploader' ).then( ( { defineChunkUploader } ) => defineChunkUploader() );\n  }\n};\n"],"names":["defineAllComponents","defineSmartSelect","defineAITextEditor","defineToast","definePopoverMenu","defineDateSelector","defineTreeView","defineContainerBox","defineDrawer","defineChunkUploader"],"mappings":";;;;;;;;;;AAgFO,MAAMA,IAAsB,MAAY;AAC7C,EAAK,OAAO,SAAW,QACrB,OAAQ,kBAAgB,EAAE,KAAM,CAAE,EAAE,mBAAAC,EAAAA,MAAyBA,GAAoB,GACjF,OAAQ,mBAAiB,EAAE,KAAM,CAAE,EAAE,oBAAAC,EAAAA,MAA0BA,GAAqB,GACpF,OAAQ,YAAU,EAAE,KAAM,CAAE,EAAE,aAAAC,EAAAA,MAAmBA,GAAc,GAC/D,OAAQ,kBAAgB,EAAE,KAAM,CAAE,EAAE,mBAAAC,EAAAA,MAAyBA,GAAoB,GACjF,OAAQ,mBAAiB,EAAE,KAAM,CAAE,EAAE,oBAAAC,EAAAA,MAA0BA,GAAqB,GACpF,OAAQ,eAAa,EAAE,KAAM,CAAE,EAAE,gBAAAC,EAAAA,MAAsBA,GAAiB,GACxE,OAAQ,mBAAiB,EAAE,KAAM,CAAE,EAAE,oBAAAC,EAAAA,MAA0BA,GAAqB,GACpF,OAAQ,aAAW,EAAE,KAAM,CAAE,EAAE,cAAAC,EAAAA,MAAoBA,GAAe,GAClE,OAAQ,oBAAkB,EAAE,KAAM,CAAE,EAAE,qBAAAC,EAAAA,MAA2BA,GAAsB;AAE3F;"}