diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index 142d2ea53..f5a4e9c80 100644 --- a/apps/client/src/styles.scss +++ b/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; } diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html index 145b80b96..c4d6532a7 100644 --- a/libs/ui/src/lib/value/value.component.html +++ b/libs/ui/src/lib/value/value.component.html @@ -12,12 +12,14 @@ @if (enableCopyToClipboardButton) { } diff --git a/libs/ui/src/lib/value/value.component.stories.ts b/libs/ui/src/lib/value/value.component.stories.ts index 3f5429dfc..0fb6276a6 100644 --- a/libs/ui/src/lib/value/value.component.stories.ts +++ b/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: `ISIN` - }), - 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: `Label` + template: `Label` }) }; diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts index 6daf268d0..c5e00b0cd 100644 --- a/libs/ui/src/lib/value/value.component.ts +++ b/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')