web-social-share - npm Package Compare versions

Comparing version 6.2.0 to 6.3.0

CHANGELOG.md

@@ -0,10 +1,40 @@
+<a name="6.3.0"></a>
+# [6.3.0](https://github.com/peterpeterparker/web-social-share/compare/v6.2.0...v6.3.0) (2020-02-07)
+
+### Features
+
+* add "Hacker News"
+* exposes interfaces in bundle
+* improve UI (max. width 540px instead of 500px, box-shadow and border-radius for the container)
+* refactor duplicate actions functions code
+* GitHub action to deploy demo website to Firebase
+* transfer GitHub repo to my self ([peterpeterparker](https://github.com/peterpeterparker/web-social-share)) 
+
 <a name="6.2.0"></a>
-# [6.2.0](https://github.com/fluster/web-social-share/compare/v6.1.0...v6.2.0) (2019-07-30)
+# [6.2.0](https://github.com/peterpeterparker/web-social-share/compare/v6.1.0...v6.2.0) (2019-07-30)
 
 ### Fix
 
-* refactor component to avoid the need to move slots in order to be compatible with Font Awesome (CSS import) ([#18](https://github.com/fluster/web-social-share/issues/18))
+* refactor component to avoid the need to move slots in order to be compatible with Font Awesome (CSS import) ([#18](https://github.com/peterpeterparker/web-social-share/issues/18))
 
+### Special note
+
+There isn't any "breaking changes" but according the type and how you style your icons, you might need to change some CSS variables to keep styles in terms of size the same way.
+
+For example I had to change `width` to `font-size` in the [index.html](https://github.com/peterpeterparker/web-social-share/blob/208362a6eb53e30d191f0b095223f2cd0b8a637d/src/index.html#L77) of the component.
+
+From:
+
+```
+<i class="fab fa-twitter" slot="twitter" style="color: #00aced; width: 1.4rem;"></i>
+```
+
+To:
+
+```
+<i class="fab fa-twitter" slot="twitter" style="color: #00aced; font-size: 1.6rem;"></i>
+```
+
 <a name="6.1.0"></a>
-# [6.1.0](https://github.com/fluster/web-social-share/compare/v6.0.0...v6.1.0) (2019-07-12)
+# [6.1.0](https://github.com/peterpeterparker/web-social-share/compare/v6.0.0...v6.1.0) (2019-07-12)
 
@@ -16,10 +46,10 @@ ### Features
 <a name="6.0.0"></a>
-# [6.0.0](https://github.com/fluster/web-social-share/compare/v5.1.0...v6.0.0) (2019-06-11)
+# [6.0.0](https://github.com/peterpeterparker/web-social-share/compare/v5.1.0...v6.0.0) (2019-06-11)
 
 ### Features
 
-* add "Copy (to clipboard)" support ([#17](https://github.com/fluster/web-social-share/issues/17))
+* add "Copy (to clipboard)" support ([#17](https://github.com/peterpeterparker/web-social-share/issues/17))
 
 <a name="5.1.0"></a>
-# [5.1.0](https://github.com/fluster/web-social-share/compare/v5.0.0...v5.1.0) (2019-06-05)
+# [5.1.0](https://github.com/peterpeterparker/web-social-share/compare/v5.0.0...v5.1.0) (2019-06-05)
 
@@ -31,7 +61,7 @@ ### Libs
 <a name="5.0.0"></a>
-# [5.0.0](https://github.com/fluster/web-social-share/compare/v4.0.2...v5.0.0) (2019-02-17)
+# [5.0.0](https://github.com/peterpeterparker/web-social-share/compare/v4.0.2...v5.0.0) (2019-02-17)
 
 ### Breaking changes
 
-* transform component to a shadowed Web Component ([#14](https://github.com/fluster/web-social-share/issues/14))
+* transform component to a shadowed Web Component ([#14](https://github.com/peterpeterparker/web-social-share/issues/14))
 
@@ -45,37 +75,37 @@ Notes:
 <a name="4.0.2"></a>
-# [4.0.2](https://github.com/fluster/web-social-share/compare/v4.0.1...v4.0.2) (2019-02-02)
+# [4.0.2](https://github.com/peterpeterparker/web-social-share/compare/v4.0.1...v4.0.2) (2019-02-02)
 
 ### Fix
 
-* incorrect URL when WhatsApp socialShareText is empty ([#13](https://github.com/fluster/web-social-share/pull/13), thx @fmendoza for the PR 👍)
+* incorrect URL when WhatsApp socialShareText is empty ([#13](https://github.com/peterpeterparker/web-social-share/pull/13), thx @fmendoza for the PR 👍)
 
 <a name="4.0.1"></a>
-# [4.0.1](https://github.com/fluster/web-social-share/compare/v4.0.0...v4.0.1) (2019-01-29)
+# [4.0.1](https://github.com/peterpeterparker/web-social-share/compare/v4.0.0...v4.0.1) (2019-01-29)
 
 ### Fix
 
-* freaking iphone might cut action text ([a6bd031](https://github.com/fluster/web-social-share/commit/a6bd031aeb4e7b7a9f32870613eb68002d40db82) and [1856787](https://github.com/fluster/web-social-share/commit/18567873b8244e625e874ee6941043edc1acafc5))
+* freaking iphone might cut action text ([a6bd031](https://github.com/peterpeterparker/web-social-share/commit/a6bd031aeb4e7b7a9f32870613eb68002d40db82) and [1856787](https://github.com/peterpeterparker/web-social-share/commit/18567873b8244e625e874ee6941043edc1acafc5))
 
 <a name="4.0.0"></a>
-# [4.0.0](https://github.com/fluster/web-social-share/compare/v3.0.1...v4.0.0) (2019-01-29)
+# [4.0.0](https://github.com/peterpeterparker/web-social-share/compare/v3.0.1...v4.0.0) (2019-01-29)
 
 ### Features
 
-* add WhatsApp support ([#11](https://github.com/fluster/web-social-share/issues/11))
-* add a CSS4 variable to customize the height of the action sheet on small devices ([#12](https://github.com/fluster/web-social-share/issues/12))
+* add WhatsApp support ([#11](https://github.com/peterpeterparker/web-social-share/issues/11))
+* add a CSS4 variable to customize the height of the action sheet on small devices ([#12](https://github.com/peterpeterparker/web-social-share/issues/12))
 
 <a name="3.0.1"></a>
-# [3.0.1](https://github.com/fluster/web-social-share/compare/v3.0.0...v3.0.1) (2019-01-26)
+# [3.0.1](https://github.com/peterpeterparker/web-social-share/compare/v3.0.0...v3.0.1) (2019-01-26)
 
 ### Fix
 
-* the move slot method might be executed before the sub-component is loaded ([#9](https://github.com/fluster/web-social-share/issues/9))
+* the move slot method might be executed before the sub-component is loaded ([#9](https://github.com/peterpeterparker/web-social-share/issues/9))
 
 <a name="3.0.0"></a>
-# [3.0.0](https://github.com/fluster/web-social-share/compare/v2.1.4...v3.0.0) (2019-01-26)
+# [3.0.0](https://github.com/peterpeterparker/web-social-share/compare/v2.1.4...v3.0.0) (2019-01-26)
 
 ### Features
 
-* add pseudo slots to the social share actions ([#8](https://github.com/fluster/web-social-share/issues/8))
-* ability to customize / override rendered names ([#7](https://github.com/fluster/web-social-share/issues/7))
+* add pseudo slots to the social share actions ([#8](https://github.com/peterpeterparker/web-social-share/issues/8))
+* ability to customize / override rendered names ([#7](https://github.com/peterpeterparker/web-social-share/issues/7))
 
@@ -91,39 +121,39 @@ ### Website
 <a name="2.1.4"></a>
-# [2.1.4](https://github.com/fluster/web-social-share/compare/v2.1.3...v2.1.4) (2018-08-24)
+# [2.1.4](https://github.com/peterpeterparker/web-social-share/compare/v2.1.3...v2.1.4) (2018-08-24)
 
 ### Fix
 
-* fix Safari z-index ([92dc154](https://github.com/fluster/web-social-share/commit/92dc154d8246bd822fd324051b68ca935645c5c9)
+* fix Safari z-index ([92dc154](https://github.com/peterpeterparker/web-social-share/commit/92dc154d8246bd822fd324051b68ca935645c5c9)
 
 <a name="2.1.3"></a>
-# [2.1.3](https://github.com/fluster/web-social-share/compare/v2.1.2...v2.1.3) (2018-08-23)
+# [2.1.3](https://github.com/peterpeterparker/web-social-share/compare/v2.1.2...v2.1.3) (2018-08-23)
 
 ### Fix
 
-* fix action sheet not closed on middle click ([#5](https://github.com/fluster/web-social-share/issues/5))
+* fix action sheet not closed on middle click ([#5](https://github.com/peterpeterparker/web-social-share/issues/5))
 
 <a name="2.1.2"></a>
-# [2.1.2](https://github.com/fluster/web-social-share/compare/v2.1.1...v2.1.2) (2018-08-23)
+# [2.1.2](https://github.com/peterpeterparker/web-social-share/compare/v2.1.1...v2.1.2) (2018-08-23)
 
 ### Fix
 
-* use full page height ([#4](https://github.com/fluster/web-social-share/issues/4))
+* use full page height ([#4](https://github.com/peterpeterparker/web-social-share/issues/4))
 
 <a name="2.1.1"></a>
-# [2.1.1](https://github.com/fluster/web-social-share/compare/v2.1.0...v2.1.1) (2018-08-23)
+# [2.1.1](https://github.com/peterpeterparker/web-social-share/compare/v2.1.0...v2.1.1) (2018-08-23)
 
 ### Fix
 
-* resolve build warning ([99a118428c3915379e5bf38b3301e3594174fb9f](https://github.com/fluster/web-social-share/commit/99a118428c3915379e5bf38b3301e3594174fb9f))
+* resolve build warning ([99a118428c3915379e5bf38b3301e3594174fb9f](https://github.com/peterpeterparker/web-social-share/commit/99a118428c3915379e5bf38b3301e3594174fb9f))
 
 <a name="2.1.0"></a>
-# [2.1.0](https://github.com/fluster/web-social-share/compare/v2.0.0...v2.1.0) (2018-08-19)
+# [2.1.0](https://github.com/peterpeterparker/web-social-share/compare/v2.0.0...v2.1.0) (2018-08-19)
 
 ### Libs
 
-* update Stencil ([#2](https://github.com/fluster/web-social-share/issues/2))
-* target ES2017 ([#3](https://github.com/fluster/web-social-share/issues/3))
+* update Stencil ([#2](https://github.com/peterpeterparker/web-social-share/issues/2))
+* target ES2017 ([#3](https://github.com/peterpeterparker/web-social-share/issues/3))
 
 <a name="2.0.0"></a>
-# [2.0.0](https://github.com/fluster/web-social-share/compare/v1.1.0...v2.0.0) (2018-08-12)
+# [2.0.0](https://github.com/peterpeterparker/web-social-share/compare/v1.1.0...v2.0.0) (2018-08-12)
 
@@ -130,0 +160,0 @@ ## Features

dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ 'use strict';
 
-const __chunk_1 = require('./chunk-dcc68840.js');
+const core = require('./core-5389ef5e.js');
 
 const defineCustomElements = (win, options) => {
-  return __chunk_1.patchEsm().then(() => {
-    __chunk_1.bootstrapLazy([["web-social-share.cjs",[[1,"web-social-share",{"show":[1028],"share":[16]}]]]], options);
+  return core.patchEsm().then(() => {
+    core.bootstrapLazy([["web-social-share.cjs",[[1,"web-social-share",{"show":[1028],"share":[16]}]]]], options);
   });
@@ -12,0 +12,0 @@ };

dist/cjs/web-social-share.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const __chunk_1 = require('./chunk-dcc68840.js');
+const core = require('./core-5389ef5e.js');
 
@@ -12,3 +12,3 @@ /**
 class WebSocialShareFacebook {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString;
@@ -125,3 +125,3 @@ if (attrs.socialShareType && attrs.socialShareType === 'feed') {
 class WebSocialShareTwitter {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.twitter.com/intent/tweet?';
@@ -150,3 +150,3 @@ if (attrs.socialShareText) {
 class WebSocialShareEmail {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'mailto:';
@@ -174,3 +174,3 @@ if (attrs.socialShareTo) {
 class WebSocialShareLinkedin {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.linkedin.com/shareArticle?mini=true';
@@ -193,3 +193,3 @@ urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
 class WebSocialSharePinterest {
-    static share(attrs) {
+    static async share(attrs) {
         window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&media=' + encodeURIComponent(attrs.socialShareMedia) + '&description=' + encodeURIComponent(attrs.socialShareText), 'Pinterest', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
@@ -201,3 +201,3 @@ + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
 class WebSocialShareReddit {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.reddit.com/';
@@ -227,3 +227,3 @@ if (attrs.socialShareSubreddit) {
 class WebSocialShareWhatsapp {
-    static share(attrs) {
+    static async share(attrs) {
         const isMobile = WebSocialShareUtils.isMobile();
@@ -257,6 +257,45 @@ let urlString = isMobile ? 'https://api.whatsapp.com/send?text=' : 'https://web.whatsapp.com/send?text=';
 
-class WebSocialShare {
+class WebSocialShareHackerNews {
+    static async share(attrs) {
+        let urlString = 'https://news.ycombinator.com/submitlink?u=';
+        //default to the current page if a URL isn't specified
+        urlString += encodeURIComponent(attrs.socialShareUrl || window.location.href);
+        if (attrs.socialShareText) {
+            urlString += '&t=' + encodeURIComponent(attrs.socialShareText);
+        }
+        WebSocialShareUtils.staticOpenNewWindow(urlString);
+    }
+}
+
+const WebSocialShare = class {
     constructor(hostRef) {
-        __chunk_1.registerInstance(this, hostRef);
-        this.closed = __chunk_1.createEvent(this, "closed", 7);
+        core.registerInstance(this, hostRef);
+        this.handleFacebookShare = async (attributes) => {
+            await WebSocialShareFacebook.share(attributes);
+        };
+        this.handleTwitterShare = async (attributes) => {
+            await WebSocialShareTwitter.share(attributes);
+        };
+        this.handleEmailShare = async (attributes) => {
+            await WebSocialShareEmail.share(attributes);
+        };
+        this.handleLinkedinShare = async (attributes) => {
+            await WebSocialShareLinkedin.share(attributes);
+        };
+        this.handlePinterestShare = async (attributes) => {
+            await WebSocialSharePinterest.share(attributes);
+        };
+        this.handleRedditShare = async (attributes) => {
+            await WebSocialShareReddit.share(attributes);
+        };
+        this.handleWhatsappShare = async (attributes) => {
+            await WebSocialShareWhatsapp.share(attributes);
+        };
+        this.handleCopyShare = async (attributes) => {
+            await WebSocialShareCopy.share(attributes);
+        };
+        this.handleHackerNewsShare = async (attributes) => {
+            await WebSocialShareHackerNews.share(attributes);
+        };
+        this.closed = core.createEvent(this, "closed", 7);
     }
@@ -281,93 +320,64 @@ hide() {
     render() {
-        return (__chunk_1.h("div", { class: this.show ? 'web-social-share web-social-share-open' : 'web-social-share web-social-share-close' }, __chunk_1.h("div", { class: 'web-social-share-backdrop', onClick: () => this.hide() }), __chunk_1.h("div", { class: 'web-social-share-action-sheet', onClick: () => this.hide() }, __chunk_1.h("div", { class: 'web-social-share-action-sheet-container' }, __chunk_1.h("div", { class: 'web-social-share-action-sheet-group' }, this.renderTargets())))));
+        return (core.h("div", { class: this.show ? 'web-social-share web-social-share-open' : 'web-social-share web-social-share-close' }, core.h("div", { class: 'web-social-share-backdrop', onClick: () => this.hide() }), core.h("div", { class: 'web-social-share-action-sheet', onClick: () => this.hide() }, core.h("div", { class: 'web-social-share-action-sheet-container' }, core.h("div", { class: 'web-social-share-action-sheet-group' }, this.renderTargets())))));
     }
     renderTargets() {
         if (!this.share || !this.share.config) {
-            return (__chunk_1.h("span", null));
+            return (core.h("span", null));
         }
         else {
-            return (this.share.config.map((config) => __chunk_1.h("div", { class: "web-social-share-target" }, this.renderButton(config))));
+            return (this.share.config.map((config) => core.h("div", { class: "web-social-share-target" }, this.renderButtons(config))));
         }
     }
-    renderButton(share) {
+    renderButtons(share) {
         if (share.facebook) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleFacebookShare($event, share), class: 'web-social-share-button web-social-share-button-facebook' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "facebook" })), this.renderName(share.facebook, 'Facebook')));
+            return this.renderButton(share.facebook, 'facebook', this.handleFacebookShare, 'Facebook');
         }
         else if (share.twitter) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleTwitterShare($event, share), class: 'web-social-share-button web-social-share-button-twitter' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "twitter" })), this.renderName(share.twitter, 'Twitter')));
+            return this.renderButton(share.twitter, 'twitter', this.handleTwitterShare, 'Twitter');
         }
         else if (share.email) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleEmailShare($event, share), class: 'web-social-share-button web-social-share-button-email' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "email" })), this.renderName(share.email, 'Email')));
+            return this.renderButton(share.email, 'email', this.handleEmailShare, 'Email');
         }
         else if (share.linkedin) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleLinkedinShare($event, share), class: 'web-social-share-button web-social-share-button-linkedin' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "linkedin" })), this.renderName(share.linkedin, 'Linkedin')));
+            return this.renderButton(share.linkedin, 'linkedin', this.handleLinkedinShare, 'Linkedin');
         }
         else if (share.pinterest) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handlePinterestShare($event, share), class: 'web-social-share-button web-social-share-button-pinterest' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "pinterest" })), this.renderName(share.pinterest, 'Pinterest')));
+            return this.renderButton(share.pinterest, 'pinterest', this.handlePinterestShare, 'Pinterest');
         }
         else if (share.reddit) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleRedditShare($event, share), class: 'web-social-share-button web-social-share-button-reddit' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "reddit" })), this.renderName(share.reddit, 'Reddit')));
+            return this.renderButton(share.reddit, 'reddit', this.handleRedditShare, 'Reddit');
         }
         else if (share.whatsapp) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleWhatsappShare($event, share), class: 'web-social-share-button web-social-share-button-whatsapp' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "whatsapp" })), this.renderName(share.whatsapp, 'WhatsApp')));
+            return this.renderButton(share.whatsapp, 'whatsapp', this.handleWhatsappShare, 'WhatsApp');
         }
         else if (share.copy) {
-            return (__chunk_1.h("button", { onClick: ($event) => this.handleCopyShare($event, share), class: 'web-social-share-button web-social-share-button-copy' }, __chunk_1.h("div", { class: "web-social-share-button-icon" }, __chunk_1.h("slot", { name: "copy" })), this.renderName(share.copy, 'Copy')));
+            return this.renderButton(share.copy, 'copy', this.handleCopyShare, 'Copy');
         }
+        else if (share.hackernews) {
+            return this.renderButton(share.hackernews, 'hackernews', this.handleHackerNewsShare, 'Hacker News');
+        }
         else {
-            return (__chunk_1.h("div", null));
+            return undefined;
         }
     }
-    handleFacebookShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareFacebook.share(share.facebook);
-        this.hide();
+    renderButton(attributes, slotName, action, defaultBrandName) {
+        return (core.h("button", { onClick: ($event) => this.handleShare($event, attributes, action), class: 'web-social-share-button' }, core.h("div", { class: "web-social-share-button-icon" }, core.h("slot", { name: slotName })), this.renderName(attributes, defaultBrandName)));
     }
-    handleTwitterShare($event, share) {
+    async handleShare($event, attributes, action) {
         $event.stopPropagation();
-        WebSocialShareTwitter.share(share.twitter);
+        await action(attributes);
         this.hide();
     }
-    handleEmailShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareEmail.share(share.email);
-        this.hide();
-    }
-    handleLinkedinShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareLinkedin.share(share.linkedin);
-        this.hide();
-    }
-    handlePinterestShare($event, share) {
-        $event.stopPropagation();
-        WebSocialSharePinterest.share(share.pinterest);
-        this.hide();
-    }
-    handleRedditShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareReddit.share(share.reddit);
-        this.hide();
-    }
-    handleWhatsappShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareWhatsapp.share(share.whatsapp);
-        this.hide();
-    }
-    async handleCopyShare($event, share) {
-        $event.stopPropagation();
-        await WebSocialShareCopy.share(share.copy);
-        this.hide();
-    }
     renderName(displayAttributes, defaultBrandName) {
         if (this.share.displayNames) {
-            return (__chunk_1.h("p", null, displayAttributes && displayAttributes.brandName && displayAttributes.brandName !== '' ? displayAttributes.brandName : defaultBrandName));
+            return (core.h("p", null, displayAttributes && displayAttributes.brandName && displayAttributes.brandName !== '' ? displayAttributes.brandName : defaultBrandName));
         }
         else {
-            return (__chunk_1.h("span", null));
+            return (core.h("span", null));
         }
     }
-    get el() { return __chunk_1.getElement(this); }
-    static get style() { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:500px}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s;transition:height .2s}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--web-social-share-target-icon-container-height,2rem)}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; }
-}
+    get el() { return core.getElement(this); }
+    static get style() { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:540px}\@media (min-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{border-radius:var(--web-social-share-action-sheet-group-border-radius,8px 8px 0 0)}}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-webkit-box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s ease-in;transition:height .2s ease-in}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{margin:var(--web-social-share-brand-margin,2px 0);color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=hackernews]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; }
+};
 
 exports.web_social_share = WebSocialShare;

dist/cjs/websocialshare.cjs.js

 'use strict';
 
-const __chunk_1 = require('./chunk-dcc68840.js');
+const core = require('./core-5389ef5e.js');
 
-__chunk_1.patchBrowser().then(options => {
-  return __chunk_1.bootstrapLazy([["web-social-share.cjs",[[1,"web-social-share",{"show":[1028],"share":[16]}]]]], options);
+core.patchBrowser().then(options => {
+  return core.bootstrapLazy([["web-social-share.cjs",[[1,"web-social-share",{"show":[1028],"share":[16]}]]]], options);
 });

dist/collection/collection-manifest.json

@@ -7,4 +7,4 @@ {
     "name": "@stencil/core",
-    "version": "1.2.2",
-    "typescriptVersion": "3.5.3"
+    "version": "1.8.7",
+    "typescriptVersion": "3.7.5"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/web-social-share/web-social-share.js

@@ -10,3 +10,33 @@ import { h } from "@stencil/core";
 import { WebSocialShareCopy } from '../../utils/web-social-share/web-social-share-copy';
+import { WebSocialShareHackerNews } from '../../utils/web-social-share/web-social-share-hackernews';
 export class WebSocialShare {
+    constructor() {
+        this.handleFacebookShare = async (attributes) => {
+            await WebSocialShareFacebook.share(attributes);
+        };
+        this.handleTwitterShare = async (attributes) => {
+            await WebSocialShareTwitter.share(attributes);
+        };
+        this.handleEmailShare = async (attributes) => {
+            await WebSocialShareEmail.share(attributes);
+        };
+        this.handleLinkedinShare = async (attributes) => {
+            await WebSocialShareLinkedin.share(attributes);
+        };
+        this.handlePinterestShare = async (attributes) => {
+            await WebSocialSharePinterest.share(attributes);
+        };
+        this.handleRedditShare = async (attributes) => {
+            await WebSocialShareReddit.share(attributes);
+        };
+        this.handleWhatsappShare = async (attributes) => {
+            await WebSocialShareWhatsapp.share(attributes);
+        };
+        this.handleCopyShare = async (attributes) => {
+            await WebSocialShareCopy.share(attributes);
+        };
+        this.handleHackerNewsShare = async (attributes) => {
+            await WebSocialShareHackerNews.share(attributes);
+        };
+    }
     hide() {
@@ -41,98 +71,48 @@ let element = this.el.shadowRoot.querySelector('div.web-social-share');
         else {
-            return (this.share.config.map((config) => h("div", { class: "web-social-share-target" }, this.renderButton(config))));
+            return (this.share.config.map((config) => h("div", { class: "web-social-share-target" }, this.renderButtons(config))));
         }
     }
-    renderButton(share) {
+    renderButtons(share) {
         if (share.facebook) {
-            return (h("button", { onClick: ($event) => this.handleFacebookShare($event, share), class: 'web-social-share-button web-social-share-button-facebook' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "facebook" })),
-                this.renderName(share.facebook, 'Facebook')));
+            return this.renderButton(share.facebook, 'facebook', this.handleFacebookShare, 'Facebook');
         }
         else if (share.twitter) {
-            return (h("button", { onClick: ($event) => this.handleTwitterShare($event, share), class: 'web-social-share-button web-social-share-button-twitter' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "twitter" })),
-                this.renderName(share.twitter, 'Twitter')));
+            return this.renderButton(share.twitter, 'twitter', this.handleTwitterShare, 'Twitter');
         }
         else if (share.email) {
-            return (h("button", { onClick: ($event) => this.handleEmailShare($event, share), class: 'web-social-share-button web-social-share-button-email' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "email" })),
-                this.renderName(share.email, 'Email')));
+            return this.renderButton(share.email, 'email', this.handleEmailShare, 'Email');
         }
         else if (share.linkedin) {
-            return (h("button", { onClick: ($event) => this.handleLinkedinShare($event, share), class: 'web-social-share-button web-social-share-button-linkedin' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "linkedin" })),
-                this.renderName(share.linkedin, 'Linkedin')));
+            return this.renderButton(share.linkedin, 'linkedin', this.handleLinkedinShare, 'Linkedin');
         }
         else if (share.pinterest) {
-            return (h("button", { onClick: ($event) => this.handlePinterestShare($event, share), class: 'web-social-share-button web-social-share-button-pinterest' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "pinterest" })),
-                this.renderName(share.pinterest, 'Pinterest')));
+            return this.renderButton(share.pinterest, 'pinterest', this.handlePinterestShare, 'Pinterest');
         }
         else if (share.reddit) {
-            return (h("button", { onClick: ($event) => this.handleRedditShare($event, share), class: 'web-social-share-button web-social-share-button-reddit' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "reddit" })),
-                this.renderName(share.reddit, 'Reddit')));
+            return this.renderButton(share.reddit, 'reddit', this.handleRedditShare, 'Reddit');
         }
         else if (share.whatsapp) {
-            return (h("button", { onClick: ($event) => this.handleWhatsappShare($event, share), class: 'web-social-share-button web-social-share-button-whatsapp' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "whatsapp" })),
-                this.renderName(share.whatsapp, 'WhatsApp')));
+            return this.renderButton(share.whatsapp, 'whatsapp', this.handleWhatsappShare, 'WhatsApp');
         }
         else if (share.copy) {
-            return (h("button", { onClick: ($event) => this.handleCopyShare($event, share), class: 'web-social-share-button web-social-share-button-copy' },
-                h("div", { class: "web-social-share-button-icon" },
-                    h("slot", { name: "copy" })),
-                this.renderName(share.copy, 'Copy')));
+            return this.renderButton(share.copy, 'copy', this.handleCopyShare, 'Copy');
         }
+        else if (share.hackernews) {
+            return this.renderButton(share.hackernews, 'hackernews', this.handleHackerNewsShare, 'Hacker News');
+        }
         else {
-            return (h("div", null));
+            return undefined;
         }
     }
-    handleFacebookShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareFacebook.share(share.facebook);
-        this.hide();
+    renderButton(attributes, slotName, action, defaultBrandName) {
+        return (h("button", { onClick: ($event) => this.handleShare($event, attributes, action), class: 'web-social-share-button' },
+            h("div", { class: "web-social-share-button-icon" },
+                h("slot", { name: slotName })),
+            this.renderName(attributes, defaultBrandName)));
     }
-    handleTwitterShare($event, share) {
+    async handleShare($event, attributes, action) {
         $event.stopPropagation();
-        WebSocialShareTwitter.share(share.twitter);
+        await action(attributes);
         this.hide();
     }
-    handleEmailShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareEmail.share(share.email);
-        this.hide();
-    }
-    handleLinkedinShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareLinkedin.share(share.linkedin);
-        this.hide();
-    }
-    handlePinterestShare($event, share) {
-        $event.stopPropagation();
-        WebSocialSharePinterest.share(share.pinterest);
-        this.hide();
-    }
-    handleRedditShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareReddit.share(share.reddit);
-        this.hide();
-    }
-    handleWhatsappShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareWhatsapp.share(share.whatsapp);
-        this.hide();
-    }
-    async handleCopyShare($event, share) {
-        $event.stopPropagation();
-        await WebSocialShareCopy.share(share.copy);
-        this.hide();
-    }
     renderName(displayAttributes, defaultBrandName) {
@@ -139,0 +119,0 @@ if (this.share.displayNames) {

dist/collection/utils/web-social-share/web-social-share-email.js

 import { WebSocialShareUtils } from './web-social-share-utils';
 export class WebSocialShareEmail {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'mailto:';
@@ -5,0 +5,0 @@ if (attrs.socialShareTo) {

dist/collection/utils/web-social-share/web-social-share-facebook.js

@@ -5,3 +5,3 @@ /**
 export class WebSocialShareFacebook {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString;
@@ -8,0 +8,0 @@ if (attrs.socialShareType && attrs.socialShareType === 'feed') {

dist/collection/utils/web-social-share/web-social-share-linkedin.js

 export class WebSocialShareLinkedin {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.linkedin.com/shareArticle?mini=true';
@@ -4,0 +4,0 @@ urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);

dist/collection/utils/web-social-share/web-social-share-pinterest.js

 export class WebSocialSharePinterest {
-    static share(attrs) {
+    static async share(attrs) {
         window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&media=' + encodeURIComponent(attrs.socialShareMedia) + '&description=' + encodeURIComponent(attrs.socialShareText), 'Pinterest', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
@@ -4,0 +4,0 @@ + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);

dist/collection/utils/web-social-share/web-social-share-reddit.js

 export class WebSocialShareReddit {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.reddit.com/';
@@ -4,0 +4,0 @@ if (attrs.socialShareSubreddit) {

dist/collection/utils/web-social-share/web-social-share-twitter.js

 import { WebSocialShareUtils } from './web-social-share-utils';
 export class WebSocialShareTwitter {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.twitter.com/intent/tweet?';
@@ -5,0 +5,0 @@ if (attrs.socialShareText) {

dist/collection/utils/web-social-share/web-social-share-whatsapp.js

 import { WebSocialShareUtils } from './web-social-share-utils';
 export class WebSocialShareWhatsapp {
-    static share(attrs) {
+    static async share(attrs) {
         const isMobile = WebSocialShareUtils.isMobile();
@@ -5,0 +5,0 @@ let urlString = isMobile ? 'https://api.whatsapp.com/send?text=' : 'https://web.whatsapp.com/send?text=';

dist/esm-es5/web-social-share.entry.js

 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
@@ -36,3 +37,3 @@ });
 };
-import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-92e462c5.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-a2e7fe62.js';
 /**
@@ -45,89 +46,94 @@ * Source: https://github.com/720kb/angular-socialshare/blob/master/dist/angular-socialshare.js
     WebSocialShareFacebook.share = function (attrs) {
-        var urlString;
-        if (attrs.socialShareType && attrs.socialShareType === 'feed') {
-            // if user specifies that they want to use the Facebook feed dialog
-            //(https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.4)
-            urlString = 'https://www.facebook.com/dialog/feed?';
-            if (attrs.socialShareVia) {
-                urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
-            }
-            if (attrs.socialShareRedirectUri) {
-                urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
-            }
-            if (attrs.socialShareUrl) {
-                urlString += '&link=' + encodeURIComponent(attrs.socialShareUrl);
-            }
-            if (attrs.socialShareTo) {
-                urlString += '&to=' + encodeURIComponent(attrs.socialShareTo);
-            }
-            if (attrs.socialShareDisplay) {
-                urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
-            }
-            if (attrs.socialShareRef) {
-                urlString += '&ref=' + encodeURIComponent(attrs.socialShareRef);
-            }
-            if (attrs.socialShareFrom) {
-                urlString += '&from=' + encodeURIComponent(attrs.socialShareFrom);
-            }
-            if (attrs.socialShareSource) {
-                urlString += '&source=' + encodeURIComponent(attrs.socialShareSource);
-            }
-            window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
-        else if (attrs.socialShareType && attrs.socialShareType === 'share') {
-            // if user specifies that they want to use the Facebook share dialog
-            //(https://developers.facebook.com/docs/sharing/reference/share-dialog)
-            urlString = 'https://www.facebook.com/dialog/share?';
-            if (attrs.socialShareVia) {
-                urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
-            }
-            if (attrs.socialShareRedirectUri) {
-                urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
-            }
-            if (attrs.socialShareUrl) {
-                urlString += '&href=' + encodeURIComponent(attrs.socialShareUrl);
-            }
-            if (attrs.socialShareQuote) {
-                urlString += '&quote=' + encodeURIComponent(attrs.socialShareQuote);
-            }
-            if (attrs.socialShareDisplay) {
-                urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
-            }
-            if (attrs.socialShareMobileiframe) {
-                urlString += '&mobile_iframe=' + encodeURIComponent(attrs.socialShareMobileiframe);
-            }
-            if (attrs.socialShareHashtags) {
-                urlString += '&hashtag=' + encodeURIComponent(attrs.socialShareHashtags);
-            }
-            window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
-        else if (attrs.socialShareType && attrs.socialShareType === 'send') {
-            // if user specifies that they want to use the Facebook send dialog
-            //(https://developers.facebook.com/docs/sharing/reference/send-dialog)
-            urlString = 'https://www.facebook.com/dialog/send?';
-            if (attrs.socialShareVia) {
-                urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
-            }
-            if (attrs.socialShareRedirectUri) {
-                urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
-            }
-            if (attrs.socialShareUrl) {
-                urlString += '&link=' + encodeURIComponent(attrs.socialShareUrl);
-            }
-            if (attrs.socialShareTo) {
-                urlString += '&to=' + encodeURIComponent(attrs.socialShareTo);
-            }
-            if (attrs.socialShareDisplay) {
-                urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
-            }
-            window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
-        else {
-            //otherwise default to using sharer.php
-            window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(attrs.socialShareUrl || window.location.href), 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                if (attrs.socialShareType && attrs.socialShareType === 'feed') {
+                    // if user specifies that they want to use the Facebook feed dialog
+                    //(https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.4)
+                    urlString = 'https://www.facebook.com/dialog/feed?';
+                    if (attrs.socialShareVia) {
+                        urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
+                    }
+                    if (attrs.socialShareRedirectUri) {
+                        urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
+                    }
+                    if (attrs.socialShareUrl) {
+                        urlString += '&link=' + encodeURIComponent(attrs.socialShareUrl);
+                    }
+                    if (attrs.socialShareTo) {
+                        urlString += '&to=' + encodeURIComponent(attrs.socialShareTo);
+                    }
+                    if (attrs.socialShareDisplay) {
+                        urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
+                    }
+                    if (attrs.socialShareRef) {
+                        urlString += '&ref=' + encodeURIComponent(attrs.socialShareRef);
+                    }
+                    if (attrs.socialShareFrom) {
+                        urlString += '&from=' + encodeURIComponent(attrs.socialShareFrom);
+                    }
+                    if (attrs.socialShareSource) {
+                        urlString += '&source=' + encodeURIComponent(attrs.socialShareSource);
+                    }
+                    window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                else if (attrs.socialShareType && attrs.socialShareType === 'share') {
+                    // if user specifies that they want to use the Facebook share dialog
+                    //(https://developers.facebook.com/docs/sharing/reference/share-dialog)
+                    urlString = 'https://www.facebook.com/dialog/share?';
+                    if (attrs.socialShareVia) {
+                        urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
+                    }
+                    if (attrs.socialShareRedirectUri) {
+                        urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
+                    }
+                    if (attrs.socialShareUrl) {
+                        urlString += '&href=' + encodeURIComponent(attrs.socialShareUrl);
+                    }
+                    if (attrs.socialShareQuote) {
+                        urlString += '&quote=' + encodeURIComponent(attrs.socialShareQuote);
+                    }
+                    if (attrs.socialShareDisplay) {
+                        urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
+                    }
+                    if (attrs.socialShareMobileiframe) {
+                        urlString += '&mobile_iframe=' + encodeURIComponent(attrs.socialShareMobileiframe);
+                    }
+                    if (attrs.socialShareHashtags) {
+                        urlString += '&hashtag=' + encodeURIComponent(attrs.socialShareHashtags);
+                    }
+                    window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                else if (attrs.socialShareType && attrs.socialShareType === 'send') {
+                    // if user specifies that they want to use the Facebook send dialog
+                    //(https://developers.facebook.com/docs/sharing/reference/send-dialog)
+                    urlString = 'https://www.facebook.com/dialog/send?';
+                    if (attrs.socialShareVia) {
+                        urlString += '&app_id=' + encodeURIComponent(attrs.socialShareVia);
+                    }
+                    if (attrs.socialShareRedirectUri) {
+                        urlString += '&redirect_uri=' + encodeURIComponent(attrs.socialShareRedirectUri);
+                    }
+                    if (attrs.socialShareUrl) {
+                        urlString += '&link=' + encodeURIComponent(attrs.socialShareUrl);
+                    }
+                    if (attrs.socialShareTo) {
+                        urlString += '&to=' + encodeURIComponent(attrs.socialShareTo);
+                    }
+                    if (attrs.socialShareDisplay) {
+                        urlString += '&display=' + encodeURIComponent(attrs.socialShareDisplay);
+                    }
+                    window.open(urlString, 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                else {
+                    //otherwise default to using sharer.php
+                    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(attrs.socialShareUrl || window.location.href), 'Facebook', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                return [2 /*return*/];
+            });
+        });
     };
@@ -162,21 +168,27 @@ return WebSocialShareFacebook;
     WebSocialShareTwitter.share = function (attrs) {
-        var urlString = 'https://www.twitter.com/intent/tweet?';
-        if (attrs.socialShareText) {
-            urlString += 'text=' + encodeURIComponent(attrs.socialShareText);
-        }
-        if (attrs.socialShareVia) {
-            urlString += '&via=' + encodeURIComponent(attrs.socialShareVia);
-        }
-        if (attrs.socialShareHashtags) {
-            urlString += '&hashtags=' + encodeURIComponent(attrs.socialShareHashtags);
-        }
-        //default to the current page if a URL isn't specified
-        urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
-        if (WebSocialShareUtils.isMobile()) {
-            WebSocialShareUtils.staticOpenNewWindow(urlString);
-        }
-        else {
-            window.open(urlString, 'Twitter', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                urlString = 'https://www.twitter.com/intent/tweet?';
+                if (attrs.socialShareText) {
+                    urlString += 'text=' + encodeURIComponent(attrs.socialShareText);
+                }
+                if (attrs.socialShareVia) {
+                    urlString += '&via=' + encodeURIComponent(attrs.socialShareVia);
+                }
+                if (attrs.socialShareHashtags) {
+                    urlString += '&hashtags=' + encodeURIComponent(attrs.socialShareHashtags);
+                }
+                //default to the current page if a URL isn't specified
+                urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
+                if (WebSocialShareUtils.isMobile()) {
+                    WebSocialShareUtils.staticOpenNewWindow(urlString);
+                }
+                else {
+                    window.open(urlString, 'Twitter', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                return [2 /*return*/];
+            });
+        });
     };
@@ -189,20 +201,26 @@ return WebSocialShareTwitter;
     WebSocialShareEmail.share = function (attrs) {
-        var urlString = 'mailto:';
-        if (attrs.socialShareTo) {
-            urlString += encodeURIComponent(attrs.socialShareTo);
-        }
-        urlString += '?';
-        if (attrs.socialShareBody) {
-            urlString += 'body=' + encodeURIComponent(attrs.socialShareBody);
-        }
-        if (attrs.socialShareSubject) {
-            urlString += '&subject=' + encodeURIComponent(attrs.socialShareSubject);
-        }
-        if (attrs.socialShareCc) {
-            urlString += '&cc=' + encodeURIComponent(attrs.socialShareCc);
-        }
-        if (attrs.socialShareBcc) {
-            urlString += '&bcc=' + encodeURIComponent(attrs.socialShareBcc);
-        }
-        WebSocialShareUtils.staticOpenNewWindow(urlString);
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                urlString = 'mailto:';
+                if (attrs.socialShareTo) {
+                    urlString += encodeURIComponent(attrs.socialShareTo);
+                }
+                urlString += '?';
+                if (attrs.socialShareBody) {
+                    urlString += 'body=' + encodeURIComponent(attrs.socialShareBody);
+                }
+                if (attrs.socialShareSubject) {
+                    urlString += '&subject=' + encodeURIComponent(attrs.socialShareSubject);
+                }
+                if (attrs.socialShareCc) {
+                    urlString += '&cc=' + encodeURIComponent(attrs.socialShareCc);
+                }
+                if (attrs.socialShareBcc) {
+                    urlString += '&bcc=' + encodeURIComponent(attrs.socialShareBcc);
+                }
+                WebSocialShareUtils.staticOpenNewWindow(urlString);
+                return [2 /*return*/];
+            });
+        });
     };
@@ -215,15 +233,21 @@ return WebSocialShareEmail;
     WebSocialShareLinkedin.share = function (attrs) {
-        var urlString = 'https://www.linkedin.com/shareArticle?mini=true';
-        urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
-        if (attrs.socialShareText) {
-            urlString += '&title=' + encodeURIComponent(attrs.socialShareText);
-        }
-        if (attrs.socialShareDescription) {
-            urlString += '&summary=' + encodeURIComponent(attrs.socialShareDescription);
-        }
-        if (attrs.socialShareSource) {
-            urlString += '&source=' + encodeURIComponent(attrs.socialShareSource);
-        }
-        window.open(urlString, 'Linkedin', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-            + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                urlString = 'https://www.linkedin.com/shareArticle?mini=true';
+                urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
+                if (attrs.socialShareText) {
+                    urlString += '&title=' + encodeURIComponent(attrs.socialShareText);
+                }
+                if (attrs.socialShareDescription) {
+                    urlString += '&summary=' + encodeURIComponent(attrs.socialShareDescription);
+                }
+                if (attrs.socialShareSource) {
+                    urlString += '&source=' + encodeURIComponent(attrs.socialShareSource);
+                }
+                window.open(urlString, 'Linkedin', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                    + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                return [2 /*return*/];
+            });
+        });
     };
@@ -236,4 +260,9 @@ return WebSocialShareLinkedin;
     WebSocialSharePinterest.share = function (attrs) {
-        window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&media=' + encodeURIComponent(attrs.socialShareMedia) + '&description=' + encodeURIComponent(attrs.socialShareText), 'Pinterest', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-            + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&media=' + encodeURIComponent(attrs.socialShareMedia) + '&description=' + encodeURIComponent(attrs.socialShareText), 'Pinterest', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                    + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                return [2 /*return*/];
+            });
+        });
     };
@@ -246,22 +275,28 @@ return WebSocialSharePinterest;
     WebSocialShareReddit.share = function (attrs) {
-        var urlString = 'https://www.reddit.com/';
-        if (attrs.socialShareSubreddit) {
-            urlString += 'r/' + attrs.socialShareSubreddit + '/submit?url=';
-        }
-        else {
-            urlString += 'submit?url=';
-        }
-        /*-
-        * Reddit isn't responsive and at default width for our popups (500 x 500), everything is messed up.
-        * So, overriding the width if it is less than 900 (played around to settle on this) and height if
-        * it is less than 650px.
-        */
-        if (attrs.socialSharePopupWidth < 900) {
-            attrs.socialSharePopupWidth = 900;
-        }
-        if (attrs.socialSharePopupHeight < 650) {
-            attrs.socialSharePopupHeight = 650;
-        }
-        window.open(urlString + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&title=' + encodeURIComponent(attrs.socialShareText), 'Reddit', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-            + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                urlString = 'https://www.reddit.com/';
+                if (attrs.socialShareSubreddit) {
+                    urlString += 'r/' + attrs.socialShareSubreddit + '/submit?url=';
+                }
+                else {
+                    urlString += 'submit?url=';
+                }
+                /*-
+                * Reddit isn't responsive and at default width for our popups (500 x 500), everything is messed up.
+                * So, overriding the width if it is less than 900 (played around to settle on this) and height if
+                * it is less than 650px.
+                */
+                if (attrs.socialSharePopupWidth < 900) {
+                    attrs.socialSharePopupWidth = 900;
+                }
+                if (attrs.socialSharePopupHeight < 650) {
+                    attrs.socialSharePopupHeight = 650;
+                }
+                window.open(urlString + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&title=' + encodeURIComponent(attrs.socialShareText), 'Reddit', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                    + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                return [2 /*return*/];
+            });
+        });
     };
@@ -274,16 +309,22 @@ return WebSocialShareReddit;
     WebSocialShareWhatsapp.share = function (attrs) {
-        var isMobile = WebSocialShareUtils.isMobile();
-        var urlString = isMobile ? 'https://api.whatsapp.com/send?text=' : 'https://web.whatsapp.com/send?text=';
-        if (attrs.socialShareText) {
-            urlString += encodeURIComponent(attrs.socialShareText) + '%0A';
-        }
-        //default to the current page if a URL isn't specified
-        urlString += encodeURIComponent(attrs.socialShareUrl || window.location.href);
-        if (isMobile) {
-            WebSocialShareUtils.staticOpenNewWindow(urlString);
-        }
-        else {
-            window.open(urlString, 'WhatsApp', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
-                + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
-        }
+        return __awaiter(this, void 0, void 0, function () {
+            var isMobile, urlString;
+            return __generator(this, function (_a) {
+                isMobile = WebSocialShareUtils.isMobile();
+                urlString = isMobile ? 'https://api.whatsapp.com/send?text=' : 'https://web.whatsapp.com/send?text=';
+                if (attrs.socialShareText) {
+                    urlString += encodeURIComponent(attrs.socialShareText) + '%0A';
+                }
+                //default to the current page if a URL isn't specified
+                urlString += encodeURIComponent(attrs.socialShareUrl || window.location.href);
+                if (isMobile) {
+                    WebSocialShareUtils.staticOpenNewWindow(urlString);
+                }
+                else {
+                    window.open(urlString, 'WhatsApp', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
+                        + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
+                }
+                return [2 /*return*/];
+            });
+        });
     };
@@ -316,8 +357,119 @@ return WebSocialShareWhatsapp;
 }());
+var WebSocialShareHackerNews = /** @class */ (function () {
+    function WebSocialShareHackerNews() {
+    }
+    WebSocialShareHackerNews.share = function (attrs) {
+        return __awaiter(this, void 0, void 0, function () {
+            var urlString;
+            return __generator(this, function (_a) {
+                urlString = 'https://news.ycombinator.com/submitlink?u=';
+                //default to the current page if a URL isn't specified
+                urlString += encodeURIComponent(attrs.socialShareUrl || window.location.href);
+                if (attrs.socialShareText) {
+                    urlString += '&t=' + encodeURIComponent(attrs.socialShareText);
+                }
+                WebSocialShareUtils.staticOpenNewWindow(urlString);
+                return [2 /*return*/];
+            });
+        });
+    };
+    return WebSocialShareHackerNews;
+}());
 var WebSocialShare = /** @class */ (function () {
-    function WebSocialShare(hostRef) {
+    function class_1(hostRef) {
+        var _this = this;
         registerInstance(this, hostRef);
+        this.handleFacebookShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareFacebook.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleTwitterShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareTwitter.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleEmailShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareEmail.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleLinkedinShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareLinkedin.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handlePinterestShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialSharePinterest.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleRedditShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareReddit.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleWhatsappShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareWhatsapp.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleCopyShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareCopy.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        this.handleHackerNewsShare = function (attributes) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, WebSocialShareHackerNews.share(attributes)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         this.closed = createEvent(this, "closed", 7);
     }
-    WebSocialShare.prototype.hide = function () {
+    class_1.prototype.hide = function () {
         var _this = this;
@@ -340,7 +492,7 @@ var element = this.el.shadowRoot.querySelector('div.web-social-share');
     };
-    WebSocialShare.prototype.render = function () {
+    class_1.prototype.render = function () {
         var _this = this;
         return (h("div", { class: this.show ? 'web-social-share web-social-share-open' : 'web-social-share web-social-share-close' }, h("div", { class: 'web-social-share-backdrop', onClick: function () { return _this.hide(); } }), h("div", { class: 'web-social-share-action-sheet', onClick: function () { return _this.hide(); } }, h("div", { class: 'web-social-share-action-sheet-container' }, h("div", { class: 'web-social-share-action-sheet-group' }, this.renderTargets())))));
     };
-    WebSocialShare.prototype.renderTargets = function () {
+    class_1.prototype.renderTargets = function () {
         var _this = this;
@@ -351,71 +503,42 @@ if (!this.share || !this.share.config) {
         else {
-            return (this.share.config.map(function (config) { return h("div", { class: "web-social-share-target" }, _this.renderButton(config)); }));
+            return (this.share.config.map(function (config) { return h("div", { class: "web-social-share-target" }, _this.renderButtons(config)); }));
         }
     };
-    WebSocialShare.prototype.renderButton = function (share) {
-        var _this = this;
+    class_1.prototype.renderButtons = function (share) {
         if (share.facebook) {
-            return (h("button", { onClick: function ($event) { return _this.handleFacebookShare($event, share); }, class: 'web-social-share-button web-social-share-button-facebook' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "facebook" })), this.renderName(share.facebook, 'Facebook')));
+            return this.renderButton(share.facebook, 'facebook', this.handleFacebookShare, 'Facebook');
         }
         else if (share.twitter) {
-            return (h("button", { onClick: function ($event) { return _this.handleTwitterShare($event, share); }, class: 'web-social-share-button web-social-share-button-twitter' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "twitter" })), this.renderName(share.twitter, 'Twitter')));
+            return this.renderButton(share.twitter, 'twitter', this.handleTwitterShare, 'Twitter');
         }
         else if (share.email) {
-            return (h("button", { onClick: function ($event) { return _this.handleEmailShare($event, share); }, class: 'web-social-share-button web-social-share-button-email' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "email" })), this.renderName(share.email, 'Email')));
+            return this.renderButton(share.email, 'email', this.handleEmailShare, 'Email');
         }
         else if (share.linkedin) {
-            return (h("button", { onClick: function ($event) { return _this.handleLinkedinShare($event, share); }, class: 'web-social-share-button web-social-share-button-linkedin' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "linkedin" })), this.renderName(share.linkedin, 'Linkedin')));
+            return this.renderButton(share.linkedin, 'linkedin', this.handleLinkedinShare, 'Linkedin');
         }
         else if (share.pinterest) {
-            return (h("button", { onClick: function ($event) { return _this.handlePinterestShare($event, share); }, class: 'web-social-share-button web-social-share-button-pinterest' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "pinterest" })), this.renderName(share.pinterest, 'Pinterest')));
+            return this.renderButton(share.pinterest, 'pinterest', this.handlePinterestShare, 'Pinterest');
         }
         else if (share.reddit) {
-            return (h("button", { onClick: function ($event) { return _this.handleRedditShare($event, share); }, class: 'web-social-share-button web-social-share-button-reddit' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "reddit" })), this.renderName(share.reddit, 'Reddit')));
+            return this.renderButton(share.reddit, 'reddit', this.handleRedditShare, 'Reddit');
         }
         else if (share.whatsapp) {
-            return (h("button", { onClick: function ($event) { return _this.handleWhatsappShare($event, share); }, class: 'web-social-share-button web-social-share-button-whatsapp' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "whatsapp" })), this.renderName(share.whatsapp, 'WhatsApp')));
+            return this.renderButton(share.whatsapp, 'whatsapp', this.handleWhatsappShare, 'WhatsApp');
         }
         else if (share.copy) {
-            return (h("button", { onClick: function ($event) { return _this.handleCopyShare($event, share); }, class: 'web-social-share-button web-social-share-button-copy' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "copy" })), this.renderName(share.copy, 'Copy')));
+            return this.renderButton(share.copy, 'copy', this.handleCopyShare, 'Copy');
         }
+        else if (share.hackernews) {
+            return this.renderButton(share.hackernews, 'hackernews', this.handleHackerNewsShare, 'Hacker News');
+        }
         else {
-            return (h("div", null));
+            return undefined;
         }
     };
-    WebSocialShare.prototype.handleFacebookShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareFacebook.share(share.facebook);
-        this.hide();
+    class_1.prototype.renderButton = function (attributes, slotName, action, defaultBrandName) {
+        var _this = this;
+        return (h("button", { onClick: function ($event) { return _this.handleShare($event, attributes, action); }, class: 'web-social-share-button' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: slotName })), this.renderName(attributes, defaultBrandName)));
     };
-    WebSocialShare.prototype.handleTwitterShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareTwitter.share(share.twitter);
-        this.hide();
-    };
-    WebSocialShare.prototype.handleEmailShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareEmail.share(share.email);
-        this.hide();
-    };
-    WebSocialShare.prototype.handleLinkedinShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareLinkedin.share(share.linkedin);
-        this.hide();
-    };
-    WebSocialShare.prototype.handlePinterestShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialSharePinterest.share(share.pinterest);
-        this.hide();
-    };
-    WebSocialShare.prototype.handleRedditShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareReddit.share(share.reddit);
-        this.hide();
-    };
-    WebSocialShare.prototype.handleWhatsappShare = function ($event, share) {
-        $event.stopPropagation();
-        WebSocialShareWhatsapp.share(share.whatsapp);
-        this.hide();
-    };
-    WebSocialShare.prototype.handleCopyShare = function ($event, share) {
+    class_1.prototype.handleShare = function ($event, attributes, action) {
         return __awaiter(this, void 0, void 0, function () {
@@ -426,3 +549,3 @@ return __generator(this, function (_a) {
                         $event.stopPropagation();
-                        return [4 /*yield*/, WebSocialShareCopy.share(share.copy)];
+                        return [4 /*yield*/, action(attributes)];
                     case 1:
@@ -436,3 +559,3 @@ _a.sent();
     };
-    WebSocialShare.prototype.renderName = function (displayAttributes, defaultBrandName) {
+    class_1.prototype.renderName = function (displayAttributes, defaultBrandName) {
         if (this.share.displayNames) {
@@ -445,3 +568,3 @@ return (h("p", null, displayAttributes && displayAttributes.brandName && displayAttributes.brandName !== '' ? displayAttributes.brandName : defaultBrandName));
     };
-    Object.defineProperty(WebSocialShare.prototype, "el", {
+    Object.defineProperty(class_1.prototype, "el", {
         get: function () { return getElement(this); },
@@ -451,9 +574,9 @@ enumerable: true,
     });
-    Object.defineProperty(WebSocialShare, "style", {
-        get: function () { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:500px}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s;transition:height .2s}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--web-social-share-target-icon-container-height,2rem)}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; },
+    Object.defineProperty(class_1, "style", {
+        get: function () { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:540px}\@media (min-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{border-radius:var(--web-social-share-action-sheet-group-border-radius,8px 8px 0 0)}}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-webkit-box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s ease-in;transition:height .2s ease-in}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{margin:var(--web-social-share-brand-margin,2px 0);color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=hackernews]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; },
         enumerable: true,
         configurable: true
     });
-    return WebSocialShare;
+    return class_1;
 }());
 export { WebSocialShare as web_social_share };

dist/esm/polyfills/css-shim.js

@@ -379,3 +379,9 @@ /*
     // computes the css scopes that might affect this particular element
-    var scopes = globalScopes.concat(getScopesForElement(hostScopeMap, hostEl));
+    // avoiding using spread arrays to avoid ts helper fns when in es5
+    var scopes = [];
+    var scopesForElement = getScopesForElement(hostScopeMap, hostEl);
+    // globalScopes are always took into account
+    globalScopes.forEach(function (s) { return scopes.push(s); });
+    // the parent scopes are computed by walking parent dom until <html> is reached
+    scopesForElement.forEach(function (s) { return scopes.push(s); });
     // each scope might have an array of associated selectors
@@ -431,5 +437,9 @@ // let's flatten the complete array of selectors from all the scopes
 function addGlobalStyle(globalScopes, styleEl) {
-    var css = parseCSS(styleEl.innerHTML);
+    if (globalScopes.some(function (css) { return css.styleEl === styleEl; })) {
+        return false;
+    }
+    var css = parseCSS(styleEl.textContent);
     css.styleEl = styleEl;
     globalScopes.push(css);
+    return true;
 }
@@ -441,3 +451,3 @@ function updateGlobalScopes(scopes) {
         if (scope.usesCssVars) {
-            scope.styleEl.innerHTML = executeTemplate(scope.template, props);
+            scope.styleEl.textContent = executeTemplate(scope.template, props);
         }
@@ -453,5 +463,5 @@ });
     var selectors = scope.selectors.map(function (sel) {
-        return Object.assign({}, sel, { selector: replaceScope(sel.selector, scope.scopeId, scopeId) });
+        return Object.assign(Object.assign({}, sel), { selector: replaceScope(sel.selector, scope.scopeId, scopeId) });
     });
-    return Object.assign({}, scope, { template: template,
+    return Object.assign(Object.assign({}, scope), { template: template,
         selectors: selectors,
@@ -469,7 +479,17 @@ scopeId: scopeId });
     loadDocumentStyles(doc, globalScopes);
-    return loadDocumentLinks(doc, globalScopes);
+    return loadDocumentLinks(doc, globalScopes).then(function () {
+        updateGlobalScopes(globalScopes);
+    });
 }
+function startWatcher(doc, globalScopes) {
+    var mutation = new MutationObserver(function () {
+        if (loadDocumentStyles(doc, globalScopes)) {
+            updateGlobalScopes(globalScopes);
+        }
+    });
+    mutation.observe(document.head, { childList: true });
+}
 function loadDocumentLinks(doc, globalScopes) {
     var promises = [];
-    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]');
+    var linkElms = doc.querySelectorAll('link[rel="stylesheet"][href]:not([data-no-shim])');
     for (var i = 0; i < linkElms.length; i++) {
@@ -481,6 +501,6 @@ promises.push(addGlobalLink(doc, globalScopes, linkElms[i]));
 function loadDocumentStyles(doc, globalScopes) {
-    var styleElms = doc.querySelectorAll('style:not([data-styles])');
-    for (var i = 0; i < styleElms.length; i++) {
-        addGlobalStyle(globalScopes, styleElms[i]);
-    }
+    var styleElms = Array.from(doc.querySelectorAll('style:not([data-styles]):not([data-no-shim])'));
+    return styleElms
+        .map(function (style) { return addGlobalStyle(globalScopes, style); })
+        .some(Boolean);
 }
@@ -496,3 +516,3 @@ function addGlobalLink(doc, globalScopes, linkElm) {
             styleEl.setAttribute('data-styles', '');
-            styleEl.innerHTML = text;
+            styleEl.textContent = text;
             addGlobalStyle(globalScopes, styleEl);
@@ -521,3 +541,3 @@ linkElm.parentNode.insertBefore(styleEl, linkElm);
 // This regexp find all url() usages with relative urls
-var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?![http|/])([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
+var CSS_URL_REGEXP = /url[\s]*\([\s]*['"]?(?!(?:https?|data)\:|\/)([^\'\"\)]*)[\s]*['"]?\)[\s]*/gim;
 function hasRelativeUrls(css) {
@@ -547,10 +567,18 @@ CSS_URL_REGEXP.lastIndex = 0;
         this.scopesMap = new Map();
+        this.didInit = false;
     }
     CustomStyle.prototype.initShim = function () {
         var _this = this;
-        return new Promise(function (resolve) {
-            _this.win.requestAnimationFrame(function () {
-                loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+        if (this.didInit) {
+            return Promise.resolve();
+        }
+        else {
+            this.didInit = true;
+            return new Promise(function (resolve) {
+                _this.win.requestAnimationFrame(function () {
+                    startWatcher(_this.doc, _this.globalScopes);
+                    loadDocument(_this.doc, _this.globalScopes).then(function () { return resolve(); });
+                });
             });
-        });
+        }
     };
@@ -564,4 +592,5 @@ CustomStyle.prototype.addLink = function (linkEl) {
     CustomStyle.prototype.addGlobalStyle = function (styleEl) {
-        addGlobalStyle(this.globalScopes, styleEl);
-        this.updateGlobal();
+        if (addGlobalStyle(this.globalScopes, styleEl)) {
+            this.updateGlobal();
+        }
     };
@@ -574,5 +603,6 @@ CustomStyle.prototype.createHostStyle = function (hostEl, cssScopeId, cssText, isScoped) {
         var styleEl = this.doc.createElement('style');
+        styleEl.setAttribute('data-no-shim', '');
         if (!baseScope.usesCssVars) {
             // This component does not use (read) css variables
-            styleEl.innerHTML = cssText;
+            styleEl.textContent = cssText;
         }
@@ -582,3 +612,3 @@ else if (isScoped) {
             styleEl['s-sc'] = cssScopeId = baseScope.scopeId + "-" + this.count;
-            styleEl.innerHTML = '/*needs update*/';
+            styleEl.textContent = '/*needs update*/';
             this.hostStyleMap.set(hostEl, styleEl);
@@ -592,3 +622,3 @@ this.hostScopeMap.set(hostEl, reScope(baseScope, cssScopeId));
             if (!baseScope.usesCssVars) {
-                styleEl.innerHTML = executeTemplate(baseScope.template, {});
+                styleEl.textContent = executeTemplate(baseScope.template, {});
             }
@@ -616,3 +646,3 @@ this.globalScopes.push(baseScope);
                 var props = resolveValues(selectors);
-                styleEl.innerHTML = executeTemplate(scope.template, props);
+                styleEl.textContent = executeTemplate(scope.template, props);
             }
@@ -619,0 +649,0 @@ }

dist/esm/polyfills/dom.js

 (function(){
   /*
-
     Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
@@ -48,3 +47,3 @@ This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
       var base = document.querySelector('base');
-      if (base) {
+      if (base && base.href) {
         return base.href;
@@ -94,7 +93,25 @@ }
 (function(a){"function"!==typeof a.matches&&(a.matches=a.msMatchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||function(a){a=(this.document||this.ownerDocument).querySelectorAll(a);for(var b=0;a[b]&&a[b]!==this;)++b;return!!a[b]});"function"!==typeof a.closest&&(a.closest=function(a){for(var b=this;b&&1===b.nodeType;){if(b.matches(a))return b;b=b.parentNode}return null})})(window.Element.prototype);
+
 /*!
 Element.getRootNode()
 */
-(function(c){function d(a){a=b(a);return 11===a.nodeType?d(a.host):a}function b(a){return a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+(function(c){function d(a){a=b(a);return a&&11===a.nodeType?d(a.host):a}function b(a){return a&&a.parentNode?b(a.parentNode):a}"function"!==typeof c.getRootNode&&(c.getRootNode=function(a){return a&&a.composed?d(this):b(this)})})(Element.prototype);
+
 /*!
+Element.isConnected()
+*/
+(function(prototype) {
+  if (!("isConnected" in prototype)) {
+    Object.defineProperty(prototype, 'isConnected', {
+      configurable: true,
+      enumerable: true,
+      get: function() {
+        var root = this.getRootNode({composed: true});
+        return root && root.nodeType === 9;
+      }
+    })
+  }
+})(Element.prototype);
+
+/*!
 Element.remove()
@@ -109,1 +126,24 @@ */
 
+/*!
+DOMTokenList
+*/
+(function(prototype){
+  try {
+    document.body.classList.add();
+  } catch (e) {
+    var originalAdd = prototype.add;
+    var originalRemove = prototype.remove;
+
+    prototype.add = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalAdd.call(this, arguments[i]);
+      }
+    };
+
+    prototype.remove = function() {
+      for (var i = 0; i < arguments.length; i++) {
+        originalRemove.call(this, arguments[i]);
+      }
+    };
+  }
+}(DOMTokenList.prototype));

dist/esm/polyfills/index.js

 export function applyPolyfills() {
-  var win = window;
+  if (typeof window !== 'undefined') {
+    var win = window;
 
-  var promises = [];
+    var promises = [];
 
-  if (!win.customElements || (win.Element && (!win.Element.prototype.closest || !win.Element.prototype.matches || !win.Element.prototype.remove))) {
-    promises.push(import('./dom.js'));
-  }
+    if (!win.customElements || (win.Element && (!win.Element.prototype.closest || !win.Element.prototype.matches || !win.Element.prototype.remove))) {
+      promises.push(import('./dom.js'));
+    }
 
-  function checkIfURLIsSupported() {
-    try {
-      var u = new URL('b', 'http://a');
-      u.pathname = 'c%20d';
-      return (u.href === 'http://a/c%20d') && u.searchParams;
-    } catch(e) {
-      return false;
+    function checkIfURLIsSupported() {
+      try {
+        var u = new URL('b', 'http://a');
+        u.pathname = 'c%20d';
+        return (u.href === 'http://a/c%20d') && u.searchParams;
+      } catch (e) {
+        return false;
+      }
     }
-  }
 
-  if (
-    'function' !== typeof Object.assign || !Object.entries ||
-    !Array.prototype.find || !Array.prototype.includes ||
-    !String.prototype.startsWith || !String.prototype.endsWith ||
-    !win.fetch ||
-    !checkIfURLIsSupported() ||
-    typeof WeakMap == 'undefined'
-  ) {
-    promises.push(import('./core-js.js'));
+    if (
+      'function' !== typeof Object.assign || !Object.entries ||
+      !Array.prototype.find || !Array.prototype.includes ||
+      !String.prototype.startsWith || !String.prototype.endsWith ||
+      (win.NodeList && !win.NodeList.prototype.forEach) ||
+      !win.fetch ||
+      !checkIfURLIsSupported() ||
+      typeof WeakMap == 'undefined'
+    ) {
+      promises.push(import('./core-js.js'));
+    }
+    return Promise.all(promises);
   }
-  if (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) {
-    promises.push(import('./css-shim.js'));
-  }
-  return Promise.all(promises);
+  return Promise.resolve();
 }

dist/esm/polyfills/system.js

@@ -1,4 +0,6 @@
-/*
-* SystemJS 3.1.3
-*/
-!function(){var e,n="undefined"!=typeof self,t=n?self:global;if("undefined"!=typeof location){var r=(e=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==r&&(e=e.slice(0,r+1))}var i=/\\/g,o="undefined"!=typeof Symbol,u=o&&Symbol.toStringTag,f=o?Symbol():"@";function c(){this[f]={}}var l,s=c.prototype;s.import=function(e,n){var t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){var n=function e(n,t,r){var i=n[f][t];if(i)return i;var o=[],c=Object.create(null);u&&Object.defineProperty(c,u,{value:"Module"});var l=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw new Error("Module "+t+" did not instantiate");var r=e[1](function(e,n){i.h=!0;var t=!1;if("object"!=typeof e)e in c&&c[e]===n||(c[e]=n,t=!0);else for(var r in e){var u=e[r];r in c&&c[r]===u||(c[r]=u,t=!0)}if(t)for(var f=0;f<o.length;f++)o[f](c);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return i.e=r.execute||function(){},[e[0],r.setters||[]]}),s=l.then(function(r){return Promise.all(r[0].map(function(i,o){var u=r[1][o];return Promise.resolve(n.resolve(i,t)).then(function(r){var i=e(n,r,t);return Promise.resolve(i.I).then(function(){return u&&(i.i.push(u),!i.h&&i.I||u(i.n)),i})})})).then(function(e){i.d=e})});return s.catch(function(e){i.e=null,i.er=e}),i=n[f][t]={id:t,i:o,n:c,I:l,L:s,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(!r[t.id]){if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}var i;return t.d.forEach(function(t){var o=e(n,t,r);o&&(i=i||[]).push(o)}),i?Promise.all(i).then(o):o()}function o(){try{var e=t.e.call(d);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){l=[e,n]},s.getRegister=function(){var e=l;return l=void 0,e};var a,d=Object.freeze(Object.create(null));t.System=new c,"undefined"!=typeof window&&window.addEventListener("error",function(e){a=e.error});var v=s.register;s.register=function(e,n){a=void 0,v.call(this,e,n)},s.instantiate=function(e,n){var t=this;return new Promise(function(r,i){var o=document.createElement("script");o.charset="utf-8",o.async=!0,o.crossOrigin="anonymous",o.addEventListener("error",function(){i(new Error("Error loading "+e+(n?" from "+n:"")))}),o.addEventListener("load",function(){if(document.head.removeChild(o),a)return i(a),a=void 0;r(t.getRegister())}),o.src=e,document.head.appendChild(o)})},n&&"function"==typeof importScripts&&(s.instantiate=function(e){var n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(n,t){var r=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(i,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){var t,r=n.slice(0,n.indexOf(":")+1);if(t="/"===n[r.length+1]?"file:"!==r?(t=n.slice(r.length+2)).slice(t.indexOf("/")+1):n.slice(8):n.slice(r.length+("/"===n[r.length])),"/"===e[0])return n.slice(0,n.length-t.length-1)+e;for(var o=t.slice(0,t.lastIndexOf("/")+1)+e,u=[],f=-1,c=0;c<o.length;c++)-1!==f?"/"===o[c]&&(u.push(o.slice(f,c+1)),f=-1):"."===o[c]?"."!==o[c+1]||"/"!==o[c+2]&&c+2!==o.length?"/"===o[c+1]||c+1===o.length?c+=1:f=c:(u.pop(),c+=2):f=c;return-1!==f&&u.push(o.slice(f)),n.slice(0,n.length-t.length)+u.join("")}}(n,t||e);if(!r){if(-1!==n.indexOf(":"))return Promise.resolve(n);throw new Error('Cannot resolve "'+n+(t?'" from '+t:'"'))}return Promise.resolve(r)}}();
+/**
+ * SystemJS 4.0.2
+ * MANUAL PATCH: remove script.crossOrigin = "anonymous"
+ * MANUAL PATCH: add conditionally apply, n.System=n.System||new u
+ */
+!function(){var e="undefined"!=typeof self,n=e?self:global;var t;if("undefined"!=typeof document){var e=document.querySelector("base[href]");e&&(t=e.href)}if(!t&&"undefined"!=typeof location){var e=(t=location.href.split("#")[0].split("?")[0]).lastIndexOf("/");-1!==e&&(t=t.slice(0,e+1))}var r=/\\/g,o="undefined"!=typeof Symbol,i=o&&Symbol.toStringTag,c=o?Symbol():"@";function u(){this[c]={}}var s=u.prototype;var l;s.import=function(e,n){var t=this;return Promise.resolve(t.resolve(e,n)).then(function(e){var n=function e(n,t,r){var o=n[c][t];if(o)return o;var u=[],s=Object.create(null);i&&Object.defineProperty(s,i,{value:"Module"});var l=Promise.resolve().then(function(){return n.instantiate(t,r)}).then(function(e){if(!e)throw Error("Module "+t+" did not instantiate");var r=e[1](function(e,n){o.h=!0;var t=!1;if("object"!=typeof e)e in s&&s[e]===n||(s[e]=n,t=!0);else for(var n in e){var r=e[n];n in s&&s[n]===r||(s[n]=r,t=!0)}if(t)for(var e=0;e<u.length;e++)u[e](s);return n},2===e[1].length?{import:function(e){return n.import(e,t)},meta:n.createContext(t)}:void 0);return o.e=r.execute||function(){},[e[0],r.setters||[]]});var f=l.then(function(r){return Promise.all(r[0].map(function(o,i){var c=r[1][i];return Promise.resolve(n.resolve(o,t)).then(function(r){var o=e(n,r,t);return Promise.resolve(o.I).then(function(){return c&&(o.i.push(c),!o.h&&o.I||c(o.n)),o})})})).then(function(e){o.d=e})});return f.catch(function(e){o.e=null,o.er=e}),o=n[c][t]={id:t,i:u,n:s,I:l,L:f,h:!1,d:void 0,e:void 0,er:void 0,E:void 0,C:void 0}}(t,e);return n.C||function(e,n){return n.C=function e(n,t,r){if(!r[t.id])return r[t.id]=!0,Promise.resolve(t.L).then(function(){return Promise.all(t.d.map(function(t){return e(n,t,r)}))})}(e,n,{}).then(function(){return function e(n,t,r){if(r[t.id])return;if(r[t.id]=!0,!t.e){if(t.er)throw t.er;return t.E?t.E:void 0}var o;return t.d.forEach(function(t){{var i=e(n,t,r);i&&(o=o||[]).push(i)}}),o?Promise.all(o).then(i):i();function i(){try{var e=t.e.call(f);if(e)return e=e.then(function(){t.C=t.n,t.E=null}),t.E=t.E||e;t.C=t.n}catch(e){throw t.er=e,e}finally{t.L=t.I=void 0,t.e=null}}}(e,n,{})}).then(function(){return n.n})}(t,n)})},s.createContext=function(e){return{url:e}},s.register=function(e,n){l=[e,n]},s.getRegister=function(){var e=l;return l=void 0,e};var f=Object.freeze(Object.create(null));n.System=n.System||new u;var d=s.register;s.register=function(e,n){d.call(this,e,n)},s.instantiate=function(e,n){var t=this;return".json"===e.substr(-5)?fetch(e).then(function(e){return e.text()}).then(function(e){return[[],function(n){return{execute:function(){n("default",JSON.parse(e))}}}]}):new Promise(function(r,o){var i;function c(n){n.filename===e&&(i=n.error)}window.addEventListener("error",c);var u=document.createElement("script");u.charset="utf-8",u.async=!0,u.addEventListener("error",function(){window.removeEventListener("error",c),o(Error("Error loading "+e+(n?" from "+n:"")))}),u.addEventListener("load",function(){window.removeEventListener("error",c),document.head.removeChild(u),i?o(i):r(t.getRegister())}),u.src=e,document.head.appendChild(u)})},e&&"function"==typeof importScripts&&(s.instantiate=function(e){var n=this;return new Promise(function(t,r){try{importScripts(e)}catch(e){r(e)}t(n.getRegister())})}),s.resolve=function(e,n){var o=function(e,n){if(-1!==e.indexOf("\\")&&(e=e.replace(r,"/")),"/"===e[0]&&"/"===e[1])return n.slice(0,n.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){var t=n.slice(0,n.indexOf(":")+1);var r;if(r="/"===n[t.length+1]?"file:"!==t?(r=n.slice(t.length+2)).slice(r.indexOf("/")+1):n.slice(8):n.slice(t.length+("/"===n[t.length])),"/"===e[0])return n.slice(0,n.length-r.length-1)+e;var o=r.slice(0,r.lastIndexOf("/")+1)+e,i=[];var c=-1;for(var e=0;e<o.length;e++)-1!==c?"/"===o[e]&&(i.push(o.slice(c,e+1)),c=-1):"."===o[e]?"."!==o[e+1]||"/"!==o[e+2]&&e+2!==o.length?"/"===o[e+1]||e+1===o.length?e+=1:c=e:(i.pop(),e+=2):c=e;return-1!==c&&i.push(o.slice(c)),n.slice(0,n.length-r.length)+i.join("")}}(e,n||t);if(!o){if(-1!==e.indexOf(":"))return Promise.resolve(e);throw Error('Cannot resolve "'+e+(n?'" from '+n:'"'))}return Promise.resolve(o)}}();

dist/esm/web-social-share.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './chunk-92e462c5.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './core-a2e7fe62.js';
 
@@ -7,3 +7,3 @@ /**
 class WebSocialShareFacebook {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString;
@@ -120,3 +120,3 @@ if (attrs.socialShareType && attrs.socialShareType === 'feed') {
 class WebSocialShareTwitter {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.twitter.com/intent/tweet?';
@@ -145,3 +145,3 @@ if (attrs.socialShareText) {
 class WebSocialShareEmail {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'mailto:';
@@ -169,3 +169,3 @@ if (attrs.socialShareTo) {
 class WebSocialShareLinkedin {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.linkedin.com/shareArticle?mini=true';
@@ -188,3 +188,3 @@ urlString += '&url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href);
 class WebSocialSharePinterest {
-    static share(attrs) {
+    static async share(attrs) {
         window.open('https://www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attrs.socialShareUrl || window.location.href) + '&media=' + encodeURIComponent(attrs.socialShareMedia) + '&description=' + encodeURIComponent(attrs.socialShareText), 'Pinterest', 'toolbar=0,status=0,resizable=yes,width=' + attrs.socialSharePopupWidth + ',height=' + attrs.socialSharePopupHeight
@@ -196,3 +196,3 @@ + ',top=' + (window.innerHeight - attrs.socialSharePopupHeight) / 2 + ',left=' + (window.innerWidth - attrs.socialSharePopupWidth) / 2);
 class WebSocialShareReddit {
-    static share(attrs) {
+    static async share(attrs) {
         let urlString = 'https://www.reddit.com/';
@@ -222,3 +222,3 @@ if (attrs.socialShareSubreddit) {
 class WebSocialShareWhatsapp {
-    static share(attrs) {
+    static async share(attrs) {
         const isMobile = WebSocialShareUtils.isMobile();
@@ -252,5 +252,44 @@ let urlString = isMobile ? 'https://api.whatsapp.com/send?text=' : 'https://web.whatsapp.com/send?text=';
 
-class WebSocialShare {
+class WebSocialShareHackerNews {
+    static async share(attrs) {
+        let urlString = 'https://news.ycombinator.com/submitlink?u=';
+        //default to the current page if a URL isn't specified
+        urlString += encodeURIComponent(attrs.socialShareUrl || window.location.href);
+        if (attrs.socialShareText) {
+            urlString += '&t=' + encodeURIComponent(attrs.socialShareText);
+        }
+        WebSocialShareUtils.staticOpenNewWindow(urlString);
+    }
+}
+
+const WebSocialShare = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.handleFacebookShare = async (attributes) => {
+            await WebSocialShareFacebook.share(attributes);
+        };
+        this.handleTwitterShare = async (attributes) => {
+            await WebSocialShareTwitter.share(attributes);
+        };
+        this.handleEmailShare = async (attributes) => {
+            await WebSocialShareEmail.share(attributes);
+        };
+        this.handleLinkedinShare = async (attributes) => {
+            await WebSocialShareLinkedin.share(attributes);
+        };
+        this.handlePinterestShare = async (attributes) => {
+            await WebSocialSharePinterest.share(attributes);
+        };
+        this.handleRedditShare = async (attributes) => {
+            await WebSocialShareReddit.share(attributes);
+        };
+        this.handleWhatsappShare = async (attributes) => {
+            await WebSocialShareWhatsapp.share(attributes);
+        };
+        this.handleCopyShare = async (attributes) => {
+            await WebSocialShareCopy.share(attributes);
+        };
+        this.handleHackerNewsShare = async (attributes) => {
+            await WebSocialShareHackerNews.share(attributes);
+        };
         this.closed = createEvent(this, "closed", 7);
@@ -283,74 +322,45 @@ }
         else {
-            return (this.share.config.map((config) => h("div", { class: "web-social-share-target" }, this.renderButton(config))));
+            return (this.share.config.map((config) => h("div", { class: "web-social-share-target" }, this.renderButtons(config))));
         }
     }
-    renderButton(share) {
+    renderButtons(share) {
         if (share.facebook) {
-            return (h("button", { onClick: ($event) => this.handleFacebookShare($event, share), class: 'web-social-share-button web-social-share-button-facebook' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "facebook" })), this.renderName(share.facebook, 'Facebook')));
+            return this.renderButton(share.facebook, 'facebook', this.handleFacebookShare, 'Facebook');
         }
         else if (share.twitter) {
-            return (h("button", { onClick: ($event) => this.handleTwitterShare($event, share), class: 'web-social-share-button web-social-share-button-twitter' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "twitter" })), this.renderName(share.twitter, 'Twitter')));
+            return this.renderButton(share.twitter, 'twitter', this.handleTwitterShare, 'Twitter');
         }
         else if (share.email) {
-            return (h("button", { onClick: ($event) => this.handleEmailShare($event, share), class: 'web-social-share-button web-social-share-button-email' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "email" })), this.renderName(share.email, 'Email')));
+            return this.renderButton(share.email, 'email', this.handleEmailShare, 'Email');
         }
         else if (share.linkedin) {
-            return (h("button", { onClick: ($event) => this.handleLinkedinShare($event, share), class: 'web-social-share-button web-social-share-button-linkedin' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "linkedin" })), this.renderName(share.linkedin, 'Linkedin')));
+            return this.renderButton(share.linkedin, 'linkedin', this.handleLinkedinShare, 'Linkedin');
         }
         else if (share.pinterest) {
-            return (h("button", { onClick: ($event) => this.handlePinterestShare($event, share), class: 'web-social-share-button web-social-share-button-pinterest' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "pinterest" })), this.renderName(share.pinterest, 'Pinterest')));
+            return this.renderButton(share.pinterest, 'pinterest', this.handlePinterestShare, 'Pinterest');
         }
         else if (share.reddit) {
-            return (h("button", { onClick: ($event) => this.handleRedditShare($event, share), class: 'web-social-share-button web-social-share-button-reddit' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "reddit" })), this.renderName(share.reddit, 'Reddit')));
+            return this.renderButton(share.reddit, 'reddit', this.handleRedditShare, 'Reddit');
         }
         else if (share.whatsapp) {
-            return (h("button", { onClick: ($event) => this.handleWhatsappShare($event, share), class: 'web-social-share-button web-social-share-button-whatsapp' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "whatsapp" })), this.renderName(share.whatsapp, 'WhatsApp')));
+            return this.renderButton(share.whatsapp, 'whatsapp', this.handleWhatsappShare, 'WhatsApp');
         }
         else if (share.copy) {
-            return (h("button", { onClick: ($event) => this.handleCopyShare($event, share), class: 'web-social-share-button web-social-share-button-copy' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: "copy" })), this.renderName(share.copy, 'Copy')));
+            return this.renderButton(share.copy, 'copy', this.handleCopyShare, 'Copy');
         }
+        else if (share.hackernews) {
+            return this.renderButton(share.hackernews, 'hackernews', this.handleHackerNewsShare, 'Hacker News');
+        }
         else {
-            return (h("div", null));
+            return undefined;
         }
     }
-    handleFacebookShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareFacebook.share(share.facebook);
-        this.hide();
+    renderButton(attributes, slotName, action, defaultBrandName) {
+        return (h("button", { onClick: ($event) => this.handleShare($event, attributes, action), class: 'web-social-share-button' }, h("div", { class: "web-social-share-button-icon" }, h("slot", { name: slotName })), this.renderName(attributes, defaultBrandName)));
     }
-    handleTwitterShare($event, share) {
+    async handleShare($event, attributes, action) {
         $event.stopPropagation();
-        WebSocialShareTwitter.share(share.twitter);
+        await action(attributes);
         this.hide();
     }
-    handleEmailShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareEmail.share(share.email);
-        this.hide();
-    }
-    handleLinkedinShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareLinkedin.share(share.linkedin);
-        this.hide();
-    }
-    handlePinterestShare($event, share) {
-        $event.stopPropagation();
-        WebSocialSharePinterest.share(share.pinterest);
-        this.hide();
-    }
-    handleRedditShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareReddit.share(share.reddit);
-        this.hide();
-    }
-    handleWhatsappShare($event, share) {
-        $event.stopPropagation();
-        WebSocialShareWhatsapp.share(share.whatsapp);
-        this.hide();
-    }
-    async handleCopyShare($event, share) {
-        $event.stopPropagation();
-        await WebSocialShareCopy.share(share.copy);
-        this.hide();
-    }
     renderName(displayAttributes, defaultBrandName) {
@@ -365,5 +375,5 @@ if (this.share.displayNames) {
     get el() { return getElement(this); }
-    static get style() { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:500px}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s;transition:height .2s}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{position:absolute;bottom:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{position:absolute;top:0;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:var(--web-social-share-target-icon-container-height,2rem)}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; }
-}
+    static get style() { return "div.web-social-share{visibility:hidden;opacity:0;cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation}div.web-social-share.web-social-share-open{visibility:visible;opacity:1}div.web-social-share.web-social-share-open div.web-social-share-backdrop{opacity:var(--web-social-share-backdrop-opacity,.25)}div.web-social-share.web-social-share-open div.web-social-share-action-sheet{opacity:1}div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height,80px)}\@media (max-width:540px){div.web-social-share.web-social-share-open div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:var(--web-social-share-height-small-device,140px)}}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-backdrop{opacity:0}div.web-social-share.web-social-share-open.web-social-share-transition-close div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{height:0}div.web-social-share div.web-social-share-backdrop{opacity:0;-webkit-transition:opacity .1s linear;transition:opacity .1s linear;background-color:var(--web-social-share-backdrop-background,#000);z-index:var(--web-social-share-zindex,1000);-webkit-transform:translateZ(2px);transform:translateZ(2px);left:0;top:0;position:fixed;height:100%;width:100%}div.web-social-share div.web-social-share-action-sheet{left:0;right:0;top:0;bottom:0;margin:auto;position:fixed;z-index:calc(var(--web-social-share-zindex, 1000) + 1);-webkit-transform:translateZ(3px);transform:translateZ(3px);width:100%;max-width:540px}\@media (min-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{border-radius:var(--web-social-share-action-sheet-group-border-radius,8px 8px 0 0)}}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container{display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-ms-flex-pack:end;justify-content:flex-end;height:100%;max-height:100%}div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-webkit-box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));box-shadow:var(--web-social-share-action-sheet-group-box-shadow,0 0 8px 4px rgba(0,0,0,.1));z-index:calc(var(--web-social-share-zindex, 1000) + 10);-webkit-transform:translateZ(10px);transform:translateZ(10px);background:var(--web-social-share-action-sheet-group-background,#fafafa);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:0;-webkit-transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:cubic-bezier(.36,.66,.04,1);-webkit-transition:height .2s ease-in;transition:height .2s ease-in}\@media (max-width:540px){div.web-social-share div.web-social-share-action-sheet div.web-social-share-action-sheet-container div.web-social-share-action-sheet-group{-ms-flex-pack:start;justify-content:flex-start}}div.web-social-share div.web-social-share-target{margin:auto;width:var(--web-social-share-target-width,4rem);height:var(--web-social-share-target-height,3rem);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}div.web-social-share div.web-social-share-target button{position:relative;cursor:pointer;border:0;background:transparent;width:var(--web-social-share-button-width,100%);height:var(--web-social-share-button-height,100%);font-size:var(--web-social-share-button-font-size)}div.web-social-share div.web-social-share-target p{margin:var(--web-social-share-brand-margin,2px 0);color:var(--web-social-share-brand-color,inherit);font-size:var(--web-social-share-brand-font-size,.6rem)}div.web-social-share div.web-social-share-target div.web-social-share-button-icon{margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}::slotted([slot=copy]),::slotted([slot=email]),::slotted([slot=facebook]),::slotted([slot=hackernews]),::slotted([slot=linkedin]),::slotted([slot=pinterest]),::slotted([slot=reddit]),::slotted([slot=twitter]),::slotted([slot=whatsapp]){display:none}"; }
+};
 
 export { WebSocialShare as web_social_share };

dist/loader/index.d.ts

@@ -12,3 +12,3 @@
 }
-export declare function defineCustomElements(win: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;

dist/types/components.d.ts

@@ -0,1 +1,2 @@
+/* eslint-disable */
 /* tslint:disable */
@@ -34,3 +35,3 @@ /**
 declare namespace LocalJSX {
-  interface WebSocialShare extends JSXBase.HTMLAttributes<HTMLWebSocialShareElement> {
+  interface WebSocialShare {
     'onClosed'?: (event: CustomEvent<any>) => void;
@@ -51,3 +52,5 @@ 'share'?: WebSocialShareInput;
   export namespace JSX {
-    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
+    interface IntrinsicElements {
+      'web-social-share': LocalJSX.WebSocialShare & JSXBase.HTMLAttributes<HTMLWebSocialShareElement>;
+    }
   }
@@ -54,0 +57,0 @@ }

dist/types/components/web-social-share/web-social-share.d.ts

@@ -11,3 +11,5 @@ import { EventEmitter } from '../../stencil.core';
     private renderTargets;
+    private renderButtons;
     private renderButton;
+    private handleShare;
     private handleFacebookShare;
@@ -21,3 +23,4 @@ private handleTwitterShare;
     private handleCopyShare;
+    private handleHackerNewsShare;
     private renderName;
 }

dist/types/stencil.core.d.ts

@@ -463,2 +463,3 @@ /**
     name?: string;
+    referrerPolicy?: ReferrerPolicy;
     sandbox?: string;
@@ -1314,10 +1315,10 @@ scrolling?: string;
 export interface VNode {
-  $tag$?: string | number | Function;
-  $key$?: string | number;
-  $text$?: string;
-  $children$?: VNode[];
+  $flags$: number;
+  $tag$: string | number | Function;
+  $elm$: any;
+  $text$: string;
+  $children$: VNode[];
   $attrs$?: any;
   $name$?: string;
-  $flags$: number;
-  $elm$?: any;
+  $key$?: string | number;
 }
@@ -1324,0 +1325,0 @@

dist/types/types/web-social-share/web-social-share-attributes.d.ts

@@ -48,1 +48,3 @@ export interface WebSocialShareDisplayAttributes {
 }
+export interface WebSocialShareHackerNewsAttributes extends WebSocialShareWithTextAttributes {
+}

dist/types/types/web-social-share/web-social-share-input.d.ts

@@ -1,2 +0,2 @@
-import { WebSocialShareAttributes, WebSocialShareEmailAttributes, WebSocialShareFacebookAttributes, WebSocialShareLinkedinAttributes, WebSocialSharePinterestAttributes, WebSocialShareRedditAttributes, WebSocialShareTwiterAttributes, WebSocialShareWhatsappAttributes } from './web-social-share-attributes';
+import { WebSocialShareAttributes, WebSocialShareEmailAttributes, WebSocialShareFacebookAttributes, WebSocialShareHackerNewsAttributes, WebSocialShareLinkedinAttributes, WebSocialSharePinterestAttributes, WebSocialShareRedditAttributes, WebSocialShareTwiterAttributes, WebSocialShareWhatsappAttributes } from './web-social-share-attributes';
 export interface WebSocialShareInputConfig {
@@ -11,2 +11,3 @@ facebook?: WebSocialShareFacebookAttributes;
     copy?: WebSocialShareAttributes;
+    hackernews?: WebSocialShareHackerNewsAttributes;
 }
@@ -13,0 +14,0 @@ export interface WebSocialShareInput {

dist/types/utils/web-social-share/web-social-share-email.d.ts

 import { WebSocialShareEmailAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareEmail {
-    static share(attrs: WebSocialShareEmailAttributes): void;
+    static share(attrs: WebSocialShareEmailAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-facebook.d.ts

@@ -6,3 +6,3 @@ import { WebSocialShareFacebookAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareFacebook {
-    static share(attrs: WebSocialShareFacebookAttributes): void;
+    static share(attrs: WebSocialShareFacebookAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-linkedin.d.ts

 import { WebSocialShareLinkedinAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareLinkedin {
-    static share(attrs: WebSocialShareLinkedinAttributes): void;
+    static share(attrs: WebSocialShareLinkedinAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-pinterest.d.ts

 import { WebSocialSharePinterestAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialSharePinterest {
-    static share(attrs: WebSocialSharePinterestAttributes): void;
+    static share(attrs: WebSocialSharePinterestAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-reddit.d.ts

 import { WebSocialShareRedditAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareReddit {
-    static share(attrs: WebSocialShareRedditAttributes): void;
+    static share(attrs: WebSocialShareRedditAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-twitter.d.ts

 import { WebSocialShareTwiterAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareTwitter {
-    static share(attrs: WebSocialShareTwiterAttributes): void;
+    static share(attrs: WebSocialShareTwiterAttributes): Promise<void>;
 }

dist/types/utils/web-social-share/web-social-share-whatsapp.d.ts

 import { WebSocialShareWhatsappAttributes } from '../../types/web-social-share/web-social-share-attributes';
 export declare class WebSocialShareWhatsapp {
-    static share(attrs: WebSocialShareWhatsappAttributes): void;
+    static share(attrs: WebSocialShareWhatsappAttributes): Promise<void>;
 }

dist/websocialshare.js

@@ -16,4 +16,5 @@
   scriptElm.src = url + '/websocialshare.esm.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'websocialshare');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -23,4 +24,5 @@ scriptElm = doc.createElement('script');
   scriptElm.src = url + '/websocialshare.js';
+  warn.push(scriptElm.outerHTML);
+  scriptElm.setAttribute('data-stencil-namespace', 'websocialshare');
   doc.head.appendChild(scriptElm);
-  warn.push(scriptElm.outerHTML);
 
@@ -27,0 +29,0 @@ console.warn(warn.join('\n'));

dist/websocialshare/websocialshare.esm.js

@@ -1,1 +0,1 @@
-import{p as s,b as a}from"./p-321a7241.js";s().then(s=>a([["p-yxueye9k",[[1,"web-social-share",{show:[1028],share:[16]}]]]],s));
+import{p as s,b as a}from"./p-181e1247.js";s().then(s=>a([["p-a8xytkkj",[[1,"web-social-share",{show:[1028],share:[16]}]]]],s));

package.json

 {
   "name": "web-social-share",
-  "version": "6.2.0",
-  "description": "A Web Component for your PWA to share urls and content on social networks",
+  "version": "6.3.0",
+  "description": "A Web Component to share urls and content on social networks",
   "keywords": [
@@ -18,8 +18,14 @@ "social",
     "stenciljs",
-    "stencil"
+    "stencil",
+    "hacker-news",
+    "copy-paste"
   ],
+  "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "main": "dist/index.js",
-  "types": "dist/types/components.d.ts",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "types": "dist/types/interface.d.ts",
   "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/websocialshare/websocialshare.js",
   "files": [
@@ -32,18 +38,18 @@ "dist/",
     "build": "stencil build",
-    "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ",
-    "serve": "stencil-dev-server",
-    "start": "npm run dev",
-    "test": "jest --no-cache",
-    "test.watch": "jest --watch --no-cache"
+    "web": "stencil build --prerender",
+    "start": "stencil build --dev --watch --serve",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
   },
   "dependencies": {},
   "devDependencies": {
-    "@stencil/core": "^1.2.2",
+    "@stencil/core": "^1.8.7",
     "@stencil/dev-server": "latest",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.0.1",
+    "@stencil/sass": "^1.1.1",
     "@stencil/utils": "latest",
-    "@types/jest": "^24.0.16",
-    "autoprefixer": "^9.6.1",
-    "jest": "^24.8.0",
+    "@types/jest": "^25.1.2",
+    "autoprefixer": "^9.7.4",
+    "jest": "^25.1.0",
     "workbox-build": "4.3.1"
@@ -53,3 +59,3 @@ },
     "type": "git",
-    "url": "git+https://github.com/fluster/web-social-share.git"
+    "url": "git+https://github.com/peterpeterparker/web-social-share.git"
   },
@@ -59,3 +65,3 @@ "author": "David Dal Busco",
   "bugs": {
-    "url": "https://github.com/fluster/web-social-share"
+    "url": "https://github.com/peterpeterparker/web-social-share"
   },
@@ -62,0 +68,0 @@ "homepage": "https://websocialshare.com",

readme.md

@@ -7,3 +7,3 @@ # Web Social Share
 
-[![version](https://img.shields.io/npm/v/web-social-share/latest.svg?color=blue)](https://github.com/fluster/web-social-share)
+[![version](https://img.shields.io/npm/v/web-social-share/latest.svg?color=blue)](https://github.com/peterpeterparker/web-social-share)
 [![npm](https://img.shields.io/npm/dm/web-social-share.svg)]()
@@ -32,3 +32,3 @@
 
-The idea behind this web component was to add a "social share" feature to the progressive web app (pwa) version of my project [Fluster](https://fluster.io).
+The idea behind this web component was to add a "social share" feature to the progressive web app (pwa) version of my project [Fluster](https://peterpeterparker.io).
 
@@ -85,7 +85,7 @@ Furthermore, I thought that using and building an action sheet to do so would be user friendly.
               facebook: {
-                socialShareUrl: 'https://fluster.io'
+                socialShareUrl: 'https://peterpeterparker.io'
               }
             },{
               twitter: {
-                socialShareUrl: 'https://fluster.io'
+                socialShareUrl: 'https://peterpeterparker.io'
               }
@@ -101,7 +101,7 @@ }]
               facebook: {
-                socialShareUrl: 'https://fluster.io'
+                socialShareUrl: 'https://peterpeterparker.io'
               }
             },{
               twitter: {
-                socialShareUrl: 'https://fluster.io'
+                socialShareUrl: 'https://peterpeterparker.io'
               }
@@ -119,3 +119,3 @@ }]
                 socialShareTo: '[e-mail]',
-                socialShareBody: 'https://fluster.io'
+                socialShareBody: 'https://peterpeterparker.io'
               }
@@ -137,3 +137,3 @@ }]
 <web-social-share show="false">
-    <ion-icon name="logo-reddit" slot="reddit"></ion-icon>
+    <i class="fab fa-reddit" slot="reddit" style="color: #cee3f8;"></ion-icon>
 </web-social-share>
@@ -143,3 +143,3 @@
     reddit: {
-      socialShareUrl: 'https://fluster.io',
+      socialShareUrl: 'https://peterpeterparker.io',
       socialSharePopupWidth: 300,
@@ -152,2 +152,4 @@ socialSharePopupHeight: 500
 
+> Note that currently you may have to add the `style="display: block"` on the slotted elements, notably if you would use `<ion-icon/>`, for them to be shown.
+
 #### Styling your icons
@@ -183,3 +185,7 @@
 | --web-social-share-brand-color | inherit | The color of an action brand name |
+| --web-social-share-brand-margin | 2px 0 | A margin for the brand name |
 | --web-social-share-zindex | 1000 | The base zIndex of the component |
+| --web-social-share-action-sheet-group-box-shadow | 0 0 8px 4px rgba(0,0,0,0.1) | A shadow around the action container |
+| --web-social-share-action-sheet-group-background | #fafafa | The background of the action container |
+| --web-social-share-action-sheet-group-border-radius | 8px 8px 0 0 | A border radius around the action container. Applied only if the windows is more than 540px |
 
@@ -186,0 +192,0 @@ ## Fallback and detection

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

959830

increased by3.39%

Number of package files

93

increased by8.14%

Lines of code

14776

increased by6.74%

Number of lines in readme file

202

increased by3.06%

Worsened metrics

Number of medium supply chain risk alerts

11

increased by22.22%

No dependency changes