import{g as s,x as i}from"./iframe-CMPv_g6-.js";import"./preload-helper-PPVm8Dsz.js";var r=Object.freeze,c=Object.defineProperty,p=(e,l)=>r(c(e,"raw",{value:r(l||e.slice())})),d;const{events:b,args:u,argTypes:a}=s("btu-copy-to-clipboard"),f={title:"Components/Copy to Clipboard",component:"btu-copy-to-clipboard",tags:["autodocs"],parameters:{docs:{subtitle:"btu-copy-to-clipboard",description:{component:`
A button component for copying text to the clipboard. The button becomes disabled and displays a success state for 3 seconds after copying.

<h3>When to use:</h3>
<ul>
  <li>To allow users to quickly copy text, URLs, or codes</li>
  <li>When providing API keys or tokens, which may be hidden</li>
  <li>For giving users access to text content that does not need to be displayed</li>
</ul>

<h3>Use Cases in the CMS:</h3>
<ul>
  <li>Saved Searches > more actions button > Copy Shareable Link</li>
  <li>Mirror Preview (accessed via profile dropdown)</li>
  <li>Admin > APIs >
    <ul>
      <li>Clients > \`.ApiKey-copy\`</li>
      <li>GraphQL > \`.GraphQL-copy\`</li>
    </ul>
  </li>
</ul>

<h3>Behavior Notes:</h3>
<ul>
  <li>The button is disabled when there is no text to copy (<code>copydata</code> is empty or not set)</li>
  <li>Success styles are dependent on the <code>btu-copy-to-clipboard-copied</code> state, which can be styled using the <code>:state()</code> pseudo-class</li>
</ul>
        `}},actions:{handles:b},controls:{expanded:!0}},args:{...u,copydata:"https://example.com/cms/content/edit",buttonClasses:""},argTypes:{...a,copydata:{...a.copydata,control:{type:"text"},description:"The text to copy to clipboard"},buttonClasses:{...a.buttonClasses,control:{type:"text"},description:"Custom CSS classes for the button. If provided, replaces the default classes."}},render:e=>i`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">${e.copydata}</code>
          <btu-copy-to-clipboard copydata="${e.copydata}" .buttonClasses="${e.buttonClasses||void 0}"
            >Copy to Clipboard</btu-copy-to-clipboard
          >
        </div>
        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>
      </div>
    `},t={args:{}},o={render:()=>i(d||(d=p([`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
        </div>
        <div
          id="event-log"
          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
        >
          Event Log: Waiting for copy event...
        </div>
        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>
        <script>
          ;(() => {
            const button = document.getElementById('event-demo-button')
            const log = document.getElementById('event-log')
            if (button && log) {
              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                const timestamp = new Date().toLocaleTimeString()
                log.textContent = \`Event Log: btu-copy-to-clipboard-copied fired at \${timestamp}\`
                console.log('Event fired:', e)
              })
            }
          })()
        <\/script>
      </div>
    `],[`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
        </div>
        <div
          id="event-log"
          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
        >
          Event Log: Waiting for copy event...
        </div>
        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>
        <script>
          ;(() => {
            const button = document.getElementById('event-demo-button')
            const log = document.getElementById('event-log')
            if (button && log) {
              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                const timestamp = new Date().toLocaleTimeString()
                log.textContent = \\\`Event Log: btu-copy-to-clipboard-copied fired at \\\${timestamp}\\\`
                console.log('Event fired:', e)
              })
            }
          })()
        <\/script>
      </div>
    `]))),parameters:{docs:{description:{story:"You can listen for the `btu-copy-to-clipboard-copied` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked."}}}},n={render:()=>i`
      <div class="flex flex-col gap-6">
        <div class="flex flex-col gap-2">
          <strong>Custom Button Styling:</strong>
          <div style="display: flex; align-items: center; gap: 1rem;">
            <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">
              https://example.com/cms/content/edit
            </code>
            <btu-copy-to-clipboard
              copydata="https://example.com/cms/content/edit"
              buttonClasses="btu-button btu-button-primary btu-button-fill-none after:btu-icon after:btu-icon-clipboard-copy"
              >Copy Link</btu-copy-to-clipboard
            >
          </div>
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>

        <div class="flex flex-col gap-2">
          <strong>Icon-Only Button:</strong>
          <div style="display: flex; align-items: center; gap: 1rem;">
            <div
              style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1; display: flex; align-items: center; gap: 0.5rem; color: #6b7280;"
            >
              <span class="before:btu-icon before:btu-icon-key"></span>
              <span style="font-family: monospace; font-style: italic;">API Key (hidden)</span>
            </div>
            <btu-copy-to-clipboard
              id="icon-only-demo"
              aria-label="Copy API key to clipboard"
              copydata="sk_live_abc123xyz789secret"
              buttonClasses="btu-button btu-button-primary before:btu-icon before:btu-icon-clipboard-copy btu-button-text-hidden"
              >Copy API Key</btu-copy-to-clipboard
            >
          </div>
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
          <style>
            #icon-only-demo:state(btu-copy-to-clipboard-copied) button {
              background-color: oklch(68.59% 0.167 157);
            }
            #icon-only-demo:state(btu-copy-to-clipboard-copied) button::before {
              content: '\\e168';
            }
          </style>
        </div>
      </div>
    `,parameters:{docs:{description:{story:"\n**Custom Button Styling:** Use the `buttonClasses` attribute to override default button classes with your own styling.\n\n**Icon-Only Button:** An icon-only button for a minimal style. Uses `buttonClasses` for initial styles, notably `btu-button-text-hidden` to hide the text. The `aria-label` attribute is passed from the host element to the inner button for accessibility. CSS `:state(btu-copy-to-clipboard-copied)` is used to change styles when copied.\n        "}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...t.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  render: () => {
    return html\`
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
          <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">Hello, World!</code>
          <btu-copy-to-clipboard copydata="Hello, World!" id="event-demo-button">Copy</btu-copy-to-clipboard>
        </div>
        <div
          id="event-log"
          style="padding: 0.5rem; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 4px; font-family: monospace; font-size: 0.875rem; color: #92400e;"
        >
          Event Log: Waiting for copy event...
        </div>
        <div style="display: flex; flex-direction: column; gap: 0.25rem;">
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>
        <script>
          ;(() => {
            const button = document.getElementById('event-demo-button')
            const log = document.getElementById('event-log')
            if (button && log) {
              button.addEventListener('btu-copy-to-clipboard-copied', e => {
                const timestamp = new Date().toLocaleTimeString()
                log.textContent = \\\`Event Log: btu-copy-to-clipboard-copied fired at \\\${timestamp}\\\`
                console.log('Event fired:', e)
              })
            }
          })()
        <\/script>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`You can listen for the \\\`btu-copy-to-clipboard-copied\\\` event to perform custom actions when text is copied. This example displays an event log that updates with a timestamp each time the button is clicked.\`
      }
    }
  }
}`,...o.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  render: () => {
    return html\`
      <div class="flex flex-col gap-6">
        <div class="flex flex-col gap-2">
          <strong>Custom Button Styling:</strong>
          <div style="display: flex; align-items: center; gap: 1rem;">
            <code style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1;">
              https://example.com/cms/content/edit
            </code>
            <btu-copy-to-clipboard
              copydata="https://example.com/cms/content/edit"
              buttonClasses="btu-button btu-button-primary btu-button-fill-none after:btu-icon after:btu-icon-clipboard-copy"
              >Copy Link</btu-copy-to-clipboard
            >
          </div>
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
        </div>

        <div class="flex flex-col gap-2">
          <strong>Icon-Only Button:</strong>
          <div style="display: flex; align-items: center; gap: 1rem;">
            <div
              style="padding: 0.5rem; background: #f5f5f5; border-radius: 4px; flex: 1; display: flex; align-items: center; gap: 0.5rem; color: #6b7280;"
            >
              <span class="before:btu-icon before:btu-icon-key"></span>
              <span style="font-family: monospace; font-style: italic;">API Key (hidden)</span>
            </div>
            <btu-copy-to-clipboard
              id="icon-only-demo"
              aria-label="Copy API key to clipboard"
              copydata="sk_live_abc123xyz789secret"
              buttonClasses="btu-button btu-button-primary before:btu-icon before:btu-icon-clipboard-copy btu-button-text-hidden"
              >Copy API Key</btu-copy-to-clipboard
            >
          </div>
          <textarea
            aria-label="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            placeholder="Click the copy button, then paste here (Cmd/Ctrl+V) to test"
            style="padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 0.875rem;"
          ></textarea>
          <style>
            #icon-only-demo:state(btu-copy-to-clipboard-copied) button {
              background-color: oklch(68.59% 0.167 157);
            }
            #icon-only-demo:state(btu-copy-to-clipboard-copied) button::before {
              content: '\\\\e168';
            }
          </style>
        </div>
      </div>
    \`;
  },
  parameters: {
    docs: {
      description: {
        story: \`
**Custom Button Styling:** Use the \\\`buttonClasses\\\` attribute to override default button classes with your own styling.

**Icon-Only Button:** An icon-only button for a minimal style. Uses \\\`buttonClasses\\\` for initial styles, notably \\\`btu-button-text-hidden\\\` to hide the text. The \\\`aria-label\\\` attribute is passed from the host element to the inner button for accessibility. CSS \\\`:state(btu-copy-to-clipboard-copied)\\\` is used to change styles when copied.
        \`
      }
    }
  }
}`,...n.parameters?.docs?.source}}};const g=["Default","CopiedEvent","AdvancedUsage"];export{n as AdvancedUsage,o as CopiedEvent,t as Default,g as __namedExportsOrder,f as default};
