import{x as m,i as h}from"./iframe-CMPv_g6-.js";import{t as u}from"./custom-element-UsVr97OX.js";import{C as b}from"./ComponentStatesMixin-sjcdg7YH.js";import{E as y,R as x}from"./ReadyMixin-BNk5yZSB.js";import"./preload-helper-PPVm8Dsz.js";function n(e,d){let r=document.getElementById("aria-live-container");r||(r=document.createElement("div"),r.setAttribute("id","aria-live-container"),document.body.appendChild(r));const t=document.createElement("div"),i="speak-"+Date.now();t.setAttribute("id",i),t.setAttribute("aria-atomic","true"),t.setAttribute("aria-live","polite"),t.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;",r.appendChild(t),setTimeout(()=>{const o=document.getElementById(i);o&&(o.innerHTML=e)},150),window.BRIGHTSPOT?.ariaDebug===!0&&console.log(`ARIA Announced: "${e}"`),setTimeout(()=>{document.getElementById(i)?.remove()},2e3)}const g=e=>{class d extends e{get copiedStateKey(){return`${this.tagName.toLowerCase()}-copied`}async copy(t,i=3e3){if(!t)return;const o=this.copiedStateKey;if(!this.states.has(o)){try{if(!navigator.clipboard||typeof navigator.clipboard.writeText!="function")throw new Error("Clipboard API is not available in this environment.");await navigator.clipboard.writeText(t)}catch(a){console.error("Failed to copy text to clipboard:",a),n("Copy failed");return}this.states.add(o),this.requestUpdate(),this.emit(o),n("Copied!"),setTimeout(()=>{this.states.delete(o),this.requestUpdate()},i)}}}return d};var c=Object.freeze,f=Object.defineProperty,v=Object.getOwnPropertyDescriptor,C=(e,d,r,t)=>{for(var i=t>1?void 0:t?v(d,r):d,o=e.length-1,a;o>=0;o--)(a=e[o])&&(i=a(i)||i);return i},E=(e,d)=>c(f(e,"raw",{value:c(e.slice())})),l;const I={title:"Mixins/Clipboard",tags:["autodocs"],parameters:{docs:{description:{component:`
\`ClipboardMixin\` adds clipboard copy functionality via a <code>copy()</code> method that writes text to the system clipboard.

It adds a temporary state and emits an event, which web components can use for visual feedback.

<h3>What ClipboardMixin Provides</h3>
<ul>
    <li><strong>copy(text, timeout?):</strong> Async method to copy text to clipboard using native Clipboard API (<code>navigator.clipboard.writeText</code>)</li>
    <li>Automatic <code>&lt;consumer-tag&gt;-copied</code> state management (3 seconds default) — resolved from the host's <code>tagName</code> at runtime</li>
    <li>Emits <code>&lt;consumer-tag&gt;-copied</code> event on successful copy (e.g., <code>btu-copy-to-clipboard-copied</code> from <code>&lt;btu-copy-to-clipboard&gt;</code>)</li>
</ul>

<h3>Method API</h3>

<table>
  <thead>
    <tr>
      <th>Method</th>
      <th>Parameters</th>
      <th>Return Type</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>copy</code></td>
      <td><code>text: string</code><br/><code>timeout?: number</code></td>
      <td><code>Promise&lt;void&gt;</code></td>
      <td>Copies text to clipboard. Timeout specifies how long to keep success state (default: 3000ms)</td>
    </tr>
  </tbody>
</table>

<h3>Events</h3>

<table>
  <thead>
    <tr>
      <th>Event Name</th>
      <th>Type</th>
      <th>Description</th>
      <th>Detail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>&lt;consumer-tag&gt;-copied</code></td>
      <td>CustomEvent</td>
      <td>Fired when text is successfully copied to clipboard. Name resolves to the host element's tagName at runtime (e.g. <code>btu-copy-to-clipboard-copied</code>, <code>my-copy-button-copied</code>).</td>
      <td><code>{}</code></td>
    </tr>
  </tbody>
</table>

<h3>Dependencies</h3>

<p><strong>ClipboardMixin requires the following mixins to function properly:</strong></p>
<ul>
  <li><strong><a href="?path=/docs/mixins-component-states--docs">ComponentStatesMixin</a>:</strong> For managing the <code>&lt;consumer-tag&gt;-copied</code> state</li>
  <li><strong><a href="?path=/docs/mixins-events--docs">EventEmitterMixin</a>:</strong> For emitting the <code>&lt;consumer-tag&gt;-copied</code> event</li>
</ul>

<h3>Mixin Composition</h3>

<p>ClipboardMixin must be composed with ComponentStatesMixin and EventEmitterMixin. The recommended order is:</p>

<p>✅ <strong>Correct composition order:</strong></p>
\`\`\`
ClipboardMixin(
  ComponentStatesMixin(
    EventEmitterMixin(
      ReadyMixin(LitElement)
    )
  )
)
\`\`\`

<p>❌ <strong>Incorrect - missing required mixins:</strong></p>
\`\`\`
ClipboardMixin(LitElement) // Error: ComponentStatesMixin required
\`\`\`

<h3>TypeScript Usage</h3>

\`\`\`typescript
import { ClipboardMixin } from './ClipboardMixin'
import { ComponentStatesMixin } from './ComponentStatesMixin'
import { EventEmitterMixin } from './EventEmitterMixin'
import { ReadyMixin } from './ReadyMixin'
import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'

@customElement('my-copy-button')
class MyCopyButton extends ClipboardMixin(
  ComponentStatesMixin(
    EventEmitterMixin(
      ReadyMixin(LitElement)
    )
  )
) {
  async handleClick() {
    await this.copy('Hello, World!', 5000)
  }

  render() {
    const isCopied = this.states.has('my-copy-button-copied')

    return html\`
      <button
        class="btu-button \${isCopied ? 'btu-button-success' : 'btu-button-primary'} btu-button-sm"
        @click=\${this.handleClick}
      >
        \${isCopied ? 'Copied!' : 'Copy Text'}
      </button>
    \`
  }
}
\`\`\`

<h3>CSS Styling</h3>

<p>Style the copied state using the <code>:state()</code> pseudo-class. The state name matches the host element's tagName with a <code>-copied</code> suffix:</p>

\`\`\`css
my-copy-button:state(my-copy-button-copied) {
  background-color: #10b981;
  color: white;
}

my-copy-button:state(my-copy-button-copied)::after {
  content: ' ✓';
}
\`\`\`

<h3>Behavior Notes</h3>
<ul>
  <li>The <code>copy()</code> method is debounced - duplicate calls while in success state are ignored</li>
  <li>State automatically clears after the specified timeout (default: 3 seconds)</li>
  <li>Empty strings are ignored (no-op)</li>
</ul>
        `}}}};let p=class extends g(b(y(x(h)))){constructor(){super(...arguments),this.textToCopy="Hello from ClipboardMixin!"}async handleCopy(){await this.copy(this.textToCopy)}render(){const e=this.states.has("clipboard-demo-copied");return m`
      <div style="display: flex; align-items: center; gap: 1rem;">
        <input
          type="text"
          .value=${this.textToCopy}
          @input=${d=>{this.textToCopy=d.target.value}}
          style="flex: 1; border-radius: 4px; border: 1px solid #d1d5db; padding: 0.5rem 0.75rem;"
          placeholder="Enter text to copy"
        />
        <button
          @click=${this.handleCopy}
          class="${e?"btu-button-success":"btu-button-primary"} btu-button btu-button-sm"
        >
          ${e?"✓ Copied!":"Copy"}
        </button>
      </div>
    `}};p=C([u("clipboard-demo")],p);const s={render:()=>m(l||(l=E([`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
        <p class="mb-4 text-sm text-gray-600">
          Edit the text and click "Copy" to copy it to your clipboard. The button will show feedback for 3 seconds.
          Check the browser console to see the emitted event.
        </p>
      </div>

      <clipboard-demo id="clipboard-demo"></clipboard-demo>

      <div class="rounded bg-gray-100 p-4">
        <p class="mb-2 text-sm font-semibold text-gray-700">Try pasting here to verify:</p>
        <textarea
          class="w-full rounded border border-gray-300 p-2"
          rows="2"
          placeholder="Paste copied text here (Cmd+V or Ctrl+V)"
        ></textarea>
      </div>

      <script>
        ;(() => {
          const demo = document.getElementById('clipboard-demo')
          if (!demo) return

          // Listen for copy event (name matches the demo element's tagName + -copied)
          demo.addEventListener('clipboard-demo-copied', e => {
            console.log('📋 clipboard-demo-copied event fired', e.detail)
            console.log('✅ Text successfully copied to clipboard')
            console.log(
              '🎯 State check: demo.states.has("clipboard-demo-copied") =',
              demo.states.has('clipboard-demo-copied'),
            )
          })
        })()
      <\/script>
    </div>`])))};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  render: () => html\`<div class="flex flex-col gap-4">
      <div>
        <h4 class="mb-2 font-bold">Interactive Clipboard Demo</h4>
        <p class="mb-4 text-sm text-gray-600">
          Edit the text and click "Copy" to copy it to your clipboard. The button will show feedback for 3 seconds.
          Check the browser console to see the emitted event.
        </p>
      </div>

      <clipboard-demo id="clipboard-demo"></clipboard-demo>

      <div class="rounded bg-gray-100 p-4">
        <p class="mb-2 text-sm font-semibold text-gray-700">Try pasting here to verify:</p>
        <textarea
          class="w-full rounded border border-gray-300 p-2"
          rows="2"
          placeholder="Paste copied text here (Cmd+V or Ctrl+V)"
        ></textarea>
      </div>

      <script>
        ;(() => {
          const demo = document.getElementById('clipboard-demo')
          if (!demo) return

          // Listen for copy event (name matches the demo element's tagName + -copied)
          demo.addEventListener('clipboard-demo-copied', e => {
            console.log('📋 clipboard-demo-copied event fired', e.detail)
            console.log('✅ Text successfully copied to clipboard')
            console.log(
              '🎯 State check: demo.states.has("clipboard-demo-copied") =',
              demo.states.has('clipboard-demo-copied'),
            )
          })
        })()
      <\/script>
    </div>\`
}`,...s.parameters?.docs?.source}}};const D=["ClipboardMixinDemo"];export{s as ClipboardMixinDemo,D as __namedExportsOrder,I as default};
