@trimble-oss/moduswebcomponents/types/components/modus-wc-tree-menu/modus-wc-tree-menu.story-source.d.ts

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

export declare const treeMenuDefaultSourceCode = "\n<modus-wc-tree-menu\n  aria-label=\"Tree menu\"\n  orientation=\"vertical\"\n  selection-mode=\"single\"\n  size=\"md\"\n>\n  <modus-wc-tree-item label=\"Small\" value=\"1\" size=\"sm\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Medium\" value=\"2\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Large\" value=\"3\" size=\"lg\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Bordered\" value=\"4\" bordered=\"true\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"With Sub-label\" value=\"5\" sub-label=\"Sub-label\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Selected\" value=\"6\" selected=\"true\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"With Start Icon\" value=\"7\">\n    <modus-wc-icon slot=\"start\" name=\"info\"></modus-wc-icon>\n  </modus-wc-tree-item>\n  <modus-wc-tree-item label=\"With End Action\" value=\"8\">\n    <div slot=\"end\" style=\"display: flex; align-items: center;\">\n      <modus-wc-button\n        variant=\"borderless\"\n        size=\"sm\"\n        shape=\"circle\"\n        color=\"primary\"\n        aria-label=\"More options\"\n      >\n        <modus-wc-icon name=\"more_vertical\" size=\"sm\"></modus-wc-icon>\n      </modus-wc-button>\n    </div>\n  </modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Disabled\" value=\"9\" disabled=\"true\"></modus-wc-tree-item>\n</modus-wc-tree-menu>\n";
export declare const treeMenuMultiSelectSourceCode = "\n<modus-wc-tree-menu aria-label=\"Tree menu\" selection-mode=\"multiple\">\n  <modus-wc-tree-item label=\"Item 1\" value=\"1\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Item 2\" value=\"2\"></modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Item 3\" value=\"3\"></modus-wc-tree-item>\n</modus-wc-tree-menu>\n<p id=\"tree-menu-selection-output\">Selected: none</p>\n<script>\n  const treeMenu = document.querySelector('modus-wc-tree-menu');\n  const output = document.getElementById('tree-menu-selection-output');\n\n  treeMenu.addEventListener('menuSelectionChange', (e) => {\n    const { selectedItems } = e.detail;\n    output.textContent =\n      selectedItems.length > 0\n        ? `Selected: ${selectedItems.map((i) => i.getAttribute('value')).join(', ')}`\n        : 'Selected: none';\n  });\n</script>\n";
export declare const treeMenuCollapsibleMenuSourceCode = "\n<modus-wc-tree-menu aria-label=\"Tree menu\">\n  <modus-wc-tree-item label=\"Parent Item\" value=\"parent\" has-submenu=\"true\">\n    <modus-wc-tree-menu is-sub-menu=\"true\">\n      <modus-wc-tree-item label=\"Child 1\" value=\"child-1\"></modus-wc-tree-item>\n      <modus-wc-tree-item label=\"Child 2\" value=\"child-2\"></modus-wc-tree-item>\n    </modus-wc-tree-menu>\n  </modus-wc-tree-item>\n  <modus-wc-tree-item label=\"Sibling Item\" value=\"sibling\"></modus-wc-tree-item>\n</modus-wc-tree-menu>\n";
export declare const treeMenuShadowDomParentSourceCode = "\n<tree-menu-shadow-host></tree-menu-shadow-host>\n<script>\n  const host = document.querySelector('tree-menu-shadow-host');\n  host.props = {\n    orientation: 'vertical',\n    'selection-mode': 'single',\n    size: 'md',\n  };\n</script>\n";