Copy

A copy helper that copies values or text snippets to the clipboard from a clear UI trigger.

Import

import { Copy } from "@schukai/monster/source/components/content/copy.mjs";

Source

View source code

Package

@schukai/monster

Since

3.77.0

click me!

Introduction

The Monster Copy component gives users a clear way to copy values into the clipboard. Use it for IDs, URLs, access tokens or other short snippets that are often reused outside the current page.

When to use Copy

Use it for reusable values: Copy actions remove manual text selection and reduce errors.
Use it when success should be explicit: Users benefit from clear feedback after copying.
Do not use it for large editable text areas: Direct editing and selection may be the more natural interaction.

Copy

This is a monster copy component. It is used to copy text to the clipboard. You can simple click on the text below to copy it to the clipboard.

This is the text to be copied.

Javascript

import '@schukai/monster/source/components/content/copy.mjs';<script type="module">import '@schukai/monster/source/components/content/copy.mjs';</script>

HTML

<monster-copy>
    This is the text to be copied.
</monster-copy>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The Copy component is a utility element designed to copy content to the clipboard. It features a visually appealing interface that includes a button with dynamic states and an optional tooltip for feedback on the copy status. The component uses the Shadow DOM to encapsulate its internal structure and styles.

The default design of the component provides a clean and modern look, which can be customized using exported parts and CSS variables.

Shadow DOM and Accessibility

The Copy component leverages the Shadow DOM to ensure that its internal structure is protected from external style interference. This ensures consistent behavior and appearance across different implementations.

Accessibility is a priority in the component's design. The button supports keyboard navigation and provides clear feedback for screen readers and assistive technologies.

Customizing Through Exported Parts

Developers can customize the appearance of the Copy component by targeting specific parts of its structure using the part attribute. This approach enables flexible styling while maintaining the encapsulation benefits of the Shadow DOM.

Available Part Attributes

control: Represents the main container of the component.
popper: Represents the tooltip that provides feedback after a copy action.
button: Represents the copy button.
icon: Represents the dynamic icon displayed on the button.

Example of customizing the component using CSS:


monster-copy::part(control) {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
}

monster-copy::part(button) {
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

monster-copy::part(popper) {
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
}

CSS Variables

The Copy component provides several CSS variables for additional customization. These variables control colors, spacing, and transitions for the component and its elements.

--monster-color-primary-1: Sets the primary color used for icons and text.
--monster-bg-color-primary-1: Sets the background color for the tooltip and other elements.
--monster-border-radius: Adjusts the border radius for rounded corners.

Example of using CSS variables for customization:


monster-copy {
    --monster-color-primary-1: #007bff;
    --monster-bg-color-primary-1: #f1f1f1;
    --monster-border-radius: 8px;
}

Accessibility

The Copy component supports full keyboard and screen-reader accessibility. The button is focusable and provides clear visual feedback during interaction. Additionally, the tooltip communicates the success or failure of the copy action.

HTML Structure

<monster-copy></monster-copy>

JavaScript Initialization

const element = document.createElement('monster-copy');
document.body.appendChild(element);

Exported

Copy

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

actions

object

undefined

Callbacks

actions.click

string

throw Error

features

object

Features

features.stripTags

boolean

true

ed text

features.preventOpenEventSent

boolean

false

popper

object

Popper configuration

popper.placement

string

top

popper.middleware

string[]

["flip",

w"] Popper middleware

disabled

boolean

false

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Behavioral methods

hideDialog()

Returns

{Copy}

With this method, you can hide the popper.

showDialog()

Returns

{Copy}

With this method, you can show the popper.

toggleDialog()

Returns

{Copy}

With this method, you can toggle the popper.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Content.Copy

Events

monster-copy-clicked This event is fired when the copy button is clicked.
monster-copy-success This event is fired when the copy action is successful.
monster-copy-error This event is fired when the copy action fails.

connectedCallback()

Returns

{void}

This method is called when the element is connected to the dom.

disconnectedCallback()

Returns

{void}

This method is called when the element is disconnected from the dom.

Events

The component emits the following events:

monster-copy-clicked
This event is fired when the copy button is clicked.
monster-copy-success
This event is fired when the copy action is successful.
monster-copy-error
This event is fired when the copy action fails.

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.