Refactoring

libs/ui/src/lib/value/value.component.html

@@ -15,9 +15,9 @@
         class="ml-1 no-height no-min-width p-1"
         mat-button
         type="button"
-        [attr.aria-label]="copyToClipboardTitle"
         [title]="isCopied ? copiedTitle : copyToClipboardTitle"
         (click)="onCopyValueToClipboard()"
+        (mousedown)="$event.preventDefault()"
       >
         <ion-icon
           class="text-muted"

libs/ui/src/lib/value/value.component.ts

@@ -60,7 +60,7 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
   public isString = false;
   public useAbsoluteValue = false;
 
-  public readonly copiedTitle = $localize`Copied!`;
+  public readonly copiedTitle = $localize`The value has been copied to the clipboard`;
   public readonly copyToClipboardTitle = $localize`Copy to clipboard`;
 
   public constructor(
@@ -76,7 +76,7 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   public readonly precision = input<number>();
 
-  private copyConfirmationTimeout?: ReturnType<typeof setTimeout>;
+  private copyToClipboardTimeout: ReturnType<typeof setTimeout>;
 
   private readonly formatOptions = computed<Intl.NumberFormatOptions>(() => {
     const digits = this.hasPrecision ? this.precision() : 2;
@@ -184,46 +184,35 @@ export class GfValueComponent implements AfterViewInit, OnChanges, OnDestroy {
   }
 
   public ngOnDestroy() {
-    this.clearCopyConfirmation();
+    if (this.copyToClipboardTimeout) {
+      clearTimeout(this.copyToClipboardTimeout);
+    }
   }
 
   public onCopyValueToClipboard() {
-    this.clearCopyConfirmation();
-
-    const hasCopied = this.clipboard.copy(String(this.value));
+    this.clipboard.copy(String(this.value));
 
-    if (!hasCopied) {
-      this.snackBar.dismiss();
+    this.isCopied = true;
 
-      return;
+    if (this.copyToClipboardTimeout) {
+      clearTimeout(this.copyToClipboardTimeout);
     }
 
-    this.isCopied = true;
-    this.copyConfirmationTimeout = setTimeout(() => {
-      this.copyConfirmationTimeout = undefined;
+    this.copyToClipboardTimeout = setTimeout(() => {
       this.isCopied = false;
+
       this.changeDetectorRef.markForCheck();
-    }, ms('2 seconds'));
+    }, ms('3 seconds'));
 
     this.snackBar.open(
       '✅ ' + $localize`${this.value} has been copied to the clipboard`,
       undefined,
       {
-        duration: ms('3 seconds'),
-        politeness: 'polite'
+        duration: ms('3 seconds')
       }
     );
   }
 
-  private clearCopyConfirmation() {
-    if (this.copyConfirmationTimeout) {
-      clearTimeout(this.copyConfirmationTimeout);
-      this.copyConfirmationTimeout = undefined;
-    }
-
-    this.isCopied = false;
-  }
-
   private initializeVariables() {
     this.absoluteValue = 0;
     this.formattedValue = '';