@salla.sa/twilight-components 2.14.488 → 2.14.490

package/dist/components/salla-rating-modal.js

@@ -3,28 +3,22 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { W as WishListIcon } from './star.js';
+import { d as defineCustomElement$4, S as ShippingFast } from './salla-rating-modal-v22.js';
 import { C as CheckCircle2 } from './check-circle2.js';
 import { H as Helper } from './Helper.js';
 import { I as ImageIcon } from './image.js';
 import { W as WhatsappIcon } from './whatsapp2.js';
 import { M as MailIcon } from './mail.js';
 import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$8 } from './salla-button2.js';
-import { d as defineCustomElement$7 } from './salla-file-upload2.js';
-import { d as defineCustomElement$6 } from './salla-loading2.js';
-import { d as defineCustomElement$5 } from './salla-modal2.js';
-import { d as defineCustomElement$4 } from './salla-placeholder2.js';
+import { d as defineCustomElement$9 } from './salla-button2.js';
+import { d as defineCustomElement$8 } from './salla-file-upload2.js';
+import { d as defineCustomElement$7 } from './salla-loading2.js';
+import { d as defineCustomElement$6 } from './salla-modal2.js';
+import { d as defineCustomElement$5 } from './salla-placeholder2.js';
 import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
-var ShippingFast = `<!-- 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>shipping-fast</title>
-<path d="M10.667 14.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h8c0.736 0 1.333-0.596 1.333-1.333zM9.333 18.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM9.333 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM1.333 10.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.123 13.103l-3.147-3.935c-1.273-1.589-3.171-2.501-5.205-2.501h-1.437c0-2.205-1.795-4-4-4h-13.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v1.333c0 0.248 0.087 0.468 0.204 0.667-0.117 0.199-0.204 0.419-0.204 0.667v5.333c0 0.737 0.597 1.333 1.333 1.333h9.333v6.667h-1.333c-0.063 0-0.117 0.028-0.179 0.036-0.583-2.313-2.664-4.036-5.155-4.036-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c2.491 0 4.572-1.723 5.155-4.036 0.061 0.008 0.116 0.036 0.179 0.036h2.667c0.736 0 1.333-0.596 1.333-1.333v-8.399c0-0.905-0.311-1.792-0.877-2.499zM21.333 13.333v-4h1.437c1.221 0 2.36 0.547 3.124 1.501l1.997 2.499zM22.667 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
-</svg>
-`;
-
-const sallaRatingModalCss = "";
+const sallaRatingModalCss = ".s-rating-modal-product-details{padding-bottom:0.5rem}.s-rating-modal-comment{margin-top:0.35rem}.s-rating-modal-product{margin-bottom:1rem}.s-rating-modal-product-img{display:block;width:100%;height:100%;object-fit:cover}.s-rating-modal-product-title{font-size:0.95rem;font-weight:600;line-height:1.5;margin:0}.s-rating-modal-stars-product{margin-top:0.5rem}.s-rating-modal-product-details-main{display:flex;align-items:center;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-info-row{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.5rem;padding-bottom:0;border-bottom:0}.s-rating-modal-product-main-review{width:100%;text-align:right}.s-rating-modal-product-rating-rows{display:grid;gap:0.45rem;margin:0.2rem 0 0.7rem}.s-rating-modal-product-rating-row{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;min-height:2rem}.s-rating-modal-product-rating-row salla-rating-stars{flex-shrink:0}.s-rating-modal-product-rating-row .s-rating-stars-wrapper{align-items:center;min-height:1.75rem}.s-rating-modal-product-rating-row .s-rating-stars-label,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag{min-width:auto;min-height:1.25rem;line-height:1.25rem;font-size:0.8rem;color:#5b6470;white-space:nowrap;text-align:end;transition:opacity 0.15s ease}.s-rating-modal-product-rating-row .s-rating-stars-label--empty,.s-rating-modal-product-rating-row .s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-modal-product-rating-row-main{margin-bottom:0.35rem;padding:0.5rem 0.6rem;border:1px solid #d1d5db;border-radius:0.45rem;background:transparent}.s-rating-modal-product-factor-name{color:#5b6470;font-size:0.9rem;line-height:1.25}.s-rating-modal-product-rating-row-main .s-rating-modal-product-factor-name{font-size:1rem;color:#5b6470}.s-rating-modal-product-factor-required{color:#f87171;margin-inline-start:0.2rem}.s-rating-modal-product-img-wrap{width:5rem;min-width:5rem;height:3.5rem;flex-shrink:0;overflow:hidden;border-radius:0.375rem;background:#f3f4f6}.s-rating-modal-uploader.is-opened{height:auto !important;opacity:1 !important;overflow:visible !important;pointer-events:auto !important;margin-bottom:1rem}";
 
 const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal extends HTMLElement {
     constructor() {
@@ -41,6 +35,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         this.deleteMode = false;
         this.shouldOpenDeleteModal = false;
         this.editItem = null;
+        this.enableNewPopUp = false;
         this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
         this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
         this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
@@ -151,10 +146,21 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
             setTranslations();
         });
     }
