@salla.sa/twilight-components
Version:
Salla Web Component
44 lines (40 loc) • 1.83 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { r as registerInstance, h, H as Host, a as getElement } from './index-BHYtfMwX.js';
const sallaAppsIconsCss = ":host{display:block}";
const SallaAppsIcons = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.apps = salla.config.get('store.apps');
this.appSlot = this.host.querySelector('[slot="app"]')?.innerHTML || `<img alt="{name}" src="{icon}" width="135" height="40" decoding="async" loading="lazy" />`;
salla.onReady(() => {
this.apps = salla.config.get('store.apps');
});
salla.lang.onLoaded(() => {
this.appsTitle = salla.lang.get('blocks.footer.download_apps');
});
}
getAppsArray() {
return Object.entries(this.apps)
.map(([name, value]) => ({ name, value }));
}
componentWillLoad() {
return new Promise(resolve => salla.onReady(resolve));
}
render() {
const appsArray = this.getAppsArray();
if (Array.isArray(appsArray) && !appsArray.length) {
return;
}
return (h(Host, { class: "s-apps-icons" }, !this.hideTitle && h("h3", null, this.appsTitle), h("div", { class: { "s-apps-icons-list": true, "vertical": this.vertical } }, appsArray.map((app, index) => (h("a", { key: index, href: app.value, rel: "noreferrer", target: "_blank", class: "s-apps-icons-item", id: "app-slot", innerHTML: this.appSlot
.replace(/\{icon\}/g, salla.url.cdn(`images/${app.name}.png`))
.replace(/\{name\}/g, app.name) }))))));
}
componentDidRender() {
this.host.querySelector('[slot="app"]')?.remove();
}
get host() { return getElement(this); }
};
SallaAppsIcons.style = sallaAppsIconsCss;
export { SallaAppsIcons as salla_apps_icons };