import{x as d}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";var n=Object.freeze,r=Object.defineProperty,s=(t,i)=>n(r(t,"raw",{value:n(t.slice())})),o;const l={title:"Mixins/Events",tags:["autodocs"],parameters:{docs:{subtitle:"Events inherited from EventEmitterMixin",description:{component:`
<h3>EventEmitterMixin Events</h3>

<p>All Brightspot UI components that extend EventEmitterMixin emit the following lifecycle events in addition to those inherited from LitElement. These events use CustomEvent and bubble through the DOM with <code>composed: true</code>, meaning they cross shadow DOM boundaries.</p>

<h4>Standard Lifecycle Events</h4>

<table>
  <thead>
    <tr>
      <th>Event Name</th>
      <th>Type</th>
      <th>Description</th>
      <th>Detail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>btu-element-connected</code></td>
      <td>CustomEvent</td>
      <td>Fired when element connects to DOM</td>
      <td><code>{}</code></td>
    </tr>
    <tr>
      <td><code>btu-element-disconnected</code></td>
      <td>CustomEvent</td>
      <td>Fired when element disconnects from DOM</td>
      <td><code>undefined</code></td>
    </tr>
    <tr>
      <td><code>btu-element-error</code></td>
      <td>CustomEvent&lt;{error: Error}&gt;</td>
      <td>Fired on connection error</td>
      <td><code>{ error: Error }</code></td>
    </tr>
  </tbody>
</table>

<h3>Event Configuration</h3>

<p>All events are dispatched with the following configuration:</p>
<ul>
  <li><strong>bubbles:</strong> <code>true</code> - Event propagates up the DOM tree</li>
  <li><strong>cancelable:</strong> <code>false</code> - Event cannot be cancelled</li>
  <li><strong>composed:</strong> <code>true</code> - Event crosses shadow DOM boundaries</li>
</ul>
        `}}}},e={render:()=>d(o||(o=s([`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Example Component with Events</h4>
        <btu-badge variant="info" size="md" id="event-demo">Event Demo</btu-badge>
      </div>
      <div>
        <p class="text-sm text-gray-600">
          Check your browser console to see events fired when this badge connects to the DOM.
        </p>
      </div>
      <script>
        ;(() => {
          const badge = document.getElementById('event-demo')
          if (badge) {
            badge.addEventListener('btu-element-connected', e => {
              console.log('✅ btu-element-connected', e.detail)
            })
            badge.addEventListener('btu-element-disconnected', () => {
              console.log('🔌 btu-element-disconnected')
            })
            badge.addEventListener('btu-element-error', e => {
              console.error('❌ btu-element-error', e.detail.error)
            })
          }
        })()
      <\/script>
    </div>`]))),parameters:{docs:{description:{story:"This example demonstrates the EventEmitterMixin events. Open your browser console to see the connection event fired when the badge element connects to the DOM."}}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`{
  render: () => html\`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Example Component with Events</h4>
        <btu-badge variant="info" size="md" id="event-demo">Event Demo</btu-badge>
      </div>
      <div>
        <p class="text-sm text-gray-600">
          Check your browser console to see events fired when this badge connects to the DOM.
        </p>
      </div>
      <script>
        ;(() => {
          const badge = document.getElementById('event-demo')
          if (badge) {
            badge.addEventListener('btu-element-connected', e => {
              console.log('✅ btu-element-connected', e.detail)
            })
            badge.addEventListener('btu-element-disconnected', () => {
              console.log('🔌 btu-element-disconnected')
            })
            badge.addEventListener('btu-element-error', e => {
              console.error('❌ btu-element-error', e.detail.error)
            })
          }
        })()
      <\/script>
    </div>\`,
  parameters: {
    docs: {
      description: {
        story: \`This example demonstrates the EventEmitterMixin events. Open your browser console to see the connection event fired when the badge element connects to the DOM.\`
      }
    }
  }
}`,...e.parameters?.docs?.source}}};const m=["EventEmitterMixin"];export{e as EventEmitterMixin,m as __namedExportsOrder,l as default};
