@salla.sa/twilight-components 2.14.393 → 2.14.395

package/dist/components/salla-comment-form2.js

@@ -1,4 +1,67 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as a,h as e,Host as l}from"@stencil/core/internal/client";import{d as o}from"./salla-button2.js";const m=t(class extends a{constructor(s){super(),!1!==s&&this.__registerHost(),this.placeholder=salla.lang.get("blocks.comments.placeholder"),this.submitText=salla.lang.get("blocks.comments.submit"),salla.lang.onLoaded((()=>{this.placeholder=salla.lang.get("blocks.comments.placeholder"),this.submitText=salla.lang.get("blocks.comments.submit")})),salla.onReady((()=>{this.canComment=salla.config.get("user.can_comment"),this.itemId=salla.config.get("page.id"),this.type=salla.url.is_page("page-single")?"page":salla.url.is_page("blog.single")?"blog":"product"}))}submit(){this.commentForm.reportValidity()?this.submitBtn.load().then((()=>salla.comment.add({id:this.itemId,comment:this.commentField.value,type:this.type}))).finally((()=>this.submitBtn.stop)):salla.log("CommentForm:: validation error!")}render(){return e(l,{key:"24b73030ff1828a6f21c1c36a00be2c8651f6edf"},this.canComment?e("form",{ref:s=>this.commentForm=s},e("div",{class:"s-comment-form-wrapper"},this.showAvatar?e("img",{class:"s-comment-form-avatar",src:salla.config.get("user.avatar"),alt:"user avatar"}):"",e("div",{class:"s-comment-form-content"},e("textarea",{cols:30,rows:5,minlength:"4",maxlength:"500",ref:s=>this.commentField=s,placeholder:this.placeholder,class:"s-comment-form-input",required:!0}),e("br",null),e("div",{class:"s-comment-form-action"},e("salla-button",{ref:s=>this.submitBtn=s,"loader-position":"center",onClick:()=>this.submit()},this.submitText))))):"")}static get style(){return":host{display:block}"}},[0,"salla-comment-form",{type:[1537],showAvatar:[4,"show-avatar"],itemId:[1544,"item-id"],placeholder:[32],submitText:[32],canComment:[32]}]);function c(){"undefined"!=typeof customElements&&["salla-comment-form","salla-button"].forEach((t=>{switch(t){case"salla-comment-form":customElements.get(s(t))||customElements.define(s(t),m);break;case"salla-button":customElements.get(s(t))||o()}}))}c();export{m as S,c as d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './salla-button2.js';
+
+const sallaCommentFormCss = ":host{display:block}";
+
+const SallaCommentForm = /*@__PURE__*/ proxyCustomElement(class SallaCommentForm extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.placeholder = salla.lang.get('blocks.comments.placeholder');
+        this.submitText = salla.lang.get('blocks.comments.submit');
+        salla.lang.onLoaded(() => {
+            this.placeholder = salla.lang.get('blocks.comments.placeholder');
+            this.submitText = salla.lang.get('blocks.comments.submit');
+        });
+        salla.onReady(() => {
+            this.canComment = salla.config.get('user.can_comment');
+            this.itemId = salla.config.get('page.id');
+            this.type = salla.url.is_page('page-single') ? 'page' : salla.url.is_page('blog.single') ? 'blog' : 'product';
+        });
+    }
+    submit() {
+        if (!this.commentForm.reportValidity()) {
+            salla.log('CommentForm:: validation error!');
+            return;
+        }
+        this.submitBtn.load()
+            .then(() => salla.comment.add({ id: this.itemId, comment: this.commentField.value, type: this.type }))
+            .finally(() => this.submitBtn.stop);
+    }
+    render() {
+        return (h(Host, { key: '24b73030ff1828a6f21c1c36a00be2c8651f6edf' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
+            h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
+    }
+    static get style() { return sallaCommentFormCss; }
+}, [0, "salla-comment-form", {
+        "type": [1537],
+        "showAvatar": [4, "show-avatar"],
+        "itemId": [1544, "item-id"],
+        "placeholder": [32],
+        "submitText": [32],
+        "canComment": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-comment-form", "salla-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-comment-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCommentForm);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaCommentForm as S, defineCustomElement as d };

package/dist/components/salla-comment-item.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as m,d as o}from"./salla-comment-item2.js";const s=m,t=o;export{s as SallaCommentItem,t as defineCustomElement}
+import { S as SallaCommentItem$1, d as defineCustomElement$1 } from './salla-comment-item2.js';
+
+const SallaCommentItem = SallaCommentItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaCommentItem, defineCustomElement };

package/dist/components/salla-comment-item2.js

@@ -1,4 +1,220 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as s,proxyCustomElement as t,HTMLElement as e,h as a,Host as i}from"@stencil/core/internal/client";import{I as l}from"./check.js";import{d as c}from"./salla-button2.js";import{d as n}from"./salla-loading2.js";import{d as m}from"./salla-modal2.js";import{d as o}from"./salla-rating-stars2.js";import{d as h}from"./salla-slider2.js";const r=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.has_bought_trans=salla.lang.get("blocks.comments.has_bought"),this.rated_trans=salla.lang.get("pages.rating.rated"),this.waiting_approval_trans=salla.lang.get("blocks.comments.waiting_approval"),this.has_order_trans=salla.lang.get("blocks.comments.has_order"),this.allowLikes=salla.config.get("store.settings.rating.allow_likes"),this.allowAttachImages=salla.config.get("store.settings.rating.allow_attach_images"),this.helpfulLabel=salla.lang.getWithDefault("blocks.comments.helpful","مفيد"),this.likesCount=0,this.likedComments=[],salla.lang.onLoaded((()=>{const s=(s,t,e)=>new Promise((a=>{salla.helpers.setNested(salla.lang.messages[s],t,e),a(!0)}));this.has_bought_trans=salla.lang.get("blocks.comments.has_bought"),this.rated_trans=salla.lang.get("pages.rating.rated"),this.waiting_approval_trans=salla.lang.get("blocks.comments.waiting_approval"),this.has_order_trans=salla.lang.get("blocks.comments.has_order"),(async()=>{await s("ar.trans","blocks.comments.helpful","مفيد"),await s("en.trans","blocks.comments.helpful","Helpful"),this.helpfulLabel=salla.lang.getWithDefault("blocks.comments.helpful","مفيد")})()}))}componentDidLoad(){this.likesCount=this.comment.likes_count;try{this.likedComments=JSON.parse(localStorage.getItem("liked_comments")||"[]"),this.likedComments.includes(this.comment.id)&&(this.likeBtn.classList.add("liked"),this.likeBtn.fill="solid")}catch{salla.log("Bad json for liked_comments")}}getReplies(){return Array.isArray(this.comment.replies)?this.comment.replies:[this.comment.replies]}getDate(s){const[t]=s.split(" "),[e,a,i]=t.split("-");return`${parseInt(i,10)}/${parseInt(a,10)}/${parseInt(e,10)}`}getTime(s){const[,t]=s.split(" "),[e,a]=t.split(":");return`${parseInt(e,10)}:${parseInt(a,10)}`}async toggleLike(){if(salla.config.isGuest())return salla.notify.error(salla.lang.get("common.messages.must_login"));this.likedComments=JSON.parse(localStorage.getItem("liked_comments")||"[]");const s=this.likedComments.includes(this.comment.id);try{const t=s?`rating/${this.comment.id}/unlike`:`rating/${this.comment.id}/like`,e=await salla.api.request(t,"","put");salla.log(e.message),s?(this.likeBtn.classList.remove("liked"),this.likeBtn.fill="outline",this.updateLikedComments(this.comment.id,!1),this.likesCount--):(this.likeBtn.classList.add("liked"),this.likeBtn.fill="solid",this.updateLikedComments(this.comment.id,!0),this.likesCount++)}catch(s){409==s.response.status&&(this.likeBtn.classList.contains("liked")?(this.likeBtn.fill="outline",this.likeBtn.classList.remove("liked"),this.updateLikedComments(this.comment.id,!1),this.likesCount--):(this.likeBtn.fill="solid",this.likeBtn.classList.add("liked"),salla.logger.warn("Like already exists"),this.updateLikedComments(this.comment.id,!0)))}}updateLikedComments(s,t){this.likedComments=JSON.parse(localStorage.getItem("liked_comments")||"[]"),t?this.likedComments.includes(s)||this.likedComments.push(s):this.likedComments=this.likedComments.filter((t=>t!==s)),localStorage.setItem("liked_comments",JSON.stringify(this.likedComments))}PinnedIcon(){return a("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"16",height:"16",color:"#555555",fill:"none",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},a("path",{d:"M12 16V21"}),a("path",{d:"M8 5.2918C8 5.02079 8 4.88529 8.01312 4.77132C8.1194 3.84789 8.84789 3.1194 9.77133 3.01312C9.88529 3 10.0208 3 10.2918 3H13.7082C13.9792 3 14.1147 3 14.2287 3.01312C15.1521 3.1194 15.8806 3.84789 15.9869 4.77132C16 4.88529 16 5.02079 16 5.2918C16 5.37885 16 5.42237 15.9967 5.46264C15.9708 5.78281 15.7927 6.07104 15.5179 6.2374C15.4834 6.25832 15.4444 6.27779 15.3666 6.31672L15.1055 6.44726C14.7021 6.64897 14.5003 6.74983 14.3681 6.90564C14.26 7.03286 14.1856 7.18509 14.1515 7.34846C14.1097 7.54854 14.1539 7.76968 14.2424 8.21197L15 12H15.3333C15.9533 12 16.2633 12 16.5176 12.0681C17.2078 12.2531 17.7469 12.7922 17.9319 13.4824C18 13.7367 18 14.0467 18 14.6667C18 14.9767 18 15.1317 17.9659 15.2588C17.8735 15.6039 17.6039 15.8735 17.2588 15.9659C17.1317 16 16.9767 16 16.6667 16H7.33333C7.02334 16 6.86835 16 6.74118 15.9659C6.39609 15.8735 6.12654 15.6039 6.03407 15.2588C6 15.1317 6 14.9767 6 14.6667C6 14.0467 6 13.7367 6.06815 13.4824C6.25308 12.7922 6.79218 12.2531 7.48236 12.0681C7.73669 12 8.04669 12 8.66667 12H9L9.75761 8.21197C9.84606 7.76968 9.89029 7.54854 9.84852 7.34846C9.81441 7.18509 9.73995 7.03286 9.63194 6.90564C9.49965 6.74983 9.29794 6.64897 8.89452 6.44726L8.63344 6.31672C8.55558 6.27779 8.51665 6.25832 8.48208 6.2374C8.20731 6.07104 8.02917 5.78281 8.00326 5.46264C8 5.42237 8 5.37885 8 5.2918Z"}))}render(){let s="admin"==this.comment.type;return a(i,{key:"3f9d4b98cff2dd49259d3386b4996b905f92d7db",class:s?"s-comments-item-admin":"s-comments-item"},a("div",{key:"1348f11b2e553be483f60c5c558d3e800f050700",class:{"s-comments-item-wrapper":!s,"s-comments-item-admin-wrapper":s},id:`s-comments-item-${this.comment.id}`},a("div",{key:"0587afd7ae1fc27b12fc4fd2c9ef4bf9e919d04a",class:"s-comments-item-inner s-comments-flex-1"},s&&a("span",{key:"40009b2b3b9af60481d0e40d5fb919076ab43b10",class:"s-comments-item-reply-icon",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>reply</title>\n<path d="M20 14.667h-12.609l9.401-6.927c0.592-0.436 0.72-1.271 0.283-1.863-0.439-0.595-1.273-0.72-1.864-0.283l-12.667 9.333c-0.343 0.251-0.544 0.649-0.544 1.072s0.201 0.821 0.543 1.073l12.667 9.333c0.237 0.176 0.515 0.26 0.789 0.26 0.409 0 0.813-0.188 1.075-0.543 0.437-0.592 0.309-1.427-0.283-1.863l-9.4-6.928h12.609c4.412 0 8 3.588 8 8 0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333c0-5.881-4.785-10.667-10.667-10.667z"></path>\n</svg>\n'}),a("div",{key:"8f0563811445046ecf5ce3abe6ee6d7d1ec4a235",class:"s-comments-item-avatar"},a("img",{key:"5f82bb9d3a5c4c340f37b8e48af3edce42c133f8","data-src":this.comment?.avatar,alt:this.comment?.name,src:this.comment?.avatar,class:"s-comments-item-avatar-img lazy"})),a("div",{key:"34581ee9fddaa2f79ee933efb65c2e354010f37a",class:"s-comments-flex-1"},a("div",{key:"e03fc074d5ac8ddf183e3b081001e73dd62a7116",class:"s-comments-item-user-wrapper"},a("div",{key:"6ea5e07eb9fa35d7673019628e6fde4605b74e0c",class:"s-comments-item-user-info"},a("h3",{key:"18d7cf8c8b8125138a544bd10027ae7503f2f3a6",class:this.comment.is_pinned?"s-comments-item-user-info-name":"s-comments-item-user-info-name-with-margin"},this.comment?.name),this.comment.is_pinned?a("div",{class:"s-comments-item-pinned-icon-with-margin"},this.PinnedIcon()):null,!this.comment.has_order&&!this.comment.rating||this.comment.is_pending||this.hideBought?null:a("div",{class:"s-comments-flex"},this.comment.has_order?[a("span",{class:"s-comments-item-has-order-check-icon",innerHTML:l}),a("span",{class:"s-comments-item-has-order-check-text"},this.has_bought_trans," ",this.comment.rating?", ":"")]:null,this.comment.rating?a("span",{class:"s-comments-item-rated-widget"},this.rated_trans):null)),a("p",{key:"694c2079d3379966994af7040fe4542481a53e66",class:"s-comments-item-timestamp s-ltr"},this.getDate(this.comment.created_at?.date),a("span",{key:"734ca2eb6bf846c661007a1b9c41f22c47923b27",class:"s-comments-item-time"}," - ",this.getTime(this.comment.created_at?.date))),this.comment.rating||this.comment.stars?a("salla-rating-stars",{size:"mini",class:"s-comments-item-stars",value:this.comment.rating||this.comment.stars}):null),a("div",{key:"45e32a0759536f8c9e8bc8b823d50c931bdd1e23",class:"s-comments-item-content"},a("p",{key:"9edf2cdfd489f77214d7a1ecae8a99943dfd4ece",innerHTML:this.comment.content}),this.allowAttachImages&&a("div",{key:"bbba6c62c4d13289137c634f5413880dfa572ab4",class:"s-comments-item-images"},this.comment.images.map(((s,t)=>a("img",{key:t,src:s,alt:"",onClick:()=>this.modal.open()}))),a("salla-modal",{key:"cd5c48b8cf3e1c9457a2fb60a42859cbd91aa996",ref:s=>this.modal=s,width:"sm"},a("salla-slider",{key:"304bc9417e6d7fd0e310127dce4e56a1c6ce00ea",id:`s-comments-item-${this.comment.id}-images`,class:"s-comments-item-images-slider",type:"thumbs","auto-height":!0,showControls:this.comment.images.length>1,"show-thumbs-controls":"false"},a("div",{key:"50401766737293c42fa7ba3b351b6db736fd92eb",slot:"items"},this.comment.images.map(((s,t)=>a("img",{key:t,src:s,alt:""})))),a("div",{key:"6b9a50da0b67497dfae21b52044850329d8712b5",slot:"thumbs"},this.comment.images.map(((s,t)=>a("div",{class:"s-comments-item-images-slider-thumb"},a("img",{key:t,src:s,alt:""})))))))),this.allowLikes&&!s&&salla.url.is_page("product.single")?a("salla-button",{ref:s=>this.likeBtn=s,class:"s-comments-item-like-btn "+(this.likedComments.includes(this.comment.id)?"liked":""),loaderPosition:"center",fill:"outline",size:"small",onClick:()=>this.toggleLike()},a("span",null,this.helpfulLabel," ",this.likesCount>0?`(${this.likesCount})`:""),a("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>thumbs-up</title>\n<path d="M26.667 10.667h-8.261l1.279-3.38c0.723-1.911 0.087-4.051-1.549-5.203-0.909-0.639-2.004-0.881-3.085-0.684-1.101 0.203-2.061 0.837-2.703 1.787l-5.452 8.067c-0.148 0.22-0.228 0.48-0.228 0.747v12c0 3.676 2.991 6.667 6.667 6.667h8.688c2.535 0 4.817-1.407 5.955-3.671l2.548-5.063c0.093-0.187 0.143-0.392 0.143-0.6v-6.667c0-2.205-1.795-4-4-4zM28 21.017l-2.405 4.78c-0.683 1.359-2.052 2.203-3.573 2.203h-8.688c-2.205 0-4-1.795-4-4v-11.592l5.223-7.728c0.237-0.352 0.584-0.585 0.975-0.657 0.367-0.067 0.749 0.017 1.068 0.241 0.631 0.444 0.879 1.317 0.591 2.079l-1.963 5.185c-0.156 0.409-0.099 0.869 0.149 1.229s0.66 0.576 1.099 0.576h10.192c0.735 0 1.333 0.599 1.333 1.333zM2.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v16c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-16c0-0.736-0.597-1.333-1.333-1.333z"></path>\n</svg>\n'})):"",this.comment.is_pending?a("span",{class:"s-comments-item-pending-text"},this.waiting_approval_trans):null))),this.getReplies().length&&!s?this.getReplies().map((s=>a("div",null,a("salla-comment-item",{comment:s})))):null))}get host(){return this}static get style(){return":host{display:block}"}},[0,"salla-comment-item",{comment:[16],hideBought:[16],has_bought_trans:[32],rated_trans:[32],waiting_approval_trans:[32],has_order_trans:[32],allowLikes:[32],allowAttachImages:[32],helpfulLabel:[32],likesCount:[32],likedComments:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-comment-item","salla-button","salla-comment-item","salla-loading","salla-modal","salla-rating-stars","salla-slider"].forEach((t=>{switch(t){case"salla-comment-item":customElements.get(s(t))||customElements.define(s(t),r);break;case"salla-button":customElements.get(s(t))||c();break;case"salla-comment-item":customElements.get(s(t))||d();break;case"salla-loading":customElements.get(s(t))||n();break;case"salla-modal":customElements.get(s(t))||m();break;case"salla-rating-stars":customElements.get(s(t))||o();break;case"salla-slider":customElements.get(s(t))||h()}}))}d();export{r as S,d}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IconVerified } from './check.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
+import { d as defineCustomElement$1 } from './salla-slider2.js';
+
+var Reply = `<!-- 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>reply</title>
+<path d="M20 14.667h-12.609l9.401-6.927c0.592-0.436 0.72-1.271 0.283-1.863-0.439-0.595-1.273-0.72-1.864-0.283l-12.667 9.333c-0.343 0.251-0.544 0.649-0.544 1.072s0.201 0.821 0.543 1.073l12.667 9.333c0.237 0.176 0.515 0.26 0.789 0.26 0.409 0 0.813-0.188 1.075-0.543 0.437-0.592 0.309-1.427-0.283-1.863l-9.4-6.928h12.609c4.412 0 8 3.588 8 8 0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333c0-5.881-4.785-10.667-10.667-10.667z"></path>
+</svg>
+`;
+
+var ThumbsUp = `<!-- 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>thumbs-up</title>
+<path d="M26.667 10.667h-8.261l1.279-3.38c0.723-1.911 0.087-4.051-1.549-5.203-0.909-0.639-2.004-0.881-3.085-0.684-1.101 0.203-2.061 0.837-2.703 1.787l-5.452 8.067c-0.148 0.22-0.228 0.48-0.228 0.747v12c0 3.676 2.991 6.667 6.667 6.667h8.688c2.535 0 4.817-1.407 5.955-3.671l2.548-5.063c0.093-0.187 0.143-0.392 0.143-0.6v-6.667c0-2.205-1.795-4-4-4zM28 21.017l-2.405 4.78c-0.683 1.359-2.052 2.203-3.573 2.203h-8.688c-2.205 0-4-1.795-4-4v-11.592l5.223-7.728c0.237-0.352 0.584-0.585 0.975-0.657 0.367-0.067 0.749 0.017 1.068 0.241 0.631 0.444 0.879 1.317 0.591 2.079l-1.963 5.185c-0.156 0.409-0.099 0.869 0.149 1.229s0.66 0.576 1.099 0.576h10.192c0.735 0 1.333 0.599 1.333 1.333zM2.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v16c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-16c0-0.736-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaCommentsCss = ":host{display:block}";
+
+const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        // Translations
+        this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
+        this.rated_trans = salla.lang.get('pages.rating.rated');
+        this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
+        this.has_order_trans = salla.lang.get('blocks.comments.has_order');
+        this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
+        this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
+        this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
+        this.likesCount = 0;
+        this.likedComments = [];
+        salla.lang.onLoaded(() => {
+            const setNestedAsync = (lang, key, value) => {
+                return new Promise((resolve) => {
+                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    resolve(true);
+                });
+            };
+            const setTranslations = async () => {
+                await setNestedAsync('ar.trans', 'blocks.comments.helpful', 'مفيد');
+                await setNestedAsync('en.trans', 'blocks.comments.helpful', 'Helpful');
+                this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
+            };
+            this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
+            this.rated_trans = salla.lang.get('pages.rating.rated');
+            this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
+            this.has_order_trans = salla.lang.get('blocks.comments.has_order');
+            setTranslations();
+        });
+    }
+    componentDidLoad() {
+        this.likesCount = this.comment.likes_count;
+        try {
+            this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
+            if (this.likedComments.includes(this.comment.id)) {
+                this.likeBtn.classList.add('liked');
+                this.likeBtn.fill = "solid";
+            }
+        }
+        catch {
+            salla.log('Bad json for liked_comments');
+        }
+    }
+    getReplies() {
+        return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
+    }
+    getDate(dateString) {
+        const [datePart] = dateString.split(' ');
+        const [year, month, day] = datePart.split('-');
+        const formattedDate = `${parseInt(day, 10)}/${parseInt(month, 10)}/${parseInt(year, 10)}`;
+        return formattedDate;
+    }
+    getTime(dateString) {
+        const [, timePart] = dateString.split(' ');
+        const [hours, minutes] = timePart.split(':');
+        const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;
+        return formattedTime;
+    }
+    async toggleLike() {
+        if (salla.config.isGuest()) {
+            return salla.notify.error(salla.lang.get('common.messages.must_login'));
+        }
+        this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
+        const isLiked = this.likedComments.includes(this.comment.id);
+        try {
+            const endpoint = isLiked ? `rating/${this.comment.id}/unlike` : `rating/${this.comment.id}/like`;
+            const res = await salla.api.request(endpoint, '', 'put');
+            salla.log(res.message);
+            if (isLiked) {
+                this.likeBtn.classList.remove('liked');
+                this.likeBtn.fill = 'outline';
+                this.updateLikedComments(this.comment.id, false);
+                this.likesCount--;
+            }
+            else {
+                this.likeBtn.classList.add('liked');
+                this.likeBtn.fill = 'solid';
+                this.updateLikedComments(this.comment.id, true);
+                this.likesCount++;
+            }
+        }
+        catch (e) {
+            if (e.response.status == 409) {
+                if (this.likeBtn.classList.contains('liked')) {
+                    this.likeBtn.fill = 'outline';
+                    this.likeBtn.classList.remove('liked');
+                    this.updateLikedComments(this.comment.id, false);
+                    this.likesCount--;
+                }
+                else {
+                    this.likeBtn.fill = 'solid';
+                    this.likeBtn.classList.add('liked');
+                    salla.logger.warn('Like already exists');
+                    this.updateLikedComments(this.comment.id, true);
+                }
+            }
+        }
+    }
+    updateLikedComments(commentId, add) {
+        this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
+        if (add) {
+            if (!this.likedComments.includes(commentId)) {
+                this.likedComments.push(commentId);
+            }
+        }
+        else {
+            this.likedComments = this.likedComments.filter(id => id !== commentId);
+        }
+        localStorage.setItem('liked_comments', JSON.stringify(this.likedComments));
+    }
+    PinnedIcon() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "16", height: "16", color: "#555555", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 16V21" }), h("path", { d: "M8 5.2918C8 5.02079 8 4.88529 8.01312 4.77132C8.1194 3.84789 8.84789 3.1194 9.77133 3.01312C9.88529 3 10.0208 3 10.2918 3H13.7082C13.9792 3 14.1147 3 14.2287 3.01312C15.1521 3.1194 15.8806 3.84789 15.9869 4.77132C16 4.88529 16 5.02079 16 5.2918C16 5.37885 16 5.42237 15.9967 5.46264C15.9708 5.78281 15.7927 6.07104 15.5179 6.2374C15.4834 6.25832 15.4444 6.27779 15.3666 6.31672L15.1055 6.44726C14.7021 6.64897 14.5003 6.74983 14.3681 6.90564C14.26 7.03286 14.1856 7.18509 14.1515 7.34846C14.1097 7.54854 14.1539 7.76968 14.2424 8.21197L15 12H15.3333C15.9533 12 16.2633 12 16.5176 12.0681C17.2078 12.2531 17.7469 12.7922 17.9319 13.4824C18 13.7367 18 14.0467 18 14.6667C18 14.9767 18 15.1317 17.9659 15.2588C17.8735 15.6039 17.6039 15.8735 17.2588 15.9659C17.1317 16 16.9767 16 16.6667 16H7.33333C7.02334 16 6.86835 16 6.74118 15.9659C6.39609 15.8735 6.12654 15.6039 6.03407 15.2588C6 15.1317 6 14.9767 6 14.6667C6 14.0467 6 13.7367 6.06815 13.4824C6.25308 12.7922 6.79218 12.2531 7.48236 12.0681C7.73669 12 8.04669 12 8.66667 12H9L9.75761 8.21197C9.84606 7.76968 9.89029 7.54854 9.84852 7.34846C9.81441 7.18509 9.73995 7.03286 9.63194 6.90564C9.49965 6.74983 9.29794 6.64897 8.89452 6.44726L8.63344 6.31672C8.55558 6.27779 8.51665 6.25832 8.48208 6.2374C8.20731 6.07104 8.02917 5.78281 8.00326 5.46264C8 5.42237 8 5.37885 8 5.2918Z" })));
+    }
+    render() {
+        let isAdmin = this.comment.type == 'admin';
+        return (h(Host, { key: '3f9d4b98cff2dd49259d3386b4996b905f92d7db', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '1348f11b2e553be483f60c5c558d3e800f050700', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: '0587afd7ae1fc27b12fc4fd2c9ef4bf9e919d04a', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '40009b2b3b9af60481d0e40d5fb919076ab43b10', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: '8f0563811445046ecf5ce3abe6ee6d7d1ec4a235', class: "s-comments-item-avatar" }, h("img", { key: '5f82bb9d3a5c4c340f37b8e48af3edce42c133f8', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: '34581ee9fddaa2f79ee933efb65c2e354010f37a', class: "s-comments-flex-1" }, h("div", { key: 'e03fc074d5ac8ddf183e3b081001e73dd62a7116', class: "s-comments-item-user-wrapper" }, h("div", { key: '6ea5e07eb9fa35d7673019628e6fde4605b74e0c', class: "s-comments-item-user-info" }, h("h3", { key: '18d7cf8c8b8125138a544bd10027ae7503f2f3a6', class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
+            h("div", { class: "s-comments-item-pinned-icon-with-margin" }, this.PinnedIcon())
+            : null, (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
+            h("div", { class: "s-comments-flex" }, this.comment.has_order ?
+                [h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: IconVerified }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
+                h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
+            : null), h("p", { key: '694c2079d3379966994af7040fe4542481a53e66', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '734ca2eb6bf846c661007a1b9c41f22c47923b27', class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date))), !!this.comment.rating || !!this.comment.stars ?
+            h("salla-rating-stars", { size: "mini", class: "s-comments-item-stars", value: this.comment.rating || this.comment.stars })
+            : null), h("div", { key: '45e32a0759536f8c9e8bc8b823d50c931bdd1e23', class: "s-comments-item-content" }, h("p", { key: '9edf2cdfd489f77214d7a1ecae8a99943dfd4ece', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: 'bbba6c62c4d13289137c634f5413880dfa572ab4', class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { key: 'cd5c48b8cf3e1c9457a2fb60a42859cbd91aa996', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '304bc9417e6d7fd0e310127dce4e56a1c6ce00ea', id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { key: '50401766737293c42fa7ba3b351b6db736fd92eb', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '6b9a50da0b67497dfae21b52044850329d8712b5', slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
+            h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
+            this.getReplies().map((reply) => {
+                return h("div", null, h("salla-comment-item", { comment: reply }));
+            }) : null)));
+    }
+    get host() { return this; }
+    static get style() { return sallaCommentsCss; }
+}, [0, "salla-comment-item", {
+        "comment": [16],
+        "hideBought": [16, "hide-bought"],
+        "has_bought_trans": [32],
+        "rated_trans": [32],
+        "waiting_approval_trans": [32],
+        "has_order_trans": [32],
+        "allowLikes": [32],
+        "allowAttachImages": [32],
+        "helpfulLabel": [32],
+        "likesCount": [32],
+        "likedComments": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-comment-item", "salla-button", "salla-comment-item", "salla-loading", "salla-modal", "salla-rating-stars", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-comment-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaCommentItem);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-comment-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaCommentItem as S, defineCustomElement as d };