feat: Adds uui-button-copy-text (#985)

* Adds scaffolding files for uui-copy

npm run new-package

* Adds first attempt at uui-copy

* Make eslint happy

* WIP: To add useful tests

* Update packages/uui-copy/lib/uui-copy.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Update packages/uui-copy/lib/uui-copy.element.ts

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>

* Remove the reflect on the props as PR suggestion

* Adds in the util func demandCustomElement in ctor as suggested by Jacob

* Fix typo

* Remove the tests for the clipboard API - agreed with Jacob to keep the tests minimal due to the permisions problem with the clipboard API running headless

* Waits 2 seconds before setting uuiButton state to success

* Fix the problem with the story, as you needed to browse to uui-button before this would work properly as it had not registered the webcoponents that it depends upon

* Adds the LabelMixin to add the prop.
Flows the label prop down into the UUI-button for the aria-label for the uui-button used inside uui-copy

* Make the sonar code quality thing a bit happier

* Add a prop & story for the timeout delay for the animation/state of the button

* An explicit story to help with docs to show how to use a different icon

* Fix test failing on CI only - not locally

* Rename from uui-copy to more explicit uui-text-copy-button

* Renaming files & folders was bein a PITA and things not working 🤬

So had to stub it out again with npm run new-package

* FIx problem from test

* Remove console.log

* Wrap with try/catch & drop the uneeded .then()

* Removes the event from bubbling, not sure there is a valid reason to

* feat: rename element to `uui-button-copy-text`

* feat: rename to uui-button-copy-text and add dependencies

* feat: rename to uui-button-copy-text and add dependencies

* feat: uui-icon package is optional

* feat: uui-icon package is optional

* feat: extend from uui-button and rename `value` to `text`

* feat: copy only from other element if there is no 'value' field

* feat: use real class property to hold copied value

* feat: clear animation timer if element disconnects

* feat: rename base folder

* chore: format lint

* docs: update README

* chore: cleanup old files

---------

Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

Author: 3 people

package-lock.json

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

packages/uui-button-copy-text/README.md

@@ -0,0 +1,15 @@
+import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
+import { UUIButtonCopyTextElement } from './uui-button-copy-text.element';
+
+export class UUICopyTextEvent extends UUIEvent<
+  { text: string },
+  UUIButtonCopyTextElement
+> {
+  public static readonly COPIED: string = 'copied';
+  public static readonly COPYING: string = 'copying';
+
+  /**
+   * The text content that is about to be copied to the clipboard
+   */
+  public text: string | null = null;
+}

packages/uui-button-copy-text/lib/UUICopyTextEvent.ts

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

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

@@ -0,0 +1,126 @@
+import { html } 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 { UUICopyTextEvent } from './UUICopyTextEvent.js';
+
+/**
+ * @summary A button to trigger text content to be copied to the clipboard
+ * @element uui-button-copy-text
+ * @dependency uui-button
+ * @dependency uui-icon
+ * @fires {UUICopyTextEvent} 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 {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard
+ * @slot - Use to replace the default content of the copy icon
+ */
+@defineElement('uui-button-copy-text')
+export class UUIButtonCopyTextElement extends UUIButtonElement {
+  /**
+   * Set a string you wish to copy to the clipboard
+   * @type {string}
+   * @default ''
+   */
+  @property({ type: String })
+  text: string = '';
+
+  /**
+   * 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: string = '';
+
+  /**
+   * 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: number = 250;
+
+  #animationTimer?: any;
+
+  constructor() {
+    super();
+    demandCustomElement(this, 'uui-icon');
+
+    this.addEventListener('click', this.#onClick);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this.#animationTimer) {
+      clearTimeout(this.#animationTimer);
+    }
+  }
+
+  readonly #onClick = async () => {
+    this.state = 'waiting';
+
+    // By default use the value property
+    let valueToCopy = this.text;
+
+    // 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) {
+        // 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) {
+          valueToCopy = (el as any).value;
+        } else {
+          valueToCopy = el.textContent ?? el.innerText ?? '';
+        }
+      } else {
+        console.error(`Element ID ${this.copyFrom} not found to copy from`);
+        this.state = 'failed';
+        return;
+      }
+    }
+
+    const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);
+    beforeCopyEv.text = valueToCopy;
+    this.dispatchEvent(beforeCopyEv);
+
+    if (beforeCopyEv.text != null) {
+      valueToCopy = beforeCopyEv.text;
+    }
+
+    try {
+      await navigator.clipboard.writeText(valueToCopy);
+      const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);
+      copiedEv.text = valueToCopy;
+      this.dispatchEvent(copiedEv);
+      this.#animationTimer = setTimeout(() => {
+        this.state = 'success';
+      }, this.animationStateDelay);
+    } catch (err) {
+      this.state = 'failed';
+      console.error('Error copying to clipboard', err);
+    }
+  };
+
+  protected override renderLabel() {
+    return html`
+      <slot class="label">
+        <uui-icon name="copy"></uui-icon>
+      </slot>
+    `;
+  }
+
+  static override readonly styles = UUIButtonElement.styles;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'uui-button-copy-text': UUIButtonCopyTextElement;
+  }
+}