Add copy-to-clipboard functionality to value component

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

@@ -4,7 +4,23 @@
   </div>
 }
 <div class="d-flex flex-column w-100">
-  <ng-template #label><ng-content /></ng-template>
+  <ng-template #label
+    ><span #labelContent>
+      <ng-content></ng-content>
+    </span>
+  </ng-template>
+  <ng-template #copyIcon>
+    @if (enableCopyToClipboardButton) {
+      <a
+        class="cursor-pointer"
+        ng-if="label"
+        (click)="onCopyValueToClipboard()"
+      >
+        <ion-icon class="ml-1 mdc-copy" name="copy-outline" role="img" />
+      </a>
+    }
+  </ng-template>
+
   @if (value || value === 0 || value === null) {
     <div
       class="align-items-center d-flex"
@@ -71,6 +87,9 @@
           {{ formattedValue }}
         </div>
       }
+      @if (!hasLabel) {
+        <ng-container *ngTemplateOutlet="copyIcon" />
+      }
     </div>
   }
 
@@ -88,6 +107,9 @@
   @if (size === 'large') {
     <div class="text-truncate">
       <span class="h6"><ng-container *ngTemplateOutlet="label" /></span>
+      @if (hasLabel) {
+        <ng-container *ngTemplateOutlet="copyIcon" />
+      }
       @if (subLabel) {
         <span class="text-muted"> {{ subLabel }}</span>
       }
@@ -95,6 +117,9 @@
   } @else {
     <small class="d-block text-truncate">
       <ng-container *ngTemplateOutlet="label" />
+      @if (hasLabel) {
+        <ng-container *ngTemplateOutlet="copyIcon" />
+      }
     </small>
   }
 </div>

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

@@ -7,4 +7,8 @@
     font-variant-numeric: initial;
     line-height: 1;
   }
+  .mdc-copy {
+    display: inline-flex;
+    vertical-align: middle;
+  }
 }

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

@@ -32,6 +32,32 @@ export const Loading: Story = {
   }
 };
 
+export const IsinNoLabel: Story = {
+  args: {
+    isCurrency: false,
+    locale: 'en-US',
+    unit: 'USD',
+    value: 'US5949181045',
+    enableCopyToClipboardButton: true
+  },
+  name: 'Without Label with Copy'
+};
+
+export const IsinWithLabel: Story = {
+  args: {
+    isCurrency: false,
+    locale: 'en-US',
+    unit: 'USD',
+    value: 'US5949181045',
+    enableCopyToClipboardButton: true
+  },
+  render: (args) => ({
+    props: args,
+    template: `<gf-value [locale]="locale" [size]="size" [value]="value">ISIN</gf-value>`
+  }),
+  name: 'With Label and Copy'
+};
+
 export const Currency: Story = {
   args: {
     isCurrency: true,

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

@@ -1,17 +1,25 @@
 import { getLocale } from '@ghostfolio/common/helper';
 
+import { Clipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import {
-  CUSTOM_ELEMENTS_SCHEMA,
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  computed,
+  CUSTOM_ELEMENTS_SCHEMA,
+  ElementRef,
+  input,
   Input,
   OnChanges,
-  computed,
+  ViewChild
-  input
 } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { copyOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
+import ms from 'ms';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
@@ -22,9 +30,10 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
   styleUrls: ['./value.component.scss'],
   templateUrl: './value.component.html'
 })
-export class GfValueComponent implements OnChanges {
+export class GfValueComponent implements AfterViewInit, OnChanges {
   @Input() colorizeSign = false;
   @Input() deviceType: string;
+  @Input() enableCopyToClipboardButton = false;
   @Input() icon = '';
   @Input() isAbsolute = false;
   @Input() isCurrency = false;
@@ -37,12 +46,24 @@ export class GfValueComponent implements OnChanges {
   @Input() unit = '';
   @Input() value: number | string = '';
 
+  @ViewChild('labelContent', { static: false }) labelContent!: ElementRef;
+
   public absoluteValue = 0;
   public formattedValue = '';
+  public hasLabel = false;
   public isNumber = false;
   public isString = false;
   public useAbsoluteValue = false;
 
+  public constructor(
+    private clipboard: Clipboard,
+    private snackBar: MatSnackBar
+  ) {
+    addIcons({
+      copyOutline
+    });
+  }
+
   public readonly precision = input<number>();
 
   private readonly formatOptions = computed<Intl.NumberFormatOptions>(() => {
@@ -59,6 +80,20 @@ export class GfValueComponent implements OnChanges {
     return precision !== undefined && precision >= 0;
   }
 
+  private initializeVariables() {
+    this.absoluteValue = 0;
+    this.formattedValue = '';
+    this.isNumber = false;
+    this.isString = false;
+    this.locale = this.locale || getLocale();
+    this.useAbsoluteValue = false;
+  }
+
+  public ngAfterViewInit() {
+    const el = this.labelContent.nativeElement;
+    this.hasLabel = el.textContent.trim().length > 0 || el.children.length > 0;
+  }
+
   public ngOnChanges() {
     this.initializeVariables();
 
@@ -137,12 +172,20 @@ export class GfValueComponent implements OnChanges {
     }
   }
 
-  private initializeVariables() {
+  public onCopyValueToClipboard() {
-    this.absoluteValue = 0;
+    if (this.value || this.value === 0) {
-    this.formattedValue = '';
+      this.clipboard.copy(this.formattedValue);
-    this.isNumber = false;
+      this.snackBar.open(
-    this.isString = false;
+        '✅ ' + $localize`Value has been copied to the clipboard`,
-    this.locale = this.locale || getLocale();
+        undefined,
-    this.useAbsoluteValue = false;
+        {
+          duration: ms('3 seconds')
+        }
+      );
+    } else {
+      this.snackBar.open($localize`Value is empty`, undefined, {
+        duration: ms('3 seconds')
+      });
+    }
   }
 }