@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-comments.js

@@ -1,4 +1,398 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as a,h as i}from"@stencil/core/internal/client";import{a as e}from"./anime.es.js";import{H as l}from"./Helper.js";import{d as o}from"./salla-button2.js";import{d as n}from"./salla-comment-form2.js";import{d as r}from"./salla-comment-item2.js";import{d as m}from"./salla-loading2.js";import{d as h}from"./salla-modal2.js";import{d as c}from"./salla-progress-bar2.js";import{d}from"./salla-rating-stars2.js";import{d as p}from"./salla-reviews-summary2.js";import{d as u}from"./salla-slider2.js";var g;!function(s){s.PAGE="page",s.PRODUCT="product",s.BLOG="blog"}(g||(g={}));const f=t(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.type=g.PAGE,this.showFormAvatar=!1,this.hideBought=!1,this.testimonials=!1,this.customerId=null,this.noComments=salla.lang.get("blocks.comments.no_comments"),this.comment_title=salla.lang.get("blocks.comments.title"),this.comment_name=salla.lang.get("blocks.comments.comment"),this.showRatingSummary=salla.config.get("store.settings.rating.show_rating_summary"),this.allowLikes=salla.config.get("store.settings.rating.allow_likes"),salla.onReady((()=>{this.allowLikes=salla.config.get("store.settings.rating.allow_likes"),this.showRatingSummary=salla.config.get("store.settings.rating.show_rating_summary")})),salla.lang.onLoaded((()=>{this.comment_title=salla.lang.get("blocks.comments.title"),this.comment_name=salla.lang.get("blocks.comments.comment"),this.noComments=salla.lang.get("pages.rating.no_ratings");const s=(s,t,a)=>new Promise((i=>{salla.helpers.setNested(salla.lang.messages[s],t,a),i(!0)}));(async()=>{await s("ar.trans","blocks.comments.most_helpful","الأكثر إفادة"),await s("en.trans","blocks.comments.most_helpful","Most helpful"),this.mostHelpfulLabel=salla.lang.get("blocks.comments.most_helpful"),this.comment_title=salla.lang.get("blocks.comments.title"),this.comment_name=salla.lang.get("blocks.comments.comment"),this.noComments=salla.lang.get("pages.rating.no_ratings")})()}))}pluralize(s,t){const a=s.split("|"),i=[{condition:0===t,index:0},{condition:1===t,index:1},{condition:2===t,index:2},{condition:t>2&&t<=10,index:3},{condition:t>=11,index:4}],{index:e}=i.find((({condition:s})=>s))||{index:a.length-1};return a[e].replace(":count",salla.helpers.number(""+t)).replace(/\{[0-9]+\}/g,"").replace(/\[\d+,\d+\]|\[11,\*\]/g,"")}wrapConsoleError(){Salla.infiniteScroll.errorWrapped||((()=>{const s=console.error.bind(console);console.error=(...t)=>{const a=t[0];return"string"==typeof a&&a.toLowerCase().replace(/\s/g,"").includes("infinitescroll")?console.log(...t):s(...t)}})(),Salla.infiniteScroll.errorWrapped=!0)}patchNextPageUrl(){if(this.nextPage)try{const s=new URL(this.nextPage,window.location.origin);this.sort&&!s.searchParams.get("sort")&&s.searchParams.set("sort",this.sort),this.customerId&&!s.searchParams.get("private_comments")&&s.searchParams.set("private_comments",this.customerId),this.nextPage=""+s}catch(s){const t=this.nextPage.includes("?");if(this.sort&&!/[?&]sort=/.test(this.nextPage)&&(this.nextPage=this.nextPage+(t?"&":"?")+"sort="+this.sort),this.customerId&&!/[?&]private_comments=/.test(this.nextPage)){const s=this.nextPage.includes("?")?"&":"?";this.nextPage=this.nextPage+s+"private_comments="+this.customerId}}}initiateInfiniteScroll(){this.wrapper?(this.wrapConsoleError(),this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:()=>this.nextPage,history:!1,nextPage:this.nextPage,scrollThreshold:!1},!0),this.infiniteScroll?.on("request",(()=>{this.loading()})),this.infiniteScroll?.on("load",(s=>{this.pagination=s.pagination,this.nextPage="object"==typeof s.pagination.links&&s.pagination.links.next?s.pagination.links.next:null,this.patchNextPageUrl();for(const t of this.handleResponse(s))this.wrapper.append(t);const t=this.host.querySelectorAll("salla-comment-item:not(.animated):not(.s-comments-item-admin)");this.animateItems(t),this.loading(!1)})),this.infiniteScroll?.on("error",(s=>{salla.console.error("Error loading more comments:",s)}))):console.error("Wrapper is undefined. Cannot initiate infinite scroll.")}loading(s=!0){const t=this.status?.querySelector(".s-button-text");t&&(l.toggleElementClassIf(t,"s-button-hide","s-button-show",(()=>s)),this.btnLoader.style.display=s?"inherit":"none")}animateItems(s){e({targets:s,opacity:[0,1],duration:1200,translateY:[20,0],delay:(s,t)=>100*t,easing:"easeOutExpo",complete:()=>{for(const t of s)t.classList.add("animated")}})}async reload(){if(this.showPlaceholder=!1,this.wrapper){this.wrapper.innerHTML="";const s=document.createElement("salla-loading");this.wrapper.append(s)}this.nextPage=null,this.loadInitialData()}getCommentHTML(s){const t=document.createElement("salla-comment-item");return t.comment=s,t.hideBought=this.hideBought,t}handleResponse(s){return s.data?.map((s=>this.getCommentHTML(s)))||[]}componentWillLoad(){return salla.onReady().then((()=>{this.showRatingSummary=salla.config.get("store.settings.rating.show_rating_summary")})).then((()=>this.loading())).then((()=>(this.hideTitle=this.hideTitle||this.testimonials,this.hideForm=this.hideForm||this.testimonials,this.loadInitialData())))}async loadInitialData(){try{let s={data:[],pagination:{}};const t=new URLSearchParams(window.location.search);if(t.has("sort")&&(this.sort=t.get("sort")),this.testimonials){const t={sort:this.sort,type:"store"};s=await salla.api.request("reviews",{params:t},"get")}else{const a=t.get("private_comments");this.customerId=a&&"user"===Salla.config.get("user.type")&&Salla.config.get("user.id")?Salla.config.get("user.id"):null,s=await salla.api.comment.getComments(this.type,this.itemId,1,5,this.sort,this.customerId)}if(!s.data||!s.data.length)return this.showPlaceholder=!1,void this.loading(!1);this.wrapper&&(this.wrapper.innerHTML=""),this.comments=s.data,this.pagination=s.pagination,this.total=s.pagination.total,this.nextPage="object"==typeof s.pagination.links&&s.pagination.links.next?s.pagination.links.next:null,this.patchNextPageUrl(),setTimeout((()=>{for(const t of this.handleResponse(s))this.wrapper.append(t);this.initiateInfiniteScroll();const t=this.wrapper.querySelectorAll("salla-comment-item:not(.animated)");this.animateItems(t)}),100)}catch(s){console.error("Error loading initial data:",s),this.showPlaceholder=!0,this.loading(!1)}}async loadMore(){this.infiniteScroll?.loadNextPage()}render(){return this.showPlaceholder?i("div",null,this.total&&!this.hideTitle?i("h2",{class:"s-comments-title"},this.blockTitle?this.blockTitle:this.comment_title):"",this.hideForm||this.testimonials?"":i("salla-comment-form",{showAvatar:this.showFormAvatar,type:this.type,"item-id":this.itemId}),i("div",{class:"s-comments-placeholder"},i("span",{innerHTML:'\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>chat-bubbles</title>\n<path d="M15.333 17.333c4.779 0 8.667-3.888 8.667-8.667s-3.888-8.667-8.667-8.667h-6.667c-4.779 0-8.667 3.888-8.667 8.667 0 2.985 1.513 5.712 4 7.297v4.703c0 0.497 0.277 0.953 0.717 1.183 0.195 0.1 0.405 0.151 0.616 0.151 0.269 0 0.536-0.081 0.764-0.241l6.323-4.425zM11.236 14.908l-4.569 3.199v-2.913c0-0.5-0.28-0.959-0.725-1.187-2.020-1.035-3.275-3.080-3.275-5.34 0-3.308 2.692-6 6-6h6.667c3.308 0 6 2.692 6 6s-2.692 6-6 6h-3.333c-0.273 0-0.54 0.084-0.764 0.241zM29.196 12.964c-0.543-0.5-1.388-0.464-1.884 0.077-0.5 0.541-0.465 1.385 0.077 1.884 1.253 1.156 1.944 2.72 1.944 4.408 0 2.26-1.255 4.305-3.275 5.339-0.445 0.228-0.725 0.687-0.725 1.188v2.572l-5.441-2.939c-0.195-0.104-0.412-0.16-0.633-0.16h-2.592c-1.688 0-3.309-0.724-4.451-1.988-0.492-0.545-1.335-0.591-1.883-0.096-0.547 0.493-0.589 1.336-0.096 1.883 1.644 1.823 3.988 2.868 6.429 2.868h2.255l7.111 3.84c0.199 0.107 0.417 0.16 0.635 0.16 0.236 0 0.472-0.063 0.683-0.188 0.404-0.241 0.651-0.676 0.651-1.145v-4.036c2.487-1.585 4-4.311 4-7.297 0-2.407-1.023-4.727-2.804-6.369z"></path>\n</svg>\n'}),i("p",null,this.noComments))):i("div",{class:"s-comments s-comments-"+(this.testimonials?"testimonials":this.type)},i("div",{class:this.type===g.PAGE?"s-comments-page-container":"s-comments-container"},this.total&&!this.hideTitle?i("h2",{class:"s-comments-title"},this.blockTitle?this.blockTitle:this.comment_title):"",!this.hideForm&&i("salla-comment-form",{showAvatar:this.showFormAvatar,type:this.type,"item-id":this.itemId}),salla.url.is_page("product.single")?i("salla-reviews-summary",{itemId:this.itemId}):"",i("div",{class:"s-comments-header "+(this.total?"has-total":"")},!!this.total&&i("span",{class:"s-comments-count-label",innerHTML:this.pluralize(this.comment_name,this.total)}),this.total&&!this.testimonials&&this.type!==g.BLOG?i("div",{class:"s-comments-filter-wrapper"},i("label",{class:"s-comments-filter-label",htmlFor:"comments-filter"},salla.lang.get("pages.categories.sorting")),i("select",{id:"comments-filter","aria-label":salla.lang.get("pages.categories.sorting"),class:"s-form-control s-comments-sort-input",onChange:s=>{this.sort=s.target.value,this.reload()}},i("option",{value:"latest",selected:!0},salla.lang.get("pages.testimonials.sort_by_date_desc")),i("option",{value:"oldest"},salla.lang.get("pages.testimonials.sort_by_date_asc")),this.allowLikes&&i("option",{value:"most_helpful"},this.mostHelpfulLabel))):""),i("div",{ref:s=>{this.wrapper=s}}),this.nextPage&&i("div",{class:"s-infinite-scroll-wrapper",ref:s=>{this.status=s}},i("button",{onClick:()=>this.loadMore(),class:"s-infinite-scroll-btn s-button-btn s-button-primary",type:"button"},i("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText?this.loadMoreText:salla.lang.get("common.elements.load_more")),i("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:s=>{this.btnLoader=s},style:{display:"none"}})))))}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-comments",{itemId:[2,"item-id"],loadMoreText:[1,"load-more-text"],hideForm:[4,"hide-form"],blockTitle:[1,"block-title"],hideTitle:[4,"hide-title"],type:[1],showFormAvatar:[4,"show-form-avatar"],hideBought:[4,"hide-bought"],sort:[1],testimonials:[4],comments:[32],pagination:[32],total:[32],showPlaceholder:[32],nextPage:[32],mostHelpfulLabel:[32],noComments:[32],comment_title:[32],comment_name:[32],placeholder_text:[32],showRatingSummary:[32],allowLikes:[32],reload:[64]}]);function b(){"undefined"!=typeof customElements&&["salla-comments","salla-button","salla-comment-form","salla-comment-item","salla-loading","salla-modal","salla-progress-bar","salla-rating-stars","salla-reviews-summary","salla-slider"].forEach((t=>{switch(t){case"salla-comments":customElements.get(s(t))||customElements.define(s(t),f);break;case"salla-button":customElements.get(s(t))||o();break;case"salla-comment-form":customElements.get(s(t))||n();break;case"salla-comment-item":customElements.get(s(t))||r();break;case"salla-loading":customElements.get(s(t))||m();break;case"salla-modal":customElements.get(s(t))||h();break;case"salla-progress-bar":customElements.get(s(t))||c();break;case"salla-rating-stars":customElements.get(s(t))||d();break;case"salla-reviews-summary":customElements.get(s(t))||p();break;case"salla-slider":customElements.get(s(t))||u()}}))}b();const w=f,v=b;export{w as SallaComments,v as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as anime } from './anime.es.js';
+import { H as Helper } from './Helper.js';
+import { d as defineCustomElement$a } from './salla-button2.js';
+import { d as defineCustomElement$9 } from './salla-comment-form2.js';
+import { d as defineCustomElement$8 } from './salla-comment-item2.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-progress-bar2.js';
+import { d as defineCustomElement$4 } from './salla-rating-stars2.js';
+import { d as defineCustomElement$3 } from './salla-reviews-summary2.js';
+import { d as defineCustomElement$2 } from './salla-slider2.js';
+
+var CommentType;
+(function (CommentType) {
+    CommentType["PAGE"] = "page";
+    CommentType["PRODUCT"] = "product";
+    CommentType["BLOG"] = "blog";
+})(CommentType || (CommentType = {}));
+
+var ChatBubbles = `<!-- 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>chat-bubbles</title>
+<path d="M15.333 17.333c4.779 0 8.667-3.888 8.667-8.667s-3.888-8.667-8.667-8.667h-6.667c-4.779 0-8.667 3.888-8.667 8.667 0 2.985 1.513 5.712 4 7.297v4.703c0 0.497 0.277 0.953 0.717 1.183 0.195 0.1 0.405 0.151 0.616 0.151 0.269 0 0.536-0.081 0.764-0.241l6.323-4.425zM11.236 14.908l-4.569 3.199v-2.913c0-0.5-0.28-0.959-0.725-1.187-2.020-1.035-3.275-3.080-3.275-5.34 0-3.308 2.692-6 6-6h6.667c3.308 0 6 2.692 6 6s-2.692 6-6 6h-3.333c-0.273 0-0.54 0.084-0.764 0.241zM29.196 12.964c-0.543-0.5-1.388-0.464-1.884 0.077-0.5 0.541-0.465 1.385 0.077 1.884 1.253 1.156 1.944 2.72 1.944 4.408 0 2.26-1.255 4.305-3.275 5.339-0.445 0.228-0.725 0.687-0.725 1.188v2.572l-5.441-2.939c-0.195-0.104-0.412-0.16-0.633-0.16h-2.592c-1.688 0-3.309-0.724-4.451-1.988-0.492-0.545-1.335-0.591-1.883-0.096-0.547 0.493-0.589 1.336-0.096 1.883 1.644 1.823 3.988 2.868 6.429 2.868h2.255l7.111 3.84c0.199 0.107 0.417 0.16 0.635 0.16 0.236 0 0.472-0.063 0.683-0.188 0.404-0.241 0.651-0.676 0.651-1.145v-4.036c2.487-1.585 4-4.311 4-7.297 0-2.407-1.023-4.727-2.804-6.369z"></path>
+</svg>
+`;
+
+const sallaCommentsCss = ":host{display:block}";
+
+const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * Comment Type
+         */
+        this.type = CommentType.PAGE;
+        /**
+         * Show or hide avatar
+         */
+        this.showFormAvatar = false;
+        /**
+       * Hide Bought
+       */
+        this.hideBought = false;
+        /**
+         * Determines if the comments are testimonials
+         */
+        this.testimonials = false;
+        this.customerId = null;
+        // Translations
+        this.noComments = salla.lang.get('blocks.comments.no_comments');
+        this.comment_title = salla.lang.get('blocks.comments.title');
+        this.comment_name = salla.lang.get('blocks.comments.comment');
+        this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
+        this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
+        salla.onReady(() => {
+            this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
+            this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
+        });
+        salla.lang.onLoaded(() => {
+            this.comment_title = salla.lang.get('blocks.comments.title');
+            this.comment_name = salla.lang.get('blocks.comments.comment');
+            this.noComments = salla.lang.get('pages.rating.no_ratings');
+            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.most_helpful', 'الأكثر إفادة');
+                await setNestedAsync('en.trans', 'blocks.comments.most_helpful', 'Most helpful');
+                this.mostHelpfulLabel = salla.lang.get('blocks.comments.most_helpful');
+                this.comment_title = salla.lang.get('blocks.comments.title');
+                this.comment_name = salla.lang.get('blocks.comments.comment');
+                this.noComments = salla.lang.get('pages.rating.no_ratings');
+            };
+            setTranslations();
+        });
+    }
+    // TOOD: it's a good idea to move this into lang.js
+    // Pluralize a string based on the count
+    pluralize(phrases, count) {
+        const options = phrases.split('|');
+        const conditions = [
+            { condition: count === 0, index: 0 },
+            { condition: count === 1, index: 1 },
+            { condition: count === 2, index: 2 },
+            { condition: count > 2 && count <= 10, index: 3 },
+            { condition: count >= 11, index: 4 }
+        ];
+        const { index } = conditions.find(({ condition }) => condition) || { index: options.length - 1 };
+        const selectedOption = options[index];
+        return selectedOption.replace(':count', salla.helpers.number(count.toString()))
+            .replace(/\{[0-9]+\}/g, '')
+            .replace(/\[\d+,\d+\]|\[11,\*\]/g, '');
+    }
+    wrapConsoleError() {
+        if (Salla.infiniteScroll.errorWrapped) {
+            return;
+        }
+        (() => {
+            const orig = console.error.bind(console);
+            console.error = (...args) => {
+                const msg = args[0];
+                // only rewrite the noisy one
+                if (typeof msg === 'string' && msg.toLowerCase().replace(/\s/g, '').includes('infinitescroll')) {
+                    return console.log(...args); // downgrade to log
+                }
+                return orig(...args); // keep real errors
+            };
+        })();
+        Salla.infiniteScroll.errorWrapped = true;
+    }
+    // Preserve sort and private_comments params in next page URL for infinite scroll
+    patchNextPageUrl() {
+        if (!this.nextPage)
+            return;
+        try {
+            const url = new URL(this.nextPage, window.location.origin);
+            if (this.sort && !url.searchParams.get('sort')) {
+                url.searchParams.set('sort', this.sort);
+            }
+            if (this.customerId && !url.searchParams.get('private_comments')) {
+                url.searchParams.set('private_comments', this.customerId);
+            }
+            this.nextPage = url.toString();
+        }
+        catch (_e) {
+            // fallback for relative next links
+            const hasQuery = this.nextPage.includes('?');
+            if (this.sort && !/[?&]sort=/.test(this.nextPage)) {
+                this.nextPage = this.nextPage + (hasQuery ? '&' : '?') + `sort=${this.sort}`;
+            }
+            if (this.customerId && !/[?&]private_comments=/.test(this.nextPage)) {
+                const sep = this.nextPage.includes('?') ? '&' : '?';
+                this.nextPage = this.nextPage + sep + `private_comments=${this.customerId}`;
+            }
+        }
+    }
+    // Initiate infinite scroll
+    initiateInfiniteScroll() {
+        if (!this.wrapper) {
+            console.error('Wrapper is undefined. Cannot initiate infinite scroll.');
+            return;
+        }
+        this.wrapConsoleError();
+        this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
+            path: () => this.nextPage,
+            history: false,
+            nextPage: this.nextPage,
+            scrollThreshold: false,
+        }, true);
+        this.infiniteScroll?.on('request', _response => {
+            this.loading();
+        });
+        this.infiniteScroll?.on('load', response => {
+            this.pagination = response.pagination;
+            this.nextPage = typeof response.pagination.links === 'object' && !!response.pagination.links.next ? response.pagination.links.next : null;
+            this.patchNextPageUrl();
+            for (const card of this.handleResponse(response)) {
+                this.wrapper.append(card);
+            }
+            const items = this.host.querySelectorAll('salla-comment-item:not(.animated):not(.s-comments-item-admin)');
+            this.animateItems(items);
+            this.loading(false);
+        });
+        this.infiniteScroll?.on('error', (e) => {
+            salla.console.error('Error loading more comments:', e);
+        });
+    }
+    // Show/hide loading
+    loading(isLoading = true) {
+        const btnText = this.status?.querySelector('.s-button-text');
+        if (btnText) {
+            Helper.toggleElementClassIf(btnText, 's-button-hide', 's-button-show', () => isLoading);
+            this.btnLoader.style.display = isLoading ? 'inherit' : 'none';
+        }
+    }
+    // Animate newly added items
+    animateItems(items) {
+        anime({
+            targets: items,
+            opacity: [0, 1],
+            duration: 1200,
+            translateY: [20, 0],
+            delay: (_el, i) => i * 100,
+            easing: 'easeOutExpo',
+            complete: (_anim) => {
+                for (const item of items) {
+                    item.classList.add('animated');
+                }
+            }
+        });
+    }
+    /**
+     * Reloads the comments data from the server
+     */
+    async reload() {
+        this.showPlaceholder = false;
+        if (this.wrapper) {
+            this.wrapper.innerHTML = "";
+            const loading = document.createElement('salla-loading');
+            this.wrapper.append(loading);
+        }
+        this.nextPage = null;
+        this.loadInitialData();
+    }
+    // Get comment item HTML
+    getCommentHTML(comment) {
+        const commentItem = document.createElement('salla-comment-item');
+        commentItem.comment = comment;
+        commentItem.hideBought = this.hideBought;
+        return commentItem;
+    }
+    // Parse response and return an array of comment items to be appended to the wrapper
+    handleResponse(response) {
+        return response.data?.map(comment => this.getCommentHTML(comment)) || [];
+    }
+    componentWillLoad() {
+        return salla.onReady()
+            .then(() => {
+            this.showRatingSummary = salla.config.get('store.settings.rating.show_rating_summary');
+        })
+            .then(() => this.loading())
+            .then(() => {
+            this.hideTitle = this.hideTitle || this.testimonials;
+            this.hideForm = this.hideForm || this.testimonials;
+            return this.loadInitialData();
+        });
+    }
+    // Load initial data
+    async loadInitialData() {
+        try {
+            let resp = { data: [], pagination: {} };
+            const searchParams = new URLSearchParams(window.location.search);
+            if (searchParams.has('sort')) {
+                this.sort = searchParams.get('sort');
+            }
+            if (this.testimonials) {
+                const params = {
+                    sort: this.sort,
+                    type: "store"
+                };
+                resp = await salla.api.request('reviews', { params }, 'get');
+            }
+            else {
+                const showPrivateComments = searchParams.get('private_comments');
+                this.customerId = (showPrivateComments && Salla.config.get('user.type') === 'user' && Salla.config.get('user.id'))
+                    ? Salla.config.get('user.id')
+                    : null;
+                resp = await salla.api.comment.getComments(this.type, this.itemId, 1, 5, this.sort, this.customerId);
+            }
+            if (!resp.data || !resp.data.length) {
+                this.showPlaceholder = false;
+                this.loading(false);
+                return;
+            }
+            if (this.wrapper) {
+                this.wrapper.innerHTML = "";
+            }
+            this.comments = resp.data;
+            this.pagination = resp.pagination;
+            this.total = resp.pagination.total;
+            this.nextPage = typeof resp.pagination.links === 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;
+            this.patchNextPageUrl();
+            setTimeout(() => {
+                for (const card of this.handleResponse(resp)) {
+                    this.wrapper.append(card);
+                }
+                this.initiateInfiniteScroll(); // Initiate infinite scroll after the initial data is loaded
+                const items = this.wrapper.querySelectorAll('salla-comment-item:not(.animated)');
+                this.animateItems(items);
+            }, 100);
+        }
+        catch (error) {
+            console.error('Error loading initial data:', error);
+            this.showPlaceholder = true;
+            this.loading(false);
+        }
+    }
+    // Get next page
+    async loadMore() {
+        this.infiniteScroll?.loadNextPage();
+    }
+    render() {
+        // We should show a different placeholder for pages and products (WIP)
+        if (this.showPlaceholder) {
+            return (h("div", null, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && !this.testimonials ? h("salla-comment-form", { showAvatar: this.showFormAvatar, type: this.type, "item-id": this.itemId }) : '', h("div", { class: "s-comments-placeholder" }, h("span", { innerHTML: ChatBubbles }), h("p", null, this.noComments))));
+        }
+        return (h("div", { class: `s-comments s-comments-${this.testimonials ? 'testimonials' : this.type}` }, h("div", { class: `${this.type === CommentType.PAGE ? "s-comments-page-container" : "s-comments-container"}` }, !!this.total && !this.hideTitle ? h("h2", { class: "s-comments-title" }, this.blockTitle ? this.blockTitle : this.comment_title) : '', !this.hideForm && h("salla-comment-form", { showAvatar: this.showFormAvatar, type: this.type, "item-id": this.itemId }), salla.url.is_page('product.single') ? h("salla-reviews-summary", { itemId: this.itemId }) : '', h("div", { class: `s-comments-header ${this.total ? "has-total" : ""}` }, !!this.total && h("span", { class: "s-comments-count-label", innerHTML: this.pluralize(this.comment_name, this.total) }), !!this.total && !this.testimonials && this.type !== CommentType.BLOG ?
+            h("div", { class: "s-comments-filter-wrapper" }, h("label", { class: "s-comments-filter-label", htmlFor: "comments-filter" }, salla.lang.get('pages.categories.sorting')), h("select", { id: "comments-filter", "aria-label": salla.lang.get('pages.categories.sorting'), class: "s-form-control s-comments-sort-input", onChange: (e) => {
+                    this.sort = e.target.value;
+                    this.reload();
+                } }, h("option", { value: "latest", selected: true }, salla.lang.get("pages.testimonials.sort_by_date_desc")), h("option", { value: "oldest" }, salla.lang.get("pages.testimonials.sort_by_date_asc")), this.allowLikes && h("option", { value: "most_helpful" }, this.mostHelpfulLabel)))
+            : ''), h("div", { ref: wrapper => {
+                this.wrapper = wrapper;
+            } }), this.nextPage && (h("div", { class: "s-infinite-scroll-wrapper", ref: status => {
+                this.status = status;
+            } }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary", type: "button" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => {
+                this.btnLoader = btnLoader;
+            }, style: { "display": "none" } })))))));
+    }
+    get host() { return this; }
+    static get style() { return sallaCommentsCss; }
+}, [0, "salla-comments", {
+        "itemId": [2, "item-id"],
+        "loadMoreText": [1, "load-more-text"],
+        "hideForm": [4, "hide-form"],
+        "blockTitle": [1, "block-title"],
+        "hideTitle": [4, "hide-title"],
+        "type": [1],
+        "showFormAvatar": [4, "show-form-avatar"],
+        "hideBought": [4, "hide-bought"],
+        "sort": [1],
+        "testimonials": [4],
+        "comments": [32],
+        "pagination": [32],
+        "total": [32],
+        "showPlaceholder": [32],
+        "nextPage": [32],
+        "mostHelpfulLabel": [32],
+        "noComments": [32],
+        "comment_title": [32],
+        "comment_name": [32],
+        "placeholder_text": [32],
+        "showRatingSummary": [32],
+        "allowLikes": [32],
+        "reload": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-comments", "salla-button", "salla-comment-form", "salla-comment-item", "salla-loading", "salla-modal", "salla-progress-bar", "salla-rating-stars", "salla-reviews-summary", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-comments":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaComments$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-comment-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-comment-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-reviews-summary":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaComments = SallaComments$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaComments, defineCustomElement };

package/dist/components/salla-conditional-fields.js

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

package/dist/components/salla-conditional-fields2.js

@@ -1,4 +1,140 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,h as n,Host as s}from"@stencil/core/internal/client";const a=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost()}hideAllOptions(e){this.host.querySelectorAll(`[data-show-when^="options[${e}"]`).forEach((e=>{e.classList.add("hidden"),this.hideAllOptions(e.dataset.optionId),this.disableInputs(e)}))}disableInputs(e){e.querySelectorAll("[name]").forEach((e=>{e.setAttribute("disabled",""),e.removeAttribute("required"),"select"===e?.tagName?.toLowerCase()&&(e.value=""),["checkbox"].includes(e.getAttribute("type"))&&e.hasOwnProperty("checked")&&(e.checked=!1)}))}changeHandler(e){if(salla.event.emit("salla-onditional-fields::change",e),salla.log("Received the change/input event: ",e),e.target&&(["SELECT","INPUT","TEXTAREA"].includes(e.target.tagName)||["checkbox","radio","text"].includes(e.target.getAttribute("type"))))return!["INPUT","TEXTAREA"].includes(e.target.tagName)||e.target.getAttribute("type")&&"text"!==e.target.getAttribute("type")||"input"!==e.type?void this.processConditionalFields(e):(clearTimeout(this.debounceTimeout),void(this.debounceTimeout=setTimeout((()=>{this.processConditionalFields(e)}),300)));salla.log("Ignore the event because is not a supported input: "+(e?.target?.tagName||"N/A"))}processConditionalFields(e){let t=e.target.name.replace("[]",""),i="checkbox"===e.target.getAttribute("type"),n="radio"===e.target.getAttribute("type"),s=["INPUT","TEXTAREA"].includes(e.target.tagName)&&(!e.target.getAttribute("type")||"text"===e.target.getAttribute("type"));salla.log("Trying to find all elements with condition:",`[data-show-when^="${t}"]`),this.host.querySelectorAll(`[data-show-when^="${t}"]`).forEach((t=>{let a,o=!t?.dataset.showWhen.includes("!="),d=t?.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$3").trim();a=i?Array.from(this.host.querySelectorAll(`input[name="${e.target.name}"]:checked`),(e=>e?.value)).includes(d.toString()):n?e.target.checked&&e.target.value===d:s?d===e.target.value||"true"===d.toLowerCase()&&""!==e.target.value.trim():d===e.target.value,salla.log("The input is ",i?"Multiple":n?"Radio":s?"Text":"Single"," value:",a),o&&a||!o&&!a?(t.classList.remove("hidden"),t.querySelectorAll("[name]").forEach((e=>{if(e.removeAttribute("disabled"),"true"===e.closest(".s-product-options-option").dataset.optionRequired&&e.setAttribute("required",""),"checkbox"===e.getAttribute("type")){const t=Array.from(document.querySelectorAll(`input[type="checkbox"][name="${e.getAttribute("name")}"]`));t.some((e=>e.checked))&&t.forEach((e=>{e.removeAttribute("required")}))}}))):(this.hideAllOptions(t.dataset.optionId),t.classList.add("hidden"),this.disableInputs(t))}))}componentDidRender(){this.host.querySelectorAll("[data-show-when]").forEach((e=>{let t=e?.dataset?.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$1").trim();t&&this.changeHandler({target:this.host.querySelector('[name^="'+t+'"]')})}))}render(){return n(s,{key:"92e48eb8f628ef8a2cde7e0480bbfe8fbb36f139"},n("slot",{key:"439b9056ff00196e8e8b89ee8251afd4db7e2b64"}))}get host(){return this}},[260,"salla-conditional-fields",void 0,[[0,"change","changeHandler"],[0,"input","changeHandler"]]]);function o(){"undefined"!=typeof customElements&&["salla-conditional-fields"].forEach((t=>{"salla-conditional-fields"===t&&(customElements.get(e(t))||customElements.define(e(t),a))}))}o();export{a as S,o as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaConditionalFields extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    hideAllOptions(optionId) {
+        this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
+            field.classList.add('hidden');
+            this.hideAllOptions(field.dataset.optionId);
+            this.disableInputs(field);
+        });
+    }
+    disableInputs(field) {
+        field.querySelectorAll('[name]').forEach((input) => {
+            input.setAttribute('disabled', '');
+            input.removeAttribute('required');
+            if (input?.tagName?.toLowerCase() === 'select') {
+                input.value = '';
+            }
+            if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+                // @ts-ignore
+                input.checked = false;
+            }
+        });
+    }
+    changeHandler(event) {
+        salla.event.emit('salla-onditional-fields::change', event);
+        salla.log('Received the change/input event: ', event);
+        if (!event.target ||
+            (!['SELECT', 'INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+                !['checkbox', 'radio', 'text'].includes(event.target.getAttribute('type')))) {
+            salla.log('Ignore the event because is not a supported input: ' + (event?.target?.tagName || 'N/A'));
+            return;
+        }
+        // For text inputs, debounce the handling to improve performance on mobile
+        const isTextInput = ['INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+            (!event.target.getAttribute('type') || event.target.getAttribute('type') === 'text');
+        if (isTextInput && event.type === 'input') {
+            clearTimeout(this.debounceTimeout);
+            this.debounceTimeout = setTimeout(() => {
+                this.processConditionalFields(event);
+            }, 300); // 300ms debounce for text inputs
+            return;
+        }
+        // Process immediately for change events and non-text inputs
+        this.processConditionalFields(event);
+    }
+    processConditionalFields(event) {
+        let optionId = event.target.name.replace('[]', '');
+        let isMultiple = event.target.getAttribute('type') === 'checkbox';
+        let isRadio = event.target.getAttribute('type') === 'radio';
+        let isTextInput = ['INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+            (!event.target.getAttribute('type') || event.target.getAttribute('type') === 'text');
+        salla.log('Trying to find all elements with condition:', `[data-show-when^="${optionId}"]`);
+        this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
+            .forEach((field) => {
+            let isEqual = !field?.dataset.showWhen.includes('!=');
+            let value = field?.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
+            let isSelected;
+            if (isMultiple) {
+                let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e?.value);
+                isSelected = selectedValues.includes(value.toString());
+            }
+            else if (isRadio) {
+                // Handle radio inputs.
+                isSelected = event.target.checked && event.target.value === value;
+            }
+            else if (isTextInput) {
+                // Handle text inputs and textareas - check if value matches or is not empty for boolean conditions
+                isSelected = value === event.target.value || (value.toLowerCase() === 'true' && event.target.value.trim() !== '');
+            }
+            else {
+                isSelected = value === event.target.value;
+            }
+            salla.log('The input is ', isMultiple ? 'Multiple' : isRadio ? 'Radio' : isTextInput ? 'Text' : 'Single', ' value:', isSelected);
+            let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
+            if (showTheInput) {
+                field.classList.remove('hidden');
+                field.querySelectorAll('[name]').forEach((input) => {
+                    input.removeAttribute('disabled');
+                    const closestProductOption = input.closest('.s-product-options-option');
+                    if (closestProductOption.dataset.optionRequired === 'true') {
+                        input.setAttribute('required', '');
+                    }
+                    if (input.getAttribute('type') === 'checkbox') {
+                        const checkboxes = Array.from(document.querySelectorAll(`input[type="checkbox"][name="${input.getAttribute('name')}"]`));
+                        const isAnyChecked = checkboxes.some((checkbox) => checkbox.checked);
+                        if (isAnyChecked) {
+                            checkboxes.forEach((checkbox) => {
+                                checkbox.removeAttribute('required');
+                            });
+                        }
+                    }
+                });
+            }
+            else {
+                this.hideAllOptions(field.dataset.optionId);
+                field.classList.add('hidden');
+                this.disableInputs(field);
+            }
+        });
+    }
+    componentDidRender() {
+        this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
+            // @ts-ignore
+            let optionName = field?.dataset?.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+            if (!optionName) {
+                return;
+            }
+            this.changeHandler({
+                target: this.host.querySelector('[name^="' + optionName + '"]')
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: '92e48eb8f628ef8a2cde7e0480bbfe8fbb36f139' }, h("slot", { key: '439b9056ff00196e8e8b89ee8251afd4db7e2b64' })));
+    }
+    get host() { return this; }
+}, [4, "salla-conditional-fields", undefined, [[0, "change", "changeHandler"], [0, "input", "changeHandler"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-conditional-fields"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaConditionalFields);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaConditionalFields as S, defineCustomElement as d };