Noissue. Transfer copy feature to a new component

src/app/components/ui-components/components/copy-field/copy-field.component.html

@@ -0,0 +1,9 @@
+<div class="copy-field">
+  <input type="text" readonly [value]="value">
+  <button (click)="copyToClipboard()">
+    <span class="fa far fa-copy"></span>
+  </button>
+</div>
+<div #copiedMessage class="hidden">
+  {{ 'footer_donation_copied' | translate }}
+</div>

src/app/components/ui-components/components/copy-field/copy-field.component.scss

@@ -0,0 +1,5 @@
+@import "../../../styles";
+
+.copy-field {
+  @include copy-field(30px, $color-gray, $color-white, $color-gray-very-light);
+}

src/app/components/ui-components/components/copy-field/copy-field.component.ts

@@ -0,0 +1,39 @@
+import {
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-copy-field',
+  templateUrl: './copy-field.component.html',
+  styleUrls: ['./copy-field.component.scss'],
+})
+export class CopyFieldComponent {
+  @Input() value = '';
+  @ViewChild('copiedMessage') copiedMessage: ElementRef;
+
+  constructor(
+    private snackBar: MatSnackBar,
+    public translate: TranslateService
+  ) {}
+
+  copyToClipboard(): void {
+    void navigator.clipboard
+      .writeText(this.value)
+      .then(() => {
+        this.snackBar.open(
+          this.copiedMessage.nativeElement.textContent,
+          '',
+          {
+            horizontalPosition: 'center',
+            verticalPosition: 'top',
+            duration: 600,
+          }
+        );
+      });
+  }
+}

src/app/components/ui-components/ui-components.module.ts

@@ -26,6 +26,7 @@ import { CarouselComponent } from './components/carousel/carousel.component';
 import { CarouselItemDirective } from './components/carousel/carousel-item.directive';
 import { DirectivesModule } from "../../directives/directives.module";
 import { PageSubtitleComponent } from './components/page-subtitle/page-subtitle.component';
+import { CopyFieldComponent } from './components/copy-field/copy-field.component';
 
 const components = [
   AccordionComponent,
@@ -47,6 +48,7 @@ const components = [
   BannerComponent,
   CarouselComponent,
   PageSubtitleComponent,
+  CopyFieldComponent,
 ];
 
 @NgModule({