+    getV2Ref() {
+        return this.v2Ref ?? this.host.querySelector('salla-rating-modal-v2');
+    }
+    syncNewPopUpFlag() {
+        this.enableNewPopUp = !!salla.config.get('store.features')?.includes('new_popup_rating');
+    }
     /**
      * Show the rating modal
      */
     async open() {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.open();
+        }
         this.defaultMode = true;
         return new Promise((resolve) => {
             setTimeout(() => {
@@ -184,6 +190,11 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         });
     }
     async openEditModal(params) {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.openEditModal(params);
+        }
         this.defaultMode = false;
         this.editMode = true;
         this.editType = params.type;
@@ -224,6 +235,11 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         });
     }
     async openDeleteModal(params) {
+        await salla.onReady();
+        this.syncNewPopUpFlag();
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.openDeleteModal(params);
+        }
         this.defaultMode = false;
         this.deleteMode = true;
         this.deleteFeedbackId = params.feedback_id;
@@ -248,6 +264,9 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
      * Show the rating modal
      */
     async close() {
+        if (this.enableNewPopUp) {
+            return this.getV2Ref()?.close();
+        }
         return this.modal.close();
     }
     // handle wizard
@@ -411,6 +430,9 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
             : null, h("div", { class: "s-rating-modal-footer s-rating-modal-footer-end" }, h("salla-button", { "loader-position": 'center', onClick: () => this.editReview() }, this.editReviewLabel)))));
     }
     render() {
+        if (this.enableNewPopUp) {
+            return (h(Host, { class: "s-rating-modal" }, h("salla-rating-modal-v2", { ref: (el) => (this.v2Ref = el), orderId: this.orderId })));
+        }
         if (this.deleteMode) {
             return h(Host, { class: "s-rating-modal" }, this.getDeleteModal());
         }
@@ -446,10 +468,12 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
                 : h("salla-placeholder", { alignment: "center" }))));
         }
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         salla.event.on('rating::open', () => this.open());
         salla.event.on('rating::edit', (params) => this.openEditModal(params));
         salla.event.on('rating::delete', (params) => this.openDeleteModal(params));
+        await salla.onReady();
+        this.syncNewPopUpFlag();
     }
     componentDidLoad() {
         salla.event.dispatch('rating::ready', this);
@@ -474,6 +498,7 @@ const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingMod
         "editFeedbackId": [32],
         "deleteFeedbackId": [32],
         "editItem": [32],
+        "enableNewPopUp": [32],
         "open": [64],
         "close": [64]
     }]);
