v14.0.0

CHANGELOG.MD

@@ -9,6 +9,7 @@
 - enhance: Replace Twitter with X, closes [#650](https://github.com/MurhafSousli/ngx-sharebuttons/issues/650) and [#657](https://github.com/MurhafSousli/ngx-sharebuttons/issues/657).
 - feat: Ability to create a sharer links through the share service.
 - feat: Add `args` input to add additional custom parameters to the sharer link.
+- feat: Remove `rxjs` dependency.
 - fix: Cannot override `windowObj` due to `mergeDeep`, closes [#572](https://github.com/MurhafSousli/ngx-sharebuttons/issues/572).
 - fix: config is ignored if the module is lazy loaded, closes [#579](https://github.com/MurhafSousli/ngx-sharebuttons/issues/579).
 - fix: `opened` output not firing, closes [#633](https://github.com/MurhafSousli/ngx-sharebuttons/issues/633).

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2023 Murhaf Sousli
+Copyright (c) 2016-2024 Murhaf Sousli
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img height="200px" width="200px" style="text-align: center;" src="https://rawcdn.githack.com/MurhafSousli/ngx-sharebuttons/13279ed77c47fe9dd7b61e4dad3ded6d02488c2f/projects/ngx-sharebuttons-demo/src/assets/img/logo.svg">
   <h1 align="center">Angular Share Buttons</h1>
-  <p align="center"><img width="500px" src="https://user-images.githubusercontent.com/8130692/83341721-ed8f7100-a2e6-11ea-8eed-f1a6945487c0.png" alt="Capture" border="0"></p>
+  <p align="center"><img width="500px" src="https://github.com/MurhafSousli/ngx-sharebuttons/assets/8130692/28a47d3f-bb9f-4bf4-b035-802337ce3aa8" alt="Capture" border="0"></p>
 </p>
 
 [![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-sharebuttons.netlify.app/)
@@ -18,17 +18,10 @@
 
 For the documentation see the [WIKI](https://github.com/MurhafSousli/ngx-sharebuttons/wiki) page.
 
-## Packages
-
-- **ngx-sharebuttons** - Share button directive to convert any element to a share button.
-- **ngx-sharebuttons/button** - Share button component to add buttons individually.
-- **ngx-sharebuttons/buttons** - Share buttons component to add a collection of share buttons.
-- **ngx-sharebuttons/icons** - Simplifies import the share icons from FontAwesome.
-
 ## Available buttons
 
 1. Facebook
-2. Twitter
+2. X (Twitter)
 3. LinkedIn
 4. Pinterest
 5. WhatsApp
@@ -46,20 +39,10 @@ For the documentation see the [WIKI](https://github.com/MurhafSousli/ngx-sharebu
 17. Copy link
 18. Print
 
-
-#### Need more buttons?
-
-> The plugin allows you to add your own buttons as well. if you like to add a new share button to this package feel free to submit a PR, or open an issue with dev docs link of the social network you want to include. 
-
-
 ## Issues
 
 If you identify any errors in this component, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/ngx-sharebuttons/issues).
 
-## Support
-
-[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)
-
 ## Author
 
  **Murhaf Sousli**
@@ -73,37 +56,6 @@ If you identify any errors in this component, or have an idea for an improvement
 - [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar)
 - [ngx-bar-rating](https://github.com/MurhafSousli/ngx-bar-rating)
 - [ngx-disqus](https://github.com/MurhafSousli/ngx-disqus)
-- [ngx-wordpress](https://github.com/MurhafSousli/ngx-wordpress)
 - [ngx-highlightjs](https://github.com/MurhafSousli/ngx-highlightjs)
 - [ngx-scrollbar](https://github.com/MurhafSousli/ngx-scrollbar)
 - [ngx-teximate](https://github.com/MurhafSousli/ngx-teximate)
-
-## Contributors
-
-### Code Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-<a href="https://github.com/MurhafSousli/ngx-sharebuttons/graphs/contributors"><img src="https://opencollective.com/ngx-sharebuttons/contributors.svg?width=890&button=false" /></a>
-
-### Financial Contributors
-
-Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/ngx-sharebuttons/contribute)]
-
-#### Individuals
-
-<a href="https://opencollective.com/ngx-sharebuttons"><img src="https://opencollective.com/ngx-sharebuttons/individuals.svg?width=890"></a>
-
-#### Organizations
-
-Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/ngx-sharebuttons/contribute)]
-
-<a href="https://opencollective.com/ngx-sharebuttons/organization/0/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/0/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/1/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/1/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/2/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/2/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/3/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/3/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/4/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/4/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/5/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/5/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/6/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/6/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/7/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/7/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/8/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/8/avatar.svg"></a>
-<a href="https://opencollective.com/ngx-sharebuttons/organization/9/website"><img src="https://opencollective.com/ngx-sharebuttons/organization/9/avatar.svg"></a>

projects/ngx-sharebuttons-demo/src/app/app.config.ts

@@ -22,30 +22,29 @@ const scrollConfig: InMemoryScrollingOptions = {
 const inMemoryScrollingFeature: InMemoryScrollingFeature = withInMemoryScrolling(scrollConfig);
 
 export const appConfig: ApplicationConfig = {
-    providers: [
-      provideHttpClient(withFetch()),
-      provideRouter(routes, withHashLocation(), inMemoryScrollingFeature),
-      provideShareButtonsOptions(
-        withIcons(),
-        withConfig({
-          debug: true,
-          sharerMethod: SharerMethods.Anchor
-          // xAccount: 'MurhafSousli'
-        }),
-        // customShareButton('x', {
-        //   color: 'purple'
-        // }),
-        // customShareButton('facebook', {
-        //   color: 'orange',
-        //   icon: faFacebookSquare
-        // })
-      ),
-      provideClientHydration(),
-      provideAnimationsAsync(),
-      provideHighlightOptions({
-        fullLibraryLoader: () => import('highlight.js'),
-        themePath: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css'
-      })
-    ]
-  }
-;
+  providers: [
+    provideHttpClient(withFetch()),
+    provideRouter(routes, withHashLocation(), inMemoryScrollingFeature),
+    provideShareButtonsOptions(
+      withIcons(),
+      withConfig({
+        debug: true,
+        sharerMethod: SharerMethods.Anchor
+        // xAccount: 'MurhafSousli'
+      }),
+      // customShareButton('x', {
+      //   color: 'purple'
+      // }),
+      // customShareButton('facebook', {
+      //   color: 'orange',
+      //   icon: faFacebookSquare
+      // })
+    ),
+    provideClientHydration(),
+    provideAnimationsAsync(),
+    provideHighlightOptions({
+      fullLibraryLoader: () => import('highlight.js'),
+      themePath: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css'
+    })
+  ]
+}

projects/ngx-sharebuttons-demo/src/app/pages/button-c/button-c.component.html

@@ -6,7 +6,7 @@ <h1>Share Button Component</h1>
   <doc-container>
     <section>
       <section-title>Overview</section-title>
-      <p><code class="hljs" [textContent]="'<share-button>'"></code> is a component to add a single share button.</p>
+      <p><code class="hljs" [textContent]="'<share-button>'"></code> is a component that adds a single share button.</p>
       <note icon="book">
         This component is available through the <code class="hljs">ngx-sharebuttons/button</code> package.
       </note>
@@ -17,7 +17,7 @@ <h1>Share Button Component</h1>
       <p>Install the following packages</p>
 
       <h4>NPM</h4>
-      <hl-code [code]="'assets/code-examples/install.bash' | codeFromUrl | async"/>
+      <hl-code [code]="'assets/code-examples/install-with-icons.bash' | codeFromUrl | async"/>
     </section>
 
     <section>

projects/ngx-sharebuttons-demo/src/app/pages/buttons-c/buttons-c.component.html

@@ -7,7 +7,7 @@ <h1>Share Buttons Component</h1>
     <div style="flex: 1;">
       <section>
         <section-title>Overview</section-title>
-        <p><code class="hljs" [textContent]="'<share-buttons>'"></code> is a component to add a collection of share
+        <p><code class="hljs" [textContent]="'<share-buttons>'"></code> is a component that displays a collection of share
           buttons.</p>
         <note icon="book">
           This component is available through the <code class="hljs">ngx-sharebuttons/buttons</code>package.
@@ -19,7 +19,7 @@ <h1>Share Buttons Component</h1>
         <p>Install the following packages</p>
 
         <h4>NPM</h4>
-        <hl-code [code]="'assets/code-examples/install.bash' | codeFromUrl | async"/>
+        <hl-code [code]="'assets/code-examples/install-with-icons.bash' | codeFromUrl | async"/>
       </section>
 
       <section>
@@ -41,8 +41,8 @@ <h4>NPM</h4>
       <section>
         <section-title>Basic Usage</section-title>
 
-        <hl-code [code]="'assets/code-examples/share-buttons/recommended-example.html' | codeFromUrl | async"
-                 [languages]="['html']"/>
+        <hl-code [code]="'assets/code-examples/share-buttons/basic-example.ts' | codeFromUrl | async"
+                 [languages]="['ts']"/>
 
         <code-switcher [code]="'assets/code-examples/share-buttons/example-1.html' | codeFromUrl | async"
                        [languages]="['html']"

projects/ngx-sharebuttons-demo/src/app/pages/custom-button/custom-button.component.html

@@ -6,13 +6,15 @@ <h1>Add custom share button</h1>
   <doc-container>
     <section>
       <section-title>Overview</section-title>
-      <p>To use your own share button use the ShareService to add a custom button.</p>
+      <p>To create a new share button or to modify an existing share button, you can provide the options using
+        <code class="hljs">customShareButton</code> function inside <code class="hljs">provideShareButtonsOptions</code>
+        in your app.config file.</p>
 
       <p></p>
 
       <hl-code [code]="'assets/code-examples/custom-button/custom-button.ts' | codeFromUrl | async"/>
 
-      <p>The available input for sharing parameters are <code class="hljs">url</code>, <code class="hljs">url</code>,
+      <p>The available inputs for sharing parameters are <code class="hljs">url</code>,
         <code class="hljs">title</code>, <code class="hljs">description</code>, <code class="hljs">image</code>,
         <code class="hljs">tags</code> and <code class="hljs">via</code>.
 

projects/ngx-sharebuttons-demo/src/app/shared/lab/lab.component.html

@@ -144,7 +144,7 @@
               <input autocomplete="off"
                      matInput
                      [(ngModel)]="config.url"
-                     [disabled]="component === 'share-button' && !['linkedin', 'reddit'].includes(config.button)">
+                     [disabled]="component === 'share-button' && ['print'].includes(config.button)">
               <mat-hint>If empty! It uses the current page URL</mat-hint>
             </mat-form-field>
           </div>
@@ -155,15 +155,15 @@
               <input autocomplete="off"
                      matInput
                      [(ngModel)]="config.title"
-                     [disabled]="component === 'share-button' && !['reddit'].includes(config.button)">
+                     [disabled]="component === 'share-button' && !['reddit', 'email'].includes(config.button)">
             </mat-form-field>
 
             <mat-form-field color="primary" appearance="fill">
               <mat-label>Description</mat-label>
               <input autocomplete="off"
                      matInput
                      [(ngModel)]="config.description"
-                     [disabled]="component === 'share-button' && !['x', 'whatsapp', 'telegram', 'pinterest'].includes(config.button)">
+                     [disabled]="component === 'share-button' && !['x', 'whatsapp', 'telegram', 'pinterest', 'sms', 'email', 'viber'].includes(config.button)">
             </mat-form-field>
 
             <mat-form-field color="primary" appearance="fill">

projects/ngx-sharebuttons-demo/src/app/shared/shared-info/shared-info.component.html

@@ -11,7 +11,7 @@ <h4>Using Meta Tags inputs</h4>
   specific social network.</p>
 
 <note>
-  Some of the meta tag inputs may seem not working, see compatibility <a target="_blank"
-                                                                         href="https://github.com/MurhafSousli/ngx-sharebuttons/wiki/Meta-tags-inputs-compatibility">
-  here</a>, to properly set the meta tags, SSR is needed! <a routerLink="../faq">read more...</a>.
+  Some of the meta tag inputs may not work as expected. You can check their compatibility <a target="_blank"
+                                                                                             href="https://github.com/MurhafSousli/ngx-sharebuttons/wiki/Meta-tags-inputs-compatibility">
+  here</a>. To properly set the meta tags, server-side rendering (SSR) is needed. <a routerLink="../faq">Read more...</a>
 </note>

projects/ngx-sharebuttons-demo/src/assets/code-examples/faq/buttons-order.html

@@ -1 +1 @@
-<share-buttons [include]="['telegram', 'twitter', 'pinterest', 'whatsapp']"/>
+<share-buttons [include]="['telegram', 'x', 'pinterest', 'whatsapp']"/>

projects/ngx-sharebuttons-demo/src/assets/code-examples/install-with-icons.bash

@@ -0,0 +1,2 @@
+npm i ngx-sharebuttons @angular/cdk
+npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

projects/ngx-sharebuttons-demo/src/assets/code-examples/share-buttons/basic-example.ts

@@ -9,5 +9,5 @@ import { ShareButtons } from 'ngx-sharebuttons/buttons';
     <share-buttons>
   `
 })
-export class ShareButtonExample {
+export class ShareButtonsExample {
 }

projects/ngx-sharebuttons-demo/src/assets/code-examples/theme.scss

@@ -1 +1 @@
-@import 'ngx-sharebuttons/button/themes/default';
+@import 'ngx-sharebuttons/themes/default';

projects/ngx-sharebuttons-demo/src/assets/data/component-api.json

@@ -6,7 +6,7 @@
   },
   {
     "name": "button",
-    "description": "Button type, e.g. 'facebook', 'twitter' ...etc. default: null",
+    "description": "Button type, e.g. 'facebook', 'x' ...etc. default: null",
     "type": "input"
   },
   {
@@ -26,12 +26,12 @@
   },
   {
     "name": "title",
-    "description": "Override title meta tag for LinkedIn and Reddit, default: null",
+    "description": "Override title meta tag for Reddit and Email, default: null",
     "type": "input"
   },
   {
     "name": "description",
-    "description": "Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest, default: null",
+    "description": "Override description meta tag for WhatsApp, Telegram, Viber, SMS, Email and Pinterest, default: null",
     "type": "input"
   },
   {
@@ -41,7 +41,7 @@
   },
   {
     "name": "tags",
-    "description": "Override tags for Tumblr and Twitter, default: null",
+    "description": "Override tags for Tumblr and X, default: null",
     "type": "input"
   },
   {
@@ -60,8 +60,8 @@
     "type": "input"
   },
   {
-    "name": "autoSetMeta",
-    "description": "Initializes meta tag inputs from SEO meta tags, default: true",
+    "name": "redirectUrl",
+    "description": "Override redirectUrl for Messenger (desktop), default: null",
     "type": "input"
   },
   {

projects/ngx-sharebuttons-demo/src/assets/data/container-api.json

@@ -1,12 +1,12 @@
 [
   {
     "name": "text",
-    "description": "Popup's button custom text, default: ['fas', 'share']",
+    "description": "Popup's button custom icon, default: 'Share'",
     "type": "input"
   },
   {
     "name": "icon",
-    "description": "Popup's button custom icon, default: 'Share'",
+    "description": "Popup's button custom text, default: ['fas', 'share']",
     "type": "input"
   },
   {
@@ -36,12 +36,12 @@
   },
   {
     "name": "title",
-    "description": "Override title meta tag for LinkedIn and Reddit, default: null",
+    "description": "Override title meta tag for Reddit and Email, default: null",
     "type": "input"
   },
   {
     "name": "description",
-    "description": "Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest, default: null",
+    "description": "Override description meta tag for WhatsApp, Telegram, Viber, SMS, Email and Pinterest, default: null",
     "type": "input"
   },
   {
@@ -51,7 +51,7 @@
   },
   {
     "name": "tags",
-    "description": "Override tags for Tumblr and Twitter, default: null",
+    "description": "Override tags for Tumblr and X, default: null",
     "type": "input"
   },
   {
@@ -69,11 +69,6 @@
     "description": "Show buttons text, default: false",
     "type": "input"
   },
-  {
-    "name": "autoSetMeta",
-    "description": "Initializes meta tag inputs from SEO meta tags, default: true",
-    "type": "input"
-  },
   {
     "name": "disabled",
     "description": "A boolean flag that indicates if share buttons clicks should be disabled",

projects/ngx-sharebuttons-demo/src/assets/data/directive-api.json

@@ -11,12 +11,12 @@
   },
   {
     "name": "title",
-    "description": "Override title meta tag for LinkedIn and Reddit, default: null",
+    "description": "Override title meta tag for Reddit and Email, default: null",
     "type": "input"
   },
   {
     "name": "description",
-    "description": "Override description meta tag for LinkedIn, WhatsApp, Telegram and Pinterest, default: null",
+    "description": "Override description meta tag for WhatsApp, Telegram, Viber, SMS, Email and Pinterest, default: null",
     "type": "input"
   },
   {