copy

Source

<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.

Extends

BaseCopy

Constructors

new Copy()

new Copy(): Copy

Returns

Copy

Overrides

BaseCopy.constructor

Source

src/package/copy/index.ts:11

Properties

#listenerController

private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

BaseCopy.#listenerController

Source

src/package/base/index.ts:17

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.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

value

get value(): string

The value to copy or share.

Default

"" the empty string

set value(value): void

Parameters

• value: string

Returns

string

Source

src/package/base/copy/index.ts:13

Methods

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

BaseCopy.connectedCallback

Source

src/package/base/index.ts:155

copy()

copy(text): Promise<void>

Copies the text.

Parameters

• text: string= undefined

The text to share

Returns

Promise<void>

Inherited from

BaseCopy.copy

Source

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

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

BaseCopy.disconnectedCallback

Source

src/package/base/index.ts:167

getContent()

getContent<T>(instance): T

Type parameters

• T extends HTMLElement = HTMLElement

Parameters

• instance= undefined

The instance of the desired element, ex: HTMLDialogElement. Defaults to HTMLElement.

Returns

T

The element that matches the content selector.

Inherited from

BaseCopy.getContent

Default

this.querySelector("[data-content]");

Source

src/package/base/index.ts:55

getTrigger()

getTrigger<T>(): NodeListOf<T>

Type parameters

• T extends HTMLElement = HTMLElement

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Inherited from

BaseCopy.getTrigger

Default

this.querySelectorAll("[data-trigger]");

Source

src/package/base/index.ts:42

mount()

mount(): void

Returns

void

Overrides

BaseCopy.mount

Source

src/package/copy/index.ts:15

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

• K extends keyof DocumentEventMap

• T extends Window | Document | HTMLElement = HTMLElement

Parameters

• type: K

• listener

• element: T= undefined

• options: AddEventListenerOptions= {}

Returns

void

Inherited from

BaseCopy.safeListener

Source

src/package/base/index.ts:118

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

• revert: boolean= true

Swap back to old content

• delay: number= 800

Wait time before swapping back

Returns

void

Inherited from

BaseCopy.swapContent

Source

src/package/base/index.ts:72

triggerListener()

triggerListener<T, K>(listener, type, options?): void

Type parameters

• T extends HTMLElement

• K extends keyof HTMLElementEventMap

Parameters

• listener

Listener to attach to all of the trigger elements.

• type: K= undefined

• options?: AddEventListenerOptions

Returns

void

Inherited from

BaseCopy.triggerListener

Source

src/package/base/index.ts:135