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


##########################
HoopsCuttingSectionElement
##########################

.. js:class:: wvc.HoopsCuttingSectionElement

   A comprehensive cutting section component that manages multiple cutting planes as a group.
   
   This component provides a complete interface for a cutting section, which is a collection of cutting planes that work together. It includes:
   
   
   - Collapsible accordion display with section labeling
   - Integrated toolbar for section-wide operations (add planes, visibility, clear, activate)
   - Dynamic list of cutting plane components within the section
   - Automatic expansion when new planes are added
   - Real-time synchronization with cutting service events
   
   The component uses an accordion layout where the header shows the section name and toolbar, and the content area contains a dynamic list of cutting plane components. The section automatically expands when planes are added to provide immediate visual feedback.
   
   .. rubric:: Examples
   
   
   .. code-block:: html
   
      <hoops-cutting-section sectionIndex="0" label="Primary Section"></hoops-cutting-section>
      
      <script>
        const section = document.getElementsByTagName('hoops-cutting-section')[0];
        section.service = cuttingService;
      </script>
   
   .. rubric:: Custom Element
   
   
   ``hoops-cutting-section``
   
   .. rubric:: Attributes
   
   
   **sectionIndex**
   
   
      The index of the cutting section to display
   
   
   **label**
   
   
      The display label shown in the accordion header
   
   
   .. rubric:: Slots
   
   
   **header**
   
   
      Slot for the section header content displaying the section label
   
   
   **toolbar**
   
   
      Slot for the section toolbar with operation buttons (add, visibility, clear, activate)
   
   
   **content**
   
   
      Slot for the cutting plane components within this section
   
   
   .. rubric:: CSS Properties
   
   
   **--hoops-neutral-background-20**
   
   
      Background color for the content area
   
   
   .. rubric:: Since
   
   
   ``2025.8.0``
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsCuttingSectionElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsCuttingSectionElement.label`
   * :js:data:`~wvc.HoopsCuttingSectionElement.sectionIndex`
   * :js:data:`~wvc.HoopsCuttingSectionElement.service`
   
   



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

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


.. js:method:: wvc.HoopsCuttingSectionElement.constructor

      .. rst-class:: sig-pretty-signature
      
         | HoopsCuttingSectionElement(): :js:class:`HoopsCuttingSectionElement <wvc.HoopsCuttingSectionElement>`
      
      Constructs a new HoopsCuttingSectionElement.
      
      Initializes the component with default property values and binds event handler methods for proper context preservation.
      
      **Returns**\ : :js:class:`HoopsCuttingSectionElement <wvc.HoopsCuttingSectionElement>`
      



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

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


.. js:data:: wvc.HoopsCuttingSectionElement.label

      .. rst-class:: sig-pretty-signature
      
         | label: *string*
      
      The display label for the cutting section shown in the accordion header. Provides a human-readable name for the section to help users identify different sections in multi-section scenarios.
      
      .. rubric:: Default
      
      
      `````ts
      ""
      `````
      



.. js:data:: wvc.HoopsCuttingSectionElement.sectionIndex

      .. rst-class:: sig-pretty-signature
      
         | sectionIndex: *number*
      
      The index of the cutting section to display and manage. Used to identify which section's data and operations this component handles.
      
      .. rubric:: Default
      
      
      `````ts
      0
      `````
      



.. js:data:: wvc.HoopsCuttingSectionElement.service

      .. rst-class:: clio-flags
      
         :clio-optional:`optional`
      
      .. rst-class:: sig-pretty-signature
      
         | service: :js:class:`ICuttingService <wvc.ICuttingService>`
      
      The cutting service instance that provides cutting section operations. All section and plane operations are performed through this service interface. When undefined, the component renders nothing.
      
      .. rubric:: Default
      
      
      `````ts
      undefined
      `````
      




