diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json index bf0026f6..7afda7cf 100644 --- a/apps/blog/src/assets/i18n/en.json +++ b/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", diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json index 70498a46..e92acfa5 100644 --- a/apps/blog/src/assets/i18n/pl.json +++ b/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", diff --git a/apps/blog/src/assets/icons/link.svg b/apps/blog/src/assets/icons/link.svg new file mode 100644 index 00000000..c2686f09 --- /dev/null +++ b/apps/blog/src/assets/icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss new file mode 100644 index 00000000..cf54514b --- /dev/null +++ b/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); + } +} diff --git a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts index e7078705..bf89e9c6 100644 --- a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts +++ b/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: ` -