
####################
HoopsTreeItemElement
####################

.. js:class:: ui.treeItem.HoopsTreeItemElement

   A custom element representing a tree item in a hierarchical structure. It supports expansion and selection states, and can contain child elements.
   
   This component emits custom events for expansion (hoops-tree-item-expand) and selection (hoops-tree-item-select) changes, allowing parent components to respond to user interactions such as expanding/collapsing items and selecting items.
   
   It is a very simple component that does not hold much logic. It is only responsible for rendering the item label, icon, and children, and handling user interactions (expansion & selection). it is meant to be used as a building block for trees without having to figure out how it works internally.
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~ui.treeItem.HoopsTreeItemElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~ui.treeItem.HoopsTreeItemElement.expanded`
   * :js:data:`~ui.treeItem.HoopsTreeItemElement.hidden`
   * :js:data:`~ui.treeItem.HoopsTreeItemElement.leaf`
   * :js:data:`~ui.treeItem.HoopsTreeItemElement.noAnim`
   * :js:data:`~ui.treeItem.HoopsTreeItemElement.selected`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~ui.treeItem.HoopsTreeItemElement.willUpdate`
   
   



.. rst-class:: kind-group kind-constructors

.. rubric:: Constructors
   :class: kind-group-title


.. js:method:: ui.treeItem.HoopsTreeItemElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsTreeItemElement(): :js:class:`HoopsTreeItemElement <ui.treeItem.HoopsTreeItemElement>`
      
      **Returns**\ : :js:class:`HoopsTreeItemElement <ui.treeItem.HoopsTreeItemElement>`
      



.. rst-class:: kind-group kind-properties

.. rubric:: Properties
   :class: kind-group-title


.. js:data:: ui.treeItem.HoopsTreeItemElement.expanded

      .. rst-class:: sig-pretty-signature
      
         | expanded: *boolean*
      



.. js:data:: ui.treeItem.HoopsTreeItemElement.hidden

      .. rst-class:: sig-pretty-signature
      
         | hidden: *boolean*
      
      `MDN Reference <https://developer.mozilla.org/docs/Web/API/HTMLElement/hidden>`__
      



.. js:data:: ui.treeItem.HoopsTreeItemElement.leaf

      .. rst-class:: sig-pretty-signature
      
         | leaf: *boolean*
      



.. js:data:: ui.treeItem.HoopsTreeItemElement.noAnim

      .. rst-class:: sig-pretty-signature
      
         | noAnim: *boolean*
      



.. js:data:: ui.treeItem.HoopsTreeItemElement.selected

      .. rst-class:: sig-pretty-signature
      
         | selected: *boolean*
      



.. rst-class:: kind-group kind-methods

.. rubric:: Methods
   :class: kind-group-title


.. js:method:: ui.treeItem.HoopsTreeItemElement.willUpdate

      .. rst-class:: sig-pretty-signature
      
         | willUpdate(**_**\ : (*PropertyValueMap* | *Map*\ )): *void*
      
      Invoked before ``update()`` to compute values needed during the update.
      
      Implement ``willUpdate`` to compute property values that depend on other properties and are used in the rest of the update process.
      
      .. code-block:: ts
      
         willUpdate(changedProperties) {
           // only need to check changed properties for an expensive computation.
           if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
             this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
           }
         }
         
         render() {
           return html`SHA: ${this.sha}`;
         }
      
      **Parameters**
      
      
         **\_**\ : (*PropertyValueMap* \| *Map*\ )
      
      
      **Returns**\ : *void*
      




