feat: use real class property to hold copied value

Author: iOvergaard

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

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

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

@@ -78,24 +78,19 @@ export class UUIButtonCopyTextElement extends UUIButtonElement {
       }
     }
 
-    const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING, {
-      detail: { text: valueToCopy },
-    });
+    const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);
+    beforeCopyEv.text = valueToCopy;
     this.dispatchEvent(beforeCopyEv);
 
-    if (beforeCopyEv.detail.text != null) {
-      valueToCopy = beforeCopyEv.detail.text;
+    if (beforeCopyEv.text != null) {
+      valueToCopy = beforeCopyEv.text;
     }
 
     try {
       await navigator.clipboard.writeText(valueToCopy);
-      this.dispatchEvent(
-        new UUICopyTextEvent(UUICopyTextEvent.COPIED, {
-          detail: { text: valueToCopy },
-        }),
-      );
-      setTimeout(() => {
-        button.state = 'success';
+      const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);
+      copiedEv.text = valueToCopy;
+      this.dispatchEvent(copiedEv);
       }, this.animationStateDelay);
     } catch (err) {
       button.state = 'failed';

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

@@ -131,7 +131,7 @@ export const CopiedEvent: Story = {
     <uui-button-copy-text
       ${spread(args)}
       @copied=${(event: UUICopyTextEvent) => {
-        alert(`Copied text: ${event.detail.text}`);
+        alert(`Copied text: ${event.text}`);
       }}></uui-button-copy-text>
   `,
   parameters: {
@@ -141,7 +141,7 @@ export const CopiedEvent: Story = {
 <uui-button-copy-text text="Copy this text"></uui-button-copy-text>
 <script>
   document.querySelector('uui-button-copy-text').addEventListener('copied', (event) => {
-    alert(\`Copied text: \${event.detail.text}\`);
+    alert(\`Copied text: \${event.text}\`);
   });
 </script>
         `,
@@ -159,7 +159,7 @@ export const ModifyClipboardContent: Story = {
     <uui-button-copy-text
       ${spread(args)}
       @copying=${(event: UUICopyTextEvent) => {
-        event.detail.text += ' - Modified before copying';
+        event.text += ' - Modified before copying';
       }}></uui-button-copy-text>
   `,
   parameters: {
@@ -169,7 +169,7 @@ export const ModifyClipboardContent: Story = {
 <uui-button-copy-text text="Original text"></uui-button-copy-text>
 <script>
   document.querySelector('uui-button-copy-text').addEventListener('copying', (event) => {
-    event.detail.text += ' - Modified before copying';
+    event.text += ' - Modified before copying';
   });
 </script>
         `,