@salla.sa/twilight-components/dist/components/salla-apps-icons.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const sallaAppsIconsCss = ":host{display:block}";

const SallaAppsIcons$1 = /*@__PURE__*/ proxyCustomElement(class SallaAppsIcons extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    var _a;
    this.apps = salla.config.get('store.apps');
    this.hideTitle = undefined;
    this.appsTitle = undefined;
    this.vertical = undefined;
    this.appSlot = ((_a = this.host.querySelector('[slot="app"]')) === null || _a === void 0 ? void 0 : _a.innerHTML) || `<img alt={name} src={icon} />`;
    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() {
    var _a;
    (_a = this.host.querySelector('[slot="app"]')) === null || _a === void 0 ? void 0 : _a.remove();
  }
  get host() { return this; }
  static get style() { return sallaAppsIconsCss; }
}, [0, "salla-apps-icons", {
    "hideTitle": [4, "hide-title"],
    "appsTitle": [1, "apps-title"],
    "vertical": [4],
    "apps": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["salla-apps-icons"];
  components.forEach(tagName => { switch (tagName) {
    case "salla-apps-icons":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SallaAppsIcons$1);
      }
      break;
  } });
}

const SallaAppsIcons = SallaAppsIcons$1;
const defineCustomElement = defineCustomElement$1;

export { SallaAppsIcons, defineCustomElement };

//# sourceMappingURL=salla-apps-icons.js.map