Merge pull request #677 from MurhafSousli/master

Deploy demo to netlify

CHANGELOG.MD

@@ -1,5 +1,12 @@
 # Changelog
 
+## 15.0.1
+
+- fix: Share directive requires icons dependencies, closes [#673](https://github.com/MurhafSousli/ngx-sharebuttons/issues/673).
+- refactor: Import `FaIconComponent` instead of `FontAwesomeModule`.
+- refactor: Remove `CommonModule` imports.
+- refactor: Avoid merging default options with injected options for each share directive / component instance.
+
 ## 15.0.0
 
 - feat: Upgrade to Angular 18.

package.json

@@ -12,18 +12,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.1",
-    "@angular/cdk": "^18.0.1",
-    "@angular/common": "^18.0.1",
-    "@angular/compiler": "^18.0.1",
-    "@angular/core": "^18.0.1",
-    "@angular/forms": "^18.0.1",
-    "@angular/material": "^18.0.1",
-    "@angular/platform-browser": "^18.0.1",
-    "@angular/platform-browser-dynamic": "^18.0.1",
-    "@angular/platform-server": "^18.0.1",
-    "@angular/router": "^18.0.1",
-    "@angular/ssr": "^18.0.2",
+    "@angular/animations": "^18.0.3",
+    "@angular/cdk": "^18.0.3",
+    "@angular/common": "^18.0.3",
+    "@angular/compiler": "^18.0.3",
+    "@angular/core": "^18.0.3",
+    "@angular/forms": "^18.0.3",
+    "@angular/material": "^18.0.3",
+    "@angular/platform-browser": "^18.0.3",
+    "@angular/platform-browser-dynamic": "^18.0.3",
+    "@angular/platform-server": "^18.0.3",
+    "@angular/router": "^18.0.3",
+    "@angular/ssr": "^18.0.4",
     "@fortawesome/angular-fontawesome": "^0.15.0",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
@@ -34,21 +34,21 @@
     "highlight.js": "^11.9.0",
     "ngx-highlightjs": "^12.0.0",
     "ngx-progressbar": "^11.1.0",
-    "ngx-scrollbar": "^15.0.0",
+    "ngx-scrollbar": "^15.0.1",
     "normalize.css": "^8.0.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
+    "@angular-devkit/build-angular": "^18.0.4",
     "@angular-eslint/builder": "18.0.1",
     "@angular-eslint/eslint-plugin": "18.0.1",
     "@angular-eslint/eslint-plugin-template": "18.0.1",
     "@angular-eslint/schematics": "18.0.1",
     "@angular-eslint/template-parser": "18.0.1",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.1",
+    "@angular/cli": "^18.0.4",
+    "@angular/compiler-cli": "^18.0.3",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^20.12.12",

projects/ngx-sharebuttons-demo/src/app/shared/note/note.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
 @Component({

projects/ngx-sharebuttons/button/src/share-button.ts

@@ -8,9 +8,8 @@ import {
   EventEmitter,
   ChangeDetectionStrategy
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import {
   DEFAULT_OPTIONS,
   SHARE_BUTTONS_CONFIG,
@@ -25,19 +24,12 @@ import {
   templateUrl: './share-button.html',
   styleUrls: ['./share-button.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    FontAwesomeModule,
-    ShareButtonDirective
-  ]
+  imports: [ShareButtonDirective, FaIconComponent]
 })
 export class ShareButton {
 
   /** Injected options */
-  private readonly injectedOptions: ShareButtonsConfig = inject(SHARE_BUTTONS_CONFIG, { optional: true });
-
-  /** Combine injected option with default options */
-  readonly options: ShareButtonsConfig = this.injectedOptions ? { ...DEFAULT_OPTIONS, ...this.injectedOptions } : DEFAULT_OPTIONS;
+  private readonly injectedOptions: ShareButtonsConfig = inject(SHARE_BUTTONS_CONFIG, { optional: true }) || {};
 
   /** Share button type */
   @Input() button: ShareButtonProp;
@@ -73,7 +65,7 @@ export class ShareButton {
   @Input() icon: IconProp;
 
   /** Button theme */
-  @Input() theme: string = this.options.theme;
+  @Input() theme: string = this.injectedOptions.theme || DEFAULT_OPTIONS.theme;
 
   /** A flag that indicates if the button's click is disabled */
   @Input({ transform: booleanAttribute }) disabled: boolean;

projects/ngx-sharebuttons/icons/src/share-icons.ts

@@ -1,6 +1,7 @@
-import { InjectionToken, Provider } from '@angular/core';
+import { Provider } from '@angular/core';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { SHARE_ICONS } from 'ngx-sharebuttons';
 import {
   faFacebookF, faFacebookMessenger, faLine, faLinkedinIn, faMix, faPinterestP,
   faRedditAlien, faTelegramPlane, faTumblr, faXTwitter, faViber, faVk, faWhatsapp, faXing
@@ -16,8 +17,6 @@ const icons: IconDefinition[] = [
   faEnvelope, faCheck, faPrint, faExclamation, faLink, faEllipsisH, faMinus, faLine
 ];
 
-export const SHARE_ICONS: InjectionToken<unknown> = new InjectionToken('SHARE_ICONS');
-
 export function iconsLoaderFactory(iconLibrary: FaIconLibrary) {
   iconLibrary.addIcons(...icons);
   return null;

projects/ngx-sharebuttons/ng-package.json

@@ -6,5 +6,8 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts"
-  }
+  },
+  "allowedNonPeerDependencies": [
+    "."
+  ]
 }

projects/ngx-sharebuttons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-sharebuttons",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
     "@angular/core": ">=17.0.0",

projects/ngx-sharebuttons/src/lib/share-button.directive.ts

@@ -14,7 +14,7 @@ import {
   InputSignal,
   WritableSignal
 } from '@angular/core';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 import { ShareService } from './share.service';
 import {
@@ -41,10 +41,7 @@ export class ShareButtonDirective {
   private readonly injectedProps: IShareButtons = inject(SHARE_BUTTONS_PROP, { optional: true });
 
   /** Injected options */
-  private readonly injectedOptions: ShareButtonsConfig = inject(SHARE_BUTTONS_CONFIG, { optional: true });
-
-  /** Combine injected option with default options */
-  private readonly options: ShareButtonsConfig = this.injectedOptions ? { ...DEFAULT_OPTIONS, ...this.injectedOptions } : DEFAULT_OPTIONS;
+  private readonly injectedOptions: ShareButtonsConfig = inject(SHARE_BUTTONS_CONFIG, { optional: true }) || {};
 
   /** Share directive element ref */
   private readonly shareService: ShareService = inject(ShareService);
@@ -132,9 +129,9 @@ export class ShareButtonDirective {
         tags: this.tags,
         redirectUrl: this.redirectUrl
       },
-      target: this.options.sharerTarget,
-      debug: this.options.debug,
-      method: this.options.sharerMethod,
+      target: this.injectedOptions.sharerTarget || DEFAULT_OPTIONS.sharerTarget,
+      debug: this.injectedOptions.debug || DEFAULT_OPTIONS.debug,
+      method: this.injectedOptions.sharerMethod || DEFAULT_OPTIONS.sharerMethod,
       uiState: this.uiState,
     }, this.shareButtonInstance());
 

projects/ngx-sharebuttons/src/lib/share.models.ts

@@ -1,12 +1,14 @@
 import { InjectionToken, Provider, WritableSignal } from '@angular/core';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ShareButtonProp } from './share.defaults';
 
 export const SHARE_BUTTONS_CONFIG: InjectionToken<ShareButtonsConfig> = new InjectionToken<ShareButtonsConfig>('shareButtonsConfig');
 
-export function provideShareButtonsOptions(...providers: Provider[]): Provider[] {
-  return [providers];
+export const SHARE_ICONS: InjectionToken<unknown> = new InjectionToken('SHARE_ICONS');
+
+export function provideShareButtonsOptions(...providers: Provider[]): Provider {
+  return providers;
 }
 
 export function withConfig(options: ShareButtonsConfig): Provider {

projects/ngx-sharebuttons/src/lib/share.service.ts

@@ -4,10 +4,9 @@ import { HttpParams } from '@angular/common/http';
 import { Meta } from '@angular/platform-browser';
 import { Platform } from '@angular/cdk/platform';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { SHARE_ICONS } from 'ngx-sharebuttons/icons';
 import { getValidUrl } from './utils';
 import { SHARE_BUTTONS } from './share.defaults';
-import { IShareButton, ShareParams, ShareParamsFunc, SharerMethod, SharerMethods } from './share.models';
+import { SHARE_ICONS, IShareButton, ShareParams, ShareParamsFunc, SharerMethod, SharerMethods } from './share.models';
 
 interface ShareLinkParams {
   url: string;

projects/ngx-sharebuttons/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { ShareButtonFuncArgs } from './share.models';
 
 /** Returns a valid URL or falls back to current URL */