@salla.sa/twilight-components/dist/components/salla-reviews-summary2.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { R as Rate } from './star2.js';
import { d as defineCustomElement$2 } from './salla-progress-bar2.js';
import { d as defineCustomElement$1 } from './salla-rating-stars2.js';

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

const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsSummary extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.itemId = undefined;
    this.canRender = false;
    this.data = undefined;
    this.basedOnLabel = undefined;
    salla.lang.onLoaded(() => {
      const setNestedAsync = (lang, key, value) => {
        return new Promise((resolve) => {
          salla.helpers.setNested(salla.lang.messages[lang], key, value);
          resolve(true);
        });
      };
      const setTranslations = async () => {
        await setNestedAsync('ar.trans', 'blocks.comments.based_on', 'بناءً على');
        await setNestedAsync('en.trans', 'blocks.comments.based_on', 'Based on');
        this.basedOnLabel = salla.lang.get('blocks.comments.based_on');
      };
      setTranslations();
    });
  }
  componentWillLoad() {
    return salla.onReady()
      .then(() => this.loadSummary());
  }
  async loadSummary() {
    try {
      let resp = await salla.api.request(`rating/summary/${this.itemId}`);
      if (Array.isArray(resp.data.reviews) && !resp.data.reviews.length) {
        return this.canRender = false;
      }
      else {
        this.data = resp.data;
        this.canRender = true;
      }
    }
    catch (error) {
      console.error('Error loading reviews summary:', error);
    }
  }
  render() {
    if (!this.canRender) {
      return null;
    }
    // Initialize all ratings with 0 if missing
    const ratings = Object.assign({ "1": 0, "2": 0, "3": 0, "4": 0, "5": 0 }, this.data.reviews);
    const reviewElements = Object.keys(ratings).reverse().map(rating => {
      const percentage = ratings[rating];
      return (h("div", { class: "s-reviews-summary-row" }, h("div", { class: "s-reviews-summary-row-rate" }, rating, " ", h("span", { innerHTML: Rate })), h("salla-progress-bar", { class: "s-reviews-summary-progress", value: percentage, target: 100, hideUnits: true, height: '14px' }), h("span", { class: "s-reviews-summary-percentage" }, percentage, "%")));
    });
    return (h(Host, { class: "s-reviews-summary-wrapper" }, h("div", { class: "s-reviews-summary-header" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { value: this.data.rating }), h("p", { class: "s-reviews-summary-count" }, this.basedOnLabel, " ", salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.data.count))))), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
  }
  static get style() { return sallaReviewsSummaryCss; }
}, [0, "salla-reviews-summary", {
    "itemId": [2, "item-id"],
    "canRender": [32],
    "data": [32],
    "basedOnLabel": [32]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["salla-reviews-summary", "salla-progress-bar", "salla-rating-stars"];
  components.forEach(tagName => { switch (tagName) {
    case "salla-reviews-summary":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SallaReviewsSummary);
      }
      break;
    case "salla-progress-bar":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "salla-rating-stars":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}

export { SallaReviewsSummary as S, defineCustomElement as d };

//# sourceMappingURL=salla-reviews-summary2.js.map