feat(blog): icon to share article by url

apps/blog/src/assets/i18n/en.json

@@ -100,7 +100,8 @@
     "title": "Share this post",
     "twitterAriaLabel": "Share on Twitter",
     "facebookAriaLabel": "Share on Facebook",
-    "linkedInAriaLabel": "Share on LinkedIn"
+    "linkedInAriaLabel": "Share on LinkedIn",
+    "urlAriaLabel": "Copy URL"
   },
   "dynamicTextClamp": {
     "readMore": "Read more",

apps/blog/src/assets/i18n/pl.json

@@ -103,7 +103,8 @@
     "title": "Podziel się artykułem",
     "twitterAriaLabel": "Udostępnij na Twitterze",
     "facebookAriaLabel": "Udostępnij na Facebooku",
-    "linkedInAriaLabel": "Udostępnij na LinkedIn"
+    "linkedInAriaLabel": "Udostępnij na LinkedIn",
+    "urlAriaLabel": "Skopiuj URL"
   },
   "dynamicTextClamp": {
     "readMore": "Czytaj więcej",

libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss

@@ -0,0 +1,16 @@
+.url-icon-animated {
+  animation: icon 1s forwards;
+  animation-iteration-count: 1;
+}
+
+@keyframes icon {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts

@@ -1,4 +1,15 @@
-import { Component, computed, input } from '@angular/core';
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { NgClass } from '@angular/common';
+import {
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  Renderer2,
+  signal,
+  viewChild,
+} from '@angular/core';
 import { TranslocoDirective } from '@jsverse/transloco';
 import { FastSvgComponent } from '@push-based/ngx-fast-svg';
 
@@ -13,16 +24,22 @@ type ShareItem = {
 @Component({
   standalone: true,
   selector: 'al-article-share-icons',
-  imports: [IconComponent, TranslocoDirective, FastSvgComponent],
+  imports: [
+    IconComponent,
+    TranslocoDirective,
+    FastSvgComponent,
+    CdkCopyToClipboard,
+    NgClass,
+  ],
+  styleUrls: ['./article-share-icons.component.scss'],
   template: `
-    <div class="flex items-center gap-4">
-      <span *transloco="let t" class="text-lg font-bold">
+    <div *transloco="let t" class="flex items-center gap-4">
+      <span class="text-lg font-bold">
         {{ t('articleShareIcons.title') }}
       </span>
 
       @for (item of items(); track $index) {
         <a
-          *transloco="let t"
           role="button"
           [attr.aria-label]="t(item.ariaLabel)"
           [href]="item.href"
@@ -31,6 +48,24 @@ type ShareItem = {
           <fast-svg class="text-al-foreground" [name]="item.icon" size="28" />
         </a>
       }
+      <a
+        #copyUrlIcon
+        role="button"
+        [attr.aria-label]="t('articleShareIcons.urlAriaLabel')"
+        [cdkCopyToClipboard]="window.location.href"
+        (click)="onCopyUrl()"
+        target="_blank"
+      >
+        @if (!isCopyUrlClicked()) {
+          <fast-svg class="text-al-foreground" [name]="'link'" size="28" />
+        } @else {
+          <fast-svg
+            class="text-al-foreground"
+            [name]="'circle-check'"
+            size="28"
+          />
+        }
+      </a>
     </div>
   `,
 })
@@ -39,6 +74,12 @@ export class ArticleShareIconsComponent {
   title = input.required<string>();
   language = input.required<string>();
 
+  isCopyUrlClicked = signal(false);
+  copyUrlIcon = viewChild<ElementRef>('copyUrlIcon');
+
+  protected readonly window = window;
+  private renderer = inject(Renderer2);
+
   readonly items = computed<ShareItem[]>(() => {
     const url =
       this.language() === 'pl_PL'
@@ -64,4 +105,27 @@ export class ArticleShareIconsComponent {
       },
     ];
   });
+
+  onCopyUrl(): void {
+    this.isCopyUrlClicked.set(true);
+
+    if (this.copyUrlIcon()) {
+      this.renderer.addClass(
+        this.copyUrlIcon()?.nativeElement,
+        'url-icon-animated',
+      );
+      const handleAnimationEnd = () => {
+        this.isCopyUrlClicked.set(false);
+        this.renderer.removeClass(
+          this.copyUrlIcon()?.nativeElement,
+          'url-icon-animated',
+        );
+      };
+      this.renderer.listen(
+        this.copyUrlIcon()?.nativeElement,
+        'animationend',
+        handleAnimationEnd,
+      );
+    }
+  }
 }

libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts

@@ -18,7 +18,8 @@ export type IconType =
   | 'send'
   | 'tick'
   | 'twitter-x'
-  | 'youtube';
+  | 'youtube'
+  | 'link';
 
 @Component({
   selector: 'al-icon',