@salla.sa/twilight-components
Version:
Salla Web Component
65 lines (64 loc) • 2.59 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
import instagram from "../../assets/svg/instagram.svg";
import twitter from "../../assets/svg/twitter.svg";
import facebook from "../../assets/svg/facebook.svg";
import youtube from "../../assets/svg/youtube.svg";
import snapchat from "../../assets/svg/snapchat.svg";
import tiktok from "../../assets/svg/tiktok.svg";
/**
* @slot social-item - Replaces social item, has replaceable keys `{icon}`, `{type} and {link}`.
*/
export class SallaSocial {
constructor() {
var _a;
this.links = salla.config.get('store.social');
this.iconsList = { instagram, twitter, facebook, youtube, snapchat, tiktok };
this.socialSlot = ((_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) ||
`<li class="s-social-link"><a href={link} rel="noopener" target="_blank" title={type} aria-label={type}><span class="s-social-icon">{icon}</span></a></li>`;
salla.lang.onLoaded(() => {
this.links = salla.config.get('store.social');
});
}
getLinksArray() {
return this.links ? Object.entries(this.links)
.filter(([key, value]) => !!value && key !== 'whatsapp')
.map(([type, value]) => ({ type, value })) : [];
}
componentWillLoad() {
return new Promise(resolve => salla.onReady(resolve));
}
render() {
const linksArray = this.getLinksArray();
return (h(Host, { key: 'c370287bf6b5290a351af244ea5868aba5835198', class: "s-social-list" }, linksArray.map((link) => (h("div", { id: "social-slot", innerHTML: this.socialSlot
.replace(/\{icon\}/g, this.iconsList[link.type])
.replace(/\{type\}/g, link.type)
.replace(/\{link\}/g, link.value.toString()) })))));
}
componentDidRender() {
var _a;
this.host.querySelectorAll('#social-slot').forEach(el => el.replaceWith(el.firstChild));
(_a = this.host.querySelector('[slot="social-item"]')) === null || _a === void 0 ? void 0 : _a.remove();
}
static get is() { return "salla-social"; }
static get originalStyleUrls() {
return {
"$": ["salla-social.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-social.css"]
};
}
static get states() {
return {
"links": {},
"iconsList": {}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=salla-social.js.map