@vonage/vivid 5.15.1 → 5.16.0

package/tree-view/definition.cjs

@@ -1,302 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const vividElement = require('../unbundled/vivid-element.cjs');
-const treeItem_definition = require('../unbundled/definition4.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const hostSemantics = require('../unbundled/host-semantics.cjs');
-
-const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function getDisplayedNodes(rootNode, selector) {
-  if (fastWebUtilities.isHTMLElement(rootNode)) {
-    const nodes = Array.from(
-      rootNode.querySelectorAll(selector)
-    );
-    const visibleNodes = nodes.filter((node) => {
-      if (node.parentElement instanceof treeItem_definition.TreeItem) {
-        if (node.parentElement.expanded) return true;
-      } else {
-        return true;
-      }
-      return false;
-    });
-    return visibleNodes;
-  }
-  return [];
-}
-class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    this.currentFocused = null;
-    /**
-     * Handle focus events
-     *
-     * @internal
-     */
-    this.handleFocus = (e) => {
-      if (this.slottedTreeItems.length > 0) {
-        if (e.target === this) {
-          if (this.currentFocused !== null) {
-            treeItem_definition.TreeItem.focusItem(this.currentFocused);
-          }
-          return;
-        }
-        if (this.contains(e.target)) {
-          this.setAttribute("tabindex", "-1");
-          this.currentFocused = e.target;
-        }
-      }
-    };
-    /**
-     * Handle blur events
-     *
-     * @internal
-     */
-    this.handleBlur = (e) => {
-      if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-        this.setAttribute("tabindex", "0");
-      }
-    };
-    /**
-     * KeyDown handler
-     *
-     *  @internal
-     */
-    this.handleKeyDown = (e) => {
-      if (this.slottedTreeItems.length < 1) {
-        return true;
-      }
-      if (!e.defaultPrevented) {
-        const treeItems = this.getVisibleNodes();
-        switch (e.key) {
-          case fastWebUtilities.keyHome: {
-            if (treeItems.length) {
-              treeItem_definition.TreeItem.focusItem(treeItems[0]);
-            }
-            return;
-          }
-          case fastWebUtilities.keyEnd: {
-            if (treeItems.length) {
-              treeItem_definition.TreeItem.focusItem(treeItems[treeItems.length - 1]);
-            }
-            return;
-          }
-          case fastWebUtilities.keyArrowLeft: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && item.expanded) {
-                item.expanded = false;
-              } else if (item instanceof treeItem_definition.TreeItem && item.parentElement instanceof treeItem_definition.TreeItem) {
-                treeItem_definition.TreeItem.focusItem(item.parentElement);
-              }
-            }
-            return false;
-          }
-          case fastWebUtilities.keyArrowRight: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && !item.expanded) {
-                item.expanded = true;
-              } else if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0) {
-                this.focusNextNode(1, e.target);
-              }
-            }
-            return;
-          }
-          case fastWebUtilities.keyArrowDown: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(1, e.target);
-            }
-            return;
-          }
-          case fastWebUtilities.keyArrowUp: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(-1, e.target);
-            }
-            return;
-          }
-          case fastWebUtilities.keyEnter:
-            this.handleClick(e);
-            return;
-        }
-      }
-      return true;
-    };
-    /**
-     * Handles the selected-changed events bubbling up
-     * from child tree items
-     *
-     *  @internal
-     */
-    this.handleSelectedChange = (e) => {
-      if (!e.defaultPrevented) {
-        if (!(e.target instanceof Element) || !treeItem_definition.isTreeItemElement(e.target)) {
-          return true;
-        }
-        const item = e.target;
-        if (item.selected) {
-          if (this.currentSelected && this.currentSelected !== item) {
-            this.currentSelected.selected = false;
-          }
-          this.currentSelected = item;
-        } else if (!item.selected && this.currentSelected === item) {
-          this.currentSelected = null;
-        }
-        return;
-      }
-    };
-    /**
-     * Updates the tree view when slottedTreeItems changes
-     */
-    this.setItems = () => {
-      const selectedItem = this.treeView.querySelector("[selected]");
-      this.currentSelected = selectedItem;
-      if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-        this.currentFocused = this.getValidFocusableItem();
-      }
-      this.nested = this.checkForNestedItems();
-      const treeItems = this.getVisibleNodes();
-      treeItems.forEach((node) => {
-        if (treeItem_definition.isTreeItemElement(node)) {
-          node.nested = this.nested;
-        }
-      });
-    };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = (el) => {
-      return treeItem_definition.isTreeItemElement(el);
-    };
-    this.isSelectedElement = (el) => {
-      return el.selected;
-    };
-  }
-  slottedTreeItemsChanged() {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", "0");
-    fastElement.Updates.enqueue(() => {
-      this.setItems();
-    });
-  }
-  /**
-   * Handles click events bubbling up
-   *
-   *  @internal
-   */
-  handleClick(e) {
-    if (!e.defaultPrevented) {
-      if (!(e.target instanceof Element) || !treeItem_definition.isTreeItemElement(e.target)) {
-        return true;
-      }
-      const item = e.target;
-      if (!item.disabled) {
-        item.selected = !item.selected;
-      }
-      return;
-    }
-  }
-  /**
-   * Move focus to a tree item based on its offset from the provided item
-   */
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
-    if (visibleNodes) {
-      const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-      if (fastWebUtilities.isHTMLElement(focusItem)) {
-        treeItem_definition.TreeItem.focusItem(focusItem);
-      }
-    }
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  getValidFocusableItem() {
-    const treeItems = this.getVisibleNodes();
-    let focusIndex = treeItems.findIndex(this.isSelectedElement);
-    if (focusIndex === -1) {
-      focusIndex = treeItems.findIndex(this.isFocusableElement);
-    }
-    if (focusIndex !== -1) {
-      return treeItems[focusIndex];
-    }
-    return null;
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  checkForNestedItems() {
-    return this.slottedTreeItems.some((node) => {
-      return treeItem_definition.isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
-    });
-  }
-  getVisibleNodes() {
-    return getDisplayedNodes(this, "[data-vvd-component='tree-item']");
-  }
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.attr({ attribute: "render-collapsed-nodes" })
-], TreeView.prototype, "renderCollapsedNodes");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.observable
-], TreeView.prototype, "currentSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  fastElement.observable
-], TreeView.prototype, "slottedTreeItems");
-
-const getClasses = (_) => fastWebUtilities.classNames("control");
-const TreeViewTemplate = fastElement.html` <template
-	${fastElement.ref("treeView")}
-	${hostSemantics.applyHostSemantics({
-  role: "tree"
-})}
-	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
-	@focusin="${(x, c) => x.handleFocus(c.event)}"
-	@focusout="${(x, c) => x.handleBlur(c.event)}"
-	@click="${(x, c) => x.handleClick(c.event)}"
-	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
->
-	<div class="${getClasses}">
-		<slot ${fastElement.slotted("slottedTreeItems")}></slot>
-	</div>
-</template>`;
-
-const treeViewDefinition = vividElement.defineVividComponent(
-  "tree-view",
-  TreeView,
-  TreeViewTemplate,
-  [treeItem_definition.treeItemDefinition],
-  {
-    styles
-  }
-);
-const registerTreeView = vividElement.createRegisterFunction(treeViewDefinition);
-
-exports.VwcTreeViewElement = TreeView;
-exports.registerTreeView = registerTreeView;
-exports.treeViewDefinition = treeViewDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition74.cjs");
+exports.VwcTreeViewElement = require_definition$1.TreeView;
+exports.registerTreeView = require_definition$1.registerTreeView;
+exports.treeViewDefinition = require_definition$1.treeViewDefinition;

