copy
<drab-copy value="Text to copy">
<button data-trigger type="button" class="button button-primary gap-1.5">
<span>Copy</span>
<span data-content>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5"
>
<path
fill-rule="evenodd"
d="M15.988 3.012A2.25 2.25 0 0 1 18 5.25v6.5A2.25 2.25 0 0 1 15.75 14H13.5V7A2.5 2.5 0 0 0 11 4.5H8.128a2.252 2.252 0 0 1 1.884-1.488A2.25 2.25 0 0 1 12.25 1h1.5a2.25 2.25 0 0 1 2.238 2.012ZM11.5 3.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v.25h-3v-.25Z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M2 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm2 3.25a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm0 3.5a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z"
clip-rule="evenodd"
/>
</svg>
</span>
<template data-swap>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="h-5 w-5"
>
<path
fill-rule="evenodd"
d="M18 5.25a2.25 2.25 0 0 0-2.012-2.238A2.25 2.25 0 0 0 13.75 1h-1.5a2.25 2.25 0 0 0-2.238 2.012c-.875.092-1.6.686-1.884 1.488H11A2.5 2.5 0 0 1 13.5 7v7h2.25A2.25 2.25 0 0 0 18 11.75v-6.5ZM12.25 2.5a.75.75 0 0 0-.75.75v.25h3v-.25a.75.75 0 0 0-.75-.75h-1.5Z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M3 6a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3Zm6.874 4.166a.75.75 0 1 0-1.248-.832l-2.493 3.739-.853-.853a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.154-.114l3-4.5Z"
clip-rule="evenodd"
/>
</svg>
</template>
</button>
</drab-copy>
Overview
Uses the Clipboard API to copy text.
Hierarchy
BaseCopy↳
Copy
Constructors
constructor
• new Copy(): Copy
Returns
Overrides
BaseCopy.constructor
Defined in
Properties
#listenerController
• Private #listenerController: AbortController
To clean up event listeners added to document when the element is removed.
Inherited from
BaseCopy.#listenerController
Defined in
Accessors
event
• get event(): keyof HTMLElementEventMap
Event for the trigger to execute.
For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.
Returns
keyof HTMLElementEventMap
Default
"click";
Inherited from
BaseCopy.event
Defined in
• set event(value): void
Parameters
| Name | Type |
|---|---|
value | keyof HTMLElementEventMap |
Returns
void
Inherited from
BaseCopy.event
Defined in
value
• get value(): string
The value to copy or share.
Returns
string
Default
"" the empty string
Inherited from
BaseCopy.value
Defined in
src/package/base/copy/index.ts:13
• set value(value): void
Parameters
| Name | Type |
|---|---|
value | string |
Returns
void
Inherited from
BaseCopy.value
Defined in
src/package/base/copy/index.ts:17
Methods
connectedCallback
▸ connectedCallback(): void
Returns
void
Inherited from
BaseCopy.connectedCallback
Defined in
copy
▸ copy(text?): Promise<void>
Copies the text.
Parameters
| Name | Type | Description |
|---|---|---|
text | string | The text to share |
Returns
Promise<void>
Inherited from
BaseCopy.copy
Defined in
src/package/base/copy/index.ts:25
destroy
▸ destroy(): void
Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.
Returns
void
Inherited from
BaseCopy.destroy
Defined in
disconnectedCallback
▸ disconnectedCallback(): void
Returns
void
Inherited from
BaseCopy.disconnectedCallback
Defined in
getContent
▸ getContent<T>(instance?): T
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Parameters
| Name | Type | Description |
|---|---|---|
instance | () => T | The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement. |
Returns
T
The element that matches the content selector.
Default
this.querySelector("[data-content]");
Inherited from
BaseCopy.getContent
Defined in
getTrigger
▸ getTrigger<T>(): NodeListOf<T>
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement = HTMLElement |
Returns
NodeListOf<T>
All of the elements that match the trigger selector.
Default
this.querySelectorAll("[data-trigger]");
Inherited from
BaseCopy.getTrigger
Defined in
mount
▸ mount(): void
Returns
void
Overrides
BaseCopy.mount
Defined in
safeListener
▸ safeListener<K, T>(type, listener, element?, options?): void
Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.
Type parameters
| Name | Type |
|---|---|
K | extends keyof DocumentEventMap |
T | extends Window | Document | HTMLElement = HTMLElement |
Parameters
| Name | Type |
|---|---|
type | K |
listener | (this: T, ev: DocumentEventMap[K]) => any |
element | T |
options | AddEventListenerOptions |
Returns
void
Inherited from
BaseCopy.safeListener
Defined in
swapContent
▸ swapContent(revert?, delay?): void
Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
revert | boolean | true | Swap back to old content |
delay | number | 800 | Wait time before swapping back |
Returns
void
Inherited from
BaseCopy.swapContent
Defined in
triggerListener
▸ triggerListener<T, K>(listener, type?, options?): void
Type parameters
| Name | Type |
|---|---|
T | extends HTMLElement |
K | extends keyof HTMLElementEventMap |
Parameters
| Name | Type | Description |
|---|---|---|
listener | (this: T, e: HTMLElementEventMap[K]) => any | Listener to attach to all of the trigger elements. |
type | K | - |
options? | AddEventListenerOptions | - |
Returns
void
Inherited from
BaseCopy.triggerListener