{
  "tag": "ed-copy-button",
  "kind": "component",
  "summary": "Copy buttons copy text to the clipboard when the user activates them. They provide built-in success and\nerror feedback so users know the copy worked.",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/copy-button/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/copy-button/usage/",
  "playwright": "getByTestId('…').getByRole('button')",
  "dependencies": [
    "ed-icon",
    "ed-tooltip"
  ],
  "use": [
    "Copying a specific value — an IBAN, tax number, reference number, link or API key — without selecting the text by hand",
    "Copying a case or reference number from a detail view so the user can quote it in an email or support request",
    "Taking a value out of the product into another application, such as an account number into online banking"
  ],
  "notFor": [
    {
      "when": "The main action of a screen or a primary button — it is a small helper action",
      "instead": "[Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)"
    },
    {
      "when": "Copying large blocks or entire documents users would rather select and read",
      "instead": "a download or export action"
    },
    {
      "when": "Showing explanatory text on hover with no copy action",
      "instead": "[Tooltip](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip)"
    }
  ],
  "rules": [
    {
      "id": "copy-button/label-when-prominent",
      "rule": "Wrap a labeled button — icon plus a \"Noun + Verb\" label such as \"Copy link\" or \"Copy API key\" — whenever the control is prominent or stands alone; never leave a prominent copy control as an unlabeled icon in eurodata's complex B2B interfaces. Reserve the default icon-only form for tight, inline spots placed directly beside a clearly labeled value the user is obviously meant to copy. Interactive icons must carry a visible text label — a tooltip alone is not enough.",
      "why": "A company rule (critical): icon-only controls are a confirmed, repeated source of missed functionality in eurodata's own usability research.",
      "check": "warning"
    },
    {
      "id": "copy-button/next-to-value",
      "rule": "Place it directly next to the value it copies, so the source of the copy is obvious — never where it is unclear which value will be copied."
    },
    {
      "id": "copy-button/built-in-feedback",
      "rule": "Don't add your own copy confirmation — the component does it: the icon briefly swaps to a confirmation mark and a short \"Copied\" message appears. Never rely only on the icon change: always keep the readable success message. The `full` and `copy` tooltip modes both confirm, but `tooltip=\"none\"` removes the message entirely.",
      "check": "error"
    },
    {
      "id": "copy-button/feedback-duration",
      "rule": "Keep the confirmation visible long enough to read — the default of about one second suits most cases — and never hide it so briefly that users cannot read it.",
      "check": "warning"
    },
    {
      "id": "copy-button/state-labels",
      "rule": "Write clear, specific labels for the resting, success, and error states.",
      "check": "error"
    },
    {
      "id": "copy-button/tooltip-placement",
      "rule": "Position the confirmation tooltip where it will not cover the value that was just copied."
    },
    {
      "id": "copy-button/copy-live-content",
      "rule": "Let it copy live content from a field or element (`from`) when the value changes, rather than a hardcoded value.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "value",
        "property": "value",
        "type": "string",
        "default": "''",
        "description": "The text value to copy."
      },
      {
        "name": "from",
        "property": "from",
        "type": "string",
        "default": "''",
        "description": "An id that references an element in the same document from which data will be copied. If both this and `value` are\npresent, this value will take precedence. By default, the target element's `textContent` will be copied. To copy an\nattribute, append the attribute name wrapped in square brackets, e.g. `from=\"el[value]\"`. To copy a property,\nappend a dot and the property name, e.g. `from=\"el.value\"`."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the copy button."
      },
      {
        "name": "copy-label",
        "property": "copyLabel",
        "type": "string",
        "default": "''",
        "description": "A custom label to use as the accessible name and tooltip text in the default copy state."
      },
      {
        "name": "success-label",
        "property": "successLabel",
        "type": "string",
        "default": "''",
        "description": "A custom label to show in the tooltip after copying."
      },
      {
        "name": "error-label",
        "property": "errorLabel",
        "type": "string",
        "default": "''",
        "description": "A custom label to show in the tooltip when a copy error occurs."
      },
      {
        "name": "feedback-duration",
        "property": "feedbackDuration",
        "type": "number",
        "default": "1000",
        "description": "The length of time to show feedback before restoring the default trigger."
      },
      {
        "name": "tooltip-placement",
        "property": "tooltipPlacement",
        "type": "'left' | 'right' | 'top' | 'bottom'",
        "default": "'top'",
        "description": "The preferred placement of the tooltip."
      },
      {
        "name": "tooltip",
        "property": "tooltip",
        "type": "'copy' | 'none' | 'full'",
        "default": "'full'",
        "description": "Controls the built-in tooltip. `full` (default) shows the tooltip on hover and focus and during copy feedback.\n`copy` keeps the tooltip silent on hover/focus and only shows it briefly to confirm a successful or failed copy.\n`none` disables the tooltip entirely. Applies to both the default and custom triggers."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-copy",
        "react": "onEdCopy",
        "type": "{ value: string }",
        "description": "Emitted when the data has been copied."
      },
      {
        "name": "ed-error",
        "react": "onEdError",
        "description": "Emitted when the data could not be copied."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The trigger element. By default, a copy icon button is rendered so this is optional. If desired, you can slot in a custom element such as `<ed-button>` or `<button>`."
      },
      {
        "name": "copy-icon",
        "description": "The icon to show in the default copy state. Works best with `<ed-icon>`."
      },
      {
        "name": "success-icon",
        "description": "The icon to show when the content is copied. Works best with `<ed-icon>`."
      },
      {
        "name": "error-icon",
        "description": "The icon to show when a copy error occurs. Works best with `<ed-icon>`."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "button",
        "description": "The internal `<button>` element."
      },
      {
        "name": "copy-icon",
        "description": "The container that holds the copy icon."
      },
      {
        "name": "success-icon",
        "description": "The container that holds the success icon."
      },
      {
        "name": "error-icon",
        "description": "The container that holds the error icon."
      },
      {
        "name": "feedback",
        "description": "The internal `<ed-tooltip>` of the default trigger. With a slotted trigger the tooltip is a light-DOM child, which `::part()` does not reach — select it as `ed-copy-button > ed-tooltip[data-copy-button-tooltip]`."
      }
    ],
    "states": [
      {
        "name": "success",
        "description": "Applied when the copy operation succeeds."
      },
      {
        "name": "error",
        "description": "Applied when the copy operation fails."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/copy-button/copy-button.js';",
  "react": {
    "component": "EdCopyButton",
    "import": "import EdCopyButton from '@eurodata/eurodata-ui/dist/react/copy-button/index.js';"
  }
}