@salla.sa/twilight-components
Version:
Salla Web Component
96 lines (91 loc) • 5.69 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
const sallaPaymentsCss = ":host{display:block}";
const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* Array of the payments/items that are not supported, ex: ["sbc", "made-in-ksa", "cod", "mada", ""].
*/
this.exclude = [];
}
componentWillLoad() {
return salla.onReady()
.then(() => {
var _a, _b, _c;
if (typeof this.exclude === 'string') {
try {
this.exclude = JSON.parse(this.exclude);
}
catch (error) {
salla.logger.error('salla-payments:: failed to parse the exclude props!', this.exclude);
this.exclude = [];
}
}
this.placeholderImage = salla.url.cdn(`images/s-empty.png`);
this.paymentSlot = ((_a = this.host.querySelector('[slot="payment"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<li class="s-payments-list-item"><img class="lazy" width="100%" height="100%" src="${this.placeholderImage}" data-src="{image}" alt={payment} /><li>`;
this.sbcSlot = ((_b = this.host.querySelector('[slot="sbc"]')) === null || _b === void 0 ? void 0 : _b.innerHTML) || `<li class="s-payments-list-item"><a target="_blank" href="{link}"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy s-payments-sbc-image" alt="SBC"/></a><li>`;
this.codSlot = ((_c = this.host.querySelector('[slot="cod"]')) === null || _c === void 0 ? void 0 : _c.innerHTML) || `<li class="s-payments-list-item"> <img width="100%" height="100%" src="${this.placeholderImage}" data-src={image} class="lazy" alt="COD"/><li>`;
this.payments = salla.config.get('store.settings.payments');
});
}
render() {
const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
return (h(Host, { key: '007cbe4a84fd5e298fa812b315d38207993de42b', class: "s-payments-list-wrap" }, h("ul", { key: 'e8056d8b9523e79f4b17c8e74960b481cbcda508', class: "s-payments-list" }, madeInKSA && h("li", { key: 'b0b884bac26891fe718b1090194be909a03dc95a', class: "s-payments-list-item" }, h("img", { key: '35b4899f96c29e516e750fa18cc091bd85e5e902', class: "lazy", width: "100%", height: "100%", decoding: "async", loading: "lazy", "data-src": salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
h("div", { id: "cod-slot", innerHTML: this.codSlot
.replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
h("div", { id: "payment-slot", innerHTML: this.paymentSlot
.replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
.replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '64f61ebdbbe4f7c93667679e73c8c32a6be8ce7a', id: "sbc-slot", innerHTML: this.sbcSlot
.replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
.replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
}
componentDidLoad() {
var _a;
//todo:: double check about the following workaround, it looks not normal
(_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update(this.host.querySelectorAll('.lazy'));
// fix lazy loaded images that have 100% width and height
this.host.querySelectorAll('.lazy').forEach((img) => {
img.addEventListener('load', () => {
img.setAttribute('width', "100%");
img.setAttribute('height', "100%");
});
});
}
componentDidRender() {
var _a, _b, _c;
//todo:: double check about the following workaround to reduce the dom length, it looks unusal
this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));
this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));
(_a = this.host.querySelector('[slot="payment"]')) === null || _a === void 0 ? void 0 : _a.remove();
(_b = this.host.querySelector('[slot="sbc"]')) === null || _b === void 0 ? void 0 : _b.remove();
(_c = this.host.querySelector('[slot="cod"]')) === null || _c === void 0 ? void 0 : _c.remove();
}
get host() { return this; }
static get style() { return sallaPaymentsCss; }
}, [0, "salla-payments", {
"exclude": [1040]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-payments"];
components.forEach(tagName => { switch (tagName) {
case "salla-payments":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaPayments$1);
}
break;
} });
}
const SallaPayments = SallaPayments$1;
const defineCustomElement = defineCustomElement$1;
export { SallaPayments, defineCustomElement };
//# sourceMappingURL=salla-payments.js.map
//# sourceMappingURL=salla-payments.js.map