@salla.sa/twilight-components
Version:
Salla Web Component
182 lines (175 loc) • 11.5 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$5 } from './salla-button2.js';
import { d as defineCustomElement$4 } from './salla-loading2.js';
import { d as defineCustomElement$3 } from './salla-modal2.js';
import { d as defineCustomElement$2 } from './salla-slider2.js';
const infoIcon = `<!-- 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>info</title>
<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;
const shoppingBag = `<!-- 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>shopping-bag2</title>
<path d="M29.2 8.133c0 0 0-0.133-0.133-0.133 0 0 0-0.133-0.133-0.133l-4-5.333c-0.133-0.4-0.533-0.533-0.933-0.533h-16c-0.4 0-0.8 0.133-1.067 0.533l-4 5.333c0 0 0 0.133-0.133 0.133 0 0 0 0.133-0.133 0.133 0 0.267 0 0.4 0 0.533v18.667c0 2.267 1.733 4 4 4h18.667c2.267 0 4-1.733 4-4v-18.667c0-0.133 0-0.267-0.133-0.533zM8.667 4.667h14.667l2 2.667h-18.667l2-2.667zM25.333 28.667h-18.667c-0.8 0-1.333-0.533-1.333-1.333v-17.333h21.333v17.333c0 0.8-0.533 1.333-1.333 1.333zM21.333 12.667c-0.8 0-1.333 0.533-1.333 1.333 0 2.267-1.733 4-4 4s-4-1.733-4-4c0-0.8-0.533-1.333-1.333-1.333s-1.333 0.533-1.333 1.333c0 3.733 2.933 6.667 6.667 6.667s6.667-2.933 6.667-6.667c0-0.8-0.533-1.333-1.333-1.333z"></path>
</svg>
`;
const sallaBottomAlertCss = ":host{display:block}";
const SallaBottomAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaBottomAlert extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.storeId = salla.config.get('store.id');
this.template = salla.config.get('store.template');
this.loading = false;
this.templateData = {};
this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.storePrice = salla.lang.getWithDefault('common.elements.store_price', 'سعر المتجر');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
this.isRtl = salla.config.get('theme.is_rtl', true);
this.type = 'popup';
this.icon = undefined;
this.message = undefined;
this.actionUrl = undefined;
this.actionLabel = undefined;
salla.lang.onLoaded(() => {
this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
this.defaultActionLabel = salla.lang.get('common.elements.know_more');
this.storeFeatures = salla.lang.get('common.elements.store_features');
this.storeDetails = salla.lang.get('common.elements.store_details');
this.templateInformation = salla.lang.get('common.elements.template_information');
this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price', 'سعر المتجر');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price', 'Store Price');
salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.the_developer', 'المطور');
salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.the_developer', 'the developer');
setTimeout(() => {
this.storePrice = salla.lang.get('common.elements.store_price');
this.theDeveloper = salla.lang.get('common.elements.the_developer');
}, 100);
});
}
open() {
return this.modal.open()
.then(() => this.handleTemplateRequest());
}
getDefaultMessage() {
return this.isRtl ? this.defaultMessage.substring(0, this.defaultMessage.lastIndexOf(" ")) : this.defaultMessage.split(" ").slice(0, -2).join(" ");
}
handleTemplateRequest() {
if (Object.keys(this.templateData).length) {
return;
}
this.modal.loading();
return salla.api.request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
.then((res) => {
this.modal.setTitle(this.templateInformation);
this.templateData = res.data;
this.modal.stopLoading();
})
.catch(() => {
this.modal.close();
});
}
handleAction() {
if (this.type === 'link') {
window.location.href = this.actionUrl;
}
if (this.type === 'popup') {
this.open();
}
}
popup() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
return (h("salla-modal", { class: "s-bottom-alert-modal", ref: modal => this.modal = modal, "no-padding": true }, Object.keys(this.templateData).length ?
[h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, Array.isArray((_a = this.templateData) === null || _a === void 0 ? void 0 : _a.screenshots) && ((_c = (_b = this.templateData) === null || _b === void 0 ? void 0 : _b.screenshots) === null || _c === void 0 ? void 0 : _c.length) ? h("div", { class: "s-bottom-alert-modal-cover" }, h("img", { src: (_d = this.templateData) === null || _d === void 0 ? void 0 : _d.screenshots[0], alt: "" })) : '', h("div", { class: { "s-bottom-alert-modal-content": true, "s-bottom-alert-modal-content-extra-padding": this.templateData.price } }, ((_e = this.templateData) === null || _e === void 0 ? void 0 : _e.description) ?
[h("div", { class: "s-bottom-alert-modal-content-title" }, this.storeDetails), h("div", { class: "s-bottom-alert-modal-content-description", innerHTML: (_f = this.templateData) === null || _f === void 0 ? void 0 : _f.description }), h("hr", null)
] : '', ((_g = this.templateData) === null || _g === void 0 ? void 0 : _g.features) ? [h("div", { class: "s-bottom-alert-modal-content-title" }, this.storeFeatures), h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: (_h = this.templateData) === null || _h === void 0 ? void 0 : _h.features })
] : '', Array.isArray((_j = this.templateData) === null || _j === void 0 ? void 0 : _j.screenshots) && ((_l = (_k = this.templateData) === null || _k === void 0 ? void 0 : _k.screenshots) === null || _l === void 0 ? void 0 : _l.length) > 1 ?
h("salla-slider", { id: 'template-screenshots', type: 'carousel', class: "s-bottom-alert-modal-content-screenshots" }, h("div", { slot: 'items' }, (_m = this.templateData) === null || _m === void 0 ? void 0 : _m.screenshots.map((screenshot) => {
return h("div", { class: "s-bottom-alert-modal-content-screenshot" }, h("img", { src: screenshot, alt: "" }));
})))
: '', ((_o = this.templateData) === null || _o === void 0 ? void 0 : _o.extra_info) ?
h("div", { class: "s-bottom-alert-modal-content-description", innerHTML: (_p = this.templateData) === null || _p === void 0 ? void 0 : _p.description })
: ''), ((_q = this.templateData) === null || _q === void 0 ? void 0 : _q.link) ?
h("div", { class: "s-bottom-alert-modal-content-footer" }, this.templateData.price && h("div", { class: "s-bottom-alert-modal-price-wrapper" }, h("div", null, this.storePrice), h("div", { class: "s-bottom-alert-modal-price-wrapper-amount" }, salla.money((_r = this.templateData) === null || _r === void 0 ? void 0 : _r.price))), h("salla-button", { color: 'primary', size: "medium", width: 'wide', href: (_s = this.templateData) === null || _s === void 0 ? void 0 : _s.link }, h("i", { innerHTML: shoppingBag }), this.buyTheTemplate)) : '')] : ''));
}
render() {
const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
const developer = hasTemplate && this.template.developer;
const hasDeveloper = developer !== undefined;
const developerName = hasDeveloper && (developer === null || developer === void 0 ? void 0 : developer.name);
const developerUrl = null; //hasDeveloper && developer.url;
return (h(Host, { class: "s-bottom-alert-wrapper" }, h("div", { class: "s-bottom-alert-content" }, h("div", { class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", null, this.getDefaultMessage(), " ", h("a", { href: "#", class: {
"s-bottom-alert-message-highlight": true,
"s-bottom-alert-message-link": developerUrl,
}, target: "", "aria-label": "Developer" }, developerName ? developerName : this.theDeveloper), " ", h("span", { class: "s-bottom-alert-message-splitter" }, "|"), " ", this.storePrice, ":", " ", h("span", { class: "s-bottom-alert-message-highlight" }, salla.money(this.template.price)))) : (this.defaultMessage)), this.type !== 'banner' && (h("div", { class: "s-bottom-alert-action" }, h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel))), this.type === 'popup' && this.popup())));
}
get host() { return this; }
static get style() { return sallaBottomAlertCss; }
}, [0, "salla-bottom-alert", {
"type": [513],
"icon": [513],
"message": [513],
"actionUrl": [513, "action-url"],
"actionLabel": [513, "action-label"],
"storeId": [32],
"template": [32],
"loading": [32],
"templateData": [32],
"defaultMessage": [32],
"defaultActionLabel": [32],
"storeFeatures": [32],
"storeDetails": [32],
"storePrice": [32],
"theDeveloper": [32],
"templateInformation": [32],
"buyTheTemplate": [32],
"isRtl": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-bottom-alert", "salla-button", "salla-loading", "salla-modal", "salla-slider"];
components.forEach(tagName => { switch (tagName) {
case "salla-bottom-alert":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaBottomAlert$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const SallaBottomAlert = SallaBottomAlert$1;
const defineCustomElement = defineCustomElement$1;
export { SallaBottomAlert, defineCustomElement };
//# sourceMappingURL=salla-bottom-alert.js.map