Adds UUI-Text-Copy

packages/uui-text-copy/README.md

@@ -0,0 +1,31 @@
+# uui-text-copy
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-text-copy?logoColor=%231B264F)
+
+Umbraco style text-copy component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-text-copy
+```
+
+Import the registration of `<uui-text-copy>` via:
+
+```javascript
+import '@umbraco-ui/uui-text-copy';
+```
+
+When looking to leverage the `UUITextCopyElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUITextCopyElement } from '@umbraco-ui/uui-text-copy';
+```
+
+## Usage
+
+```html
+<uui-text-copy></uui-text-copy>
+```

packages/uui-text-copy/lib/UUITextCopyEvent.ts

@@ -0,0 +1,21 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUITextCopyElement } from './uui-text-copy.element';
+
+interface UUITextCopyEventInit extends EventInit {
+  detail?: { text: string };
+}
+
+export class UUITextCopyEvent extends UUIEvent<
+  { text: string },
+  UUITextCopyElement
+> {
+  public static readonly COPIED: string = 'copied';
+  public static readonly COPYING: string = 'copying';
+
+  constructor(evName: string, eventInit: UUITextCopyEventInit = {}) {
+    super(evName, {
+      ...{ bubbles: true },
+      ...eventInit,
+    });
+  }
+}

packages/uui-text-copy/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './uui-text-copy.element';
+export * from './UUITextCopyEvent';

packages/uui-text-copy/lib/uui-text-copy.element.ts

@@ -0,0 +1,175 @@
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { UUIButtonElement } from '@umbraco-ui/uui-button/lib';
+import { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-ui/uui-base';
+import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { UUITextCopyEvent } from './UUITextCopyEvent';
+
+/**
+ * @summary A button to trigger text content to be copied to the clipboard
+ * @element uui-text-copy
+ * @dependency uui-button
+ * @dependency uui-icon
+ * @fires {UUITextCopyEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard
+ * @fires {UUITextCopyEvent} copied - Fires when the content is copied to the clipboard
+ * @slot - Use to replace the default content of 'Copy' and the copy icon
+ */
+@defineElement('uui-text-copy')
+export class UUITextCopyElement extends LabelMixin('', LitElement) {
+  /**
+   * Set a string you wish to copy to the clipboard
+   * @type {string}
+   * @default ''
+   */
+  @property({ type: String })
+  value = '';
+
+  /**
+   * Disables the button
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean })
+  disabled = false;
+
+  /**
+   * Copies the text content from another element by specifying the ID of the element
+   * The ID of the element does not need to start with # like a CSS selector
+   * If this property is set, the value property is ignored
+   * @type {string}
+   * @attr
+   * @default ''
+   * @example copy-from="element-id"
+   */
+  @property({ type: String, attribute: 'copy-from' })
+  copyFrom = '';
+
+  /**
+   * Changes the look of the button to one of the predefined, symbolic looks.
+   * @type {"default" | "primary" | "secondary" | "outline" | "placeholder"}
+   * @attr
+   * @default "default"
+   */
+  @property()
+  look: UUIInterfaceLook = 'default';
+
+  /**
+   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
+   * @type {"default" | "positive" | "warning" | "danger"}
+   * @attr
+   * @default "default"
+   */
+  @property({ reflect: true })
+  color: UUIInterfaceColor = 'default';
+
+  /**
+   * Makes the left and right padding of the button narrower.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean })
+  compact = false;
+
+  /**
+   * The delay in milliseconds before the button returns to its default state after a successful copy
+   * @type {number}
+   * @attr
+   * @default 250
+   */
+  @property({ type: Number, attribute: 'animation-state-delay' })
+  animationStateDelay = 250;
+
+  constructor() {
+    super();
+    demandCustomElement(this, 'uui-button');
+    demandCustomElement(this, 'uui-icon');
+  }
+
+  // Used to store the value that will be copied to the clipboard
+  #valueToCopy = '';
+
+  readonly #onClick = async (e: Event) => {
+    const button = e.target as UUIButtonElement;
+    button.state = 'waiting';
+
+    // By default use the value property
+    this.#valueToCopy = this.value;
+
+    // If copy-from is set use that instead
+    if (this.copyFrom) {
+      // Try & find an element with the ID
+      const el = document.getElementById(this.copyFrom);
+      if (el) {
+        console.log('Element found to copy from', el);
+        this.#valueToCopy = el.textContent ?? el.innerText ?? '';
+
+        // Override the value to copy ,if the element has a value property
+        // Such as uui-input or uui-textarea or native inout elements
+        if ('value' in el) {
+          console.log('This element has a value property', el);
+          this.#valueToCopy = (el as any).value;
+        }
+      } else {
+        console.error(`Element ID ${this.copyFrom} not found to copy from`);
+        button.state = 'failed';
+        return;
+      }
+    }
+
+    const beforeCopyEv = new UUITextCopyEvent(UUITextCopyEvent.COPYING, {
+      detail: { text: this.#valueToCopy },
+    });
+    this.dispatchEvent(beforeCopyEv);
+
+    if (beforeCopyEv.detail.text != null) {
+      this.#valueToCopy = beforeCopyEv.detail.text;
+    }
+
+    await navigator.clipboard
+      .writeText(this.#valueToCopy)
+      .then(() => {
+        this.dispatchEvent(
+          new UUITextCopyEvent(UUITextCopyEvent.COPIED, {
+            detail: { text: this.#valueToCopy },
+          }),
+        );
+        setTimeout(() => {
+          button.state = 'success';
+        }, this.animationStateDelay);
+      })
+      .catch(err => {
+        button.state = 'failed';
+        console.error('Error copying to clipboard', err);
+      });
+  };
+
+  render() {
+    return html` <uui-button
+      .color=${this.color}
+      .look=${this.look}
+      .disabled=${this.disabled}
+      .compact=${this.compact}
+      .label=${this.label}
+      @click=${this.#onClick}>
+      <slot> <uui-icon name="copy"></uui-icon> Copy </slot>
+    </uui-button>`;
+  }
+
+  static readonly styles = [
+    css`
+      slot {
+        pointer-events: none;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-text-copy': UUITextCopyElement;
+  }
+}