Various improvements

apps/client/src/styles.scss

@@ -546,6 +546,10 @@ ngx-skeleton-loader {
   padding: 9px 24px !important;
 }
 
+.no-height {
+  height: unset !important;
+}
+
 .no-min-width {
   min-width: unset !important;
 }

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

@@ -12,12 +12,14 @@
   <ng-template #copyIcon>
     @if (enableCopyToClipboardButton) {
       <button
-        class="bg-transparent no-min-width mdc-button"
+        class="ml-1 no-height no-min-width p-1"
+        i18n-title
         mat-button
+        title="Copy to clipboard"
         type="button"
         (click)="onCopyValueToClipboard()"
       >
-        <ion-icon class="icon-small" name="copy-outline" />
+        <ion-icon class="text-muted" name="copy-outline" />
       </button>
     }
   </ng-template>

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

@@ -1,3 +1,4 @@
+import '@angular/localize/init';
 import { moduleMetadata } from '@storybook/angular';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -13,6 +14,9 @@ export default {
     })
   ],
   argTypes: {
+    enableCopyToClipboardButton: {
+      control: 'boolean'
+    },
     deviceType: {
       control: 'select',
       options: ['desktop', 'mobile']
@@ -32,32 +36,6 @@ 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 [enableCopyToClipboardButton]="enableCopyToClipboardButton" [locale]="locale" [size]="size" [value]="value">ISIN</gf-value>`
-  }),
-  name: 'With Label and Copy'
-};
-
 export const Currency: Story = {
   args: {
     isCurrency: true,
@@ -84,7 +62,7 @@ export const Label: Story = {
   },
   render: (args) => ({
     props: args,
-    template: `<gf-value [locale]="locale" [size]="size" [value]="value">Label</gf-value>`
+    template: `<gf-value [enableCopyToClipboardButton]="enableCopyToClipboardButton" [locale]="locale" [size]="size" [value]="value">Label</gf-value>`
   })
 };
 

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

@@ -14,6 +14,7 @@ import {
   OnChanges,
   ViewChild
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
@@ -24,7 +25,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, IonIcon, NgxSkeletonLoaderModule],
+  imports: [CommonModule, IonIcon, MatButtonModule, NgxSkeletonLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-value',
   styleUrls: ['./value.component.scss'],
@@ -164,9 +165,10 @@ export class GfValueComponent implements AfterViewInit, OnChanges {
   }
 
   public onCopyValueToClipboard() {
-    this.clipboard.copy(this.formattedValue);
+    this.clipboard.copy(String(this.value));
+
     this.snackBar.open(
-      '✅ ' + $localize`Value has been copied to the clipboard`,
+      '✅ ' + $localize`${this.value} has been copied to the clipboard`,
       undefined,
       {
         duration: ms('3 seconds')