package/tree-view/definition.js

@@ -1,296 +1,3 @@
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { T as TreeItem, i as isTreeItemElement, t as treeItemDefinition } from '../unbundled/definition4.js';
-import { Updates, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
-import { keyEnter, keyArrowUp, keyArrowDown, keyArrowRight, keyArrowLeft, keyEnd, keyHome, isHTMLElement, classNames } from '@microsoft/fast-web-utilities';
-import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
-
-const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-function getDisplayedNodes(rootNode, selector) {
-  if (isHTMLElement(rootNode)) {
-    const nodes = Array.from(
-      rootNode.querySelectorAll(selector)
-    );
-    const visibleNodes = nodes.filter((node) => {
-      if (node.parentElement instanceof TreeItem) {
-        if (node.parentElement.expanded) return true;
-      } else {
-        return true;
-      }
-      return false;
-    });
-    return visibleNodes;
-  }
-  return [];
-}
-class TreeView extends HostSemantics(VividElement) {
-  constructor() {
-    super(...arguments);
-    /**
-     * The tree item that is designated to be in the tab queue.
-     *
-     * @internal
-     */
-    this.currentFocused = null;
-    /**
-     * Handle focus events
-     *
-     * @internal
-     */
-    this.handleFocus = (e) => {
-      if (this.slottedTreeItems.length > 0) {
-        if (e.target === this) {
-          if (this.currentFocused !== null) {
-            TreeItem.focusItem(this.currentFocused);
-          }
-          return;
-        }
-        if (this.contains(e.target)) {
-          this.setAttribute("tabindex", "-1");
-          this.currentFocused = e.target;
-        }
-      }
-    };
-    /**
-     * Handle blur events
-     *
-     * @internal
-     */
-    this.handleBlur = (e) => {
-      if (e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget))) {
-        this.setAttribute("tabindex", "0");
-      }
-    };
-    /**
-     * KeyDown handler
-     *
-     *  @internal
-     */
-    this.handleKeyDown = (e) => {
-      if (this.slottedTreeItems.length < 1) {
-        return true;
-      }
-      if (!e.defaultPrevented) {
-        const treeItems = this.getVisibleNodes();
-        switch (e.key) {
-          case keyHome: {
-            if (treeItems.length) {
-              TreeItem.focusItem(treeItems[0]);
-            }
-            return;
-          }
-          case keyEnd: {
-            if (treeItems.length) {
-              TreeItem.focusItem(treeItems[treeItems.length - 1]);
-            }
-            return;
-          }
-          case keyArrowLeft: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof TreeItem && item.childItemLength() > 0 && item.expanded) {
-                item.expanded = false;
-              } else if (item instanceof TreeItem && item.parentElement instanceof TreeItem) {
-                TreeItem.focusItem(item.parentElement);
-              }
-            }
-            return false;
-          }
-          case keyArrowRight: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              const item = e.target;
-              if (item instanceof TreeItem && item.childItemLength() > 0 && !item.expanded) {
-                item.expanded = true;
-              } else if (item instanceof TreeItem && item.childItemLength() > 0) {
-                this.focusNextNode(1, e.target);
-              }
-            }
-            return;
-          }
-          case keyArrowDown: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(1, e.target);
-            }
-            return;
-          }
-          case keyArrowUp: {
-            if (e.target && this.isFocusableElement(e.target)) {
-              this.focusNextNode(-1, e.target);
-            }
-            return;
-          }
-          case keyEnter:
-            this.handleClick(e);
-            return;
-        }
-      }
-      return true;
-    };
-    /**
-     * Handles the selected-changed events bubbling up
-     * from child tree items
-     *
-     *  @internal
-     */
-    this.handleSelectedChange = (e) => {
-      if (!e.defaultPrevented) {
-        if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-          return true;
-        }
-        const item = e.target;
-        if (item.selected) {
-          if (this.currentSelected && this.currentSelected !== item) {
-            this.currentSelected.selected = false;
-          }
-          this.currentSelected = item;
-        } else if (!item.selected && this.currentSelected === item) {
-          this.currentSelected = null;
-        }
-        return;
-      }
-    };
-    /**
-     * Updates the tree view when slottedTreeItems changes
-     */
-    this.setItems = () => {
-      const selectedItem = this.treeView.querySelector("[selected]");
-      this.currentSelected = selectedItem;
-      if (this.currentFocused === null || !this.contains(this.currentFocused)) {
-        this.currentFocused = this.getValidFocusableItem();
-      }
-      this.nested = this.checkForNestedItems();
-      const treeItems = this.getVisibleNodes();
-      treeItems.forEach((node) => {
-        if (isTreeItemElement(node)) {
-          node.nested = this.nested;
-        }
-      });
-    };
-    /**
-     * check if the item is focusable
-     */
-    this.isFocusableElement = (el) => {
-      return isTreeItemElement(el);
-    };
-    this.isSelectedElement = (el) => {
-      return el.selected;
-    };
-  }
-  slottedTreeItemsChanged() {
-    if (this.$fastController.isConnected) {
-      this.setItems();
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("tabindex", "0");
-    Updates.enqueue(() => {
-      this.setItems();
-    });
-  }
-  /**
-   * Handles click events bubbling up
-   *
-   *  @internal
-   */
-  handleClick(e) {
-    if (!e.defaultPrevented) {
-      if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
-        return true;
-      }
-      const item = e.target;
-      if (!item.disabled) {
-        item.selected = !item.selected;
-      }
-      return;
-    }
-  }
-  /**
-   * Move focus to a tree item based on its offset from the provided item
-   */
-  focusNextNode(delta, item) {
-    const visibleNodes = this.getVisibleNodes();
-    if (visibleNodes) {
-      const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-      if (isHTMLElement(focusItem)) {
-        TreeItem.focusItem(focusItem);
-      }
-    }
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  getValidFocusableItem() {
-    const treeItems = this.getVisibleNodes();
-    let focusIndex = treeItems.findIndex(this.isSelectedElement);
-    if (focusIndex === -1) {
-      focusIndex = treeItems.findIndex(this.isFocusableElement);
-    }
-    if (focusIndex !== -1) {
-      return treeItems[focusIndex];
-    }
-    return null;
-  }
-  /**
-   * checks if there are any nested tree items
-   */
-  checkForNestedItems() {
-    return this.slottedTreeItems.some((node) => {
-      return isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
-    });
-  }
-  getVisibleNodes() {
-    return getDisplayedNodes(this, "[data-vvd-component='tree-item']");
-  }
-}
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr({ attribute: "render-collapsed-nodes" })
-], TreeView.prototype, "renderCollapsedNodes");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], TreeView.prototype, "currentSelected");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  observable
-], TreeView.prototype, "slottedTreeItems");
-
-const getClasses = (_) => classNames("control");
-const TreeViewTemplate = html` <template
-	${ref("treeView")}
-	${applyHostSemantics({
-  role: "tree"
-})}
-	@keydown="${(x, c) => x.handleKeyDown(c.event)}"
-	@focusin="${(x, c) => x.handleFocus(c.event)}"
-	@focusout="${(x, c) => x.handleBlur(c.event)}"
-	@click="${(x, c) => x.handleClick(c.event)}"
-	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
->
-	<div class="${getClasses}">
-		<slot ${slotted("slottedTreeItems")}></slot>
-	</div>
-</template>`;
-
-const treeViewDefinition = defineVividComponent(
-  "tree-view",
-  TreeView,
-  TreeViewTemplate,
-  [treeItemDefinition],
-  {
-    styles
-  }
-);
-const registerTreeView = createRegisterFunction(treeViewDefinition);
-
+import "../unbundled/definition2.js";
+import { n as treeViewDefinition, r as TreeView, t as registerTreeView } from "../unbundled/definition74.js";
 export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };

