.. role:: clio-optional
   :class: clio-flag clio-flag-optional


################################
HoopsToolsMeasurementItemElement
################################

.. js:class:: wvc.HoopsToolsMeasurementItemElement

   Displays a single measurement item with its value, icon, and remove functionality.
   
   This component renders measurement data in a compact, user-friendly format within the measurement list.
   
   Features:
   
   
   - Automatic icon selection based on measurement type
   - Formatted measurement value display
   - Interactive remove button with confirmation
   - Tooltip with full measurement details
   - Error handling for invalid or corrupted measurement data
   - Support for multiple measurement types (Point-to-Point, Face-to-Face, Angle, Edge Length)
   
   The component uses a configuration map to determine the appropriate icon and labels for each measurement type, making it easy to extend with new measurement types.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-tools-measurement-item></hoops-tools-measurement-item>
      
      <script>
        const item = document.getElementsByTagName('hoops-tools-measurement-item')[0];
        item.measurement = measurementObject;
        item.addEventListener('hoops-measurement-remove-command', (event) => {
          console.log('Remove measurement:', event.detail.measurement);
        });
      </script>
   
   .. rubric:: Custom Element
   
   
   ``hoops-tools-measurement-item``
   
   .. rubric:: Attributes
   
   
   **measurement**
   
   
      The measurement object to display
   
   
   .. rubric:: Events
   
   
   **hoops-measurement-remove-command**
   
   
      Dispatched when the remove button is clicked
   
   
   .. rubric:: Since
   
   
   ``2025.7.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsToolsMeasurementItemElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsToolsMeasurementItemElement.measurement`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~wvc.HoopsToolsMeasurementItemElement.dispatchRemoval`
   * :js:meth:`~wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupIcon`
   * :js:meth:`~wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupLabel`
   * :js:meth:`~wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupValue`
   
   



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

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


.. js:method:: wvc.HoopsToolsMeasurementItemElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsToolsMeasurementItemElement(): :js:class:`HoopsToolsMeasurementItemElement <wvc.HoopsToolsMeasurementItemElement>`
      
      **Returns**\ : :js:class:`HoopsToolsMeasurementItemElement <wvc.HoopsToolsMeasurementItemElement>`
      



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

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


.. js:data:: wvc.HoopsToolsMeasurementItemElement.measurement

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | measurement: *MeasureMarkup*
      



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

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


.. js:method:: wvc.HoopsToolsMeasurementItemElement.dispatchRemoval

      .. rst-class:: sig-pretty-signature
      
         | dispatchRemoval(**measurement**\ : *MeasureMarkup*\ ): *void*
      
      **Parameters**
      
      
         **measurement**\ : *MeasureMarkup*
      
      
      **Returns**\ : *void*
      



.. js:method:: wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupIcon

      .. rst-class:: sig-pretty-signature
      
         | getMeasureMarkupIcon(**markup**\ : *MeasureMarkup*\ ): *TemplateResult*
      
      **Parameters**
      
      
         **markup**\ : *MeasureMarkup*
      
      
      **Returns**\ : *TemplateResult*
      



.. js:method:: wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupLabel

      .. rst-class:: sig-pretty-signature
      
         | getMeasureMarkupLabel(**markup**\ : *MeasureMarkup*\ ): *string*
      
      **Parameters**
      
      
         **markup**\ : *MeasureMarkup*
      
      
      **Returns**\ : *string*
      



.. js:method:: wvc.HoopsToolsMeasurementItemElement.getMeasureMarkupValue

      .. rst-class:: sig-pretty-signature
      
         | getMeasureMarkupValue(**markup**\ : *MeasureMarkup*\ ): *string*
      
      **Parameters**
      
      
         **markup**\ : *MeasureMarkup*
      
      
      **Returns**\ : *string*
      