@@ -481,7 +506,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-rating-modal", "salla-button", "salla-file-upload", "salla-loading", "salla-modal", "salla-placeholder", "salla-rating-stars", "salla-skeleton"];
+    const components = ["salla-rating-modal", "salla-button", "salla-file-upload", "salla-loading", "salla-modal", "salla-placeholder", "salla-rating-modal-v2", "salla-rating-stars", "salla-skeleton"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-rating-modal":
             if (!customElements.get(tagName)) {
@@ -490,25 +515,30 @@ function defineCustomElement$1() {
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "salla-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "salla-placeholder":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-rating-modal-v2":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/salla-rating-stars2.js

@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { R as Rate } from './star2.js';
 import { H as Helper } from './Helper.js';
 
-const sallaRatingStarsCss = "";
+const sallaRatingStarsCss = ":host{display:inline-flex;vertical-align:middle}.s-rating-stars-wrapper{display:inline-flex;align-items:center;gap:0.5rem;min-height:1.75rem}.s-rating-stars-wrapper--with-label{min-height:1.75rem}.s-rating-stars-element{display:inline-flex;align-items:center;flex-shrink:0}.s-rating-stars-label,.s-rating-stars-label-without-tag{flex-shrink:0;min-width:5.5rem;min-height:1.25rem;line-height:1.25rem;text-align:end;transition:opacity 0.15s ease}.s-rating-stars-label--empty,.s-rating-stars-label-without-tag--empty{opacity:0}.s-rating-stars-btn-star{flex-shrink:0}";
 
 const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars extends HTMLElement {
     constructor() {
@@ -28,9 +28,26 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
        */
         this.reviews = 0;
         /**
+        * Render the description label before the stars instead of after.
+        */
+        this.labelBeforeStars = false;
+        /**
         * Allows the rating to be editable.
         */
         this.editable = false;
+        this.tag = true;
+    }
+    getLabelClassName() {
+        return this.tag ? 's-rating-stars-label' : 's-rating-stars-label-without-tag';
+    }
+    setLabelDisplay(text) {
+        if (!this.labelElem) {
+            return;
+        }
+        this.labelElem.textContent = text || '\u00a0';
+        const labelClass = this.getLabelClassName();
+        this.labelElem.classList.toggle(`${labelClass}--empty`, !text);
+        this.labelElem.setAttribute('aria-hidden', text ? 'false' : 'true');
     }
     async componentWillLoad() {
         await new Promise(resolve => {
@@ -54,23 +71,30 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
         });
     }
     initiateRating() {
-        this.host.addEventListener('click', this.handleRating.bind(this));
+        this.host.addEventListener('click', event => this.handleRating(event));
     }
-    handleRating() {
+    handleRating(event) {
         if (!this.starsElem)
             return;
         let activeStars = this.starsElem.querySelectorAll('.s-rating-stars-hovered');
         let selected = activeStars[activeStars.length - 1];
+        if (!selected && event?.target instanceof HTMLElement) {
+            selected = event.target.closest('.s-rating-stars-btn-star[data-star]');
+        }
         if (!selected)
             return;
         let selectedIndex = parseInt(selected.getAttribute('data-star'));
-        this.starsElem.querySelector('.rating_hidden_input').value = selectedIndex.toString();
-        this.starsElem.querySelectorAll('.s-rating-stars-btn-star')
+        this.starsElem.querySelector('.rating_hidden_input').value =
+            selectedIndex.toString();
+        this.starsElem
+            .querySelectorAll('.s-rating-stars-btn-star')
             .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-stars-selected', 's-rating-stars-unselected', () => index < selectedIndex));
         this.starsElem.querySelectorAll('[aria-pressed]').forEach(star => star.removeAttribute('aria-pressed'));
         selected.setAttribute('aria-pressed', 'true');
         this.selectedStar = selectedIndex;
-        this.withLabel && (this.reviewLabel = this.labels[selectedIndex - 1]);
+        if (this.withLabel) {
+            this.setLabelDisplay(this.labels[selectedIndex - 1]);
+        }
     }
     triggerRatingProgrammatically(index) {
         if (!this.starsElem)
@@ -92,11 +116,15 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
                 for (let i = 0; i <= index; i++) {
                     stars[i].classList.add(hoveredClass);
                 }
-                this.withLabel && (this.reviewLabel = this.labels[index]);
+                if (this.withLabel) {
+                    this.setLabelDisplay(this.labels[index]);
+                }
             });
             star.addEventListener('mouseout', () => {
                 star.classList.remove(hoveredClass);
-                this.withLabel && (this.reviewLabel = this.selectedStar ? this.labels[this.selectedStar - 1] : '');
+                if (this.withLabel) {
+                    this.setLabelDisplay(this.selectedStar ? this.labels[this.selectedStar - 1] : '');
+                }
             });
         });
         this.starsElem?.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
@@ -115,22 +143,55 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
         }
         return stars;
     }