package/tree-view/index.cjs

@@ -1,13 +1,13 @@
-"use strict";const l=require("../bundled/vivid-element.cjs"),n=require("../bundled/definition22.cjs"),m=require("../bundled/host-semantics.cjs"),c=require("../bundled/key-codes.cjs"),h=require("../bundled/dom.cjs"),f=require("../bundled/ref.cjs"),g=require("../bundled/slotted.cjs"),I=require("../bundled/class-names.cjs"),p=".control{position:relative;display:flex;flex-direction:column;gap:4px}";var b=Object.defineProperty,d=(r,e,t,s)=>{for(var i=void 0,a=r.length-1,u;a>=0;a--)(u=r[a])&&(i=u(e,t,i)||i);return i&&b(e,t,i),i};function T(r,e){return h.isHTMLElement(r)?Array.from(r.querySelectorAll(e)).filter(i=>{if(i.parentElement instanceof n.TreeItem){if(i.parentElement.expanded)return!0}else return!0;return!1}):[]}class o extends m.HostSemantics(l.VividElement){constructor(){super(...arguments),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&n.TreeItem.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){const t=this.getVisibleNodes();switch(e.key){case c.keyHome:{t.length&&n.TreeItem.focusItem(t[0]);return}case c.keyEnd:{t.length&&n.TreeItem.focusItem(t[t.length-1]);return}case c.keyArrowLeft:{if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&s.expanded?s.expanded=!1:s instanceof n.TreeItem&&s.parentElement instanceof n.TreeItem&&n.TreeItem.focusItem(s.parentElement)}return!1}case c.keyArrowRight:{if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&!s.expanded?s.expanded=!0:s instanceof n.TreeItem&&s.childItemLength()>0&&this.focusNextNode(1,e.target)}return}case c.keyArrowDown:{e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return}case c.keyArrowUp:{e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return}case c.keyEnter:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{const e=this.treeView.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(s=>{n.isTreeItemElement(s)&&(s.nested=this.nested)})},this.isFocusableElement=e=>n.isTreeItemElement(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),l.Updates.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){const s=this.getVisibleNodes();if(s){const i=s[s.indexOf(t)+e];h.isHTMLElement(i)&&n.TreeItem.focusItem(i)}}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t!==-1?e[t]:null}checkForNestedItems(){return this.slottedTreeItems.some(e=>n.isTreeItemElement(e)&&e.querySelector("[data-vvd-component='tree-item']"))}getVisibleNodes(){return T(this,"[data-vvd-component='tree-item']")}}d([l.attr({attribute:"render-collapsed-nodes"})],o.prototype,"renderCollapsedNodes");d([l.observable],o.prototype,"currentSelected");d([l.observable],o.prototype,"slottedTreeItems");const v=r=>I.classNames("control"),E=l.html` <template
-	${f.ref("treeView")}
-	${m.applyHostSemantics({role:"tree"})}
-	@keydown="${(r,e)=>r.handleKeyDown(e.event)}"
-	@focusin="${(r,e)=>r.handleFocus(e.event)}"
-	@focusout="${(r,e)=>r.handleBlur(e.event)}"
-	@click="${(r,e)=>r.handleClick(e.event)}"
-	@selected-change="${(r,e)=>r.handleSelectedChange(e.event)}"
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/slotted.cjs`);require(`../bundled/definition2.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/dom.cjs`),o=require(`../bundled/key-codes.cjs`),s=require(`../bundled/host-semantics.cjs`),c=require(`../bundled/definition22.cjs`);var l=`.control{flex-direction:column;gap:4px;display:flex;position:relative}`;function u(e,t){return a.t(e)?Array.from(e.querySelectorAll(t)).filter(e=>{if(e.parentElement instanceof c.r){if(e.parentElement.expanded)return!0}else return!0;return!1}):[]}var d=class extends s.t(e.t){constructor(...e){super(...e),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&c.r.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute(`tabindex`,`-1`),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabindex`,`0`)},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){let t=this.getVisibleNodes();switch(e.key){case o.s:t.length&&c.r.focusItem(t[0]);return;case`End`:t.length&&c.r.focusItem(t[t.length-1]);return;case o.n:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof c.r&&t.childItemLength()>0&&t.expanded?t.expanded=!1:t instanceof c.r&&t.parentElement instanceof c.r&&c.r.focusItem(t.parentElement)}return!1;case o.r:if(e.target&&this.isFocusableElement(e.target)){let t=e.target;t instanceof c.r&&t.childItemLength()>0&&!t.expanded?t.expanded=!0:t instanceof c.r&&t.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case o.t:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case o.i:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case o.a:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!c.i(e.target))return!0;let t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{this.currentSelected=this.treeView.querySelector(`[selected]`),(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(e=>{c.i(e)&&(e.nested=this.nested)})},this.isFocusableElement=e=>c.i(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute(`tabindex`,`0`),e.O.enqueue(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!c.i(e.target))return!0;let t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){let n=this.getVisibleNodes();if(n){let r=n[n.indexOf(t)+e];a.t(r)&&c.r.focusItem(r)}}getValidFocusableItem(){let e=this.getVisibleNodes(),t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t===-1?null:e[t]}checkForNestedItems(){return this.slottedTreeItems.some(e=>c.i(e)&&e.querySelector(`[data-vvd-component='tree-item']`))}getVisibleNodes(){return u(this,`[data-vvd-component='tree-item']`)}};r.t([e.l({attribute:`render-collapsed-nodes`})],d.prototype,`renderCollapsedNodes`,void 0),r.t([e.T],d.prototype,`currentSelected`,void 0),r.t([e.T],d.prototype,`slottedTreeItems`,void 0);var f=e.d` <template
+	${t.t(`treeView`)}
+	${s.n({role:`tree`})}
+	@keydown="${(e,t)=>e.handleKeyDown(t.event)}"
+	@focusin="${(e,t)=>e.handleFocus(t.event)}"
+	@focusout="${(e,t)=>e.handleBlur(t.event)}"
+	@click="${(e,t)=>e.handleClick(t.event)}"
+	@selected-change="${(e,t)=>e.handleSelectedChange(t.event)}"
 >
-	<div class="${v}">
-		<slot ${g.slotted("slottedTreeItems")}></slot>
+	<div class="${e=>i.t(`control`)}">
+		<slot ${n.t(`slottedTreeItems`)}></slot>
 	</div>
-</template>`,y=l.defineVividComponent("tree-view",o,E,[n.treeItemDefinition],{styles:p}),N=l.createRegisterFunction(y);N();
+</template>`,p=e.o(`tree-view`,d,f,[c.n],{styles:l});e.s(p)();