@salla.sa/twilight-components 2.14.393 → 2.14.394

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

@@ -1,4 +1,165 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as i,h as a,Host as e}from"@stencil/core/internal/client";import{R as r}from"./star2.js";import{H as n}from"./Helper.js";const h=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.translationsLoaded=!1,this.labels=[],this.reviewLabel="",this.selectedStar=0,this.name="rating",this.size="medium",this.reviews=0,this.editable=!1}async componentWillLoad(){await new Promise((s=>{salla.lang.onLoaded((()=>{this.labels=[salla.lang.get("pages.rating.poor"),salla.lang.get("pages.rating.average"),salla.lang.get("pages.rating.good"),salla.lang.get("pages.rating.very_good"),salla.lang.get("pages.rating.excellent")],this.value&&this.withLabel&&(this.reviewLabel=this.labels[this.value-1]),this.reviewsElement&&(this.reviewsElement.innerText=`(${salla.helpers.number(salla.lang.choice("pages.rating.reviews",this.reviews))})`),this.translationsLoaded=!0,s()}))}))}initiateRating(){this.host.addEventListener("click",this.handleRating.bind(this))}handleRating(){if(!this.starsElem)return;let s=this.starsElem.querySelectorAll(".s-rating-stars-hovered"),t=s[s.length-1];if(!t)return;let i=parseInt(t.getAttribute("data-star"));this.starsElem.querySelector(".rating_hidden_input").value=i.toString(),this.starsElem.querySelectorAll(".s-rating-stars-btn-star").forEach(((s,t)=>n.toggleElementClassIf(s,"s-rating-stars-selected","s-rating-stars-unselected",(()=>t<i)))),this.starsElem.querySelectorAll("[aria-pressed]").forEach((s=>s.removeAttribute("aria-pressed"))),t.setAttribute("aria-pressed","true"),this.selectedStar=i,this.withLabel&&(this.reviewLabel=this.labels[i-1])}triggerRatingProgrammatically(s){if(!this.starsElem)return;const t=this.starsElem.querySelectorAll(".s-rating-stars-btn-star");t&&s>=0&&s<=t.length&&(t.forEach(((t,i)=>{t.classList.toggle("s-rating-stars-hovered",i<=s)})),this.handleRating())}highlightSelectedStars(){let s="s-rating-stars-hovered",t=this.starsElem?.querySelectorAll(".s-rating-stars-btn-star");t?.forEach(((i,a)=>{i.addEventListener("mouseover",(()=>{for(let i=0;i<=a;i++)t[i].classList.add(s);this.withLabel&&(this.reviewLabel=this.labels[a])})),i.addEventListener("mouseout",(()=>{i.classList.remove(s),this.withLabel&&(this.reviewLabel=this.selectedStar?this.labels[this.selectedStar-1]:"")}))})),this.starsElem?.addEventListener("mouseout",(()=>t.forEach((t=>t.classList.remove(s)))))}createStars(s){let t=[];for(let i=0;i<5;i++)t.push(a("span",{class:{"s-rating-stars-btn-star":!0,["s-rating-stars-"+this.size]:!0,"s-rating-stars-selected":i<s},innerHTML:r}));return this.reviews>0&&t.push(a("span",{class:"s-rating-stars-reviews",ref:s=>this.reviewsElement=s},"(",salla.helpers.number(salla.lang.choice("pages.rating.reviews",this.reviews)),")")),t}render(){return this.translationsLoaded?this.host.closest(".swiper-slide")?.classList.contains("swiper-slide-duplicate")?"":a(e,null,a("div",{class:"s-rating-stars-wrapper"},!this.value&&0!=this.value||this.editable?a("div",{class:"s-rating-stars-element",ref:s=>this.starsElem=s},a("input",{type:"hidden",class:"rating_hidden_input",name:this.name,value:""}),[1,2,3,4,5].map((s=>a("button",{class:"s-rating-stars-btn-star s-rating-stars-"+this.size,"data-star":s},a("span",{innerHTML:r}))))):this.createStars(this.value),this.withLabel&&this.reviewLabel?a("span",{class:"s-rating-stars-label"},this.reviewLabel):"")):a(e,null)}componentDidLoad(){if(this.initiateRating(),this.highlightSelectedStars(),this.value&&this.editable){const s=this.starsElem?.querySelectorAll(".s-rating-stars-btn-star");s&&this.value>=0&&this.value<=s.length&&this.triggerRatingProgrammatically(this.value-1)}}get host(){return this}static get style(){return""}},[0,"salla-rating-stars",{name:[1],size:[1],value:[2],reviews:[2],withLabel:[4,"with-label"],editable:[4],translationsLoaded:[32],labels:[32],reviewLabel:[32],selectedStar:[32]}]);function l(){"undefined"!=typeof customElements&&["salla-rating-stars"].forEach((t=>{"salla-rating-stars"===t&&(customElements.get(s(t))||customElements.define(s(t),h))}))}l();export{h as S,l as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { R as Rate } from './star2.js';
+import { H as Helper } from './Helper.js';
+
+const sallaRatingStarsCss = "";
+
+const SallaRatingStars = /*@__PURE__*/ proxyCustomElement(class SallaRatingStars extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.translationsLoaded = false;
+        this.labels = [];
+        this.reviewLabel = '';
+        this.selectedStar = 0;
+        /**
+       * Sets input name.
+       */
+        this.name = 'rating';
+        /**
+        * Sets the height and width of the component. Defaults to medium.
+        */
+        this.size = 'medium';
+        /**
+       * Number of reviews to display.
+       */
+        this.reviews = 0;
+        /**
+        * Allows the rating to be editable.
+        */
+        this.editable = false;
+    }
+    async componentWillLoad() {
+        await new Promise(resolve => {
+            salla.lang.onLoaded(() => {
+                this.labels = [
+                    salla.lang.get('pages.rating.poor'),
+                    salla.lang.get('pages.rating.average'),
+                    salla.lang.get('pages.rating.good'),
+                    salla.lang.get('pages.rating.very_good'),
+                    salla.lang.get('pages.rating.excellent')
+                ];
+                if (this.value && this.withLabel) {
+                    this.reviewLabel = this.labels[this.value - 1];
+                }
+                if (this.reviewsElement) {
+                    this.reviewsElement.innerText = `(${salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.reviews))})`;
+                }
+                this.translationsLoaded = true;
+                resolve();
+            });
+        });
+    }
+    initiateRating() {
+        this.host.addEventListener('click', this.handleRating.bind(this));
+    }
+    handleRating() {
+        if (!this.starsElem)
+            return;
+        let activeStars = this.starsElem.querySelectorAll('.s-rating-stars-hovered');
+        let selected = activeStars[activeStars.length - 1];
+        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')
+            .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]);
+    }
+    triggerRatingProgrammatically(index) {
+        if (!this.starsElem)
+            return;
+        const stars = this.starsElem.querySelectorAll('.s-rating-stars-btn-star');
+        if (stars && index >= 0 && index <= stars.length) {
+            // Simulate the hovering effect
+            stars.forEach((s, i) => {
+                s.classList.toggle('s-rating-stars-hovered', i <= index);
+            });
+            // Trigger the same logic as clicking
+            this.handleRating();
+        }
+    }
+    highlightSelectedStars() {
+        let hoveredClass = 's-rating-stars-hovered', stars = this.starsElem?.querySelectorAll('.s-rating-stars-btn-star');
+        stars?.forEach((star, index) => {
+            star.addEventListener('mouseover', () => {
+                for (let i = 0; i <= index; i++) {
+                    stars[i].classList.add(hoveredClass);
+                }
+                this.withLabel && (this.reviewLabel = this.labels[index]);
+            });
+            star.addEventListener('mouseout', () => {
+                star.classList.remove(hoveredClass);
+                this.withLabel && (this.reviewLabel = this.selectedStar ? this.labels[this.selectedStar - 1] : '');
+            });
+        });
+        this.starsElem?.addEventListener('mouseout', () => stars.forEach(star => star.classList.remove(hoveredClass)));
+    }
+    createStars(n) {
+        let stars = [];
+        for (let i = 0; i < 5; i++) {
+            stars.push(h("span", { class: {
+                    's-rating-stars-btn-star': true,
+                    ['s-rating-stars-' + this.size]: true,
+                    's-rating-stars-selected': i < n
+                }, innerHTML: Rate }));
+        }
+        if (this.reviews > 0) {
+            stars.push(h("span", { class: "s-rating-stars-reviews", ref: el => this.reviewsElement = el }, "(", salla.helpers.number(salla.lang.choice('pages.rating.reviews', this.reviews)), ")"));
+        }
+        return stars;
+    }
+    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));
+    }
+    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);
+            }
+        }
+    }
+    get host() { return this; }
+    static get style() { return sallaRatingStarsCss; }
+}, [0, "salla-rating-stars", {
+        "name": [1],
+        "size": [1],
+        "value": [2],
+        "reviews": [2],
+        "withLabel": [4, "with-label"],
+        "editable": [4],
+        "translationsLoaded": [32],
+        "labels": [32],
+        "reviewLabel": [32],
+        "selectedStar": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-rating-stars"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaRatingStars);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaRatingStars as S, defineCustomElement as d };

package/dist/components/salla-review-card.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as a,d as r}from"./salla-review-card2.js";const s=a,o=r;export{s as SallaReviewCard,o as defineCustomElement}
+import { S as SallaReviewCard$1, d as defineCustomElement$1 } from './salla-review-card2.js';
+
+const SallaReviewCard = SallaReviewCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaReviewCard, defineCustomElement };

