import "./icon-CTW4Gr4z.js";
import "./button-yMIli_DJ.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/copy/copy.d.ts
/**
 * <sigvelo-copy>
 *
 * @summary Copies text and other types of data to the clipboard.
 * @tag sigvelo-copy
 * @documentation https://design-system.sigvelo.com/docs/components/copy
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-button
 * @dependency sigvelo-icon
 *
 * @slot - A custom button to use instead of the default.
 *
 * @event sigvelo-copy - Emitted when the content has been copied. This event does not bubble. You can inspect
 *  `event.detail.data` to see the content that was copied.
 * @event sigvelo-copy-error - Emitted when the browser refuses to allow the content to be copied. This event does not
 *  bubble. You can inspect `event.detail.error` to see the error that occurred.
 *
 * @csspart copy-button - The default copy button, a `<sigvelo-button>` element.
 * @csspart copy-button__button - The default copy button's `button` part.
 * @csspart copy-icon - The default copy icon, a `<sigvelo-icon>` element.
 * @csspart copy-icon__svg - The copy icon's `svg` part.
 * @csspart feedback - The feedback that shows when copying.
 *
 * @example Default
 * ```html
 * <sigvelo-copy data="https://design-system.sigvelo.com/"></sigvelo-copy>
 * ```
 *
 * **Note:** This component uses the Clipboard API's [`writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts). In other words, for maximum browser support, make sure the URL starts with `https://`.
 *
 * @example Copying text
 * Use the `data` attribute to set the text that will be copied when the button is activated.
 *
 * ```html
 * <sigvelo-copy data="Easy as 1-2-3"></sigvelo-copy>
 * ```
 *
 * @example Using custom buttons
 * Use a custom button by simply slotting it in. Both Sigvelo buttons and native buttons are supported.
 *
 * ```html
 * <sigvelo-copy data="Copied with a Sigvelo button" style="margin-inline-end: 0.5rem;">
 *   <sigvelo-button>
 *     <sigvelo-icon slot="start" name="clipboard"></sigvelo-icon>
 *     Copy
 *   </sigvelo-button>
 * </sigvelo-copy>
 *
 * <sigvelo-copy data="Copied with a native button">
 *   <button>
 *     <sigvelo-icon name="clipboard"></sigvelo-icon>
 *     Copy
 *   </button>
 * </sigvelo-copy>
 * ```
 *
 * @example Feedback placement
 * Copy feedback shows above the button by default. Use the `feedback-placement` attribute to change where it gets shown. The actual placement may vary if there's insufficient room to display it in the viewport. To hide the feedback, set it to `hidden`.
 *
 * ```html
 * <sigvelo-copy data="Top feedback"></sigvelo-copy>
 * <sigvelo-copy feedback-placement="bottom" data="Bottom feedback"></sigvelo-copy>
 * <sigvelo-copy feedback-placement="left" data="Left feedback"></sigvelo-copy>
 * <sigvelo-copy feedback-placement="right" data="Right feedback"></sigvelo-copy>
 * ```
 *
 * @example Copying HTML content
 * You can copy HTML content using the ClipboardItem API. For best results, make sure to provide `text/html` and `text/plain` types.
 *
 * ```html
 * <p>
 *   This content will be copied to the <a href="https://en.wikipedia.org/wiki/Clipboard_(computing)" target="_blank">clipboard</a>.
 *   <em>Try pasting it into another app.</em>
 * </p>
 *
 * <sigvelo-copy id="copy__html">
 *   <sigvelo-button>Copy HTML</sigvelo-button>
 * </sigvelo-copy>
 *
 * <script>
 *   const copyButton = document.getElementById('copy__html');
 *   const el = copyButton.previousElementSibling;
 *
 *   if (window.ClipboardItem) {
 *     copyButton.data = [
 *       new ClipboardItem({
 *         'text/plain': new Blob([el.outerHTML], { type: 'text/plain' }),
 *         'text/html': new Blob([el.outerHTML], { type: 'text/html' })
 *       })
 *     ];
 *   }
 *
 *   copyButton.addEventListener('sigvelo-copy-error', event => {
 *     event.preventDefault();
 *     alert(`Sorry, but your browser doesn't support this API yet.`);
 *   });
 * </script>
 * ```
 *
 * @example Copying PNG images
 * Most browsers support writing PNG image data with the `ClipboardItem` API used in this example. Try copying the image using the button below, then paste it into an image editing app.
 *
 * ```html
 * <img src="/assets/examples/three-kittens.png" alt="Three tabby kittens" style="width: 200px; margin-block-end: 1rem;">
 *
 * <sigvelo-copy id="copy__png">
 *   <sigvelo-button>Copy PNG image</sigvelo-button>
 * </sigvelo-copy>
 *
 * <script>
 *   const copyButton = document.getElementById('copy__png');
 *
 *   if (window.ClipboardItem) {
 *     fetch('/assets/examples/three-kittens.png')
 *       .then(res => res.blob())
 *       .then(blob => {
 *         copyButton.data = [new ClipboardItem({ 'image/png': blob })];
 *       });
 *   }
 *
 *   copyButton.addEventListener('sigvelo-copy-error', event => {
 *     event.preventDefault();
 *     alert(`Sorry, but your browser doesn't support this API yet.`);
 *   });
 * </script>
 * ```
 *
 * @example Copying non-PNG images
 * Copying non-PNG images a trickier due to limited browser support. You can use web custom formats, but they don't seem to be widely supported by platform applications yet.
 *
 * For now, the most effective way to copy a non-PNG image is to render it in a `<canvas>` element, convert it to a blob, and copy it as a PNG.
 *
 * ```html
 * <img src="/assets/examples/kitten-behind-tree.jpeg" alt="A kitten posing behind a tree" style="width: 200px; margin-block-end: 1rem;">
 *
 * <sigvelo-copy id="copy__other">
 *   <sigvelo-button>Copy JPEG image</sigvelo-button>
 * </sigvelo-copy>
 *
 * <script>
 *   function setCopyDataFromCanvas(image) {
 *     // Render the image in a canvas
 *     const canvas = document.createElement('canvas');
 *     const ctx = canvas.getContext('2d');
 *     canvas.width = image.naturalWidth;
 *     canvas.height = image.naturalHeight;
 *     ctx.drawImage(image, 0, 0);
 *
 *     // Convert the image data to a blob
 *     canvas.toBlob(blob => {
 *       copyButton.data = [new ClipboardItem({ 'image/png': blob })];
 *     });
 *   }
 *
 *   const copyButton = document.getElementById('copy__other');
 *
 *   if (window.ClipboardItem) {
 *     // Load the image to copy
 *     const image = new Image();
 *     image.src = '/assets/examples/kitten-behind-tree.jpeg';
 *     image.addEventListener('load', () => setCopyDataFromCanvas(image));
 *   }
 *
 *   copyButton.addEventListener('sigvelo-copy-error', event => {
 *     event.preventDefault();
 *     alert(`Sorry, but your browser doesn't support this API yet.`);
 *   });
 * </script>
 * ```
 *
 * @example Disabling
 * Add the `disabled` attribute to disable the button and prevent copying.
 *
 * ```html
 * <sigvelo-copy data="https://design-system.sigvelo.com/" disabled></sigvelo-copy>
 * ```
 */
declare class SigveloCopy extends SigveloElement {
  static styles: CSSResultGroup;
  private localize;
  private feedback;
  /** The text content that will be copied to the clipboard. */
  data: string | ClipboardItem[];
  /** Disables the button. */
  disabled: boolean;
  /** The placement of the feedback animation. */
  feedbackPlacement: "top" | "right" | "bottom" | "left" | "hidden";
  updated(changedProperties: PropertyValues<this>): void;
  private handleClick;
  /** Shows copy feedback with an animation */
  private showFeedback;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-copy": SigveloCopy;
  }
}
//#endregion
export { SigveloCopy as t };