ngx-sharebuttons
Version:
<p align="center"> <img height="200px" width="200px" style="text-align: center;" src="https://rawcdn.githack.com/MurhafSousli/ngx-sharebuttons/13279ed77c47fe9dd7b61e4dad3ded6d02488c2f/projects/ngx-sharebuttons-demo/src/assets/img/logo.svg"> <h1 alig
61 lines (57 loc) • 10.6 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, input, booleanAttribute, computed, output, Component, ChangeDetectionStrategy } from '@angular/core';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { SHARE_BUTTONS_CONFIG, ShareButtonDirective } from 'ngx-sharebuttons';
class ShareButton {
constructor() {
/** Injected options */
this.options = inject(SHARE_BUTTONS_CONFIG);
/** Share button type */
this.button = input();
/** The page URL */
this.url = input();
/** The title parameter */
this.title = input();
/** The description parameter */
this.description = input();
/** The image parameter for sharing on Pinterest */
this.image = input();
/** The tags parameter for sharing on X and Tumblr */
this.tags = input();
/** Sets the fb messenger redirect url to enable sharing on Messenger desktop */
this.redirectUrl = input();
/** Show button icon */
this.showIcon = input(true, {
transform: booleanAttribute
});
/** Show button text */
this.showText = input(false, {
transform: booleanAttribute
});
/** Button custom text */
this.text = input();
/** Button custom icon */
this.icon = input();
/** Button theme */
this.theme = input(this.options.theme);
/** A flag that indicates if the button's click is disabled */
this.disabled = input(false, {
transform: booleanAttribute
});
/** Set theme as button class */
this.classes = computed(() => `sb-button sb-${this.theme()}`);
/** Stream that emits when share dialog is opened */
this.opened = output();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ShareButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ShareButton, isStandalone: true, selector: "share-button", inputs: { button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, redirectUrl: { classPropertyName: "redirectUrl", publicName: "redirectUrl", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button #btn=\"shareButton\"\r\n type=\"button\"\r\n class=\"sb-wrapper\"\r\n [class.sb-show-icon]=\"showIcon()\"\r\n [class.sb-show-text]=\"showText()\"\r\n [shareButton]=\"button()\"\r\n [url]=\"url()\"\r\n [image]=\"image()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [tags]=\"tags()\"\r\n [redirectUrl]=\"redirectUrl()\"\r\n [disabled]=\"disabled()\"\r\n (opened)=\"opened.emit($event)\">\r\n <div class=\"sb-content\">\r\n @if (showIcon() && btn.icon()) {\r\n <div class=\"sb-icon\">\r\n <fa-icon [icon]=\"icon() || btn.icon()\" [fixedWidth]=\"true\"/>\r\n </div>\r\n }\r\n @if (showText()) {\r\n <div class=\"sb-text\">\r\n {{ text() || btn.text() }}\r\n </div>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host-context([button=facebook]){--button-color: #4267B2}:host-context([button=x]){--button-color: #00acee}:host-context([button=mix]){--button-color: #ff8226}:host-context([button=line]){--button-color: #00b900}:host-context([button=linkedin]){--button-color: #0a66c2}:host-context([button=pinterest]){--button-color: #bd081c}:host-context([button=reddit]){--button-color: #ff4006}:host-context([button=tumblr]){--button-color: #36465d}:host-context([button=whatsapp]){--button-color: #25d366}:host-context([button=messenger]){--button-color: #0080FF}:host-context([button=telegram]){--button-color: #0088cc}:host-context([button=xing]){--button-color: #006567}:host-context([button=sms]){--button-color: #20c16c}:host-context([button=email]){--button-color: #FF961C}:host-context([button=viber]){--button-color: #665ca7}:host-context([button=vk]){--button-color: #4C75A3}:host-context([button=copy]){--button-color: #607D8B}:host-context([button=print]){--button-color: #765AA2}:host-context([button=expand]){--button-color: #FF6651}button{cursor:pointer;position:relative;outline:0;-webkit-print-color-adjust:exact;margin:var(--sb-margin, .3125em);padding:var(--sb-padding, 0);min-width:var(--sb-min-width, 4.125em);height:var(--sb-height, 2.5em);color:var(--sb-color, #fff);background:var(--sb-background);font-size:var(--sb-font-size, 13px);line-height:var(--sb-line-height, 2.571em);border:var(--sb-border);border-radius:var(--sb-border-radius);transition:var(--sb-transition);box-shadow:var(--sb-box-shadow);text-shadow:var(--sb-text-shadow);overflow:var(--sb-overflow)}.sb-icon,.sb-text{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.sb-content{flex:1;display:flex;height:100%;width:100%;position:relative}.sb-text{flex:1;height:100%;white-space:nowrap;padding:var(--sb-text-padding, 0 .7em);font-weight:var(--sb-font-weight, bold)}.sb-icon{text-align:center;width:100%;height:100%;min-width:2em;font-size:var(--sb-icon-size, 1.2em)}\n"], dependencies: [{ kind: "directive", type: ShareButtonDirective, selector: "[shareButton]", inputs: ["shareButton", "title", "description", "image", "tags", "redirectUrl", "url"], outputs: ["opened"], exportAs: ["shareButton"] }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ShareButton, decorators: [{
type: Component,
args: [{ host: { '[class]': 'classes()' }, selector: 'share-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ShareButtonDirective, FaIconComponent], template: "<button #btn=\"shareButton\"\r\n type=\"button\"\r\n class=\"sb-wrapper\"\r\n [class.sb-show-icon]=\"showIcon()\"\r\n [class.sb-show-text]=\"showText()\"\r\n [shareButton]=\"button()\"\r\n [url]=\"url()\"\r\n [image]=\"image()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [tags]=\"tags()\"\r\n [redirectUrl]=\"redirectUrl()\"\r\n [disabled]=\"disabled()\"\r\n (opened)=\"opened.emit($event)\">\r\n <div class=\"sb-content\">\r\n @if (showIcon() && btn.icon()) {\r\n <div class=\"sb-icon\">\r\n <fa-icon [icon]=\"icon() || btn.icon()\" [fixedWidth]=\"true\"/>\r\n </div>\r\n }\r\n @if (showText()) {\r\n <div class=\"sb-text\">\r\n {{ text() || btn.text() }}\r\n </div>\r\n }\r\n </div>\r\n</button>\r\n", styles: [":host-context([button=facebook]){--button-color: #4267B2}:host-context([button=x]){--button-color: #00acee}:host-context([button=mix]){--button-color: #ff8226}:host-context([button=line]){--button-color: #00b900}:host-context([button=linkedin]){--button-color: #0a66c2}:host-context([button=pinterest]){--button-color: #bd081c}:host-context([button=reddit]){--button-color: #ff4006}:host-context([button=tumblr]){--button-color: #36465d}:host-context([button=whatsapp]){--button-color: #25d366}:host-context([button=messenger]){--button-color: #0080FF}:host-context([button=telegram]){--button-color: #0088cc}:host-context([button=xing]){--button-color: #006567}:host-context([button=sms]){--button-color: #20c16c}:host-context([button=email]){--button-color: #FF961C}:host-context([button=viber]){--button-color: #665ca7}:host-context([button=vk]){--button-color: #4C75A3}:host-context([button=copy]){--button-color: #607D8B}:host-context([button=print]){--button-color: #765AA2}:host-context([button=expand]){--button-color: #FF6651}button{cursor:pointer;position:relative;outline:0;-webkit-print-color-adjust:exact;margin:var(--sb-margin, .3125em);padding:var(--sb-padding, 0);min-width:var(--sb-min-width, 4.125em);height:var(--sb-height, 2.5em);color:var(--sb-color, #fff);background:var(--sb-background);font-size:var(--sb-font-size, 13px);line-height:var(--sb-line-height, 2.571em);border:var(--sb-border);border-radius:var(--sb-border-radius);transition:var(--sb-transition);box-shadow:var(--sb-box-shadow);text-shadow:var(--sb-text-shadow);overflow:var(--sb-overflow)}.sb-icon,.sb-text{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.sb-content{flex:1;display:flex;height:100%;width:100%;position:relative}.sb-text{flex:1;height:100%;white-space:nowrap;padding:var(--sb-text-padding, 0 .7em);font-weight:var(--sb-font-weight, bold)}.sb-icon{text-align:center;width:100%;height:100%;min-width:2em;font-size:var(--sb-icon-size, 1.2em)}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ShareButton };
//# sourceMappingURL=ngx-sharebuttons-button.mjs.map