+    renderReviewLabel() {
+        if (!this.withLabel) {
+            return null;
+        }
+        const labelClass = this.getLabelClassName();
+        return (h("span", { ref: el => {
+                this.labelElem = el;
+            }, class: {
+                [labelClass]: true,
+                [`${labelClass}--empty`]: !this.reviewLabel,
+            }, "aria-hidden": !this.reviewLabel ? 'true' : 'false' }, this.reviewLabel || '\u00a0'));
+    }
+    renderStarsWrapper(starsContent) {
+        const label = this.renderReviewLabel();
+        return (h("div", { class: {
+                's-rating-stars-wrapper': true,
+                's-rating-stars-wrapper--with-label': this.withLabel,
+                's-rating-stars-wrapper--label-first': this.labelBeforeStars,
+            } }, this.labelBeforeStars ? [label, starsContent] : [starsContent, label]));
+    }
+    renderEditableStars() {
+        return (h("div", { class: "s-rating-stars-element", ref: el => (this.starsElem = el) }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => (h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Rate }))))));
+    }
     render() {
         return this.translationsLoaded ? (this.host.closest('.swiper-slide')?.classList.contains('swiper-slide-duplicate')
             ? ''
-            : (h(Host, null, (this.value || this.value == 0) && !this.editable ?
-                h("div", { class: "s-rating-stars-wrapper" }, this.createStars(this.value), this.withLabel && this.reviewLabel ? h("span", { class: "s-rating-stars-label" }, this.reviewLabel) : '')
-                :
-                    h("div", { class: "s-rating-stars-wrapper" }, h("div", { class: "s-rating-stars-element", ref: (el) => this.starsElem = el }, h("input", { type: "hidden", class: "rating_hidden_input", name: this.name, value: "" }), [1, 2, 3, 4, 5].map(star => h("button", { class: `s-rating-stars-btn-star s-rating-stars-` + this.size, "data-star": star }, h("span", { innerHTML: Rate })))), this.withLabel && this.reviewLabel ? h("span", { class: "s-rating-stars-label" }, this.reviewLabel) : '')))) : (h(Host, null));
+            : (h(Host, null, (this.value || this.value == 0) && !this.editable
+                ? this.renderStarsWrapper(this.createStars(this.value))
+                : this.renderStarsWrapper(this.renderEditableStars())))) : (h(Host, null));
     }
     componentDidLoad() {
         this.initiateRating();
         this.highlightSelectedStars();
-        if (this.value && this.editable) {
-            const stars = this.starsElem?.querySelectorAll('.s-rating-stars-btn-star');
-            if (stars && this.value >= 0 && this.value <= stars.length) {
-                this.triggerRatingProgrammatically(this.value - 1);
-            }
+        this.syncEditableRating();
+    }
+    componentDidUpdate() {
+        this.syncEditableRating();
+    }
+    syncEditableRating() {
+        if (!this.translationsLoaded || !this.editable || !this.value || !this.starsElem) {
+            return;
+        }
+        // Prefill only while untouched — don't reset after the user picks a new rating
+        if (this.selectedStar > 0) {
+            return;
+        }
+        const stars = this.starsElem.querySelectorAll('.s-rating-stars-btn-star');
+        if (stars?.length && this.value >= 1 && this.value <= stars.length) {
+            this.triggerRatingProgrammatically(this.value - 1);
         }
     }
     get host() { return this; }
@@ -141,7 +202,9 @@ const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars
         "value": [2],
         "reviews": [2],
         "withLabel": [4, "with-label"],
+        "labelBeforeStars": [4, "label-before-stars"],
         "editable": [4],
+        "tag": [4],
         "translationsLoaded": [32],
         "labels": [32],
         "reviewLabel": [32],

package/dist/components/salla-review-factors-tags.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaReviewFactorsTags extends Components.SallaReviewFactorsTags, HTMLElement {}
+export const SallaReviewFactorsTags: {
+    prototype: SallaReviewFactorsTags;
+    new (): SallaReviewFactorsTags;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-review-factors-tags.js

@@ -0,0 +1,149 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { R as Rate } from './star2.js';
+
+const CACHE_TTL = 5 * 60 * 1000;
+const orderCache = new Map();
+const inFlightRequests = new Map();
+function normalizeList(value) {
+    if (!value) {
+        return [];
+    }
+    return Array.isArray(value) ? value : Object.values(value);
+}
+function getProductRatings(rating) {
+    if (!rating) {
+        return [];
+    }
+    return [
+        ...normalizeList(rating.product),
+        ...normalizeList(rating.products),
+    ];
+}
+function extractFactors(source) {
+    if (!source) {
+        return [];
+    }
+    for (const key of ['factor_reviews', 'review_factors', 'factors']) {
+        const value = source[key];
+        if (Array.isArray(value) && value.length) {
+            return value;
+        }
+    }
+    return [];
+}
+function findProductRating(productRatings, ratingId, productId, itemId) {
+    return productRatings.find((productRating) => {
+        if (ratingId && Number(productRating.id ?? productRating.feedback_id) === Number(ratingId)) {
+            return true;
+        }
+        if (itemId && Number(productRating.order_item_id) === Number(itemId)) {
+            return true;
+        }
+        if (productId && Number(productRating.product_id ?? productRating.product?.id) === Number(productId)) {
+            return true;
+        }
+        return false;
+    });
+}
+function resolveReviewFactors(order, ratingId, productId, itemId) {
+    const productRatings = getProductRatings(order?.rating);
+    const productRating = findProductRating(productRatings, ratingId, productId, itemId);
+    return extractFactors(productRating);
+}
+async function fetchOrder(orderId) {
+    if (!orderId) {
+        return null;
+    }
+    const cached = orderCache.get(orderId);
+    if (cached && Date.now() - cached.timestamp <= CACHE_TTL) {
+        return cached.data;
+    }
+    const pending = inFlightRequests.get(orderId);
+    if (pending) {
+        return pending;
+    }
+    const request = (async () => {
+        try {
+            const response = await salla.api.request(`orders/${orderId}`, '', 'get');
+            const data = response?.data ?? response;
+            orderCache.set(orderId, { data, timestamp: Date.now() });
+            return data;
+        }
+        catch (error) {
+            orderCache.delete(orderId);
+            throw error;
+        }
+        finally {
+            inFlightRequests.delete(orderId);
+        }
+    })();
+    inFlightRequests.set(orderId, request);
+    return request;
+}
+
+const sallaReviewFactorsTagsCss = ":host{display:inline-flex}.s-review-factors-tags-factors{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:flex-start;margin-bottom:0.6rem}.s-review-factors-tags-factor-tag{display:inline-flex;align-items:center;gap:0.25rem;border-radius:999px;border:1px solid #e8e8e8;background:rgba(255, 255, 255, 0.3);color:#374151;font-size:0.85rem;line-height:1;padding:0.4rem 0.65rem}.s-review-factors-tags-factor-rating{font-weight:600;color:#0f6a7c}.s-review-factors-tags-factor-star{display:inline-flex;width:0.8rem;height:0.8rem;fill:#0f6a7c}.s-review-factors-tags-factor-star svg{width:100%;height:100%}";
+
+const SallaReviewFactorsTags$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviewFactorsTags extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.factors = [];
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        await this.loadFactors();
+    }
+    async loadFactors() {
+        if (!this.orderId) {
+            this.factors = [];
+            return;
+        }
+        try {
+            const order = await fetchOrder(this.orderId);
+            this.factors = resolveReviewFactors(order, this.ratingId, this.productId, this.itemId);
+        }
+        catch (error) {
+            console.error('[salla-review-factors-tags] failed to load order rating factors', error);
+            this.factors = [];
+        }
+    }
+    renderFactorTags() {
+        const factors = this.factors || [];
+        if (!factors.length) {
+            return null;
+        }
+        return (h("div", { class: "s-review-factors-tags-factors" }, factors.map(factor => (h("div", { class: "s-review-factors-tags-factor-tag" }, h("span", { class: "s-review-factors-tags-factor-name" }, factor.name), h("span", { class: "s-review-factors-tags-factor-star", innerHTML: Rate }), h("span", { class: "s-review-factors-tags-factor-rating" }, factor.rating || ''))))));
+    }
+    render() {
+        return (h(Host, { key: '2645f00c58f3ecbd3b486756dd9977edc9ae66fd', class: "s-review-factors-tags-wrapper" }, this.renderFactorTags()));
+    }
+    static get style() { return sallaReviewFactorsTagsCss; }
+}, [0, "salla-review-factors-tags", {
+        "orderId": [2, "order-id"],
+        "ratingId": [2, "rating-id"],
+        "productId": [2, "product-id"],
+        "itemId": [2, "item-id"],
+        "factors": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-review-factors-tags"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-review-factors-tags":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaReviewFactorsTags$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaReviewFactorsTags = SallaReviewFactorsTags$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaReviewFactorsTags, defineCustomElement };

package/dist/components/salla-reviews-page.js

@@ -685,7 +685,7 @@ const SallaReviewsPage$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviewsPa
         return options.map(option => (h("option", { key: option.value, value: option.value, selected: option.value === this.sort }, option.label)));
     }
     render() {
-        return (h("host", { key: 'b82b491ae189f825367881b7b4f03ad64e471aae' }, h("div", { key: 'd124f10806cfabd1c1f85044786541011edff3ff', class: "s-reviews-page-header-wrapper" }, h("h2", { key: '30c58bb14bea27da968e874a0c1454a35e8db207', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: '8850771469ae20d1b07efcb45be58738de377e6d', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: '5a0060c5bdbfe4d37003b04d4c6368460be8cd38', class: "s-reviews-page-filter-wrapper" }, h("label", { key: '637d1aeec005ae662c6019c423ef3f1c3a6ff264', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '5b68b9441d4647f12583c71da61958c30c0dcda6', onChange: (e) => this.handleSorting(e), disabled: !this.reviews.length, class: "s-reviews-page-filter" }, this.renderSortingOptions()))), this.reviews.length ? h("main", { class: "s-reviews-page-grid", ref: el => {
+        return (h("host", { key: '3bb188bd0ddcff6333a47ad3821ad9f75706ac6a' }, h("div", { key: 'ae139cb0f8e4921e95c695ececc6633e79486ae0', class: "s-reviews-page-header-wrapper" }, h("h2", { key: '422bc1b53c10d0c0e87b701580e049fde71f2871', class: "s-reviews-page-title" }, this.langTitlesReviews, h("span", { key: 'd43661c7d358ba1bc99762fdd92b0c9e68a86427', class: "s-reviews-page-count" }, "(", this.langRatingReviews, ")")), h("div", { key: '3255662d8c1895bf640ae02e480a1c597e37ff87', class: "s-reviews-page-filter-wrapper" }, h("label", { key: 'c2d02265c6adde573a9e282380e670ed2926e68a', class: "s-reviews-page-filter-label", htmlFor: "testimonials-filter" }, this.langSorting), h("select", { key: '67de9329c56bd70740e66c3c119a6396ce1c6006', onChange: (e) => this.handleSorting(e), disabled: !this.reviews.length, class: "s-reviews-page-filter" }, this.renderSortingOptions()))), this.reviews.length ? h("main", { class: "s-reviews-page-grid", ref: el => {
                 this.wrapper = el;
             } }, this.reviews.map(review => (h("salla-review-card", { key: review.id, review: review }))))
             : h("div", { class: "s-products-list-placeholder" }, h("span", { innerHTML: ShoppingBag }), h("p", null, this.placeholderText)), this.pagination?.links?.next && this.reviews.length ? (h("div", { class: "s-reviews-page-load-more-container" }, h("salla-button", { class: "s-reviews-page-load-more-btn", loading: this.isLoading, onClick: () => this.infiniteScroll?.loadNextPage(), onKeyUp: () => this.infiniteScroll?.loadNextPage() }, this.langLoadMore))) : null));

package/dist/components/salla-reviews-summary2.js

@@ -6,7 +6,7 @@ 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 sallaReviewsSummaryCss = ":host{display:block}.s-reviews-summary-overall-section{display:flex;flex-direction:column;align-items:flex-start;gap:0.35rem;padding:0 0.5rem}.s-reviews-summary-overall-label{color:#111827;font-size:1.15rem;font-weight:600;line-height:1.3;margin-bottom:0.75rem}.s-reviews-summary-overall-row{display:inline-flex;align-items:flex-start;gap:0.7rem}.s-reviews-summary-factors{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:flex-start;margin-bottom:0.6rem}.s-reviews-summary-factor-tag{display:inline-flex;align-items:center;gap:0.25rem;border-radius:999px;border:1px solid #e8e8e8;background:rgba(255, 255, 255, 0.3);color:#374151;font-size:0.85rem;line-height:1;padding:0.4rem 0.65rem}.s-reviews-summary-factor-rating{font-weight:600;color:#0f6a7c}.s-reviews-summary-factor-star{display:inline-flex;width:0.8rem;height:0.8rem;fill:#0f6a7c}.s-reviews-summary-factor-star svg{width:100%;height:100%}";
 
 const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsSummary extends HTMLElement {
     constructor() {
@@ -40,10 +40,12 @@ const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsS
         return Salla.lang.onLoaded(() => {
             Salla.lang.addBulk({
                 "blocks.comments.based_on": { ar: "بناءً على", en: "Based on" },
-                "blocks.comments.recommended": { ar: "أوصوا بالمنتج", en: "Recommended" }
+                "blocks.comments.recommended": { ar: "أوصوا بالمنتج", en: "Recommended" },
+                "blocks.comments.overall_rating": { ar: "التقييم العام", en: "Overall rating" }
             });
             this.basedOnLabel = salla.lang.get('blocks.comments.based_on');
             this.recommendedLabel = salla.lang.get('blocks.comments.recommended');
+            this.overallRatingLabel = salla.lang.get('blocks.comments.overall_rating');
         });
     }
     async loadSummary() {
@@ -67,6 +69,13 @@ const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsS
             console.error('Error loading reviews summary:', error);
         }
     }
+    renderFactorTags() {
+        const factors = this.data?.factors || [];
+        if (!factors.length) {
+            return null;
+        }
+        return (h("div", { class: "s-reviews-summary-factors" }, factors.map(factor => (h("div", { class: "s-reviews-summary-factor-tag" }, h("span", { class: "s-reviews-summary-factor-name" }, factor.name), h("span", { class: "s-reviews-summary-factor-star", innerHTML: Rate }), h("span", { class: "s-reviews-summary-factor-rating" }, factor.rating || ''))))));
+    }
     renderRecommendation() {
         if (!this.showRecommendation || !this.data?.recommendation) {
             return null;
@@ -94,7 +103,7 @@ const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsS
             const percentage = ratings[rating];
             return (h("div", { key: rating, 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: '16px' }), h("span", { class: "s-reviews-summary-percentage" }, percentage, "%")));
         });
-        return (h(Host, { class: "s-reviews-summary-wrapper" }, h("div", { class: "s-reviews-summary-header" }, h("div", { class: "s-reviews-summary-header-section" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { size: 'large', 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))))), this.renderRecommendation()), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
+        return (h(Host, { class: "s-reviews-summary-wrapper" }, h("div", { class: "s-reviews-summary-header" }, h("div", { class: "s-reviews-summary-overall-section items-start" }, h("p", { class: "s-reviews-summary-overall-label" }, this.overallRatingLabel), h("div", { class: "s-reviews-summary-overall-row" }, h("h3", { class: "s-reviews-summary-average" }, this.data.rating), h("div", null, h("salla-rating-stars", { size: 'large', 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)))))), this.renderFactorTags(), this.renderRecommendation()), h("div", { class: "s-reviews-summary-rows" }, reviewElements)));
     }
     static get style() { return sallaReviewsSummaryCss; }
 }, [0, "salla-reviews-summary", {
@@ -103,6 +112,7 @@ const SallaReviewsSummary = /*@__PURE__*/ proxyCustomElement(class SallaReviewsS
         "canRender": [32],
         "basedOnLabel": [32],
         "recommendedLabel": [32],
+        "overallRatingLabel": [32],
         "showRatingSummary": [32],
         "recommendationOnly": [32],
         "showRecommendation": [32]

package/dist/components/salla-reviews.js

@@ -98,7 +98,7 @@ const SallaReviews$1 = /*@__PURE__*/ proxyCustomElement(class SallaReviews exten
         });
     }
     render() {
-        return (h("div", { key: '24e50ca2634208ad3ffcb9ca503aa7e18331b3a1', class: "s-reviews-container" }, h("div", { key: 'a1632306fc1a92051d030707aab075c825537e01', class: "s-reviews-header-wrapper" }, h("h1", { key: 'e2a4df75011da111e89c1b732e7741ddf452b9d5', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: '89009e55e3a5121c241295efd510405b623f45c3', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: '8b6b8df42043c8ecdb05dbbc30ecacde297f0dda', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
+        return (h("div", { key: '242c98e813b49a8fae5b1f58a1bc7e61425834bd', class: "s-reviews-container" }, h("div", { key: 'a896d0fda0e9c5a784e813590ded4cdf9ae0e6ae', class: "s-reviews-header-wrapper" }, h("h1", { key: 'ff085d49e3363d305389ae36e14ebb01151ebe46', class: "s-reviews-header" }, this.testimonialText), !!this.displayAllLink ? (h("a", { href: this.displayAllURL, class: "s-reviews-display-all" }, this.displayAllLinkText, h("span", { class: "s-reviews-display-all-icon", innerHTML: IconArrowLeft }))) : null), h("salla-slider", { key: 'a6baa7db6f0a1233a46897caaea76469b945f681', centered: true, "slides-per-view": 1, type: "testimonials", class: "s-reviews-testimonials-slider", "controls-outer": true, "auto-play": true, id: `testimonials-${this.source}-slider` }, h("div", { key: 'edb56b99674d534fc4b18178816cbced4ed22882', slot: "items" }, this.reviews.map((item, index) => (h("div", { key: index, class: "s-reviews-swiper-slide" }, h("div", { class: "s-reviews-testimonial" }, h("div", { class: "s-reviews-testimonial__inner" }, h("div", { class: "s-reviews-testimonial__avatar" }, h("img", { src: 'images/s-empty.png', "data-src": item.avatar, alt: item.name ? item.name : 'testimonial-' + index, class: "lazy" })), h("div", { class: "s-reviews-testimonial__text" }, h("p", { innerHTML: item.content }), h("div", { class: "s-reviews-testimonial__name_wrapper" }, h("div", { class: "s-reviews-testimonial__info" }, item.name && h("h2", null, `${item.name}`)), h("div", { class: "s-reviews-testimonial__rating" }, h("salla-rating-stars", { size: "small", value: item.stars })))), h("span", { class: "s-reviews-testimonial__icon", innerHTML: IconQuoteOpen }))))))))));
     }
     static get style() { return sallaReviewsCss; }
 }, [0, "salla-reviews", {

package/dist/components/salla-search.js

@@ -132,10 +132,10 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
         this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
     }
     render() {
-        const searchContent = (h("div", { key: 'ca8dec5eb90cd0893a1a3364df34ba0ee4d60891', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '212f8180ecca220a8b89231311dec6cdf3ef0b06', class: "s-search-input-wrapper" }, h("span", { key: '51fb0f9a2e342afd35eb82b57f55471aa9e1519f', class: "s-search-icon-wrap" }, h("span", { key: 'e75117068c51c6d200e8e20fa0f00ca02ed0c61d', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '442b1704b75a33e8c9e02da8200151a1d8e8db72', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
+        const searchContent = (h("div", { key: '4b97f190e4fcceb6d3f0bafecffc46aca578a657', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => (this.container = container) }, h("div", { key: '4ce6eff390279cdca5dccf26fc2d27a53511b8d3', class: "s-search-input-wrapper" }, h("span", { key: 'bee65f6f7735601d44aa6fb58482d4632f70ed68', class: "s-search-icon-wrap" }, h("span", { key: '4d95d81c5ac952aabf40e70b1f06c17ec9d0df50', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: 'bf605abb622e46632be9e2cc47b8eaec5823b3cf', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => (this.searchInput = input), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
-            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: 'f3b40ce4ec24678f6d8421f3da8ac9e1bd631c3a', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
+            } }), this.showAction ? (h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search }))) : null), h("div", { key: '46b979e82da5d5b03cdb348bbb3f0f5828087949', class: "s-search-results" }, this.results?.data.map(product => (h("a", { href: product.url + '?from=search-bar', class: {
                 's-search-product': true,
                 's-search-product-not-available': !product.is_available,
             }, innerHTML: this.productSlot
@@ -144,9 +144,9 @@ const SallaSearch$1 = /*@__PURE__*/ proxyCustomElement(class SallaSearch extends
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price
                 ? salla.money(product.regular_price)
                 : '')
-                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: 'fdbb21061c599a59c6d828eec80e8d591a708cca', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
-        const modalContent = (h("salla-modal", { key: 'ca90aea3fb92d1ba7d8270c26e2ecd82d5018784', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
-        const placeholderContent = (h("div", { key: '73333ce51cabadc4963a9fe9d1372bb7d63925c8', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: '77a66e9bba504557160c8c50d91f1216cc68f253', class: "s-search-input-wrapper" }, h("span", { key: '18fb5ce6e3e72874e76dd1ef2c6db8718a68f778', class: "s-search-icon-wrap" }, h("span", { key: '63b9e9af1c51647df734cc4d5cf7a825b922ce38', class: "s-search-icon", innerHTML: Search })), h("button", { key: 'b70169ed2d80ec2ad6b09952ad104824610212df', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
+                .replace(/\{image\}/g, product.image.url) }))), h("p", { key: '484dbcb11952df2a5d100dfc176c98359b059070', ref: el => (this.noResults = el), class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options')))));
+        const modalContent = (h("salla-modal", { key: 'b35ef402291810a005673d3d55227cc7919c593a', position: "top", class: "s-search-modal", ref: modal => (this.modal = modal) }, searchContent));
+        const placeholderContent = (h("div", { key: 'cff9e90ce4641545cd97d2946f52f49e4fbada91', class: "s-search-placeholder-wrapper s-search-inline" }, h("div", { key: 'd48ebc0c07ef4dc154cca5d99cfa652bf06cb84c', class: "s-search-input-wrapper" }, h("span", { key: 'b0c4055476bc996d3be3df9af49dc7fead72dabc', class: "s-search-icon-wrap" }, h("span", { key: '55c84b48d01ed6da83e802904ca1e0df7afc6060', class: "s-search-icon", innerHTML: Search })), h("button", { key: '86356037f4bf117bef07d4afd1569342e2e729c7', type: "button", class: "s-search-input s-search-placeholder-trigger", onClick: () => this.open(), style: {
                 height: this.height + 'px',
                 borderRadius: this.oval ? this.height / 2 + 'px' : '',
             } }, salla.lang.get('blocks.header.search_placeholder'))), modalContent));