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
104 lines (97 loc) • 13.9 kB
JavaScript
import * as i0 from '@angular/core';
import { input, output, Component, ChangeDetectionStrategy, inject, numberAttribute, model, computed, booleanAttribute } from '@angular/core';
import { SHARE_BUTTONS_CONFIG, SHARE_BUTTONS } from 'ngx-sharebuttons';
import { ShareButton } from 'ngx-sharebuttons/button';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
class ExpandButton {
constructor() {
this.options = input();
this.expand = input();
this.expandChange = output();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ExpandButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.5", type: ExpandButton, isStandalone: true, selector: "expand-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandChange: "expandChange" }, ngImport: i0, template: `
<button class="sb-wrapper sb-expand sb-show-icon"
[attr.aria-label]="expand() ? options().lessButtonAriaLabel : options().moreButtonAriaLabel"
(click)="expandChange.emit(!expand())">
<div class="sb-content">
<div class="sb-icon">
<fa-icon [icon]="expand() ? options().lessButtonIcon : options().moreButtonIcon"/>
</div>
</div>
</button>
`, isInline: true, 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", ":host{--button-color: var(--sb-expand-button-color, #FF6651)}\n"], dependencies: [{ 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: ExpandButton, decorators: [{
type: Component,
args: [{ selector: 'expand-button', template: `
<button class="sb-wrapper sb-expand sb-show-icon"
[attr.aria-label]="expand() ? options().lessButtonAriaLabel : options().moreButtonAriaLabel"
(click)="expandChange.emit(!expand())">
<div class="sb-content">
<div class="sb-icon">
<fa-icon [icon]="expand() ? options().lessButtonIcon : options().moreButtonIcon"/>
</div>
</div>
</button>
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FaIconComponent], 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", ":host{--button-color: var(--sb-expand-button-color, #FF6651)}\n"] }]
}] });
class ShareButtons {
constructor() {
/** Global default options */
this.options = inject(SHARE_BUTTONS_CONFIG);
/** Numbers of buttons to show */
this.show = input(Object.values(SHARE_BUTTONS).length, { transform: numberAttribute });
/** Array of included buttons */
this.include = input(this.options.include || []);
/** Array of excluded buttons */
this.exclude = input(this.options.exclude || []);
this.expanded = model(false);
this.selectedButtons = computed(() => {
const includedButtons = this.include().length ? this.include() : Object.keys(SHARE_BUTTONS);
return includedButtons.filter((btn) => this.exclude().indexOf(btn) < 0);
});
this.displayButtons = computed(() => {
const selectedButtons = this.selectedButtons();
return selectedButtons.slice(0, this.expanded() ? selectedButtons.length : this.show());
});
this.theme = input(this.options.theme);
/** The sharing link */
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 buttons icons */
this.showIcon = input(true, {
transform: booleanAttribute
});
/** Show buttons text */
this.showText = input(false, {
transform: booleanAttribute
});
/** A flag that indicates if the button's click is disabled */
this.disabled = input(false, {
transform: booleanAttribute
});
/** Share dialog opened event */
this.opened = output();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ShareButtons, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.5", type: ShareButtons, isStandalone: true, selector: "share-buttons", inputs: { show: { classPropertyName: "show", publicName: "show", isSignal: true, isRequired: false, transformFunction: null }, include: { classPropertyName: "include", publicName: "include", isSignal: true, isRequired: false, transformFunction: null }, exclude: { classPropertyName: "exclude", publicName: "exclude", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", 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 }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened" }, ngImport: i0, template: "<div class=\"sb-group sb-{{ theme() }}\">\r\n @for (button of displayButtons(); track button) {\r\n <share-button [button]=\"button\"\r\n [theme]=\"theme()\"\r\n [url]=\"url()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [image]=\"image()\"\r\n [tags]=\"tags()\"\r\n [redirectUrl]=\"redirectUrl()\"\r\n [showIcon]=\"showIcon()\"\r\n [showText]=\"showText()\"\r\n (opened)=\"opened.emit($event)\"\r\n [disabled]=\"disabled()\"/>\r\n }\r\n @if (show() < selectedButtons().length) {\r\n <expand-button class=\"sb-button sb-{{ theme() }}\"\r\n [options]=\"options\"\r\n [(expand)]=\"expanded\"/>\r\n }\r\n</div>\r\n\r\n", styles: [":host{display:inherit}.sb-group,.sb-button{display:inline-flex;align-items:flex-start}.sb-group{flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: ShareButton, selector: "share-button", inputs: ["button", "url", "title", "description", "image", "tags", "redirectUrl", "showIcon", "showText", "text", "icon", "theme", "disabled"], outputs: ["opened"] }, { kind: "component", type: ExpandButton, selector: "expand-button", inputs: ["options", "expand"], outputs: ["expandChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: ShareButtons, decorators: [{
type: Component,
args: [{ selector: 'share-buttons', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ShareButton, ExpandButton], template: "<div class=\"sb-group sb-{{ theme() }}\">\r\n @for (button of displayButtons(); track button) {\r\n <share-button [button]=\"button\"\r\n [theme]=\"theme()\"\r\n [url]=\"url()\"\r\n [title]=\"title()\"\r\n [description]=\"description()\"\r\n [image]=\"image()\"\r\n [tags]=\"tags()\"\r\n [redirectUrl]=\"redirectUrl()\"\r\n [showIcon]=\"showIcon()\"\r\n [showText]=\"showText()\"\r\n (opened)=\"opened.emit($event)\"\r\n [disabled]=\"disabled()\"/>\r\n }\r\n @if (show() < selectedButtons().length) {\r\n <expand-button class=\"sb-button sb-{{ theme() }}\"\r\n [options]=\"options\"\r\n [(expand)]=\"expanded\"/>\r\n }\r\n</div>\r\n\r\n", styles: [":host{display:inherit}.sb-group,.sb-button{display:inline-flex;align-items:flex-start}.sb-group{flex-wrap:wrap}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ShareButtons };
//# sourceMappingURL=ngx-sharebuttons-buttons.mjs.map