@salla.sa/twilight-components
Version:
Salla Web Component
131 lines (123 loc) • 7.52 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { W as WhatsappIcon } from './whatsapp2.js';
import { M as MailIcon } from './mail.js';
var mobile = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>iphone</title>
<path d="M15.053 27.613c0.133 0.12 0.28 0.213 0.44 0.28s0.333 0.107 0.507 0.107c0.36 0 0.693-0.135 0.947-0.387 0.12-0.135 0.213-0.28 0.28-0.44 0.080-0.16 0.107-0.333 0.107-0.507 0-0.347-0.147-0.695-0.387-0.947-0.507-0.493-1.387-0.493-1.893 0-0.12 0.12-0.213 0.267-0.28 0.44-0.067 0.16-0.107 0.333-0.107 0.507s0.040 0.347 0.107 0.507 0.16 0.305 0.28 0.44zM24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.599 1.333-1.333 1.333h-16c-0.735 0-1.333-0.597-1.333-1.333v-4h18.667zM25.333 21.333h-18.667v-17.333c0-0.735 0.599-1.333 1.333-1.333h16c0.735 0 1.333 0.599 1.333 1.333z"></path>
</svg>
`;
var phone = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>phone</title>
<path d="M30.823 21.713l-3.883-3.883c-1.569-1.568-4.12-1.568-5.689 0l-2.568 2.568c-3.063-1.499-5.583-4.019-7.081-7.083l2.568-2.567c0.759-0.76 1.177-1.771 1.177-2.845s-0.419-2.084-1.179-2.844l-3.881-3.881c-1.52-1.521-4.171-1.521-5.689 0l-1.845 1.847c-2.22 2.219-3.183 5.407-2.573 8.527 1.98 10.144 10.125 18.292 20.269 20.271 0.616 0.121 1.236 0.18 1.849 0.18 2.492 0 4.896-0.972 6.677-2.752l1.847-1.847c1.568-1.571 1.568-4.121 0.001-5.691zM28.936 25.517l-1.845 1.847c-1.592 1.592-3.883 2.283-6.132 1.841-9.089-1.776-16.388-9.075-18.163-18.165-0.439-2.247 0.249-4.539 1.841-6.129l1.847-1.847c0.256-0.257 0.596-0.397 0.959-0.397s0.703 0.14 0.959 0.397l3.883 3.883c0.256 0.256 0.397 0.596 0.397 0.959s-0.141 0.703-0.397 0.96l-3.22 3.217c-0.383 0.384-0.496 0.959-0.287 1.457 1.813 4.339 5.343 7.868 9.683 9.684 0.497 0.207 1.073 0.095 1.457-0.288l3.22-3.22c0.529-0.529 1.389-0.528 1.917 0l3.881 3.883c0.528 0.529 0.528 1.389 0 1.919z"></path>
</svg>
`;
var telegram = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>paper-plane-o</title>
<path d="M31.5 0.482c0.375 0.268 0.554 0.696 0.482 1.143l-4.571 27.429c-0.054 0.339-0.268 0.625-0.571 0.804-0.161 0.089-0.357 0.143-0.554 0.143-0.143 0-0.286-0.036-0.429-0.089l-9.411-3.839-5.321 5.839c-0.214 0.25-0.518 0.375-0.839 0.375-0.143 0-0.286-0.018-0.411-0.071-0.446-0.179-0.732-0.607-0.732-1.071v-8.071l-8.429-3.446c-0.411-0.161-0.679-0.536-0.714-0.982-0.036-0.429 0.196-0.839 0.571-1.054l29.714-17.143c0.375-0.232 0.857-0.214 1.214 0.036zM25.393 27.25l3.946-23.625-25.607 14.768 6 2.446 15.411-11.411-8.536 14.232z"></path>
</svg>
`;
const sallaContactsCss = ".unicode{unicode-bidi:-webkit-plaintext;unicode-bidi:plaintext}";
const SallaContacts$1 = /*@__PURE__*/ proxyCustomElement(class SallaContacts extends HTMLElement {
constructor() {
super();
this.__registerHost();
var _a;
this.contacts = salla.config.get('store.contacts');
this.iconsList = { mobile, whatsapp: WhatsappIcon, phone, telegram, email: MailIcon };
this.contactSlot = ((_a = this.host.querySelector('[slot="contact"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<a href={link} class="s-contacts-item"><span class="s-contacts-icon">{icon}</span>${!this.iconsOnly && "<span class='unicode'>{value}</span>"}</a>`;
salla.onReady(() => {
this.contacts = salla.config.get('store.contacts');
});
salla.lang.onLoaded(() => {
this.contactsTitle = this.contactsTitle || salla.lang.get('blocks.footer.social');
});
}
getContactsArray() {
return Object.entries(this.contacts)
.filter(([_key, value]) => value !== '')
.map(([type, value]) => ({ type, value }));
}
getContactLink(type) {
const contactValue = this.contacts[type];
switch (type) {
case 'phone':
case 'mobile':
return `tel:${contactValue}`;
case 'whatsapp':
return salla.url.get('whatsapp/send');
case 'email':
return `mailto:${contactValue}`;
case 'telegram':
// Check if the contact is already a full URL
return contactValue.startsWith('https://t.me/') ? contactValue : `https://t.me/${contactValue}`;
default:
return contactValue;
}
}
getContactIcon(type) {
return this.iconsList[type];
}
componentWillLoad() {
return new Promise(resolve => salla.onReady(resolve));
}
render() {
const contactsArray = this.getContactsArray();
if (!contactsArray || contactsArray.length == 0) {
return;
}
if (this.isHeader) {
return (h(Host, { class: "s-contacts s-contacts-header" }, contactsArray.filter((contact) => contact.type == 'phone' || contact.type == 'email').map((contact, index) => (h("a", { href: this.getContactLink(contact.type), key: index, class: "s-contacts-topnav-link" }, contact.type === 'email' ? (contact.value) : ([
h("span", null, this.contactsTitle, ": "),
h("a", { class: "unicode", href: this.iconsList[contact.type] }, contact.value)
]))))));
}
return (h(Host, { class: "s-contacts" }, !this.hideTitle && h("h3", { class: "s-contacts-title" }, this.contactsTitle), h("div", { class: {
's-contacts-list': true,
's-contacts-list-horizontal': this.horizontal,
's-contacts-list-vertical': !this.horizontal,
's-contacts-list-icons-only': this.iconsOnly
} }, contactsArray.map((contact, index) => (h("div", { key: index, id: "contact-slot", innerHTML: this.contactSlot
.replace(/\{icon\}/g, this.getContactIcon(contact.type))
.replace(/\{value\}/g, contact.value.toString())
.replace(/\{link\}/g, this.getContactLink(contact.type)) }))))));
}
componentDidRender() {
var _a;
// this.host.querySelectorAll('#contact-slot').forEach(el => el.replaceWith(el.firstChild));
(_a = this.host.querySelector('[slot="contact"]')) === null || _a === void 0 ? void 0 : _a.remove();
}
get host() { return this; }
static get style() { return sallaContactsCss; }
}, [0, "salla-contacts", {
"contactsTitle": [1025, "contacts-title"],
"hideTitle": [4, "hide-title"],
"isHeader": [4, "is-header"],
"horizontal": [4],
"iconsOnly": [4, "icons-only"],
"contacts": [32],
"iconsList": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-contacts"];
components.forEach(tagName => { switch (tagName) {
case "salla-contacts":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaContacts$1);
}
break;
} });
}
const SallaContacts = SallaContacts$1;
const defineCustomElement = defineCustomElement$1;
export { SallaContacts, defineCustomElement };
//# sourceMappingURL=salla-contacts.js.map
//# sourceMappingURL=salla-contacts.js.map