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

.. role:: clio-static
   :class: clio-flag clio-flag-static


########################
HoopsCuttingPlaneElement
########################

.. js:class:: wvc.HoopsCuttingPlaneElement

   A comprehensive cutting plane component that combines display, editing, and management capabilities.
   
   This component provides a complete interface for a single cutting plane, including:
   
   
   - Collapsible accordion display with plane identification
   - Integrated toolbar for quick actions (invert, visibility, remove)
   - Expandable editor for detailed property modification
   - Automatic service discovery and synchronization
   - Real-time updates when cutting plane properties change
   
   The component uses an accordion layout where the header shows the plane name and toolbar, and the content area contains the detailed editor. The editor visibility is controlled by the toolbar's customize button.
   
   
   Index
   =====
   
   .. rubric:: Constructors
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:func:`~wvc.HoopsCuttingPlaneElement.constructor`
   
   .. rubric:: Properties
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:data:`~wvc.HoopsCuttingPlaneElement.styles`
   * :js:data:`~wvc.HoopsCuttingPlaneElement.planeIndex`
   * :js:data:`~wvc.HoopsCuttingPlaneElement.sectionIndex`
   * :js:data:`~wvc.HoopsCuttingPlaneElement.service`
   
   .. rubric:: Methods
   
   
   .. rst-class:: api-xref-list
   
   
   * :js:meth:`~wvc.HoopsCuttingPlaneElement.disconnectedCallback`
   * :js:meth:`~wvc.HoopsCuttingPlaneElement.render`
   * :js:meth:`~wvc.HoopsCuttingPlaneElement.firstUpdated`
   
   



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

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


.. js:method:: wvc.HoopsCuttingPlaneElement.constructor

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



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

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


.. js:data:: wvc.HoopsCuttingPlaneElement.styles

      .. rst-class:: clio-flags
      
         :clio-static:`static`
      
      .. rst-class:: sig-pretty-signature
      
         | styles: *CSSResult*\ []
      
      Array of styles to apply to the element. The styles should be defined using the ? tag function, via constructible stylesheets, or imported from native CSS module scripts.
      
      Note on Content Security Policy:
      
      Element styles are implemented with ``<style>`` tags when the browser doesn't support adopted StyleSheets. To use such ``<style>`` tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or ``nonce-<base64-value>`` with ``<base64-value>`` replaced be a server-generated nonce.
      
      To provide a nonce to use on generated ``<style>`` elements, set ``window.litNonce`` to a server-generated nonce in your page's HTML, before loading application code:
      
      .. code-block:: html
      
         <script>
           // Generated and unique per request:
           window.litNonce = 'a1b2c3d4';
         </script>
      



.. js:data:: wvc.HoopsCuttingPlaneElement.planeIndex

      .. rst-class:: sig-pretty-signature
      
         | planeIndex: *number*
      
      The index of the cutting plane within the specified cutting section. Used to identify the specific plane to display and manage.
      



.. js:data:: wvc.HoopsCuttingPlaneElement.sectionIndex

      .. rst-class:: sig-pretty-signature
      
         | sectionIndex: *number*
      
      The index of the cutting section containing the target cutting plane. Used to identify which section contains the plane to display.
      



.. js:data:: wvc.HoopsCuttingPlaneElement.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 plane operations. When not provided, the component will attempt to auto-discover the service. If no service is available, the component renders nothing.
      



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

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


.. js:method:: wvc.HoopsCuttingPlaneElement.disconnectedCallback

      .. rst-class:: sig-pretty-signature
      
         | disconnectedCallback(): *void*
      
      Lifecycle method called when the element is removed from the DOM.
      
      Cleans up event listeners to prevent memory leaks when the component is no longer needed.
      
      **Returns**\ : *void*
      



.. js:method:: wvc.HoopsCuttingPlaneElement.render

      .. rst-class:: sig-pretty-signature
      
         | render(): (*TemplateResult* | Unhandled type TypeOf)
      
      Renders the cutting plane component.
      
      Creates an accordion-style interface with:
      
      
      - Header showing plane icon and index-based name ("Cutting Plane N")
      - Integrated toolbar in the accordion icon slot for quick actions
      - Collapsible content area containing the detailed editor
      - Automatic service discovery when no service is provided
      - Conditional rendering based on valid indices and service availability
      
      The accordion expansion state is controlled by the toolbar's customize button, allowing users to toggle between compact and detailed views.
      
      **Returns**\ : (*TemplateResult* \| Unhandled type TypeOf)
      
      
         TemplateResult containing the accordion interface, or nothing if invalid state
      
      



.. js:method:: wvc.HoopsCuttingPlaneElement.firstUpdated

      .. rst-class:: sig-pretty-signature
      
         | firstUpdated(**_changedProperties**\ : (*PropertyValueMap* | *Map*\ )): *void*
      
      Lifecycle method called after the first render.
      
      Sets up event listeners for cutting plane change events to keep the component synchronized with the state of its associated cutting plane.
      
      **Parameters**
      
      
         **_changedProperties**\ : (*PropertyValueMap* \| *Map*\ )
      
      
            Map of changed properties (not used)
      
      
      
      **Returns**\ : *void*
      