package/dist/components/salla-review-card2.js

@@ -1,4 +1,201 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as i,h as e}from"@stencil/core/internal/client";import{I as r}from"./check.js";const a=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.currentSlide=0,this.showPurchaseCount=!1,this.startPoint={x:0,y:0},this.isSwiping=!1,this.isRTL="rtl",this.handlePointerDown=s=>{s.isPrimary&&(this.sliderElement?.setPointerCapture(s.pointerId),this.startSwipe(s.clientX,s.clientY),s.preventDefault())},this.handlePointerMove=s=>{this.isSwiping&&s.isPrimary&&s.preventDefault()},this.handlePointerUp=s=>{this.isSwiping&&s.isPrimary&&(this.sliderElement?.releasePointerCapture(s.pointerId),this.endSwipe(s.clientX,s.clientY))},this.handlePointerCancel=s=>{this.isSwiping&&s.isPrimary&&(this.sliderElement?.releasePointerCapture(s.pointerId),this.isSwiping=!1)},this.goToSlide=s=>{this.currentSlide=Math.max(0,Math.min(s,this.images.length-1))}}async componentDidLoad(){await salla.onReady(),this.showPurchaseCount=!!salla.config.get("store.settings.product.total_sold_enabled",!1),this.isRTL=salla.config.get("theme.is_rtl",!0),this.purchasedCount=salla.lang.getWithDefault("blocks.home.reviews.purchased_count",this.isRTL?` تم شراءه ${this.review.product?.sold_quantity} مرة`:`Purchased ${this.review.product.sold_quantity} times`,{count:this.review.product?.sold_quantity}),this.initializeSlider()}disconnectedCallback(){this.removeEventListeners()}get images(){const{review:s}=this;return s?.images?.length>1?s.images.map(((s,t)=>({url:s,alt:"",id:t}))):s?.product?.images||[]}get hasMultipleImages(){return this.images.length>1}get slideTransform(){return`translateX(${100*this.currentSlide*(this.isRTL?1:-1)}%)`}initializeSlider(){this.hasMultipleImages&&(this.sliderElement=this.el.querySelector(".s-review-card-slider-container"),this.sliderElement&&(this.sliderElement.style.touchAction="pan-y pinch-zoom",this.addEventListeners()))}addEventListeners(){this.sliderElement&&(this.sliderElement.addEventListener("pointerdown",this.handlePointerDown,{passive:!1}),this.sliderElement.addEventListener("pointermove",this.handlePointerMove,{passive:!1}),this.sliderElement.addEventListener("pointerup",this.handlePointerUp,{passive:!0}),this.sliderElement.addEventListener("pointercancel",this.handlePointerCancel,{passive:!0}))}removeEventListeners(){this.sliderElement&&(this.sliderElement.removeEventListener("pointerdown",this.handlePointerDown),this.sliderElement.removeEventListener("pointermove",this.handlePointerMove),this.sliderElement.removeEventListener("pointerup",this.handlePointerUp),this.sliderElement.removeEventListener("pointercancel",this.handlePointerCancel))}startSwipe(s,t){this.startPoint={x:s,y:t},this.isSwiping=!0}componentDidRender(){this.removeEventListeners(),this.addEventListeners()}endSwipe(s,t){this.isSwiping=!1,this.processSwipe(s-this.startPoint.x,t-this.startPoint.y)}processSwipe(s,t){if(Math.abs(s)<10||Math.abs(t)>Math.abs(s))return;const i=s<0;(this.isRTL?!i:i)?this.goToNextSlide():this.goToPrevSlide()}goToNextSlide(){this.currentSlide<this.images.length-1&&this.currentSlide++}goToPrevSlide(){this.currentSlide>0&&this.currentSlide--}renderStars(){return Array(5).fill(null).map(((s,t)=>e("span",{key:t,innerHTML:this.review.stars>=t+1?' <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n      <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="currentcolor" />\n</svg>':' <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n      <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="#DDDDDD" />\n</svg>'})))}renderDots(){return this.images.map((({url:s},t)=>e("button",{key:s||t,type:"button",class:"s-review-card-slider-dot "+(this.currentSlide===t?"active":""),onClick:()=>this.goToSlide(t),"aria-label":`Go to slide ${t+1}`,onPointerDown:()=>this.goToSlide(t)})))}renderSlider(){return this.hasMultipleImages?e("div",{class:"s-review-card-slider-container"},e("div",{class:"s-review-card-slides",style:{transform:this.slideTransform}},this.images.map((s=>e("div",{key:s?.id,class:"s-review-card-slider-slide"},e("img",{src:s.url,alt:s.alt||"Product image",width:275,height:275,loading:"lazy",draggable:!1}))))),e("div",{class:"s-review-card-slider-dots"},this.renderDots())):null}renderSingleImage(){const s=this.review?.product?.image;return!s||this.hasMultipleImages?null:e("img",{src:s.url,alt:s.alt||"Product image",class:"s-review-card-image",width:275,height:275,loading:"lazy",decoding:"async",draggable:!1})}renderHeader(){return e("div",{class:"s-review-card-header"},e("div",{class:"s-review-card-reviewer-name"},e("p",null,this.review?.name),this.review?.has_order&&e("span",{class:"s-review-card-verified-icon",innerHTML:r})),e("div",{class:"s-review-card-stars"},this.renderStars()))}renderProductInfo(){const s=this.review?.product;return s?e("a",{href:this.review?.product?.url,class:"s-review-card-product-container"},e("img",{alt:s.image?.alt||"Product",src:s.image?.url,class:"s-review-card-product-image",width:60,height:60,loading:"lazy",decoding:"async",draggable:!1}),e("div",{class:"s-review-card-product-details"},e("p",{class:"s-review-card-product-details-name"},s.name),this.showPurchaseCount?e("p",{class:"s-review-card-product-details-purchase-count"},e("span",{innerHTML:'  <svg width="12" height="17" view-box="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n      <path d="M6 16.2501C9.10658 16.2501 11.625 13.7317 11.625 10.6251C11.625 9.976 11.4523 9.35252 11.25 8.77232C9.99998 10.0075 9.05002 10.6251 8.4 10.6251C11.3966 5.37512 9.75 3.12512 5.25 0.125122C5.625 3.87475 3.15302 5.58043 2.14634 6.52757C1.0559 7.5535 0.375 9.00977 0.375 10.6251C0.375 13.7317 2.89339 16.2501 6 16.2501ZM6.53205 2.92636C8.96333 4.98908 8.97495 6.59185 7.09725 9.88157C6.5265 10.8815 7.2486 12.1251 8.4 12.1251C8.9163 12.1251 9.43807 11.9745 9.98917 11.6789C9.52342 13.4466 7.91393 14.7501 6 14.7501C3.72182 14.7501 1.875 12.9033 1.875 10.6251C1.875 9.47072 2.34959 8.39582 3.17419 7.62002C3.2687 7.53115 3.74812 7.1062 3.76858 7.08782C4.08646 6.8017 4.34835 6.54985 4.60718 6.2727C5.52998 5.28461 6.19283 4.18735 6.53205 2.92636Z" fill="currentcolor" />\n    </svg>'}),this.purchasedCount):null)):null}render(){return e("div",{key:"2c239df97aea1d28e160ede3e06bd283874bbaea",class:"s-review-card-container"},this.renderSlider(),this.renderSingleImage(),h(),e("div",{key:"227c1fad17d6d2bf26316cabf69b854bb23cca52",class:"s-review-card-content"},this.renderHeader(),e("p",{key:"74b06a8c24767d8e8cd7101915055d3861c5d0fd",class:"s-review-card-review-content",innerHTML:this.review?.content}),h(),this.renderProductInfo()))}get el(){return this}static get style(){return":host{display:block}"}},[0,"salla-review-card",{review:[16],currentSlide:[32],purchasedCount:[32],showPurchaseCount:[32]}]),h=()=>e("div",{class:"s-review-card-divider "});function n(){"undefined"!=typeof customElements&&["salla-review-card"].forEach((t=>{"salla-review-card"===t&&(customElements.get(s(t))||customElements.define(s(t),a))}))}n();export{a as S,n as d}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { I as IconVerified } from './check.js';
+
+var IconStar2 = ` <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="currentcolor" />
+</svg>`;
+
+var IconStar2Muted = ` <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="#DDDDDD" />
+</svg>`;
+
+var IconFire2 = `  <svg width="12" height="17" view-box="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M6 16.2501C9.10658 16.2501 11.625 13.7317 11.625 10.6251C11.625 9.976 11.4523 9.35252 11.25 8.77232C9.99998 10.0075 9.05002 10.6251 8.4 10.6251C11.3966 5.37512 9.75 3.12512 5.25 0.125122C5.625 3.87475 3.15302 5.58043 2.14634 6.52757C1.0559 7.5535 0.375 9.00977 0.375 10.6251C0.375 13.7317 2.89339 16.2501 6 16.2501ZM6.53205 2.92636C8.96333 4.98908 8.97495 6.59185 7.09725 9.88157C6.5265 10.8815 7.2486 12.1251 8.4 12.1251C8.9163 12.1251 9.43807 11.9745 9.98917 11.6789C9.52342 13.4466 7.91393 14.7501 6 14.7501C3.72182 14.7501 1.875 12.9033 1.875 10.6251C1.875 9.47072 2.34959 8.39582 3.17419 7.62002C3.2687 7.53115 3.74812 7.1062 3.76858 7.08782C4.08646 6.8017 4.34835 6.54985 4.60718 6.2727C5.52998 5.28461 6.19283 4.18735 6.53205 2.92636Z" fill="currentcolor" />
+    </svg>`;
+
+const sallaReviewCardCss = ":host{display:block}";
+
+const SallaReviewCard = /*@__PURE__*/ proxyCustomElement(class SallaReviewCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.currentSlide = 0;
+        this.showPurchaseCount = false;
+        this.startPoint = { x: 0, y: 0 };
+        this.isSwiping = false;
+        this.isRTL = "rtl";
+        this.handlePointerDown = (e) => {
+            // Only handle primary pointer (first touch/mouse)
+            if (!e.isPrimary)
+                return;
+            this.sliderElement?.setPointerCapture(e.pointerId);
+            this.startSwipe(e.clientX, e.clientY);
+            e.preventDefault();
+        };
+        this.handlePointerMove = (e) => {
+            if (!this.isSwiping || !e.isPrimary)
+                return;
+            e.preventDefault();
+        };
+        this.handlePointerUp = (e) => {
+            if (!this.isSwiping || !e.isPrimary)
+                return;
+            this.sliderElement?.releasePointerCapture(e.pointerId);
+            this.endSwipe(e.clientX, e.clientY);
+        };
+        this.handlePointerCancel = (e) => {
+            if (!this.isSwiping || !e.isPrimary)
+                return;
+            this.sliderElement?.releasePointerCapture(e.pointerId);
+            this.isSwiping = false;
+        };
+        this.goToSlide = (index) => {
+            this.currentSlide = Math.max(0, Math.min(index, this.images.length - 1));
+        };
+    }
+    async componentDidLoad() {
+        await salla.onReady();
+        this.showPurchaseCount = !!salla.config.get('store.settings.product.total_sold_enabled', false);
+        this.isRTL = salla.config.get('theme.is_rtl', true);
+        this.purchasedCount = salla.lang.getWithDefault('blocks.home.reviews.purchased_count', this.isRTL ? ` تم شراءه ${this.review.product?.sold_quantity} مرة`
+            : `Purchased ${this.review.product.sold_quantity} times`, { count: this.review.product?.sold_quantity });
+        this.initializeSlider();
+    }
+    disconnectedCallback() {
+        this.removeEventListeners();
+    }
+    get images() {
+        const { review } = this;
+        return review?.images?.length > 1
+            ? review.images.map((image, idx) => ({ url: image, alt: '', id: idx }))
+            : review?.product?.images || [];
+    }
+    get hasMultipleImages() {
+        return this.images.length > 1;
+    }
+    get slideTransform() {
+        const direction = this.isRTL ? 1 : -1;
+        return `translateX(${this.currentSlide * 100 * direction}%)`;
+    }
+    initializeSlider() {
+        if (!this.hasMultipleImages)
+            return;
+        this.sliderElement = this.el.querySelector(".s-review-card-slider-container");
+        if (!this.sliderElement)
+            return;
+        // Enable pointer events and set touch-action
+        this.sliderElement.style.touchAction = 'pan-y pinch-zoom';
+        this.addEventListeners();
+    }
+    addEventListeners() {
+        if (!this.sliderElement)
+            return;
+        this.sliderElement.addEventListener("pointerdown", this.handlePointerDown, { passive: false });
+        this.sliderElement.addEventListener("pointermove", this.handlePointerMove, { passive: false });
+        this.sliderElement.addEventListener("pointerup", this.handlePointerUp, { passive: true });
+        this.sliderElement.addEventListener("pointercancel", this.handlePointerCancel, { passive: true });
+    }
+    removeEventListeners() {
+        if (!this.sliderElement)
+            return;
+        this.sliderElement.removeEventListener("pointerdown", this.handlePointerDown);
+        this.sliderElement.removeEventListener("pointermove", this.handlePointerMove);
+        this.sliderElement.removeEventListener("pointerup", this.handlePointerUp);
+        this.sliderElement.removeEventListener("pointercancel", this.handlePointerCancel);
+    }
+    startSwipe(x, y) {
+        this.startPoint = { x, y };
+        this.isSwiping = true;
+    }
+    componentDidRender() {
+        this.removeEventListeners();
+        this.addEventListeners();
+    }
+    endSwipe(x, y) {
+        this.isSwiping = false;
+        const dx = x - this.startPoint.x;
+        const dy = y - this.startPoint.y;
+        this.processSwipe(dx, dy);
+    }
+    processSwipe(dx, dy) {
+        const MIN_SWIPE_DISTANCE = 10;
+        if (Math.abs(dx) < MIN_SWIPE_DISTANCE || Math.abs(dy) > Math.abs(dx))
+            return;
+        const isLeftSwipe = dx < 0;
+        const shouldGoNext = this.isRTL ? !isLeftSwipe : isLeftSwipe;
+        if (shouldGoNext) {
+            this.goToNextSlide();
+        }
+        else {
+            this.goToPrevSlide();
+        }
+    }
+    goToNextSlide() {
+        if (this.currentSlide < this.images.length - 1) {
+            this.currentSlide++;
+        }
+    }
+    goToPrevSlide() {
+        if (this.currentSlide > 0) {
+            this.currentSlide--;
+        }
+    }
+    renderStars() {
+        return Array(5)
+            .fill(null)
+            .map((_, index) => h("span", { key: index, innerHTML: this.review.stars >= index + 1 ? IconStar2 : IconStar2Muted }));
+    }
+    renderDots() {
+        return this.images.map(({ url }, index) => (h("button", { key: url || index, type: "button", class: `s-review-card-slider-dot ${this.currentSlide === index ? "active" : ""}`, onClick: () => this.goToSlide(index), "aria-label": `Go to slide ${index + 1}`, onPointerDown: () => this.goToSlide(index) })));
+    }
+    renderSlider() {
+        if (!this.hasMultipleImages)
+            return null;
+        return (h("div", { class: "s-review-card-slider-container" }, h("div", { class: "s-review-card-slides", style: { transform: this.slideTransform } }, this.images.map((image) => (h("div", { key: image?.id, class: "s-review-card-slider-slide" }, h("img", { src: image.url, alt: image.alt || "Product image", width: 275, height: 275, loading: "lazy", draggable: false }))))), h("div", { class: "s-review-card-slider-dots" }, this.renderDots())));
+    }
+    renderSingleImage() {
+        const image = this.review?.product?.image;
+        if (!image || this.hasMultipleImages)
+            return null;
+        return (h("img", { src: image.url, alt: image.alt || "Product image", class: "s-review-card-image", width: 275, height: 275, loading: "lazy", decoding: "async", draggable: false }));
+    }
+    renderHeader() {
+        return (h("div", { class: "s-review-card-header" }, h("div", { class: "s-review-card-reviewer-name" }, h("p", null, this.review?.name), this.review?.has_order && h("span", { class: "s-review-card-verified-icon", innerHTML: IconVerified })), h("div", { class: "s-review-card-stars" }, this.renderStars())));
+    }
+    renderProductInfo() {
+        const product = this.review?.product;
+        if (!product)
+            return null;
+        return (h("a", { href: this.review?.product?.url, class: "s-review-card-product-container" }, h("img", { alt: product.image?.alt || "Product", src: product.image?.url, class: "s-review-card-product-image", width: 60, height: 60, loading: "lazy", decoding: "async", draggable: false }), h("div", { class: "s-review-card-product-details" }, h("p", { class: "s-review-card-product-details-name" }, product.name), this.showPurchaseCount ? h("p", { class: "s-review-card-product-details-purchase-count" }, h("span", { innerHTML: IconFire2 }), this.purchasedCount) : null)));
+    }
+    render() {
+        return h("div", { key: '2c239df97aea1d28e160ede3e06bd283874bbaea', class: "s-review-card-container" }, this.renderSlider(), this.renderSingleImage(), renderDivider(), h("div", { key: '227c1fad17d6d2bf26316cabf69b854bb23cca52', class: "s-review-card-content" }, this.renderHeader(), h("p", { key: '74b06a8c24767d8e8cd7101915055d3861c5d0fd', class: "s-review-card-review-content", innerHTML: this.review?.content }), renderDivider(), this.renderProductInfo()));
+    }
+    get el() { return this; }
+    static get style() { return sallaReviewCardCss; }
+}, [0, "salla-review-card", {
+        "review": [16],
+        "currentSlide": [32],
+        "purchasedCount": [32],
+        "showPurchaseCount": [32]
+    }]);
+const renderDivider = (className) => (h("div", { class: `s-review-card-divider ${""}` }));
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-review-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-review-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaReviewCard);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaReviewCard as S, defineCustomElement as d };